Showing preview only (4,578K chars total). Download the full file or copy to clipboard to get everything.
Repository: huntabyte/shadcn-svelte
Branch: main
Commit: 595159755891
Files: 2754
Total size: 3.8 MB
Directory structure:
gitextract_t3sawww4/
├── .changeset/
│ ├── README.md
│ └── config.json
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── 1-documentation_change.yml
│ │ ├── 2-feature_request.yml
│ │ ├── 3-bug_report.yml
│ │ └── config.yml
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── reproduire/
│ │ └── needs-reproduction.md
│ └── workflows/
│ ├── autoformat.yml
│ ├── build-preview.yml
│ ├── ci.yml
│ ├── deploy-preview.yml
│ ├── deploy-prod.yml
│ ├── deploy-svelte-4.yml
│ ├── deploy-tailwind-3.yml
│ ├── pr-guard.yml
│ ├── release.yml
│ ├── reproduire-close.yml
│ └── reproduire.yml
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .vscode/
│ └── settings.json
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── docs/
│ ├── .gitignore
│ ├── .npmrc
│ ├── README.md
│ ├── _headers
│ ├── content/
│ │ ├── about.md
│ │ ├── changelog.md
│ │ ├── cli.md
│ │ ├── components/
│ │ │ ├── accordion.md
│ │ │ ├── alert-dialog.md
│ │ │ ├── alert.md
│ │ │ ├── aspect-ratio.md
│ │ │ ├── avatar.md
│ │ │ ├── badge.md
│ │ │ ├── breadcrumb.md
│ │ │ ├── button-group.md
│ │ │ ├── button.md
│ │ │ ├── calendar.md
│ │ │ ├── card.md
│ │ │ ├── carousel.md
│ │ │ ├── chart.md
│ │ │ ├── checkbox.md
│ │ │ ├── collapsible.md
│ │ │ ├── combobox.md
│ │ │ ├── command.md
│ │ │ ├── context-menu.md
│ │ │ ├── data-table.md
│ │ │ ├── date-picker.md
│ │ │ ├── dialog.md
│ │ │ ├── drawer.md
│ │ │ ├── dropdown-menu.md
│ │ │ ├── empty.md
│ │ │ ├── field.md
│ │ │ ├── form.md
│ │ │ ├── hover-card.md
│ │ │ ├── index.md
│ │ │ ├── input-group.md
│ │ │ ├── input-otp.md
│ │ │ ├── input.md
│ │ │ ├── item.md
│ │ │ ├── kbd.md
│ │ │ ├── label.md
│ │ │ ├── menubar.md
│ │ │ ├── native-select.md
│ │ │ ├── navigation-menu.md
│ │ │ ├── pagination.md
│ │ │ ├── popover.md
│ │ │ ├── progress.md
│ │ │ ├── radio-group.md
│ │ │ ├── range-calendar.md
│ │ │ ├── resizable.md
│ │ │ ├── scroll-area.md
│ │ │ ├── select.md
│ │ │ ├── separator.md
│ │ │ ├── sheet.md
│ │ │ ├── sidebar.md
│ │ │ ├── skeleton.md
│ │ │ ├── slider.md
│ │ │ ├── sonner.md
│ │ │ ├── spinner.md
│ │ │ ├── switch.md
│ │ │ ├── table.md
│ │ │ ├── tabs.md
│ │ │ ├── textarea.md
│ │ │ ├── toggle-group.md
│ │ │ ├── toggle.md
│ │ │ ├── tooltip.md
│ │ │ └── typography.md
│ │ ├── components-json.md
│ │ ├── dark-mode/
│ │ │ ├── astro.md
│ │ │ ├── index.md
│ │ │ └── svelte.md
│ │ ├── figma.md
│ │ ├── index.md
│ │ ├── installation/
│ │ │ ├── astro.md
│ │ │ ├── index.md
│ │ │ ├── manual.md
│ │ │ ├── sveltekit.md
│ │ │ └── vite.md
│ │ ├── javascript.md
│ │ ├── legacy.md
│ │ ├── migration/
│ │ │ ├── index.md
│ │ │ ├── svelte-5.md
│ │ │ └── tailwind-v4.md
│ │ ├── registry/
│ │ │ ├── examples.md
│ │ │ ├── faq.md
│ │ │ ├── getting-started.md
│ │ │ ├── index.md
│ │ │ ├── registry-item-json.md
│ │ │ └── registry-json.md
│ │ └── theming.md
│ ├── mdsx.config.js
│ ├── package.json
│ ├── scripts/
│ │ ├── build-icons.ts
│ │ ├── build-llm-placeholders.ts
│ │ ├── build-llms.ts
│ │ ├── build-registry.ts
│ │ ├── pull-styles.ts
│ │ ├── registry.ts
│ │ ├── tsconfig.json
│ │ └── velite/
│ │ ├── velite-update-json.ts
│ │ ├── velite-utils.ts
│ │ └── velite-watch-output.ts
│ ├── src/
│ │ ├── app.css
│ │ ├── app.d.ts
│ │ ├── app.html
│ │ ├── lib/
│ │ │ ├── blocks.ts
│ │ │ ├── colors.ts
│ │ │ ├── components/
│ │ │ │ ├── announcement.svelte
│ │ │ │ ├── block-viewer-code.svelte
│ │ │ │ ├── block-viewer-copy-code-button.svelte
│ │ │ │ ├── block-viewer-file-tree.svelte
│ │ │ │ ├── block-viewer-iframe.svelte
│ │ │ │ ├── block-viewer-toolbar.svelte
│ │ │ │ ├── block-viewer-tree.svelte
│ │ │ │ ├── block-viewer-view-mobile.svelte
│ │ │ │ ├── block-viewer-view.svelte
│ │ │ │ ├── block-viewer.svelte
│ │ │ │ ├── blocks-nav.svelte
│ │ │ │ ├── callout.svelte
│ │ │ │ ├── cards/
│ │ │ │ │ ├── activity-goal.svelte
│ │ │ │ │ ├── appearance-settings.svelte
│ │ │ │ │ ├── calendar.svelte
│ │ │ │ │ ├── cards-demo.svelte
│ │ │ │ │ ├── chat.svelte
│ │ │ │ │ ├── cookie-settings.svelte
│ │ │ │ │ ├── create-account.svelte
│ │ │ │ │ ├── demo.svelte
│ │ │ │ │ ├── exercise-minutes.svelte
│ │ │ │ │ ├── field-checkbox.svelte
│ │ │ │ │ ├── field-hear.svelte
│ │ │ │ │ ├── forms.svelte
│ │ │ │ │ ├── input-demo.svelte
│ │ │ │ │ ├── input-group-button-demo.svelte
│ │ │ │ │ ├── item-demo.svelte
│ │ │ │ │ ├── nested.svelte
│ │ │ │ │ ├── notion-prompt-form.svelte
│ │ │ │ │ ├── payments-actions-cell.svelte
│ │ │ │ │ ├── payments-email-header.svelte
│ │ │ │ │ ├── payments.svelte
│ │ │ │ │ ├── report-issue.svelte
│ │ │ │ │ ├── root-components.svelte
│ │ │ │ │ ├── share.svelte
│ │ │ │ │ ├── stats.svelte
│ │ │ │ │ └── team-members.svelte
│ │ │ │ ├── chart-code-viewer.svelte
│ │ │ │ ├── chart-copy-button.svelte
│ │ │ │ ├── chart-display.svelte
│ │ │ │ ├── chart-toolbar.svelte
│ │ │ │ ├── chart-tooltip-demo-item.svelte
│ │ │ │ ├── charts-nav.svelte
│ │ │ │ ├── code-collapsible-wrapper.svelte
│ │ │ │ ├── code-tabs.svelte
│ │ │ │ ├── color-format-selector.svelte
│ │ │ │ ├── color-indicator.svelte
│ │ │ │ ├── color-palette.svelte
│ │ │ │ ├── color.svelte
│ │ │ │ ├── colors/
│ │ │ │ │ ├── color-card.svelte
│ │ │ │ │ └── colors.ts
│ │ │ │ ├── colors-nav.svelte
│ │ │ │ ├── command-menu/
│ │ │ │ │ ├── command-menu-item.svelte
│ │ │ │ │ └── command-menu.svelte
│ │ │ │ ├── component-code-viewer/
│ │ │ │ │ ├── component-code-viewer-code-title.svelte
│ │ │ │ │ ├── component-code-viewer-code.svelte
│ │ │ │ │ ├── component-code-viewer-copy-code-button.svelte
│ │ │ │ │ ├── component-code-viewer-file-tree.svelte
│ │ │ │ │ ├── component-code-viewer-tree.svelte
│ │ │ │ │ └── component-code-viewer.svelte
│ │ │ │ ├── component-preview-tabs.svelte
│ │ │ │ ├── component-preview.svelte
│ │ │ │ ├── component-source.svelte
│ │ │ │ ├── components-list.svelte
│ │ │ │ ├── copy-button.svelte
│ │ │ │ ├── cta-mobile.svelte
│ │ │ │ ├── cta.svelte
│ │ │ │ ├── customizer.svelte
│ │ │ │ ├── doc-tabs/
│ │ │ │ │ ├── doc-tabs-content.svelte
│ │ │ │ │ ├── doc-tabs-list.svelte
│ │ │ │ │ ├── doc-tabs-trigger.svelte
│ │ │ │ │ ├── doc-tabs.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── docs-copy-page.svelte
│ │ │ │ ├── docs-figure.svelte
│ │ │ │ ├── docs-sidebar.svelte
│ │ │ │ ├── docs-toc.svelte
│ │ │ │ ├── ethical.svelte
│ │ │ │ ├── examples-nav.svelte
│ │ │ │ ├── github-link.svelte
│ │ │ │ ├── github.svelte
│ │ │ │ ├── icon-placeholder/
│ │ │ │ │ ├── hugeicons-icon.svelte
│ │ │ │ │ ├── icon-loader.ts
│ │ │ │ │ ├── icon-placeholder.svelte
│ │ │ │ │ ├── lucide-icon.svelte
│ │ │ │ │ ├── phosphor-icon.svelte
│ │ │ │ │ ├── remixicon-icon.svelte
│ │ │ │ │ └── tabler-icon.svelte
│ │ │ │ ├── icons/
│ │ │ │ │ ├── bash.svelte
│ │ │ │ │ ├── css.svelte
│ │ │ │ │ ├── icons.ts
│ │ │ │ │ ├── json.svelte
│ │ │ │ │ ├── svelte.svelte
│ │ │ │ │ └── ts.svelte
│ │ │ │ ├── install-cards.svelte
│ │ │ │ ├── install-tabs.svelte
│ │ │ │ ├── layout-toggle.svelte
│ │ │ │ ├── linked-card.svelte
│ │ │ │ ├── logo.svelte
│ │ │ │ ├── main-nav.svelte
│ │ │ │ ├── mdsx/
│ │ │ │ │ ├── a.svelte
│ │ │ │ │ ├── blockquote.svelte
│ │ │ │ │ ├── blueprint.svelte
│ │ │ │ │ ├── figcaption.svelte
│ │ │ │ │ ├── h1.svelte
│ │ │ │ │ ├── h2.svelte
│ │ │ │ │ ├── h3.svelte
│ │ │ │ │ ├── h4.svelte
│ │ │ │ │ ├── h5.svelte
│ │ │ │ │ ├── h6.svelte
│ │ │ │ │ ├── hr.svelte
│ │ │ │ │ ├── img.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── li.svelte
│ │ │ │ │ ├── ol.svelte
│ │ │ │ │ ├── p.svelte
│ │ │ │ │ ├── pre.svelte
│ │ │ │ │ ├── strong.svelte
│ │ │ │ │ ├── table.svelte
│ │ │ │ │ ├── td.svelte
│ │ │ │ │ ├── th.svelte
│ │ │ │ │ ├── tr.svelte
│ │ │ │ │ └── ul.svelte
│ │ │ │ ├── metadata.svelte
│ │ │ │ ├── mobile-nav.svelte
│ │ │ │ ├── mode-switcher.svelte
│ │ │ │ ├── og.svelte
│ │ │ │ ├── page-header/
│ │ │ │ │ ├── page-actions.svelte
│ │ │ │ │ ├── page-header-description.svelte
│ │ │ │ │ ├── page-header-heading.svelte
│ │ │ │ │ └── page-header.svelte
│ │ │ │ ├── page-nav.svelte
│ │ │ │ ├── pm-add-comp.svelte
│ │ │ │ ├── pm-block.svelte
│ │ │ │ ├── pm-create.svelte
│ │ │ │ ├── pm-execute.svelte
│ │ │ │ ├── pm-install.svelte
│ │ │ │ ├── pm-remove.svelte
│ │ │ │ ├── pm-run.svelte
│ │ │ │ ├── pm-upgrade.svelte
│ │ │ │ ├── site-footer.svelte
│ │ │ │ ├── site-header.svelte
│ │ │ │ ├── spinner.svelte
│ │ │ │ ├── step.svelte
│ │ │ │ ├── steps.svelte
│ │ │ │ ├── svelte-white.svelte
│ │ │ │ ├── tab.svelte
│ │ │ │ ├── tailwind-indicator.svelte
│ │ │ │ ├── theme-customizer-code.svelte
│ │ │ │ ├── theme-customizer.svelte
│ │ │ │ └── theme-selector.svelte
│ │ │ ├── config.ts
│ │ │ ├── constants.ts
│ │ │ ├── docs.ts
│ │ │ ├── features/
│ │ │ │ └── design-system/
│ │ │ │ ├── components/
│ │ │ │ │ ├── design-system-provider-state.svelte.ts
│ │ │ │ │ └── design-system-provider.svelte
│ │ │ │ └── index.ts
│ │ │ ├── highlight-code.ts
│ │ │ ├── hooks/
│ │ │ │ ├── use-clipboard.svelte.ts
│ │ │ │ ├── use-is-mac.svelte.ts
│ │ │ │ └── use-mutation-observer.svelte.ts
│ │ │ ├── navigation.ts
│ │ │ ├── package-manager.ts
│ │ │ ├── registry/
│ │ │ │ ├── blocks/
│ │ │ │ │ ├── calendar-01.svelte
│ │ │ │ │ ├── calendar-02.svelte
│ │ │ │ │ ├── calendar-03.svelte
│ │ │ │ │ ├── calendar-04.svelte
│ │ │ │ │ ├── calendar-05.svelte
│ │ │ │ │ ├── calendar-06.svelte
│ │ │ │ │ ├── calendar-07.svelte
│ │ │ │ │ ├── calendar-08.svelte
│ │ │ │ │ ├── calendar-09.svelte
│ │ │ │ │ ├── calendar-10.svelte
│ │ │ │ │ ├── calendar-11.svelte
│ │ │ │ │ ├── calendar-12.svelte
│ │ │ │ │ ├── calendar-13.svelte
│ │ │ │ │ ├── calendar-14.svelte
│ │ │ │ │ ├── calendar-15.svelte
│ │ │ │ │ ├── calendar-16.svelte
│ │ │ │ │ ├── calendar-17.svelte
│ │ │ │ │ ├── calendar-18.svelte
│ │ │ │ │ ├── calendar-19.svelte
│ │ │ │ │ ├── calendar-20.svelte
│ │ │ │ │ ├── calendar-21.svelte
│ │ │ │ │ ├── calendar-22.svelte
│ │ │ │ │ ├── calendar-23.svelte
│ │ │ │ │ ├── calendar-24.svelte
│ │ │ │ │ ├── calendar-25.svelte
│ │ │ │ │ ├── calendar-26.svelte
│ │ │ │ │ ├── calendar-27.svelte
│ │ │ │ │ ├── calendar-28.svelte
│ │ │ │ │ ├── calendar-29.svelte
│ │ │ │ │ ├── calendar-30.svelte
│ │ │ │ │ ├── calendar-31.svelte
│ │ │ │ │ ├── calendar-32.svelte
│ │ │ │ │ ├── chart-area-axes.svelte
│ │ │ │ │ ├── chart-area-default.svelte
│ │ │ │ │ ├── chart-area-gradient.svelte
│ │ │ │ │ ├── chart-area-icons.svelte
│ │ │ │ │ ├── chart-area-interactive.svelte
│ │ │ │ │ ├── chart-area-legend.svelte
│ │ │ │ │ ├── chart-area-linear.svelte
│ │ │ │ │ ├── chart-area-stacked-expand.svelte
│ │ │ │ │ ├── chart-area-stacked.svelte
│ │ │ │ │ ├── chart-area-step.svelte
│ │ │ │ │ ├── chart-bar-active.svelte
│ │ │ │ │ ├── chart-bar-default.svelte
│ │ │ │ │ ├── chart-bar-horizontal.svelte
│ │ │ │ │ ├── chart-bar-interactive.svelte
│ │ │ │ │ ├── chart-bar-label-custom.svelte
│ │ │ │ │ ├── chart-bar-label.svelte
│ │ │ │ │ ├── chart-bar-mixed.svelte
│ │ │ │ │ ├── chart-bar-multiple.svelte
│ │ │ │ │ ├── chart-bar-negative.svelte
│ │ │ │ │ ├── chart-bar-stacked.svelte
│ │ │ │ │ ├── chart-line-default.svelte
│ │ │ │ │ ├── chart-line-dots-colors.svelte
│ │ │ │ │ ├── chart-line-dots-custom.svelte
│ │ │ │ │ ├── chart-line-dots.svelte
│ │ │ │ │ ├── chart-line-interactive.svelte
│ │ │ │ │ ├── chart-line-label-custom.svelte
│ │ │ │ │ ├── chart-line-label.svelte
│ │ │ │ │ ├── chart-line-linear.svelte
│ │ │ │ │ ├── chart-line-multiple.svelte
│ │ │ │ │ ├── chart-line-step.svelte
│ │ │ │ │ ├── chart-pie-donut-active.svelte
│ │ │ │ │ ├── chart-pie-donut-text.svelte
│ │ │ │ │ ├── chart-pie-donut.svelte
│ │ │ │ │ ├── chart-pie-interactive.svelte
│ │ │ │ │ ├── chart-pie-label-custom.svelte
│ │ │ │ │ ├── chart-pie-label-list.svelte
│ │ │ │ │ ├── chart-pie-label.svelte
│ │ │ │ │ ├── chart-pie-legend.svelte
│ │ │ │ │ ├── chart-pie-separator-none.svelte
│ │ │ │ │ ├── chart-pie-simple.svelte
│ │ │ │ │ ├── chart-pie-stacked.svelte
│ │ │ │ │ ├── chart-radar-default.svelte
│ │ │ │ │ ├── chart-radar-dots.svelte
│ │ │ │ │ ├── chart-radar-grid-circle-fill.svelte
│ │ │ │ │ ├── chart-radar-grid-circle-no-lines.svelte
│ │ │ │ │ ├── chart-radar-grid-circle.svelte
│ │ │ │ │ ├── chart-radar-grid-custom.svelte
│ │ │ │ │ ├── chart-radar-grid-fill.svelte
│ │ │ │ │ ├── chart-radar-grid-none.svelte
│ │ │ │ │ ├── chart-radar-icons.svelte
│ │ │ │ │ ├── chart-radar-label-custom.svelte
│ │ │ │ │ ├── chart-radar-legend.svelte
│ │ │ │ │ ├── chart-radar-lines-only.svelte
│ │ │ │ │ ├── chart-radar-multiple.svelte
│ │ │ │ │ ├── chart-radar-radius.svelte
│ │ │ │ │ ├── chart-radial-grid.svelte
│ │ │ │ │ ├── chart-radial-label.svelte
│ │ │ │ │ ├── chart-radial-shape.svelte
│ │ │ │ │ ├── chart-radial-simple.svelte
│ │ │ │ │ ├── chart-radial-stacked.svelte
│ │ │ │ │ ├── chart-radial-text.svelte
│ │ │ │ │ ├── chart-tooltip-advanced.svelte
│ │ │ │ │ ├── chart-tooltip-default.svelte
│ │ │ │ │ ├── chart-tooltip-formatter.svelte
│ │ │ │ │ ├── chart-tooltip-icons.svelte
│ │ │ │ │ ├── chart-tooltip-indicator-line.svelte
│ │ │ │ │ ├── chart-tooltip-indicator-none.svelte
│ │ │ │ │ ├── chart-tooltip-label-custom.svelte
│ │ │ │ │ ├── chart-tooltip-label-formatter.svelte
│ │ │ │ │ ├── chart-tooltip-label-none.svelte
│ │ │ │ │ ├── dashboard-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ │ ├── chart-area-interactive.svelte
│ │ │ │ │ │ │ ├── data-table-actions.svelte
│ │ │ │ │ │ │ ├── data-table-cell-viewer.svelte
│ │ │ │ │ │ │ ├── data-table-checkbox.svelte
│ │ │ │ │ │ │ ├── data-table-drag-handle.svelte
│ │ │ │ │ │ │ ├── data-table-header-limit.svelte
│ │ │ │ │ │ │ ├── data-table-header-target.svelte
│ │ │ │ │ │ │ ├── data-table-limit.svelte
│ │ │ │ │ │ │ ├── data-table-reviewer.svelte
│ │ │ │ │ │ │ ├── data-table-status.svelte
│ │ │ │ │ │ │ ├── data-table-target.svelte
│ │ │ │ │ │ │ ├── data-table-type.svelte
│ │ │ │ │ │ │ ├── data-table.svelte
│ │ │ │ │ │ │ ├── nav-documents.svelte
│ │ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ │ ├── schemas.ts
│ │ │ │ │ │ │ ├── section-cards.svelte
│ │ │ │ │ │ │ └── site-header.svelte
│ │ │ │ │ │ └── data.ts
│ │ │ │ │ ├── demo-sidebar-controlled.svelte
│ │ │ │ │ ├── demo-sidebar-footer.svelte
│ │ │ │ │ ├── demo-sidebar-group-action.svelte
│ │ │ │ │ ├── demo-sidebar-group-collapsible.svelte
│ │ │ │ │ ├── demo-sidebar-group.svelte
│ │ │ │ │ ├── demo-sidebar-header.svelte
│ │ │ │ │ ├── demo-sidebar-menu-action.svelte
│ │ │ │ │ ├── demo-sidebar-menu-badge.svelte
│ │ │ │ │ ├── demo-sidebar-menu-collapsible.svelte
│ │ │ │ │ ├── demo-sidebar-menu-sub.svelte
│ │ │ │ │ ├── demo-sidebar-menu.svelte
│ │ │ │ │ ├── demo-sidebar.svelte
│ │ │ │ │ ├── login-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── login-02/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── login-03/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── login-04/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── login-05/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── new-components-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── appearance-settings.svelte
│ │ │ │ │ │ ├── button-group-demo.svelte
│ │ │ │ │ │ ├── button-group-input-group.svelte
│ │ │ │ │ │ ├── button-group-nested.svelte
│ │ │ │ │ │ ├── button-group-popover.svelte
│ │ │ │ │ │ ├── empty-avatar-group.svelte
│ │ │ │ │ │ ├── empty-input-group.svelte
│ │ │ │ │ │ ├── field-choice-card.svelte
│ │ │ │ │ │ ├── field-demo.svelte
│ │ │ │ │ │ ├── field-slider.svelte
│ │ │ │ │ │ ├── input-group-button.svelte
│ │ │ │ │ │ ├── input-group-demo.svelte
│ │ │ │ │ │ ├── input-group-textarea.svelte
│ │ │ │ │ │ ├── item-avatar.svelte
│ │ │ │ │ │ ├── item-demo.svelte
│ │ │ │ │ │ ├── notion-prompt-form.svelte
│ │ │ │ │ │ ├── spinner-badge.svelte
│ │ │ │ │ │ └── spinner-empty.svelte
│ │ │ │ │ ├── otp-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── otp-02/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── otp-03/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── otp-04/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── otp-05/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── sidebar-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── search-form.svelte
│ │ │ │ │ │ └── version-switcher.svelte
│ │ │ │ │ ├── sidebar-02/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── search-form.svelte
│ │ │ │ │ │ └── version-switcher.svelte
│ │ │ │ │ ├── sidebar-03/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── app-sidebar.svelte
│ │ │ │ │ ├── sidebar-04/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── app-sidebar.svelte
│ │ │ │ │ ├── sidebar-05/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ └── search-form.svelte
│ │ │ │ │ ├── sidebar-06/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ └── sidebar-opt-in-form.svelte
│ │ │ │ │ ├── sidebar-07/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-projects.svelte
│ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ └── team-switcher.svelte
│ │ │ │ │ ├── sidebar-08/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-projects.svelte
│ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ └── nav-user.svelte
│ │ │ │ │ ├── sidebar-09/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ └── nav-user.svelte
│ │ │ │ │ ├── sidebar-10/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-actions.svelte
│ │ │ │ │ │ ├── nav-favorites.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ ├── nav-workspaces.svelte
│ │ │ │ │ │ └── team-switcher.svelte
│ │ │ │ │ ├── sidebar-11/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── app-sidebar.svelte
│ │ │ │ │ ├── sidebar-12/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── calendars.svelte
│ │ │ │ │ │ ├── date-picker.svelte
│ │ │ │ │ │ └── nav-user.svelte
│ │ │ │ │ ├── sidebar-13/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── settings-dialog.svelte
│ │ │ │ │ ├── sidebar-14/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── app-sidebar.svelte
│ │ │ │ │ ├── sidebar-15/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── calendars.svelte
│ │ │ │ │ │ ├── date-picker.svelte
│ │ │ │ │ │ ├── nav-favorites.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ ├── nav-workspaces.svelte
│ │ │ │ │ │ ├── sidebar-left.svelte
│ │ │ │ │ │ ├── sidebar-right.svelte
│ │ │ │ │ │ └── team-switcher.svelte
│ │ │ │ │ ├── sidebar-16/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-projects.svelte
│ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ ├── search-form.svelte
│ │ │ │ │ │ └── site-header.svelte
│ │ │ │ │ ├── signup-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── signup-form.svelte
│ │ │ │ │ ├── signup-02/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── signup-form.svelte
│ │ │ │ │ ├── signup-03/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── signup-form.svelte
│ │ │ │ │ ├── signup-04/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── signup-form.svelte
│ │ │ │ │ └── signup-05/
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ └── components/
│ │ │ │ │ └── signup-form.svelte
│ │ │ │ ├── colors.ts
│ │ │ │ ├── config.ts
│ │ │ │ ├── examples/
│ │ │ │ │ ├── accordion-demo.svelte
│ │ │ │ │ ├── alert-demo.svelte
│ │ │ │ │ ├── alert-destructive.svelte
│ │ │ │ │ ├── alert-dialog-demo.svelte
│ │ │ │ │ ├── aspect-ratio-demo.svelte
│ │ │ │ │ ├── avatar-demo.svelte
│ │ │ │ │ ├── badge-demo.svelte
│ │ │ │ │ ├── badge-destructive.svelte
│ │ │ │ │ ├── badge-outline.svelte
│ │ │ │ │ ├── badge-secondary.svelte
│ │ │ │ │ ├── breadcrumb-demo.svelte
│ │ │ │ │ ├── breadcrumb-dropdown.svelte
│ │ │ │ │ ├── breadcrumb-ellipsis.svelte
│ │ │ │ │ ├── breadcrumb-link.svelte
│ │ │ │ │ ├── breadcrumb-responsive.svelte
│ │ │ │ │ ├── breadcrumb-separator.svelte
│ │ │ │ │ ├── button-default.svelte
│ │ │ │ │ ├── button-demo.svelte
│ │ │ │ │ ├── button-destructive.svelte
│ │ │ │ │ ├── button-ghost.svelte
│ │ │ │ │ ├── button-group-demo.svelte
│ │ │ │ │ ├── button-group-dropdown-menu-demo.svelte
│ │ │ │ │ ├── button-group-input-demo.svelte
│ │ │ │ │ ├── button-group-input-group-demo.svelte
│ │ │ │ │ ├── button-group-nested-demo.svelte
│ │ │ │ │ ├── button-group-orientation-demo.svelte
│ │ │ │ │ ├── button-group-popover-demo.svelte
│ │ │ │ │ ├── button-group-select-demo.svelte
│ │ │ │ │ ├── button-group-separator-demo.svelte
│ │ │ │ │ ├── button-group-size-demo.svelte
│ │ │ │ │ ├── button-group-split-demo.svelte
│ │ │ │ │ ├── button-icon.svelte
│ │ │ │ │ ├── button-link.svelte
│ │ │ │ │ ├── button-loading.svelte
│ │ │ │ │ ├── button-outline.svelte
│ │ │ │ │ ├── button-rounded.svelte
│ │ │ │ │ ├── button-secondary.svelte
│ │ │ │ │ ├── button-size.svelte
│ │ │ │ │ ├── button-with-icon.svelte
│ │ │ │ │ ├── calendar-demo.svelte
│ │ │ │ │ ├── calendar-with-selects.svelte
│ │ │ │ │ ├── card-demo.svelte
│ │ │ │ │ ├── card-with-form.svelte
│ │ │ │ │ ├── carousel-api.svelte
│ │ │ │ │ ├── carousel-demo.svelte
│ │ │ │ │ ├── carousel-orientation.svelte
│ │ │ │ │ ├── carousel-plugin.svelte
│ │ │ │ │ ├── carousel-size.svelte
│ │ │ │ │ ├── carousel-spacing.svelte
│ │ │ │ │ ├── chart-bar-axis-tick-demo.svelte
│ │ │ │ │ ├── chart-bar-demo.svelte
│ │ │ │ │ ├── chart-bar-legend-demo.svelte
│ │ │ │ │ ├── chart-bar-tooltip-demo.svelte
│ │ │ │ │ ├── chart-tooltip-demo.svelte
│ │ │ │ │ ├── checkbox-demo.svelte
│ │ │ │ │ ├── checkbox-disabled.svelte
│ │ │ │ │ ├── checkbox-form-multiple.svelte
│ │ │ │ │ ├── checkbox-form-single.svelte
│ │ │ │ │ ├── checkbox-with-text.svelte
│ │ │ │ │ ├── collapsible-demo.svelte
│ │ │ │ │ ├── combobox-demo.svelte
│ │ │ │ │ ├── combobox-dropdown-menu.svelte
│ │ │ │ │ ├── combobox-form.svelte
│ │ │ │ │ ├── combobox-popover.svelte
│ │ │ │ │ ├── combobox-responsive.svelte
│ │ │ │ │ ├── command-demo.svelte
│ │ │ │ │ ├── command-dialog.svelte
│ │ │ │ │ ├── context-menu-demo.svelte
│ │ │ │ │ ├── create/
│ │ │ │ │ │ ├── accordion/
│ │ │ │ │ │ │ ├── accordion-basic.svelte
│ │ │ │ │ │ │ ├── accordion-in-card.svelte
│ │ │ │ │ │ │ ├── accordion-multiple.svelte
│ │ │ │ │ │ │ ├── accordion-with-borders.svelte
│ │ │ │ │ │ │ ├── accordion-with-disabled.svelte
│ │ │ │ │ │ │ └── accordion.svelte
│ │ │ │ │ │ ├── alert/
│ │ │ │ │ │ │ ├── alert-basic.svelte
│ │ │ │ │ │ │ ├── alert-destructive.svelte
│ │ │ │ │ │ │ ├── alert-with-actions.svelte
│ │ │ │ │ │ │ ├── alert-with-icons.svelte
│ │ │ │ │ │ │ └── alert.svelte
│ │ │ │ │ │ ├── alert-dialog/
│ │ │ │ │ │ │ ├── alert-dialog-basic.svelte
│ │ │ │ │ │ │ ├── alert-dialog-destructive.svelte
│ │ │ │ │ │ │ ├── alert-dialog-in-dialog.svelte
│ │ │ │ │ │ │ ├── alert-dialog-small-with-media.svelte
│ │ │ │ │ │ │ ├── alert-dialog-small.svelte
│ │ │ │ │ │ │ ├── alert-dialog-with-media.svelte
│ │ │ │ │ │ │ └── alert-dialog.svelte
│ │ │ │ │ │ ├── aspect-ratio/
│ │ │ │ │ │ │ ├── aspect-ratio-16x9.svelte
│ │ │ │ │ │ │ ├── aspect-ratio-1x1.svelte
│ │ │ │ │ │ │ ├── aspect-ratio-21x9.svelte
│ │ │ │ │ │ │ ├── aspect-ratio-9x16.svelte
│ │ │ │ │ │ │ └── aspect-ratio.svelte
│ │ │ │ │ │ ├── avatar/
│ │ │ │ │ │ │ ├── avatar-group-example.svelte
│ │ │ │ │ │ │ ├── avatar-group-with-count.svelte
│ │ │ │ │ │ │ ├── avatar-group-with-icon-count.svelte
│ │ │ │ │ │ │ ├── avatar-in-empty.svelte
│ │ │ │ │ │ │ ├── avatar-sizes.svelte
│ │ │ │ │ │ │ ├── avatar-with-badge-icon.svelte
│ │ │ │ │ │ │ ├── avatar-with-badge.svelte
│ │ │ │ │ │ │ └── avatar.svelte
│ │ │ │ │ │ ├── badge/
│ │ │ │ │ │ │ ├── badge-as-link.svelte
│ │ │ │ │ │ │ ├── badge-custom-colors.svelte
│ │ │ │ │ │ │ ├── badge-long-text.svelte
│ │ │ │ │ │ │ ├── badge-variants.svelte
│ │ │ │ │ │ │ ├── badge-with-icon-left.svelte
│ │ │ │ │ │ │ ├── badge-with-icon-right.svelte
│ │ │ │ │ │ │ ├── badge-with-spinner.svelte
│ │ │ │ │ │ │ └── badge.svelte
│ │ │ │ │ │ ├── breadcrumb/
│ │ │ │ │ │ │ ├── breadcrumb-basic.svelte
│ │ │ │ │ │ │ ├── breadcrumb-with-dropdown.svelte
│ │ │ │ │ │ │ ├── breadcrumb-with-link.svelte
│ │ │ │ │ │ │ └── breadcrumb.svelte
│ │ │ │ │ │ ├── button/
│ │ │ │ │ │ │ ├── button-examples.svelte
│ │ │ │ │ │ │ ├── button-icon-left.svelte
│ │ │ │ │ │ │ ├── button-icon-only.svelte
│ │ │ │ │ │ │ ├── button-icon-right.svelte
│ │ │ │ │ │ │ ├── button-invalid-states.svelte
│ │ │ │ │ │ │ ├── button-variants-and-sizes.svelte
│ │ │ │ │ │ │ └── button.svelte
│ │ │ │ │ │ ├── button-group/
│ │ │ │ │ │ │ ├── button-group-basic.svelte
│ │ │ │ │ │ │ ├── button-group-navigation.svelte
│ │ │ │ │ │ │ ├── button-group-nested.svelte
│ │ │ │ │ │ │ ├── button-group-pagination-split.svelte
│ │ │ │ │ │ │ ├── button-group-pagination.svelte
│ │ │ │ │ │ │ ├── button-group-text-alignment.svelte
│ │ │ │ │ │ │ ├── button-group-vertical-nested.svelte
│ │ │ │ │ │ │ ├── button-group-vertical.svelte
│ │ │ │ │ │ │ ├── button-group-with-dropdown.svelte
│ │ │ │ │ │ │ ├── button-group-with-fields.svelte
│ │ │ │ │ │ │ ├── button-group-with-icons.svelte
│ │ │ │ │ │ │ ├── button-group-with-input-group.svelte
│ │ │ │ │ │ │ ├── button-group-with-input.svelte
│ │ │ │ │ │ │ ├── button-group-with-like.svelte
│ │ │ │ │ │ │ ├── button-group-with-select-and-input.svelte
│ │ │ │ │ │ │ ├── button-group-with-select.svelte
│ │ │ │ │ │ │ ├── button-group-with-text.svelte
│ │ │ │ │ │ │ └── button-group.svelte
│ │ │ │ │ │ ├── calendar/
│ │ │ │ │ │ │ ├── calendar-booked-dates.svelte
│ │ │ │ │ │ │ ├── calendar-custom-days.svelte
│ │ │ │ │ │ │ ├── calendar-in-card.svelte
│ │ │ │ │ │ │ ├── calendar-in-popover.svelte
│ │ │ │ │ │ │ ├── calendar-multiple.svelte
│ │ │ │ │ │ │ ├── calendar-range-multiple-months.svelte
│ │ │ │ │ │ │ ├── calendar-range.svelte
│ │ │ │ │ │ │ ├── calendar-single.svelte
│ │ │ │ │ │ │ ├── calendar-week-numbers.svelte
│ │ │ │ │ │ │ ├── calendar-with-presets.svelte
│ │ │ │ │ │ │ ├── calendar-with-time.svelte
│ │ │ │ │ │ │ ├── calendar.svelte
│ │ │ │ │ │ │ ├── date-picker-simple.svelte
│ │ │ │ │ │ │ ├── date-picker-with-dropdowns.svelte
│ │ │ │ │ │ │ └── date-picker-with-range.svelte
│ │ │ │ │ │ ├── card/
│ │ │ │ │ │ │ ├── card-default.svelte
│ │ │ │ │ │ │ ├── card-footer-with-border-small.svelte
│ │ │ │ │ │ │ ├── card-footer-with-border.svelte
│ │ │ │ │ │ │ ├── card-header-with-border-small.svelte
│ │ │ │ │ │ │ ├── card-header-with-border.svelte
│ │ │ │ │ │ │ ├── card-login.svelte
│ │ │ │ │ │ │ ├── card-meeting-notes.svelte
│ │ │ │ │ │ │ ├── card-small.svelte
│ │ │ │ │ │ │ ├── card-with-image-small.svelte
│ │ │ │ │ │ │ ├── card-with-image.svelte
│ │ │ │ │ │ │ └── card.svelte
│ │ │ │ │ │ ├── carousel/
│ │ │ │ │ │ │ ├── carousel-basic.svelte
│ │ │ │ │ │ │ ├── carousel-multiple.svelte
│ │ │ │ │ │ │ ├── carousel-with-gap.svelte
│ │ │ │ │ │ │ └── carousel.svelte
│ │ │ │ │ │ ├── chart/
│ │ │ │ │ │ │ ├── chart-area-example.svelte
│ │ │ │ │ │ │ ├── chart-bar-example.svelte
│ │ │ │ │ │ │ ├── chart-line-example.svelte
│ │ │ │ │ │ │ ├── chart-radar-example.svelte
│ │ │ │ │ │ │ ├── chart-radial-example.svelte
│ │ │ │ │ │ │ └── chart.svelte
│ │ │ │ │ │ ├── chatgpt/
│ │ │ │ │ │ │ ├── chatgpt.svelte
│ │ │ │ │ │ │ ├── create-project-form.svelte
│ │ │ │ │ │ │ ├── group-chat-dialog.svelte
│ │ │ │ │ │ │ ├── model-selector.svelte
│ │ │ │ │ │ │ └── prompt-form.svelte
│ │ │ │ │ │ ├── checkbox/
│ │ │ │ │ │ │ ├── checkbox-basic.svelte
│ │ │ │ │ │ │ ├── checkbox-disabled.svelte
│ │ │ │ │ │ │ ├── checkbox-group.svelte
│ │ │ │ │ │ │ ├── checkbox-in-table.svelte
│ │ │ │ │ │ │ ├── checkbox-invalid.svelte
│ │ │ │ │ │ │ ├── checkbox-with-description.svelte
│ │ │ │ │ │ │ ├── checkbox-with-title.svelte
│ │ │ │ │ │ │ └── checkbox.svelte
│ │ │ │ │ │ ├── collapsible/
│ │ │ │ │ │ │ ├── collapsible-file-tree.svelte
│ │ │ │ │ │ │ ├── collapsible-settings.svelte
│ │ │ │ │ │ │ └── collapsible.svelte
│ │ │ │ │ │ ├── combobox/
│ │ │ │ │ │ │ ├── combobox-basic.svelte
│ │ │ │ │ │ │ ├── combobox-disabled-items.svelte
│ │ │ │ │ │ │ ├── combobox-disabled.svelte
│ │ │ │ │ │ │ ├── combobox-in-dialog.svelte
│ │ │ │ │ │ │ ├── combobox-in-popup.svelte
│ │ │ │ │ │ │ ├── combobox-invalid.svelte
│ │ │ │ │ │ │ ├── combobox-large-list.svelte
│ │ │ │ │ │ │ ├── combobox-multiple-invalid.svelte
│ │ │ │ │ │ │ ├── combobox-multiple.svelte
│ │ │ │ │ │ │ ├── combobox-with-custom-items.svelte
│ │ │ │ │ │ │ ├── combobox-with-form.svelte
│ │ │ │ │ │ │ ├── combobox-with-groups-and-separator.svelte
│ │ │ │ │ │ │ ├── combobox-with-groups.svelte
│ │ │ │ │ │ │ └── combobox.svelte
│ │ │ │ │ │ ├── command/
│ │ │ │ │ │ │ ├── command-basic.svelte
│ │ │ │ │ │ │ ├── command-inline.svelte
│ │ │ │ │ │ │ ├── command-many-items.svelte
│ │ │ │ │ │ │ ├── command-with-groups.svelte
│ │ │ │ │ │ │ ├── command-with-shortcuts.svelte
│ │ │ │ │ │ │ └── command.svelte
│ │ │ │ │ │ ├── context-menu/
│ │ │ │ │ │ │ ├── context-menu-basic.svelte
│ │ │ │ │ │ │ ├── context-menu-in-dialog.svelte
│ │ │ │ │ │ │ ├── context-menu-with-checkboxes.svelte
│ │ │ │ │ │ │ ├── context-menu-with-destructive.svelte
│ │ │ │ │ │ │ ├── context-menu-with-groups.svelte
│ │ │ │ │ │ │ ├── context-menu-with-icons.svelte
│ │ │ │ │ │ │ ├── context-menu-with-inset.svelte
│ │ │ │ │ │ │ ├── context-menu-with-radio.svelte
│ │ │ │ │ │ │ ├── context-menu-with-shortcuts.svelte
│ │ │ │ │ │ │ ├── context-menu-with-sides.svelte
│ │ │ │ │ │ │ ├── context-menu-with-submenu.svelte
│ │ │ │ │ │ │ └── context-menu.svelte
│ │ │ │ │ │ ├── demo/
│ │ │ │ │ │ │ └── demo.svelte
│ │ │ │ │ │ ├── dialog/
│ │ │ │ │ │ │ ├── dialog-chat-settings.svelte
│ │ │ │ │ │ │ ├── dialog-no-close-button.svelte
│ │ │ │ │ │ │ ├── dialog-scrollable-content.svelte
│ │ │ │ │ │ │ ├── dialog-with-form.svelte
│ │ │ │ │ │ │ ├── dialog-with-sticky-footer.svelte
│ │ │ │ │ │ │ └── dialog.svelte
│ │ │ │ │ │ ├── drawer/
│ │ │ │ │ │ │ ├── drawer-scrollable-content.svelte
│ │ │ │ │ │ │ ├── drawer-with-sides.svelte
│ │ │ │ │ │ │ └── drawer.svelte
│ │ │ │ │ │ ├── dropdown-menu/
│ │ │ │ │ │ │ ├── dropdown-menu-basic.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-complex.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-in-dialog.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-avatar.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-checkboxes-icons.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-checkboxes.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-destructive.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-icons.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-radio-icons.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-radio.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-shortcuts.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-submenu.svelte
│ │ │ │ │ │ │ └── dropdown-menu.svelte
│ │ │ │ │ │ ├── elevenlabs/
│ │ │ │ │ │ │ ├── bar-visualizer-demo.svelte
│ │ │ │ │ │ │ ├── bar-visualizer.svelte
│ │ │ │ │ │ │ ├── elevenlabs.svelte
│ │ │ │ │ │ │ ├── live-waveform.svelte
│ │ │ │ │ │ │ └── waveform-demo.svelte
│ │ │ │ │ │ ├── empty/
│ │ │ │ │ │ │ ├── empty-basic.svelte
│ │ │ │ │ │ │ ├── empty-in-card.svelte
│ │ │ │ │ │ │ ├── empty-with-border.svelte
│ │ │ │ │ │ │ ├── empty-with-icon.svelte
│ │ │ │ │ │ │ ├── empty-with-muted-background-alt.svelte
│ │ │ │ │ │ │ ├── empty-with-muted-background.svelte
│ │ │ │ │ │ │ └── empty.svelte
│ │ │ │ │ │ ├── field/
│ │ │ │ │ │ │ ├── field-checkbox-fields.svelte
│ │ │ │ │ │ │ ├── field-horizontal-fields.svelte
│ │ │ │ │ │ │ ├── field-input-fields.svelte
│ │ │ │ │ │ │ ├── field-input-otp-fields.svelte
│ │ │ │ │ │ │ ├── field-native-select-fields.svelte
│ │ │ │ │ │ │ ├── field-radio-fields.svelte
│ │ │ │ │ │ │ ├── field-select-fields.svelte
│ │ │ │ │ │ │ ├── field-slider-fields.svelte
│ │ │ │ │ │ │ ├── field-switch-fields.svelte
│ │ │ │ │ │ │ ├── field-textarea-fields.svelte
│ │ │ │ │ │ │ └── field.svelte
│ │ │ │ │ │ ├── github/
│ │ │ │ │ │ │ ├── assign-issue.svelte
│ │ │ │ │ │ │ ├── codespaces-card.svelte
│ │ │ │ │ │ │ ├── contributions-activity.svelte
│ │ │ │ │ │ │ ├── contributors.svelte
│ │ │ │ │ │ │ ├── github.svelte
│ │ │ │ │ │ │ ├── navbar.svelte
│ │ │ │ │ │ │ ├── profile.svelte
│ │ │ │ │ │ │ └── repository-toolbar.svelte
│ │ │ │ │ │ ├── home/
│ │ │ │ │ │ │ ├── badge-examples.svelte
│ │ │ │ │ │ │ ├── button-group-examples.svelte
│ │ │ │ │ │ │ ├── empty-avatar-group.svelte
│ │ │ │ │ │ │ ├── field-examples.svelte
│ │ │ │ │ │ │ ├── form-example.svelte
│ │ │ │ │ │ │ ├── home.svelte
│ │ │ │ │ │ │ ├── input-group-examples.svelte
│ │ │ │ │ │ │ ├── item-example.svelte
│ │ │ │ │ │ │ ├── observability-card.svelte
│ │ │ │ │ │ │ ├── sheet-example.svelte
│ │ │ │ │ │ │ └── small-form-example.svelte
│ │ │ │ │ │ ├── hover-card/
│ │ │ │ │ │ │ ├── hover-card-in-dialog.svelte
│ │ │ │ │ │ │ ├── hover-card-sides.svelte
│ │ │ │ │ │ │ └── hover-card.svelte
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── input/
│ │ │ │ │ │ │ ├── input-basic.svelte
│ │ │ │ │ │ │ ├── input-disabled.svelte
│ │ │ │ │ │ │ ├── input-form.svelte
│ │ │ │ │ │ │ ├── input-invalid.svelte
│ │ │ │ │ │ │ ├── input-types.svelte
│ │ │ │ │ │ │ ├── input-with-button.svelte
│ │ │ │ │ │ │ ├── input-with-description.svelte
│ │ │ │ │ │ │ ├── input-with-label.svelte
│ │ │ │ │ │ │ ├── input-with-native-select.svelte
│ │ │ │ │ │ │ ├── input-with-select.svelte
│ │ │ │ │ │ │ └── input.svelte
│ │ │ │ │ │ ├── input-group/
│ │ │ │ │ │ │ ├── input-group-basic.svelte
│ │ │ │ │ │ │ ├── input-group-in-card.svelte
│ │ │ │ │ │ │ ├── input-group-textarea-examples.svelte
│ │ │ │ │ │ │ ├── input-group-with-addons.svelte
│ │ │ │ │ │ │ ├── input-group-with-buttons.svelte
│ │ │ │ │ │ │ ├── input-group-with-kbd.svelte
│ │ │ │ │ │ │ ├── input-group-with-tooltip.svelte
│ │ │ │ │ │ │ └── input-group.svelte
│ │ │ │ │ │ ├── input-otp/
│ │ │ │ │ │ │ ├── input-otp-alphanumeric.svelte
│ │ │ │ │ │ │ ├── input-otp-disabled.svelte
│ │ │ │ │ │ │ ├── input-otp-form.svelte
│ │ │ │ │ │ │ ├── input-otp-four-digits.svelte
│ │ │ │ │ │ │ ├── input-otp-invalid.svelte
│ │ │ │ │ │ │ ├── input-otp-pattern.svelte
│ │ │ │ │ │ │ ├── input-otp-simple.svelte
│ │ │ │ │ │ │ ├── input-otp-with-separator.svelte
│ │ │ │ │ │ │ └── input-otp.svelte
│ │ │ │ │ │ ├── item/
│ │ │ │ │ │ │ ├── item-as-child.svelte
│ │ │ │ │ │ │ ├── item-footer.svelte
│ │ │ │ │ │ │ ├── item-group.svelte
│ │ │ │ │ │ │ ├── item-header-and-footer.svelte
│ │ │ │ │ │ │ ├── item-header.svelte
│ │ │ │ │ │ │ ├── item-muted-group.svelte
│ │ │ │ │ │ │ ├── item-muted-image.svelte
│ │ │ │ │ │ │ ├── item-muted-link.svelte
│ │ │ │ │ │ │ ├── item-outline-group.svelte
│ │ │ │ │ │ │ ├── item-outline-image-extra-small.svelte
│ │ │ │ │ │ │ ├── item-outline-image-small.svelte
│ │ │ │ │ │ │ ├── item-outline-image.svelte
│ │ │ │ │ │ │ ├── item-outline-link.svelte
│ │ │ │ │ │ │ ├── item-separator.svelte
│ │ │ │ │ │ │ ├── item-variants.svelte
│ │ │ │ │ │ │ ├── item-with-image.svelte
│ │ │ │ │ │ │ └── item.svelte
│ │ │ │ │ │ ├── kbd/
│ │ │ │ │ │ │ ├── kbd-arrow-keys.svelte
│ │ │ │ │ │ │ ├── kbd-basic.svelte
│ │ │ │ │ │ │ ├── kbd-group-example.svelte
│ │ │ │ │ │ │ ├── kbd-in-input-group.svelte
│ │ │ │ │ │ │ ├── kbd-in-tooltip.svelte
│ │ │ │ │ │ │ ├── kbd-modifier-keys.svelte
│ │ │ │ │ │ │ ├── kbd-with-icons-and-text.svelte
│ │ │ │ │ │ │ ├── kbd-with-icons.svelte
│ │ │ │ │ │ │ ├── kbd-with-samp.svelte
│ │ │ │ │ │ │ └── kbd.svelte
│ │ │ │ │ │ ├── label/
│ │ │ │ │ │ │ ├── label-disabled.svelte
│ │ │ │ │ │ │ ├── label-with-checkbox.svelte
│ │ │ │ │ │ │ ├── label-with-input.svelte
│ │ │ │ │ │ │ ├── label-with-textarea.svelte
│ │ │ │ │ │ │ └── label.svelte
│ │ │ │ │ │ ├── menubar/
│ │ │ │ │ │ │ ├── menubar-basic.svelte
│ │ │ │ │ │ │ ├── menubar-destructive.svelte
│ │ │ │ │ │ │ ├── menubar-format.svelte
│ │ │ │ │ │ │ ├── menubar-in-dialog.svelte
│ │ │ │ │ │ │ ├── menubar-insert.svelte
│ │ │ │ │ │ │ ├── menubar-with-checkboxes.svelte
│ │ │ │ │ │ │ ├── menubar-with-icons.svelte
│ │ │ │ │ │ │ ├── menubar-with-inset.svelte
│ │ │ │ │ │ │ ├── menubar-with-radio.svelte
│ │ │ │ │ │ │ ├── menubar-with-shortcuts.svelte
│ │ │ │ │ │ │ ├── menubar-with-submenu.svelte
│ │ │ │ │ │ │ └── menubar.svelte
│ │ │ │ │ │ ├── native-select/
│ │ │ │ │ │ │ ├── native-select-basic.svelte
│ │ │ │ │ │ │ ├── native-select-disabled.svelte
│ │ │ │ │ │ │ ├── native-select-invalid.svelte
│ │ │ │ │ │ │ ├── native-select-sizes.svelte
│ │ │ │ │ │ │ ├── native-select-with-field.svelte
│ │ │ │ │ │ │ ├── native-select-with-groups.svelte
│ │ │ │ │ │ │ └── native-select.svelte
│ │ │ │ │ │ ├── navigation-menu/
│ │ │ │ │ │ │ ├── navigation-menu-with-viewport.svelte
│ │ │ │ │ │ │ ├── navigation-menu-without-viewport.svelte
│ │ │ │ │ │ │ └── navigation-menu.svelte
│ │ │ │ │ │ ├── pagination/
│ │ │ │ │ │ │ ├── pagination-basic.svelte
│ │ │ │ │ │ │ ├── pagination-simple.svelte
│ │ │ │ │ │ │ ├── pagination-with-select.svelte
│ │ │ │ │ │ │ └── pagination.svelte
│ │ │ │ │ │ ├── popover/
│ │ │ │ │ │ │ ├── popover-alignments.svelte
│ │ │ │ │ │ │ ├── popover-basic.svelte
│ │ │ │ │ │ │ ├── popover-in-dialog.svelte
│ │ │ │ │ │ │ ├── popover-with-form.svelte
│ │ │ │ │ │ │ └── popover.svelte
│ │ │ │ │ │ ├── preview/
│ │ │ │ │ │ │ ├── cards/
│ │ │ │ │ │ │ │ ├── activate-agent-dialog.svelte
│ │ │ │ │ │ │ │ ├── analytics-card.svelte
│ │ │ │ │ │ │ │ ├── anomaly-alert.svelte
│ │ │ │ │ │ │ │ ├── assign-issue.svelte
│ │ │ │ │ │ │ │ ├── bar-chart-card.svelte
│ │ │ │ │ │ │ │ ├── bar-visualizer-card.svelte
│ │ │ │ │ │ │ │ ├── book-appointment.svelte
│ │ │ │ │ │ │ │ ├── codespaces-card.svelte
│ │ │ │ │ │ │ │ ├── contributions-activity.svelte
│ │ │ │ │ │ │ │ ├── contributors.svelte
│ │ │ │ │ │ │ │ ├── environment-variables.svelte
│ │ │ │ │ │ │ │ ├── feedback-form.svelte
│ │ │ │ │ │ │ │ ├── file-upload.svelte
│ │ │ │ │ │ │ │ ├── github-profile.svelte
│ │ │ │ │ │ │ │ ├── icon-preview-grid.svelte
│ │ │ │ │ │ │ │ ├── invite-team.svelte
│ │ │ │ │ │ │ │ ├── invoice.svelte
│ │ │ │ │ │ │ │ ├── live-waveform.svelte
│ │ │ │ │ │ │ │ ├── no-team-members.svelte
│ │ │ │ │ │ │ │ ├── not-found.svelte
│ │ │ │ │ │ │ │ ├── observability-card.svelte
│ │ │ │ │ │ │ │ ├── pie-chart-card.svelte
│ │ │ │ │ │ │ │ ├── report-bug.svelte
│ │ │ │ │ │ │ │ ├── shipping-address.svelte
│ │ │ │ │ │ │ │ ├── shortcuts.svelte
│ │ │ │ │ │ │ │ ├── skeleton-loading.svelte
│ │ │ │ │ │ │ │ ├── sleep-report.svelte
│ │ │ │ │ │ │ │ ├── style-overview.svelte
│ │ │ │ │ │ │ │ ├── ui-elements.svelte
│ │ │ │ │ │ │ │ ├── usage-card.svelte
│ │ │ │ │ │ │ │ ├── visitors.svelte
│ │ │ │ │ │ │ │ └── weekly-fitness-summary.svelte
│ │ │ │ │ │ │ └── preview.svelte
│ │ │ │ │ │ ├── progress/
│ │ │ │ │ │ │ ├── progress-bar.svelte
│ │ │ │ │ │ │ ├── progress-controlled.svelte
│ │ │ │ │ │ │ ├── progress-file-upload-list.svelte
│ │ │ │ │ │ │ ├── progress-with-label.svelte
│ │ │ │ │ │ │ └── progress.svelte
│ │ │ │ │ │ ├── radio-group/
│ │ │ │ │ │ │ ├── radio-group-basic.svelte
│ │ │ │ │ │ │ ├── radio-group-disabled.svelte
│ │ │ │ │ │ │ ├── radio-group-grid.svelte
│ │ │ │ │ │ │ ├── radio-group-invalid.svelte
│ │ │ │ │ │ │ ├── radio-group-with-descriptions.svelte
│ │ │ │ │ │ │ ├── radio-group-with-field-set.svelte
│ │ │ │ │ │ │ └── radio-group.svelte
│ │ │ │ │ │ ├── resizable/
│ │ │ │ │ │ │ ├── resizable-controlled.svelte
│ │ │ │ │ │ │ ├── resizable-horizontal.svelte
│ │ │ │ │ │ │ ├── resizable-nested.svelte
│ │ │ │ │ │ │ ├── resizable-vertical.svelte
│ │ │ │ │ │ │ ├── resizable-with-handle.svelte
│ │ │ │ │ │ │ └── resizable.svelte
│ │ │ │ │ │ ├── scroll-area/
│ │ │ │ │ │ │ ├── scroll-area-horizontal.svelte
│ │ │ │ │ │ │ ├── scroll-area-vertical.svelte
│ │ │ │ │ │ │ └── scroll-area.svelte
│ │ │ │ │ │ ├── select/
│ │ │ │ │ │ │ ├── select-basic.svelte
│ │ │ │ │ │ │ ├── select-disabled.svelte
│ │ │ │ │ │ │ ├── select-in-dialog.svelte
│ │ │ │ │ │ │ ├── select-inline.svelte
│ │ │ │ │ │ │ ├── select-invalid.svelte
│ │ │ │ │ │ │ ├── select-item-aligned.svelte
│ │ │ │ │ │ │ ├── select-large-list.svelte
│ │ │ │ │ │ │ ├── select-multiple.svelte
│ │ │ │ │ │ │ ├── select-plan.svelte
│ │ │ │ │ │ │ ├── select-sizes.svelte
│ │ │ │ │ │ │ ├── select-with-button.svelte
│ │ │ │ │ │ │ ├── select-with-field.svelte
│ │ │ │ │ │ │ ├── select-with-groups.svelte
│ │ │ │ │ │ │ ├── select-with-icons.svelte
│ │ │ │ │ │ │ └── select.svelte
│ │ │ │ │ │ ├── separator/
│ │ │ │ │ │ │ ├── separator-horizontal.svelte
│ │ │ │ │ │ │ ├── separator-in-list.svelte
│ │ │ │ │ │ │ ├── separator-vertical-menu.svelte
│ │ │ │ │ │ │ ├── separator-vertical.svelte
│ │ │ │ │ │ │ └── separator.svelte
│ │ │ │ │ │ ├── sheet/
│ │ │ │ │ │ │ ├── sheet-no-close-button.svelte
│ │ │ │ │ │ │ ├── sheet-with-form.svelte
│ │ │ │ │ │ │ ├── sheet-with-sides.svelte
│ │ │ │ │ │ │ └── sheet.svelte
│ │ │ │ │ │ ├── sidebar/
│ │ │ │ │ │ │ └── sidebar.svelte
│ │ │ │ │ │ ├── sidebar-floating/
│ │ │ │ │ │ │ └── sidebar-floating.svelte
│ │ │ │ │ │ ├── sidebar-icon/
│ │ │ │ │ │ │ └── sidebar-icon.svelte
│ │ │ │ │ │ ├── sidebar-inset/
│ │ │ │ │ │ │ └── sidebar-inset.svelte
│ │ │ │ │ │ ├── skeleton/
│ │ │ │ │ │ │ ├── skeleton-avatar.svelte
│ │ │ │ │ │ │ ├── skeleton-card.svelte
│ │ │ │ │ │ │ ├── skeleton-form.svelte
│ │ │ │ │ │ │ ├── skeleton-table.svelte
│ │ │ │ │ │ │ ├── skeleton-text.svelte
│ │ │ │ │ │ │ └── skeleton.svelte
│ │ │ │ │ │ ├── slider/
│ │ │ │ │ │ │ ├── slider-basic.svelte
│ │ │ │ │ │ │ ├── slider-controlled.svelte
│ │ │ │ │ │ │ ├── slider-disabled.svelte
│ │ │ │ │ │ │ ├── slider-multiple.svelte
│ │ │ │ │ │ │ ├── slider-range.svelte
│ │ │ │ │ │ │ ├── slider-vertical.svelte
│ │ │ │ │ │ │ └── slider.svelte
│ │ │ │ │ │ ├── sonner/
│ │ │ │ │ │ │ ├── sonner-basic.svelte
│ │ │ │ │ │ │ ├── sonner-with-description.svelte
│ │ │ │ │ │ │ └── sonner.svelte
│ │ │ │ │ │ ├── spinner/
│ │ │ │ │ │ │ ├── spinner-basic.svelte
│ │ │ │ │ │ │ ├── spinner-in-badges.svelte
│ │ │ │ │ │ │ ├── spinner-in-buttons.svelte
│ │ │ │ │ │ │ ├── spinner-in-empty.svelte
│ │ │ │ │ │ │ ├── spinner-in-input-group.svelte
│ │ │ │ │ │ │ └── spinner.svelte
│ │ │ │ │ │ ├── switch/
│ │ │ │ │ │ │ ├── switch-basic.svelte
│ │ │ │ │ │ │ ├── switch-disabled.svelte
│ │ │ │ │ │ │ ├── switch-sizes.svelte
│ │ │ │ │ │ │ ├── switch-with-description.svelte
│ │ │ │ │ │ │ └── switch.svelte
│ │ │ │ │ │ ├── table/
│ │ │ │ │ │ │ ├── table-basic.svelte
│ │ │ │ │ │ │ ├── table-simple.svelte
│ │ │ │ │ │ │ ├── table-with-actions.svelte
│ │ │ │ │ │ │ ├── table-with-badges.svelte
│ │ │ │ │ │ │ ├── table-with-footer.svelte
│ │ │ │ │ │ │ ├── table-with-input.svelte
│ │ │ │ │ │ │ ├── table-with-select.svelte
│ │ │ │ │ │ │ └── table.svelte
│ │ │ │ │ │ ├── tabs/
│ │ │ │ │ │ │ ├── tabs-basic.svelte
│ │ │ │ │ │ │ ├── tabs-disabled.svelte
│ │ │ │ │ │ │ ├── tabs-icon-only.svelte
│ │ │ │ │ │ │ ├── tabs-line-disabled.svelte
│ │ │ │ │ │ │ ├── tabs-line-with-content.svelte
│ │ │ │ │ │ │ ├── tabs-line.svelte
│ │ │ │ │ │ │ ├── tabs-multiple.svelte
│ │ │ │ │ │ │ ├── tabs-variants-comparison.svelte
│ │ │ │ │ │ │ ├── tabs-vertical.svelte
│ │ │ │ │ │ │ ├── tabs-with-content.svelte
│ │ │ │ │ │ │ ├── tabs-with-dropdown.svelte
│ │ │ │ │ │ │ ├── tabs-with-icons.svelte
│ │ │ │ │ │ │ ├── tabs-with-input-and-button.svelte
│ │ │ │ │ │ │ └── tabs.svelte
│ │ │ │ │ │ ├── textarea/
│ │ │ │ │ │ │ ├── textarea-basic.svelte
│ │ │ │ │ │ │ ├── textarea-disabled.svelte
│ │ │ │ │ │ │ ├── textarea-invalid.svelte
│ │ │ │ │ │ │ ├── textarea-with-description.svelte
│ │ │ │ │ │ │ ├── textarea-with-label.svelte
│ │ │ │ │ │ │ └── textarea.svelte
│ │ │ │ │ │ ├── toggle/
│ │ │ │ │ │ │ ├── toggle-basic.svelte
│ │ │ │ │ │ │ ├── toggle-disabled.svelte
│ │ │ │ │ │ │ ├── toggle-outline.svelte
│ │ │ │ │ │ │ ├── toggle-sizes.svelte
│ │ │ │ │ │ │ ├── toggle-with-button-icon-text.svelte
│ │ │ │ │ │ │ ├── toggle-with-button-icon.svelte
│ │ │ │ │ │ │ ├── toggle-with-button-text.svelte
│ │ │ │ │ │ │ ├── toggle-with-icon.svelte
│ │ │ │ │ │ │ └── toggle.svelte
│ │ │ │ │ │ ├── toggle-group/
│ │ │ │ │ │ │ ├── toggle-group-basic.svelte
│ │ │ │ │ │ │ ├── toggle-group-date-range.svelte
│ │ │ │ │ │ │ ├── toggle-group-filter.svelte
│ │ │ │ │ │ │ ├── toggle-group-font-weight-selector.svelte
│ │ │ │ │ │ │ ├── toggle-group-outline-with-icons.svelte
│ │ │ │ │ │ │ ├── toggle-group-outline.svelte
│ │ │ │ │ │ │ ├── toggle-group-sizes.svelte
│ │ │ │ │ │ │ ├── toggle-group-sort.svelte
│ │ │ │ │ │ │ ├── toggle-group-spacing.svelte
│ │ │ │ │ │ │ ├── toggle-group-vertical-outline-with-icons.svelte
│ │ │ │ │ │ │ ├── toggle-group-vertical-outline.svelte
│ │ │ │ │ │ │ ├── toggle-group-vertical-with-spacing.svelte
│ │ │ │ │ │ │ ├── toggle-group-vertical.svelte
│ │ │ │ │ │ │ ├── toggle-group-with-icons.svelte
│ │ │ │ │ │ │ ├── toggle-group-with-input-and-select.svelte
│ │ │ │ │ │ │ └── toggle-group.svelte
│ │ │ │ │ │ ├── tooltip/
│ │ │ │ │ │ │ ├── tooltip-basic.svelte
│ │ │ │ │ │ │ ├── tooltip-disabled.svelte
│ │ │ │ │ │ │ ├── tooltip-formatted.svelte
│ │ │ │ │ │ │ ├── tooltip-long-content.svelte
│ │ │ │ │ │ │ ├── tooltip-on-link.svelte
│ │ │ │ │ │ │ ├── tooltip-sides.svelte
│ │ │ │ │ │ │ ├── tooltip-with-icon.svelte
│ │ │ │ │ │ │ ├── tooltip-with-keyboard.svelte
│ │ │ │ │ │ │ └── tooltip.svelte
│ │ │ │ │ │ └── vercel/
│ │ │ │ │ │ ├── activate-agent-dialog.svelte
│ │ │ │ │ │ ├── analytics-card.svelte
│ │ │ │ │ │ ├── anomaly-alert.svelte
│ │ │ │ │ │ ├── billing-list.svelte
│ │ │ │ │ │ ├── circular-gauge.svelte
│ │ │ │ │ │ ├── deployment-filter.svelte
│ │ │ │ │ │ ├── feedback-form.svelte
│ │ │ │ │ │ ├── observability-card.svelte
│ │ │ │ │ │ ├── usage-card.svelte
│ │ │ │ │ │ └── vercel.svelte
│ │ │ │ │ ├── dark-mode-dropdown-menu.svelte
│ │ │ │ │ ├── dark-mode-light-switch.svelte
│ │ │ │ │ ├── data-table/
│ │ │ │ │ │ ├── data-table-actions.svelte
│ │ │ │ │ │ ├── data-table-checkbox.svelte
│ │ │ │ │ │ └── data-table-email-button.svelte
│ │ │ │ │ ├── data-table-demo.svelte
│ │ │ │ │ ├── date-picker-demo.svelte
│ │ │ │ │ ├── date-picker-form.svelte
│ │ │ │ │ ├── date-picker-with-presets.svelte
│ │ │ │ │ ├── date-picker-with-range.svelte
│ │ │ │ │ ├── dialog-close-button.svelte
│ │ │ │ │ ├── dialog-demo.svelte
│ │ │ │ │ ├── drawer-demo.svelte
│ │ │ │ │ ├── drawer-dialog.svelte
│ │ │ │ │ ├── dropdown-menu-checkboxes.svelte
│ │ │ │ │ ├── dropdown-menu-demo.svelte
│ │ │ │ │ ├── dropdown-menu-dialog.svelte
│ │ │ │ │ ├── dropdown-menu-radio-group.svelte
│ │ │ │ │ ├── empty-avatar-demo.svelte
│ │ │ │ │ ├── empty-avatar-group-demo.svelte
│ │ │ │ │ ├── empty-background-demo.svelte
│ │ │ │ │ ├── empty-demo.svelte
│ │ │ │ │ ├── empty-input-group-demo.svelte
│ │ │ │ │ ├── empty-outline-demo.svelte
│ │ │ │ │ ├── field-checkbox-demo.svelte
│ │ │ │ │ ├── field-checkbox.svelte
│ │ │ │ │ ├── field-choice-card.svelte
│ │ │ │ │ ├── field-demo.svelte
│ │ │ │ │ ├── field-field-group-demo.svelte
│ │ │ │ │ ├── field-field-set-demo.svelte
│ │ │ │ │ ├── field-input-demo.svelte
│ │ │ │ │ ├── field-input.svelte
│ │ │ │ │ ├── field-radio-demo.svelte
│ │ │ │ │ ├── field-radio.svelte
│ │ │ │ │ ├── field-responsive-layout-demo.svelte
│ │ │ │ │ ├── field-select-demo.svelte
│ │ │ │ │ ├── field-select.svelte
│ │ │ │ │ ├── field-slider-demo.svelte
│ │ │ │ │ ├── field-slider.svelte
│ │ │ │ │ ├── field-switch-demo.svelte
│ │ │ │ │ ├── field-switch.svelte
│ │ │ │ │ ├── field-textarea-demo.svelte
│ │ │ │ │ ├── field-textarea.svelte
│ │ │ │ │ ├── form-demo.svelte
│ │ │ │ │ ├── hover-card-demo.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── input-demo.svelte
│ │ │ │ │ ├── input-disabled.svelte
│ │ │ │ │ ├── input-file.svelte
│ │ │ │ │ ├── input-group-button-demo.svelte
│ │ │ │ │ ├── input-group-button-group-demo.svelte
│ │ │ │ │ ├── input-group-custom-input-demo.svelte
│ │ │ │ │ ├── input-group-demo.svelte
│ │ │ │ │ ├── input-group-dropdown-demo.svelte
│ │ │ │ │ ├── input-group-icon-demo.svelte
│ │ │ │ │ ├── input-group-label-demo.svelte
│ │ │ │ │ ├── input-group-spinner-demo.svelte
│ │ │ │ │ ├── input-group-text-demo.svelte
│ │ │ │ │ ├── input-group-textarea-demo.svelte
│ │ │ │ │ ├── input-group-tooltip-demo.svelte
│ │ │ │ │ ├── input-invalid.svelte
│ │ │ │ │ ├── input-otp-controlled.svelte
│ │ │ │ │ ├── input-otp-demo.svelte
│ │ │ │ │ ├── input-otp-form.svelte
│ │ │ │ │ ├── input-otp-invalid.svelte
│ │ │ │ │ ├── input-otp-pattern.svelte
│ │ │ │ │ ├── input-otp-separator.svelte
│ │ │ │ │ ├── input-with-button.svelte
│ │ │ │ │ ├── input-with-label.svelte
│ │ │ │ │ ├── input-with-text.svelte
│ │ │ │ │ ├── item-avatar-demo.svelte
│ │ │ │ │ ├── item-demo.svelte
│ │ │ │ │ ├── item-dropdown-demo.svelte
│ │ │ │ │ ├── item-group-demo.svelte
│ │ │ │ │ ├── item-header-demo.svelte
│ │ │ │ │ ├── item-icon-demo.svelte
│ │ │ │ │ ├── item-image-demo.svelte
│ │ │ │ │ ├── item-link-demo.svelte
│ │ │ │ │ ├── item-size-demo.svelte
│ │ │ │ │ ├── item-variants-demo.svelte
│ │ │ │ │ ├── kbd-button-demo.svelte
│ │ │ │ │ ├── kbd-demo.svelte
│ │ │ │ │ ├── kbd-group-demo.svelte
│ │ │ │ │ ├── kbd-input-group-demo.svelte
│ │ │ │ │ ├── kbd-tooltip-demo.svelte
│ │ │ │ │ ├── label-demo.svelte
│ │ │ │ │ ├── menubar-demo.svelte
│ │ │ │ │ ├── native-select-demo.svelte
│ │ │ │ │ ├── native-select-disabled.svelte
│ │ │ │ │ ├── native-select-groups.svelte
│ │ │ │ │ ├── native-select-invalid.svelte
│ │ │ │ │ ├── navigation-menu-demo.svelte
│ │ │ │ │ ├── pagination-demo.svelte
│ │ │ │ │ ├── popover-demo.svelte
│ │ │ │ │ ├── progress-demo.svelte
│ │ │ │ │ ├── radio-group-demo.svelte
│ │ │ │ │ ├── radio-group-form.svelte
│ │ │ │ │ ├── range-calendar-demo.svelte
│ │ │ │ │ ├── resizable-demo.svelte
│ │ │ │ │ ├── resizable-handle.svelte
│ │ │ │ │ ├── resizable-vertical.svelte
│ │ │ │ │ ├── scroll-area-both.svelte
│ │ │ │ │ ├── scroll-area-demo.svelte
│ │ │ │ │ ├── scroll-area-horizontal.svelte
│ │ │ │ │ ├── select-demo.svelte
│ │ │ │ │ ├── select-form.svelte
│ │ │ │ │ ├── select-scrollable.svelte
│ │ │ │ │ ├── separator-demo.svelte
│ │ │ │ │ ├── sheet-demo.svelte
│ │ │ │ │ ├── sheet-side.svelte
│ │ │ │ │ ├── skeleton-card.svelte
│ │ │ │ │ ├── skeleton-demo.svelte
│ │ │ │ │ ├── slider-demo.svelte
│ │ │ │ │ ├── slider-multiple.svelte
│ │ │ │ │ ├── slider-vertical.svelte
│ │ │ │ │ ├── sonner-demo.svelte
│ │ │ │ │ ├── sonner-types.svelte
│ │ │ │ │ ├── spinner-badge-demo.svelte
│ │ │ │ │ ├── spinner-button-demo.svelte
│ │ │ │ │ ├── spinner-color-demo.svelte
│ │ │ │ │ ├── spinner-custom-demo.svelte
│ │ │ │ │ ├── spinner-demo.svelte
│ │ │ │ │ ├── spinner-empty-demo.svelte
│ │ │ │ │ ├── spinner-input-group-demo.svelte
│ │ │ │ │ ├── spinner-item-demo.svelte
│ │ │ │ │ ├── spinner-size-demo.svelte
│ │ │ │ │ ├── switch-demo.svelte
│ │ │ │ │ ├── switch-form.svelte
│ │ │ │ │ ├── table-demo.svelte
│ │ │ │ │ ├── tabs-demo.svelte
│ │ │ │ │ ├── textarea-demo.svelte
│ │ │ │ │ ├── textarea-disabled.svelte
│ │ │ │ │ ├── textarea-form.svelte
│ │ │ │ │ ├── textarea-with-button.svelte
│ │ │ │ │ ├── textarea-with-label.svelte
│ │ │ │ │ ├── textarea-with-text.svelte
│ │ │ │ │ ├── toggle-demo.svelte
│ │ │ │ │ ├── toggle-disabled.svelte
│ │ │ │ │ ├── toggle-group-demo.svelte
│ │ │ │ │ ├── toggle-group-disabled.svelte
│ │ │ │ │ ├── toggle-group-lg.svelte
│ │ │ │ │ ├── toggle-group-outline.svelte
│ │ │ │ │ ├── toggle-group-single.svelte
│ │ │ │ │ ├── toggle-group-sm.svelte
│ │ │ │ │ ├── toggle-group-spacing.svelte
│ │ │ │ │ ├── toggle-lg.svelte
│ │ │ │ │ ├── toggle-outline.svelte
│ │ │ │ │ ├── toggle-sm.svelte
│ │ │ │ │ ├── toggle-with-text.svelte
│ │ │ │ │ ├── tooltip-demo.svelte
│ │ │ │ │ ├── typography-blockquote.svelte
│ │ │ │ │ ├── typography-demo.svelte
│ │ │ │ │ ├── typography-h1.svelte
│ │ │ │ │ ├── typography-h2.svelte
│ │ │ │ │ ├── typography-h3.svelte
│ │ │ │ │ ├── typography-h4.svelte
│ │ │ │ │ ├── typography-inline-code.svelte
│ │ │ │ │ ├── typography-large.svelte
│ │ │ │ │ ├── typography-lead.svelte
│ │ │ │ │ ├── typography-list.svelte
│ │ │ │ │ ├── typography-muted.svelte
│ │ │ │ │ ├── typography-p.svelte
│ │ │ │ │ ├── typography-small.svelte
│ │ │ │ │ └── typography-table.svelte
│ │ │ │ ├── fonts.ts
│ │ │ │ ├── hooks/
│ │ │ │ │ └── is-mobile.svelte.ts
│ │ │ │ ├── icons/
│ │ │ │ │ ├── __hugeicons__/
│ │ │ │ │ │ ├── ActivityIcon.ts
│ │ │ │ │ │ ├── Add01Icon.ts
│ │ │ │ │ │ ├── AddToListIcon.ts
│ │ │ │ │ │ ├── AiCloud01Icon.ts
│ │ │ │ │ │ ├── Alert02Icon.ts
│ │ │ │ │ │ ├── AlertCircleIcon.ts
│ │ │ │ │ │ ├── Archive02Icon.ts
│ │ │ │ │ │ ├── ArchiveIcon.ts
│ │ │ │ │ │ ├── ArrowDown01Icon.ts
│ │ │ │ │ │ ├── ArrowDownIcon.ts
│ │ │ │ │ │ ├── ArrowExpandIcon.ts
│ │ │ │ │ │ ├── ArrowLeft01Icon.ts
│ │ │ │ │ │ ├── ArrowLeft02Icon.ts
│ │ │ │ │ │ ├── ArrowRight01Icon.ts
│ │ │ │ │ │ ├── ArrowRight02Icon.ts
│ │ │ │ │ │ ├── ArrowShrinkIcon.ts
│ │ │ │ │ │ ├── ArrowUp01Icon.ts
│ │ │ │ │ │ ├── ArrowUp02Icon.ts
│ │ │ │ │ │ ├── ArrowUpIcon.ts
│ │ │ │ │ │ ├── ArrowUpRight01Icon.ts
│ │ │ │ │ │ ├── ArrowUpRightIcon.ts
│ │ │ │ │ │ ├── AttachmentIcon.ts
│ │ │ │ │ │ ├── AudioWave01Icon.ts
│ │ │ │ │ │ ├── BankIcon.ts
│ │ │ │ │ │ ├── BluetoothIcon.ts
│ │ │ │ │ │ ├── BookIcon.ts
│ │ │ │ │ │ ├── BookOpen02Icon.ts
│ │ │ │ │ │ ├── BookmarkIcon.ts
│ │ │ │ │ │ ├── BotIcon.ts
│ │ │ │ │ │ ├── BulbIcon.ts
│ │ │ │ │ │ ├── CalculatorIcon.ts
│ │ │ │ │ │ ├── Calendar01Icon.ts
│ │ │ │ │ │ ├── CalendarAdd01Icon.ts
│ │ │ │ │ │ ├── CalendarIcon.ts
│ │ │ │ │ │ ├── Cancel01Icon.ts
│ │ │ │ │ │ ├── Chart03Icon.ts
│ │ │ │ │ │ ├── ChartUpIcon.ts
│ │ │ │ │ │ ├── CheckmarkBadge02Icon.ts
│ │ │ │ │ │ ├── CheckmarkBadgeIcon.ts
│ │ │ │ │ │ ├── CheckmarkCircle02Icon.ts
│ │ │ │ │ │ ├── CircleArrowLeft02Icon.ts
│ │ │ │ │ │ ├── CircleIcon.ts
│ │ │ │ │ │ ├── ClipboardIcon.ts
│ │ │ │ │ │ ├── Clock03Icon.ts
│ │ │ │ │ │ ├── ClockIcon.ts
│ │ │ │ │ │ ├── CloudUploadIcon.ts
│ │ │ │ │ │ ├── CodeIcon.ts
│ │ │ │ │ │ ├── ComputerIcon.ts
│ │ │ │ │ │ ├── ComputerTerminal01Icon.ts
│ │ │ │ │ │ ├── ComputerTerminalIcon.ts
│ │ │ │ │ │ ├── Copy01Icon.ts
│ │ │ │ │ │ ├── CopyIcon.ts
│ │ │ │ │ │ ├── CreditCardIcon.ts
│ │ │ │ │ │ ├── CropIcon.ts
│ │ │ │ │ │ ├── CubeIcon.ts
│ │ │ │ │ │ ├── Cursor01Icon.ts
│ │ │ │ │ │ ├── CursorInWindowIcon.ts
│ │ │ │ │ │ ├── DashedLineCircleIcon.ts
│ │ │ │ │ │ ├── Delete02Icon.ts
│ │ │ │ │ │ ├── DeleteIcon.ts
│ │ │ │ │ │ ├── DollarCircleIcon.ts
│ │ │ │ │ │ ├── DownloadIcon.ts
│ │ │ │ │ │ ├── EditIcon.ts
│ │ │ │ │ │ ├── EyeIcon.ts
│ │ │ │ │ │ ├── FavouriteIcon.ts
│ │ │ │ │ │ ├── File01Icon.ts
│ │ │ │ │ │ ├── File02Icon.ts
│ │ │ │ │ │ ├── FileIcon.ts
│ │ │ │ │ │ ├── FlipHorizontalIcon.ts
│ │ │ │ │ │ ├── FlipVerticalIcon.ts
│ │ │ │ │ │ ├── FloppyDiskIcon.ts
│ │ │ │ │ │ ├── Folder01Icon.ts
│ │ │ │ │ │ ├── FolderAddIcon.ts
│ │ │ │ │ │ ├── FolderIcon.ts
│ │ │ │ │ │ ├── FolderOpenIcon.ts
│ │ │ │ │ │ ├── GitBranchIcon.ts
│ │ │ │ │ │ ├── GlobalIcon.ts
│ │ │ │ │ │ ├── GridIcon.ts
│ │ │ │ │ │ ├── HelpCircleIcon.ts
│ │ │ │ │ │ ├── HomeIcon.ts
│ │ │ │ │ │ ├── ImageIcon.ts
│ │ │ │ │ │ ├── InboxIcon.ts
│ │ │ │ │ │ ├── InformationCircleIcon.ts
│ │ │ │ │ │ ├── KeyboardIcon.ts
│ │ │ │ │ │ ├── LanguageCircleIcon.ts
│ │ │ │ │ │ ├── LayoutIcon.ts
│ │ │ │ │ │ ├── LayoutLeftIcon.ts
│ │ │ │ │ │ ├── LinkIcon.ts
│ │ │ │ │ │ ├── LinkSquare02Icon.ts
│ │ │ │ │ │ ├── Loading03Icon.ts
│ │ │ │ │ │ ├── LogoutIcon.ts
│ │ │ │ │ │ ├── MagicWand05Icon.ts
│ │ │ │ │ │ ├── MailIcon.ts
│ │ │ │ │ │ ├── MailValidation01Icon.ts
│ │ │ │ │ │ ├── MapsIcon.ts
│ │ │ │ │ │ ├── Menu05Icon.ts
│ │ │ │ │ │ ├── Menu09Icon.ts
│ │ │ │ │ │ ├── MessageIcon.ts
│ │ │ │ │ │ ├── MinusSignIcon.ts
│ │ │ │ │ │ ├── MoonIcon.ts
│ │ │ │ │ │ ├── MoreHorizontalCircle01Icon.ts
│ │ │ │ │ │ ├── MoreVerticalCircle01Icon.ts
│ │ │ │ │ │ ├── MultiplicationSignCircleIcon.ts
│ │ │ │ │ │ ├── Notification02Icon.ts
│ │ │ │ │ │ ├── NotificationIcon.ts
│ │ │ │ │ │ ├── PaintBoardIcon.ts
│ │ │ │ │ │ ├── PenIcon.ts
│ │ │ │ │ │ ├── PieChartIcon.ts
│ │ │ │ │ │ ├── PlusSignIcon.ts
│ │ │ │ │ │ ├── RecordIcon.ts
│ │ │ │ │ │ ├── RefreshIcon.ts
│ │ │ │ │ │ ├── RoboticIcon.ts
│ │ │ │ │ │ ├── Rotate01Icon.ts
│ │ │ │ │ │ ├── ScissorIcon.ts
│ │ │ │ │ │ ├── Search01Icon.ts
│ │ │ │ │ │ ├── SearchIcon.ts
│ │ │ │ │ │ ├── SentIcon.ts
│ │ │ │ │ │ ├── ServerStackIcon.ts
│ │ │ │ │ │ ├── Settings01Icon.ts
│ │ │ │ │ │ ├── Settings05Icon.ts
│ │ │ │ │ │ ├── SettingsIcon.ts
│ │ │ │ │ │ ├── Share03Icon.ts
│ │ │ │ │ │ ├── ShareIcon.ts
│ │ │ │ │ │ ├── ShieldIcon.ts
│ │ │ │ │ │ ├── ShoppingBag01Icon.ts
│ │ │ │ │ │ ├── ShoppingBasket01Icon.ts
│ │ │ │ │ │ ├── SidebarLeftIcon.ts
│ │ │ │ │ │ ├── SlidersHorizontalIcon.ts
│ │ │ │ │ │ ├── SmileIcon.ts
│ │ │ │ │ │ ├── SparklesIcon.ts
│ │ │ │ │ │ ├── StarIcon.ts
│ │ │ │ │ │ ├── SunIcon.ts
│ │ │ │ │ │ ├── TableIcon.ts
│ │ │ │ │ │ ├── TagIcon.ts
│ │ │ │ │ │ ├── TextBoldIcon.ts
│ │ │ │ │ │ ├── TextCheckIcon.ts
│ │ │ │ │ │ ├── TextItalicIcon.ts
│ │ │ │ │ │ ├── TextUnderlineIcon.ts
│ │ │ │ │ │ ├── Tick02Icon.ts
│ │ │ │ │ │ ├── TradeUpIcon.ts
│ │ │ │ │ │ ├── UnfoldMoreIcon.ts
│ │ │ │ │ │ ├── Upload01Icon.ts
│ │ │ │ │ │ ├── UserIcon.ts
│ │ │ │ │ │ ├── UserRemove01Icon.ts
│ │ │ │ │ │ ├── ViewOffIcon.ts
│ │ │ │ │ │ ├── VoiceIcon.ts
│ │ │ │ │ │ ├── VolumeOffIcon.ts
│ │ │ │ │ │ ├── WalletIcon.ts
│ │ │ │ │ │ ├── ZapIcon.ts
│ │ │ │ │ │ ├── ZoomInAreaIcon.ts
│ │ │ │ │ │ ├── ZoomOutAreaIcon.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── __lucide__/
│ │ │ │ │ │ ├── ActivityIcon.ts
│ │ │ │ │ │ ├── AlertTriangleIcon.ts
│ │ │ │ │ │ ├── AppWindowIcon.ts
│ │ │ │ │ │ ├── ArchiveIcon.ts
│ │ │ │ │ │ ├── ArrowDownIcon.ts
│ │ │ │ │ │ ├── ArrowLeftCircleIcon.ts
│ │ │ │ │ │ ├── ArrowLeftIcon.ts
│ │ │ │ │ │ ├── ArrowRightIcon.ts
│ │ │ │ │ │ ├── ArrowUpIcon.ts
│ │ │ │ │ │ ├── ArrowUpRightIcon.ts
│ │ │ │ │ │ ├── AudioLinesIcon.ts
│ │ │ │ │ │ ├── BadgeCheck.ts
│ │ │ │ │ │ ├── BadgeCheckIcon.ts
│ │ │ │ │ │ ├── BellIcon.ts
│ │ │ │ │ │ ├── BluetoothIcon.ts
│ │ │ │ │ │ ├── BoldIcon.ts
│ │ │ │ │ │ ├── BookOpen.ts
│ │ │ │ │ │ ├── BookOpenIcon.ts
│ │ │ │ │ │ ├── BookmarkIcon.ts
│ │ │ │ │ │ ├── BotIcon.ts
│ │ │ │ │ │ ├── Building2Icon.ts
│ │ │ │ │ │ ├── CalculatorIcon.ts
│ │ │ │ │ │ ├── CalendarIcon.ts
│ │ │ │ │ │ ├── CalendarPlusIcon.ts
│ │ │ │ │ │ ├── CaptionsIcon.ts
│ │ │ │ │ │ ├── ChartBarIcon.ts
│ │ │ │ │ │ ├── ChartLineIcon.ts
│ │ │ │ │ │ ├── ChartPieIcon.ts
│ │ │ │ │ │ ├── CheckCircle2Icon.ts
│ │ │ │ │ │ ├── CheckIcon.ts
│ │ │ │ │ │ ├── ChevronDownIcon.ts
│ │ │ │ │ │ ├── ChevronLeftIcon.ts
│ │ │ │ │ │ ├── ChevronRightIcon.ts
│ │ │ │ │ │ ├── ChevronUpIcon.ts
│ │ │ │ │ │ ├── ChevronsUpDownIcon.ts
│ │ │ │ │ │ ├── CircleAlertIcon.ts
│ │ │ │ │ │ ├── CircleCheckIcon.ts
│ │ │ │ │ │ ├── CircleDashedIcon.ts
│ │ │ │ │ │ ├── CircleDollarSignIcon.ts
│ │ │ │ │ │ ├── CircleIcon.ts
│ │ │ │ │ │ ├── ClipboardPasteIcon.ts
│ │ │ │ │ │ ├── Clock2Icon.ts
│ │ │ │ │ │ ├── ClockIcon.ts
│ │ │ │ │ │ ├── CloudCogIcon.ts
│ │ │ │ │ │ ├── CodeIcon.ts
│ │ │ │ │ │ ├── ContainerIcon.ts
│ │ │ │ │ │ ├── CopyIcon.ts
│ │ │ │ │ │ ├── CreditCardIcon.ts
│ │ │ │ │ │ ├── DownloadIcon.ts
│ │ │ │ │ │ ├── ExternalLinkIcon.ts
│ │ │ │ │ │ ├── EyeIcon.ts
│ │ │ │ │ │ ├── EyeOffIcon.ts
│ │ │ │ │ │ ├── FileCodeIcon.ts
│ │ │ │ │ │ ├── FileIcon.ts
│ │ │ │ │ │ ├── FileTextIcon.ts
│ │ │ │ │ │ ├── FlipHorizontalIcon.ts
│ │ │ │ │ │ ├── FlipVerticalIcon.ts
│ │ │ │ │ │ ├── FolderIcon.ts
│ │ │ │ │ │ ├── FolderOpenIcon.ts
│ │ │ │ │ │ ├── FolderPlusIcon.ts
│ │ │ │ │ │ ├── FolderSearchIcon.ts
│ │ │ │ │ │ ├── FrameIcon.ts
│ │ │ │ │ │ ├── GitBranchIcon.ts
│ │ │ │ │ │ ├── GlobeIcon.ts
│ │ │ │ │ │ ├── HeartIcon.ts
│ │ │ │ │ │ ├── HelpCircleIcon.ts
│ │ │ │ │ │ ├── HomeIcon.ts
│ │ │ │ │ │ ├── ImageIcon.ts
│ │ │ │ │ │ ├── InboxIcon.ts
│ │ │ │ │ │ ├── InfoIcon.ts
│ │ │ │ │ │ ├── ItalicIcon.ts
│ │ │ │ │ │ ├── KeyboardIcon.ts
│ │ │ │ │ │ ├── LanguagesIcon.ts
│ │ │ │ │ │ ├── LayoutGridIcon.ts
│ │ │ │ │ │ ├── LayoutIcon.ts
│ │ │ │ │ │ ├── LightbulbIcon.ts
│ │ │ │ │ │ ├── LinkIcon.ts
│ │ │ │ │ │ ├── ListFilterIcon.ts
│ │ │ │ │ │ ├── ListIcon.ts
│ │ │ │ │ │ ├── Loader2Icon.ts
│ │ │ │ │ │ ├── LogOutIcon.ts
│ │ │ │ │ │ ├── MailCheckIcon.ts
│ │ │ │ │ │ ├── MailIcon.ts
│ │ │ │ │ │ ├── MapIcon.ts
│ │ │ │ │ │ ├── MaximizeIcon.ts
│ │ │ │ │ │ ├── MenuIcon.ts
│ │ │ │ │ │ ├── MessageSquareIcon.ts
│ │ │ │ │ │ ├── MicIcon.ts
│ │ │ │ │ │ ├── MinimizeIcon.ts
│ │ │ │ │ │ ├── MinusIcon.ts
│ │ │ │ │ │ ├── MonitorIcon.ts
│ │ │ │ │ │ ├── MoonIcon.ts
│ │ │ │ │ │ ├── MoreHorizontalIcon.ts
│ │ │ │ │ │ ├── MoreVerticalIcon.ts
│ │ │ │ │ │ ├── MousePointerIcon.ts
│ │ │ │ │ │ ├── OctagonXIcon.ts
│ │ │ │ │ │ ├── PaletteIcon.ts
│ │ │ │ │ │ ├── PanelLeftIcon.ts
│ │ │ │ │ │ ├── PaperclipIcon.ts
│ │ │ │ │ │ ├── PenToolIcon.ts
│ │ │ │ │ │ ├── PencilIcon.ts
│ │ │ │ │ │ ├── PieChartIcon.ts
│ │ │ │ │ │ ├── PlusIcon.ts
│ │ │ │ │ │ ├── RadioIcon.ts
│ │ │ │ │ │ ├── RefreshCwIcon.ts
│ │ │ │ │ │ ├── RotateCwIcon.ts
│ │ │ │ │ │ ├── SaveIcon.ts
│ │ │ │ │ │ ├── ScissorsIcon.ts
│ │ │ │ │ │ ├── Search.ts
│ │ │ │ │ │ ├── SearchIcon.ts
│ │ │ │ │ │ ├── SendIcon.ts
│ │ │ │ │ │ ├── ServerIcon.ts
│ │ │ │ │ │ ├── Settings2Icon.ts
│ │ │ │ │ │ ├── SettingsIcon.ts
│ │ │ │ │ │ ├── ShareIcon.ts
│ │ │ │ │ │ ├── ShieldIcon.ts
│ │ │ │ │ │ ├── ShoppingBagIcon.ts
│ │ │ │ │ │ ├── SlidersHorizontalIcon.ts
│ │ │ │ │ │ ├── SmileIcon.ts
│ │ │ │ │ │ ├── SparklesIcon.ts
│ │ │ │ │ │ ├── StarIcon.ts
│ │ │ │ │ │ ├── SunIcon.ts
│ │ │ │ │ │ ├── TableIcon.ts
│ │ │ │ │ │ ├── TagIcon.ts
│ │ │ │ │ │ ├── TerminalIcon.ts
│ │ │ │ │ │ ├── TerminalSquareIcon.ts
│ │ │ │ │ │ ├── Trash2Icon.ts
│ │ │ │ │ │ ├── TrashIcon.ts
│ │ │ │ │ │ ├── TrendingUpIcon.ts
│ │ │ │ │ │ ├── TriangleAlertIcon.ts
│ │ │ │ │ │ ├── UnderlineIcon.ts
│ │ │ │ │ │ ├── UploadCloudIcon.ts
│ │ │ │ │ │ ├── UploadIcon.ts
│ │ │ │ │ │ ├── UserIcon.ts
│ │ │ │ │ │ ├── UserRoundXIcon.ts
│ │ │ │ │ │ ├── VolumeX.ts
│ │ │ │ │ │ ├── WalletIcon.ts
│ │ │ │ │ │ ├── WandIcon.ts
│ │ │ │ │ │ ├── XIcon.ts
│ │ │ │ │ │ ├── ZapIcon.ts
│ │ │ │ │ │ ├── ZoomInIcon.ts
│ │ │ │ │ │ ├── ZoomOutIcon.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── __phosphor__/
│ │ │ │ │ │ ├── AppWindowIcon.ts
│ │ │ │ │ │ ├── ArchiveIcon.ts
│ │ │ │ │ │ ├── ArrowCircleLeftIcon.ts
│ │ │ │ │ │ ├── ArrowClockwiseIcon.ts
│ │ │ │ │ │ ├── ArrowDownIcon.ts
│ │ │ │ │ │ ├── ArrowLeftIcon.ts
│ │ │ │ │ │ ├── ArrowRightIcon.ts
│ │ │ │ │ │ ├── ArrowSquareOutIcon.ts
│ │ │ │ │ │ ├── ArrowUpIcon.ts
│ │ │ │ │ │ ├── ArrowUpRightIcon.ts
│ │ │ │ │ │ ├── ArrowsHorizontalIcon.ts
│ │ │ │ │ │ ├── ArrowsVerticalIcon.ts
│ │ │ │ │ │ ├── BagIcon.ts
│ │ │ │ │ │ ├── BankIcon.ts
│ │ │ │ │ │ ├── BellIcon.ts
│ │ │ │ │ │ ├── BluetoothIcon.ts
│ │ │ │ │ │ ├── BookOpenIcon.ts
│ │ │ │ │ │ ├── BookmarkIcon.ts
│ │ │ │ │ │ ├── CalculatorIcon.ts
│ │ │ │ │ │ ├── CalendarBlankIcon.ts
│ │ │ │ │ │ ├── CalendarIcon.ts
│ │ │ │ │ │ ├── CalendarPlusIcon.ts
│ │ │ │ │ │ ├── CaretDownIcon.ts
│ │ │ │ │ │ ├── CaretLeftIcon.ts
│ │ │ │ │ │ ├── CaretRightIcon.ts
│ │ │ │ │ │ ├── CaretUpDownIcon.ts
│ │ │ │ │ │ ├── CaretUpIcon.ts
│ │ │ │ │ │ ├── ChartBarIcon.ts
│ │ │ │ │ │ ├── ChartLineIcon.ts
│ │ │ │ │ │ ├── ChartPieIcon.ts
│ │ │ │ │ │ ├── ChatCircleIcon.ts
│ │ │ │ │ │ ├── CheckCircleIcon.ts
│ │ │ │ │ │ ├── CheckIcon.ts
│ │ │ │ │ │ ├── CircleDashedIcon.ts
│ │ │ │ │ │ ├── CircleIcon.ts
│ │ │ │ │ │ ├── ClipboardIcon.ts
│ │ │ │ │ │ ├── ClockIcon.ts
│ │ │ │ │ │ ├── CloudArrowUpIcon.ts
│ │ │ │ │ │ ├── CodeIcon.ts
│ │ │ │ │ │ ├── CopyIcon.ts
│ │ │ │ │ │ ├── CornersInIcon.ts
│ │ │ │ │ │ ├── CornersOutIcon.ts
│ │ │ │ │ │ ├── CreditCardIcon.ts
│ │ │ │ │ │ ├── CropIcon.ts
│ │ │ │ │ │ ├── CubeIcon.ts
│ │ │ │ │ │ ├── CurrencyCircleDollarIcon.ts
│ │ │ │ │ │ ├── DotsThreeIcon.ts
│ │ │ │ │ │ ├── DotsThreeOutlineIcon.ts
│ │ │ │ │ │ ├── DotsThreeVerticalIcon.ts
│ │ │ │ │ │ ├── DownloadIcon.ts
│ │ │ │ │ │ ├── EnvelopeIcon.ts
│ │ │ │ │ │ ├── EyeIcon.ts
│ │ │ │ │ │ ├── EyeSlashIcon.ts
│ │ │ │ │ │ ├── FileCodeIcon.ts
│ │ │ │ │ │ ├── FileIcon.ts
│ │ │ │ │ │ ├── FileTextIcon.ts
│ │ │ │ │ │ ├── FloppyDiskIcon.ts
│ │ │ │ │ │ ├── FolderIcon.ts
│ │ │ │ │ │ ├── FolderOpenIcon.ts
│ │ │ │ │ │ ├── FolderPlusIcon.ts
│ │ │ │ │ │ ├── GearIcon.ts
│ │ │ │ │ │ ├── GitBranchIcon.ts
│ │ │ │ │ │ ├── GlobeIcon.ts
│ │ │ │ │ │ ├── GridFourIcon.ts
│ │ │ │ │ │ ├── HandPointingIcon.ts
│ │ │ │ │ │ ├── HardDrivesIcon.ts
│ │ │ │ │ │ ├── HeartIcon.ts
│ │ │ │ │ │ ├── HouseIcon.ts
│ │ │ │ │ │ ├── ImageIcon.ts
│ │ │ │ │ │ ├── InfoIcon.ts
│ │ │ │ │ │ ├── KeyboardIcon.ts
│ │ │ │ │ │ ├── LayoutIcon.ts
│ │ │ │ │ │ ├── LightbulbIcon.ts
│ │ │ │ │ │ ├── LightningIcon.ts
│ │ │ │ │ │ ├── LinkIcon.ts
│ │ │ │ │ │ ├── ListIcon.ts
│ │ │ │ │ │ ├── ListPlusIcon.ts
│ │ │ │ │ │ ├── MagicWandIcon.ts
│ │ │ │ │ │ ├── MagnifyingGlassIcon.ts
│ │ │ │ │ │ ├── MagnifyingGlassMinusIcon.ts
│ │ │ │ │ │ ├── MagnifyingGlassPlusIcon.ts
│ │ │ │ │ │ ├── MapTrifoldIcon.ts
│ │ │ │ │ │ ├── MicrophoneIcon.ts
│ │ │ │ │ │ ├── MinusIcon.ts
│ │ │ │ │ │ ├── MonitorIcon.ts
│ │ │ │ │ │ ├── MoonIcon.ts
│ │ │ │ │ │ ├── PaletteIcon.ts
│ │ │ │ │ │ ├── PaperPlaneTiltIcon.ts
│ │ │ │ │ │ ├── PaperclipIcon.ts
│ │ │ │ │ │ ├── PencilIcon.ts
│ │ │ │ │ │ ├── PlusIcon.ts
│ │ │ │ │ │ ├── PulseIcon.ts
│ │ │ │ │ │ ├── QuestionIcon.ts
│ │ │ │ │ │ ├── RecordIcon.ts
│ │ │ │ │ │ ├── RobotIcon.ts
│ │ │ │ │ │ ├── ScissorsIcon.ts
│ │ │ │ │ │ ├── ShareIcon.ts
│ │ │ │ │ │ ├── ShieldIcon.ts
│ │ │ │ │ │ ├── SidebarIcon.ts
│ │ │ │ │ │ ├── SignOutIcon.ts
│ │ │ │ │ │ ├── SlidersHorizontalIcon.ts
│ │ │ │ │ │ ├── SmileyIcon.ts
│ │ │ │ │ │ ├── SparkleIcon.ts
│ │ │ │ │ │ ├── SpeakerSlashIcon.ts
│ │ │ │ │ │ ├── SpinnerIcon.ts
│ │ │ │ │ │ ├── StarIcon.ts
│ │ │ │ │ │ ├── SunIcon.ts
│ │ │ │ │ │ ├── TableIcon.ts
│ │ │ │ │ │ ├── TagIcon.ts
│ │ │ │ │ │ ├── TerminalIcon.ts
│ │ │ │ │ │ ├── TextBIcon.ts
│ │ │ │ │ │ ├── TextItalicIcon.ts
│ │ │ │ │ │ ├── TextTIcon.ts
│ │ │ │ │ │ ├── TextUnderlineIcon.ts
│ │ │ │ │ │ ├── TranslateIcon.ts
│ │ │ │ │ │ ├── TrashIcon.ts
│ │ │ │ │ │ ├── TrayIcon.ts
│ │ │ │ │ │ ├── TrendUpIcon.ts
│ │ │ │ │ │ ├── UploadIcon.ts
│ │ │ │ │ │ ├── UserIcon.ts
│ │ │ │ │ │ ├── UserMinusIcon.ts
│ │ │ │ │ │ ├── WalletIcon.ts
│ │ │ │ │ │ ├── WarningCircleIcon.ts
│ │ │ │ │ │ ├── WarningIcon.ts
│ │ │ │ │ │ ├── XCircleIcon.ts
│ │ │ │ │ │ ├── XIcon.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── __remixicon__/
│ │ │ │ │ │ ├── RiAddBoxLine.ts
│ │ │ │ │ │ ├── RiAddLine.ts
│ │ │ │ │ │ ├── RiAlertLine.ts
│ │ │ │ │ │ ├── RiArchiveLine.ts
│ │ │ │ │ │ ├── RiArrowDownLine.ts
│ │ │ │ │ │ ├── RiArrowDownSLine.ts
│ │ │ │ │ │ ├── RiArrowLeftCircleLine.ts
│ │ │ │ │ │ ├── RiArrowLeftLine.ts
│ │ │ │ │ │ ├── RiArrowLeftSLine.ts
│ │ │ │ │ │ ├── RiArrowRightLine.ts
│ │ │ │ │ │ ├── RiArrowRightSLine.ts
│ │ │ │ │ │ ├── RiArrowRightUpLine.ts
│ │ │ │ │ │ ├── RiArrowUpDownLine.ts
│ │ │ │ │ │ ├── RiArrowUpLine.ts
│ │ │ │ │ │ ├── RiArrowUpSLine.ts
│ │ │ │ │ │ ├── RiAttachmentLine.ts
│ │ │ │ │ │ ├── RiBankCardLine.ts
│ │ │ │ │ │ ├── RiBankLine.ts
│ │ │ │ │ │ ├── RiBarChartLine.ts
│ │ │ │ │ │ ├── RiBluetoothLine.ts
│ │ │ │ │ │ ├── RiBold.ts
│ │ │ │ │ │ ├── RiBookOpenLine.ts
│ │ │ │ │ │ ├── RiBookmarkLine.ts
│ │ │ │ │ │ ├── RiBox1Line.ts
│ │ │ │ │ │ ├── RiCalculatorLine.ts
│ │ │ │ │ │ ├── RiCalendarCheckLine.ts
│ │ │ │ │ │ ├── RiCalendarLine.ts
│ │ │ │ │ │ ├── RiChat1Line.ts
│ │ │ │ │ │ ├── RiCheckLine.ts
│ │ │ │ │ │ ├── RiCheckboxCircleLine.ts
│ │ │ │ │ │ ├── RiCircleLine.ts
│ │ │ │ │ │ ├── RiClipboardLine.ts
│ │ │ │ │ │ ├── RiCloseCircleLine.ts
│ │ │ │ │ │ ├── RiCloseLine.ts
│ │ │ │ │ │ ├── RiClosedCaptioningLine.ts
│ │ │ │ │ │ ├── RiCloudLine.ts
│ │ │ │ │ │ ├── RiCodeLine.ts
│ │ │ │ │ │ ├── RiComputerLine.ts
│ │ │ │ │ │ ├── RiContractUpDownLine.ts
│ │ │ │ │ │ ├── RiCropLine.ts
│ │ │ │ │ │ ├── RiCursorLine.ts
│ │ │ │ │ │ ├── RiDeleteBinLine.ts
│ │ │ │ │ │ ├── RiDownloadLine.ts
│ │ │ │ │ │ ├── RiEmotionLine.ts
│ │ │ │ │ │ ├── RiErrorWarningLine.ts
│ │ │ │ │ │ ├── RiExpandDiagonalLine.ts
│ │ │ │ │ │ ├── RiExpandUpDownLine.ts
│ │ │ │ │ │ ├── RiExternalLinkLine.ts
│ │ │ │ │ │ ├── RiEyeLine.ts
│ │ │ │ │ │ ├── RiEyeOffLine.ts
│ │ │ │ │ │ ├── RiFileCodeLine.ts
│ │ │ │ │ │ ├── RiFileCopyLine.ts
│ │ │ │ │ │ ├── RiFileLine.ts
│ │ │ │ │ │ ├── RiFileTextLine.ts
│ │ │ │ │ │ ├── RiFlashlightLine.ts
│ │ │ │ │ │ ├── RiFlipHorizontalLine.ts
│ │ │ │ │ │ ├── RiFlipVerticalLine.ts
│ │ │ │ │ │ ├── RiFolderAddLine.ts
│ │ │ │ │ │ ├── RiFolderLine.ts
│ │ │ │ │ │ ├── RiFolderOpenLine.ts
│ │ │ │ │ │ ├── RiGitBranchLine.ts
│ │ │ │ │ │ ├── RiGlobalLine.ts
│ │ │ │ │ │ ├── RiGridLine.ts
│ │ │ │ │ │ ├── RiHardDriveLine.ts
│ │ │ │ │ │ ├── RiHeartLine.ts
│ │ │ │ │ │ ├── RiHomeLine.ts
│ │ │ │ │ │ ├── RiImageLine.ts
│ │ │ │ │ │ ├── RiInboxLine.ts
│ │ │ │ │ │ ├── RiInformationLine.ts
│ │ │ │ │ │ ├── RiItalic.ts
│ │ │ │ │ │ ├── RiKeyboardLine.ts
│ │ │ │ │ │ ├── RiLayoutLine.ts
│ │ │ │ │ │ ├── RiLightbulbLine.ts
│ │ │ │ │ │ ├── RiLineChartLine.ts
│ │ │ │ │ │ ├── RiLink.ts
│ │ │ │ │ │ ├── RiLinksLine.ts
│ │ │ │ │ │ ├── RiListUnordered.ts
│ │ │ │ │ │ ├── RiLoaderLine.ts
│ │ │ │ │ │ ├── RiLogoutBoxLine.ts
│ │ │ │ │ │ ├── RiMagicLine.ts
│ │ │ │ │ │ ├── RiMailCheckLine.ts
│ │ │ │ │ │ ├── RiMailLine.ts
│ │ │ │ │ │ ├── RiMapLine.ts
│ │ │ │ │ │ ├── RiMenuLine.ts
│ │ │ │ │ │ ├── RiMicLine.ts
│ │ │ │ │ │ ├── RiMoneyDollarCircleLine.ts
│ │ │ │ │ │ ├── RiMoonLine.ts
│ │ │ │ │ │ ├── RiMore2Line.ts
│ │ │ │ │ │ ├── RiMoreLine.ts
│ │ │ │ │ │ ├── RiNotificationLine.ts
│ │ │ │ │ │ ├── RiPaletteLine.ts
│ │ │ │ │ │ ├── RiPencilLine.ts
│ │ │ │ │ │ ├── RiPieChartLine.ts
│ │ │ │ │ │ ├── RiPriceTagLine.ts
│ │ │ │ │ │ ├── RiPulseLine.ts
│ │ │ │ │ │ ├── RiQuestionLine.ts
│ │ │ │ │ │ ├── RiRecordCircleLine.ts
│ │ │ │ │ │ ├── RiRefreshLine.ts
│ │ │ │ │ │ ├── RiRobotLine.ts
│ │ │ │ │ │ ├── RiSaveLine.ts
│ │ │ │ │ │ ├── RiScissorsLine.ts
│ │ │ │ │ │ ├── RiSearchEyeLine.ts
│ │ │ │ │ │ ├── RiSearchLine.ts
│ │ │ │ │ │ ├── RiSendPlaneLine.ts
│ │ │ │ │ │ ├── RiServerLine.ts
│ │ │ │ │ │ ├── RiSettingsLine.ts
│ │ │ │ │ │ ├── RiShareLine.ts
│ │ │ │ │ │ ├── RiShieldLine.ts
│ │ │ │ │ │ ├── RiShoppingBagLine.ts
│ │ │ │ │ │ ├── RiSideBarLine.ts
│ │ │ │ │ │ ├── RiSparklingLine.ts
│ │ │ │ │ │ ├── RiStarLine.ts
│ │ │ │ │ │ ├── RiSubtractLine.ts
│ │ │ │ │ │ ├── RiSunLine.ts
│ │ │ │ │ │ ├── RiTableLine.ts
│ │ │ │ │ │ ├── RiTerminalBoxLine.ts
│ │ │ │ │ │ ├── RiTimeLine.ts
│ │ │ │ │ │ ├── RiTranslate.ts
│ │ │ │ │ │ ├── RiUnderline.ts
│ │ │ │ │ │ ├── RiUploadCloudLine.ts
│ │ │ │ │ │ ├── RiUploadLine.ts
│ │ │ │ │ │ ├── RiUserLine.ts
│ │ │ │ │ │ ├── RiUserMinusLine.ts
│ │ │ │ │ │ ├── RiUserUnfollowLine.ts
│ │ │ │ │ │ ├── RiVolumeMuteLine.ts
│ │ │ │ │ │ ├── RiWalletLine.ts
│ │ │ │ │ │ ├── RiWindowLine.ts
│ │ │ │ │ │ ├── RiZoomInLine.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── __tabler__/
│ │ │ │ │ │ ├── IconActivity.ts
│ │ │ │ │ │ ├── IconAdjustmentsHorizontal.ts
│ │ │ │ │ │ ├── IconAlertOctagon.ts
│ │ │ │ │ │ ├── IconAlertTriangle.ts
│ │ │ │ │ │ ├── IconAppWindow.ts
│ │ │ │ │ │ ├── IconArchive.ts
│ │ │ │ │ │ ├── IconArrowDown.ts
│ │ │ │ │ │ ├── IconArrowLeft.ts
│ │ │ │ │ │ ├── IconArrowRight.ts
│ │ │ │ │ │ ├── IconArrowUp.ts
│ │ │ │ │ │ ├── IconArrowUpRight.ts
│ │ │ │ │ │ ├── IconBell.ts
│ │ │ │ │ │ ├── IconBluetooth.ts
│ │ │ │ │ │ ├── IconBold.ts
│ │ │ │ │ │ ├── IconBolt.ts
│ │ │ │ │ │ ├── IconBook.ts
│ │ │ │ │ │ ├── IconBookmark.ts
│ │ │ │ │ │ ├── IconBorderCorners.ts
│ │ │ │ │ │ ├── IconBox.ts
│ │ │ │ │ │ ├── IconBrandJavascript.ts
│ │ │ │ │ │ ├── IconBuildingBank.ts
│ │ │ │ │ │ ├── IconBulb.ts
│ │ │ │ │ │ ├── IconCalculator.ts
│ │ │ │ │ │ ├── IconCalendar.ts
│ │ │ │ │ │ ├── IconCalendarPlus.ts
│ │ │ │ │ │ ├── IconChartBar.ts
│ │ │ │ │ │ ├── IconChartLine.ts
│ │ │ │ │ │ ├── IconChartPie.ts
│ │ │ │ │ │ ├── IconCheck.ts
│ │ │ │ │ │ ├── IconChevronDown.ts
│ │ │ │ │ │ ├── IconChevronLeft.ts
│ │ │ │ │ │ ├── IconChevronRight.ts
│ │ │ │ │ │ ├── IconChevronUp.ts
│ │ │ │ │ │ ├── IconCircle.ts
│ │ │ │ │ │ ├── IconCircleArrowLeft.ts
│ │ │ │ │ │ ├── IconCircleCheck.ts
│ │ │ │ │ │ ├── IconCircleCheckFilled.ts
│ │ │ │ │ │ ├── IconCircleDashed.ts
│ │ │ │ │ │ ├── IconClipboard.ts
│ │ │ │ │ │ ├── IconClock.ts
│ │ │ │ │ │ ├── IconClockHour2.ts
│ │ │ │ │ │ ├── IconCloudCog.ts
│ │ │ │ │ │ ├── IconCloudUpload.ts
│ │ │ │ │ │ ├── IconCode.ts
│ │ │ │ │ │ ├── IconCoin.ts
│ │ │ │ │ │ ├── IconCopy.ts
│ │ │ │ │ │ ├── IconCreditCard.ts
│ │ │ │ │ │ ├── IconCut.ts
│ │ │ │ │ │ ├── IconDeviceDesktop.ts
│ │ │ │ │ │ ├── IconDeviceFloppy.ts
│ │ │ │ │ │ ├── IconDots.ts
│ │ │ │ │ │ ├── IconDotsVertical.ts
│ │ │ │ │ │ ├── IconDownload.ts
│ │ │ │ │ │ ├── IconExclamationCircle.ts
│ │ │ │ │ │ ├── IconExternalLink.ts
│ │ │ │ │ │ ├── IconEye.ts
│ │ │ │ │ │ ├── IconEyeClosed.ts
│ │ │ │ │ │ ├── IconFile.ts
│ │ │ │ │ │ ├── IconFileCode.ts
│ │ │ │ │ │ ├── IconFileText.ts
│ │ │ │ │ │ ├── IconFilterPlus.ts
│ │ │ │ │ │ ├── IconFlipHorizontal.ts
│ │ │ │ │ │ ├── IconFlipVertical.ts
│ │ │ │ │ │ ├── IconFolder.ts
│ │ │ │ │ │ ├── IconFolderOpen.ts
│ │ │ │ │ │ ├── IconFolderPlus.ts
│ │ │ │ │ │ ├── IconFolderSearch.ts
│ │ │ │ │ │ ├── IconFrame.ts
│ │ │ │ │ │ ├── IconGitBranch.ts
│ │ │ │ │ │ ├── IconHeadphones.ts
│ │ │ │ │ │ ├── IconHeart.ts
│ │ │ │ │ │ ├── IconHelpCircle.ts
│ │ │ │ │ │ ├── IconHome.ts
│ │ │ │ │ │ ├── IconInbox.ts
│ │ │ │ │ │ ├── IconInfoCircle.ts
│ │ │ │ │ │ ├── IconItalic.ts
│ │ │ │ │ │ ├── IconKeyboard.ts
│ │ │ │ │ │ ├── IconLanguage.ts
│ │ │ │ │ │ ├── IconLayout.ts
│ │ │ │ │ │ ├── IconLayoutGrid.ts
│ │ │ │ │ │ ├── IconLayoutSidebar.ts
│ │ │ │ │ │ ├── IconLink.ts
│ │ │ │ │ │ ├── IconList.ts
│ │ │ │ │ │ ├── IconLoader.ts
│ │ │ │ │ │ ├── IconLogout.ts
│ │ │ │ │ │ ├── IconMail.ts
│ │ │ │ │ │ ├── IconMailCheck.ts
│ │ │ │ │ │ ├── IconMap.ts
│ │ │ │ │ │ ├── IconMenu.ts
│ │ │ │ │ │ ├── IconMenu2.ts
│ │ │ │ │ │ ├── IconMessage.ts
│ │ │ │ │ │ ├── IconMicrophone.ts
│ │ │ │ │ │ ├── IconMinimize.ts
│ │ │ │ │ │ ├── IconMinus.ts
│ │ │ │ │ │ ├── IconMoodSmile.ts
│ │ │ │ │ │ ├── IconMoon.ts
│ │ │ │ │ │ ├── IconPalette.ts
│ │ │ │ │ │ ├── IconPaperclip.ts
│ │ │ │ │ │ ├── IconPencil.ts
│ │ │ │ │ │ ├── IconPhoto.ts
│ │ │ │ │ │ ├── IconPlayerRecordFilled.ts
│ │ │ │ │ │ ├── IconPlus.ts
│ │ │ │ │ │ ├── IconPointer.ts
│ │ │ │ │ │ ├── IconRefresh.ts
│ │ │ │ │ │ ├── IconRobot.ts
│ │ │ │ │ │ ├── IconRosetteDiscountCheck.ts
│ │ │ │ │ │ ├── IconRotateClockwise2.ts
│ │ │ │ │ │ ├── IconSearch.ts
│ │ │ │ │ │ ├── IconSelector.ts
│ │ │ │ │ │ ├── IconSend.ts
│ │ │ │ │ │ ├── IconServer.ts
│ │ │ │ │ │ ├── IconServerSpark.ts
│ │ │ │ │ │ ├── IconSettings.ts
│ │ │ │ │ │ ├── IconShare.ts
│ │ │ │ │ │ ├── IconShare2.ts
│ │ │ │ │ │ ├── IconShield.ts
│ │ │ │ │ │ ├── IconShoppingBag.ts
│ │ │ │ │ │ ├── IconSparkles.ts
│ │ │ │ │ │ ├── IconStar.ts
│ │ │ │ │ │ ├── IconSun.ts
│ │ │ │ │ │ ├── IconTable.ts
│ │ │ │ │ │ ├── IconTag.ts
│ │ │ │ │ │ ├── IconTerminal.ts
│ │ │ │ │ │ ├── IconTerminal2.ts
│ │ │ │ │ │ ├── IconTextCaption.ts
│ │ │ │ │ │ ├── IconTrash.ts
│ │ │ │ │ │ ├── IconTrendingUp.ts
│ │ │ │ │ │ ├── IconUnderline.ts
│ │ │ │ │ │ ├── IconUpload.ts
│ │ │ │ │ │ ├── IconUser.ts
│ │ │ │ │ │ ├── IconUserX.ts
│ │ │ │ │ │ ├── IconVolume.ts
│ │ │ │ │ │ ├── IconWallet.ts
│ │ │ │ │ │ ├── IconWand.ts
│ │ │ │ │ │ ├── IconWaveSine.ts
│ │ │ │ │ │ ├── IconWorld.ts
│ │ │ │ │ │ ├── IconX.ts
│ │ │ │ │ │ ├── IconZoomIn.ts
│ │ │ │ │ │ ├── IconZoomOut.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ └── logos/
│ │ │ │ │ ├── hugeicons.svelte
│ │ │ │ │ ├── lucide.svelte
│ │ │ │ │ ├── phosphor.svelte
│ │ │ │ │ ├── remixicon.svelte
│ │ │ │ │ └── tabler.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── lib/
│ │ │ │ │ ├── casing.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── registry-base-colors.ts
│ │ │ │ ├── registry-block-meta.ts
│ │ │ │ ├── registry-categories.ts
│ │ │ │ ├── registry-colors.ts
│ │ │ │ ├── registry-utils.ts
│ │ │ │ ├── schema.ts
│ │ │ │ ├── styles/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── icons/
│ │ │ │ │ │ ├── lyra.svelte
│ │ │ │ │ │ ├── maia.svelte
│ │ │ │ │ │ ├── mira.svelte
│ │ │ │ │ │ ├── nova.svelte
│ │ │ │ │ │ └── vega.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── style-lyra.css
│ │ │ │ │ ├── style-maia.css
│ │ │ │ │ ├── style-mira.css
│ │ │ │ │ ├── style-nova.css
│ │ │ │ │ └── style-vega.css
│ │ │ │ ├── templates.ts
│ │ │ │ ├── themes.ts
│ │ │ │ └── ui/
│ │ │ │ ├── accordion/
│ │ │ │ │ ├── accordion-content.svelte
│ │ │ │ │ ├── accordion-item.svelte
│ │ │ │ │ ├── accordion-trigger.svelte
│ │ │ │ │ ├── accordion.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── alert/
│ │ │ │ │ ├── alert-action.svelte
│ │ │ │ │ ├── alert-description.svelte
│ │ │ │ │ ├── alert-title.svelte
│ │ │ │ │ ├── alert.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── alert-dialog/
│ │ │ │ │ ├── alert-dialog-action.svelte
│ │ │ │ │ ├── alert-dialog-cancel.svelte
│ │ │ │ │ ├── alert-dialog-content.svelte
│ │ │ │ │ ├── alert-dialog-description.svelte
│ │ │ │ │ ├── alert-dialog-footer.svelte
│ │ │ │ │ ├── alert-dialog-header.svelte
│ │ │ │ │ ├── alert-dialog-media.svelte
│ │ │ │ │ ├── alert-dialog-overlay.svelte
│ │ │ │ │ ├── alert-dialog-portal.svelte
│ │ │ │ │ ├── alert-dialog-title.svelte
│ │ │ │ │ ├── alert-dialog-trigger.svelte
│ │ │ │ │ ├── alert-dialog.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── aspect-ratio/
│ │ │ │ │ ├── aspect-ratio.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── avatar/
│ │ │ │ │ ├── avatar-badge.svelte
│ │ │ │ │ ├── avatar-fallback.svelte
│ │ │ │ │ ├── avatar-group-count.svelte
│ │ │ │ │ ├── avatar-group.svelte
│ │ │ │ │ ├── avatar-image.svelte
│ │ │ │ │ ├── avatar.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── badge/
│ │ │ │ │ ├── badge.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── breadcrumb/
│ │ │ │ │ ├── breadcrumb-ellipsis.svelte
│ │ │ │ │ ├── breadcrumb-item.svelte
│ │ │ │ │ ├── breadcrumb-link.svelte
│ │ │ │ │ ├── breadcrumb-list.svelte
│ │ │ │ │ ├── breadcrumb-page.svelte
│ │ │ │ │ ├── breadcrumb-separator.svelte
│ │ │ │ │ ├── breadcrumb.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── button/
│ │ │ │ │ ├── button.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── button-group/
│ │ │ │ │ ├── button-group-separator.svelte
│ │ │ │ │ ├── button-group-text.svelte
│ │ │ │ │ ├── button-group.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── calendar/
│ │ │ │ │ ├── calendar-caption.svelte
│ │ │ │ │ ├── calendar-cell.svelte
│ │ │ │ │ ├── calendar-day.svelte
│ │ │ │ │ ├── calendar-grid-body.svelte
│ │ │ │ │ ├── calendar-grid-head.svelte
│ │ │ │ │ ├── calendar-grid-row.svelte
│ │ │ │ │ ├── calendar-grid.svelte
│ │ │ │ │ ├── calendar-head-cell.svelte
│ │ │ │ │ ├── calendar-header.svelte
│ │ │ │ │ ├── calendar-heading.svelte
│ │ │ │ │ ├── calendar-month-select.svelte
│ │ │ │ │ ├── calendar-month.svelte
│ │ │ │ │ ├── calendar-months.svelte
│ │ │ │ │ ├── calendar-nav.svelte
│ │ │ │ │ ├── calendar-next-button.svelte
│ │ │ │ │ ├── calendar-prev-button.svelte
│ │ │ │ │ ├── calendar-year-select.svelte
│ │ │ │ │ ├── calendar.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── card/
│ │ │ │ │ ├── card-action.svelte
│ │ │ │ │ ├── card-content.svelte
│ │ │ │ │ ├── card-description.svelte
│ │ │ │ │ ├── card-footer.svelte
│ │ │ │ │ ├── card-header.svelte
│ │ │ │ │ ├── card-title.svelte
│ │ │ │ │ ├── card.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── carousel/
│ │ │ │ │ ├── carousel-content.svelte
│ │ │ │ │ ├── carousel-item.svelte
│ │ │ │ │ ├── carousel-next.svelte
│ │ │ │ │ ├── carousel-previous.svelte
│ │ │ │ │ ├── carousel.svelte
│ │ │ │ │ ├── context.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── chart/
│ │ │ │ │ ├── chart-container.svelte
│ │ │ │ │ ├── chart-style.svelte
│ │ │ │ │ ├── chart-tooltip.svelte
│ │ │ │ │ ├── chart-utils.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── checkbox/
│ │ │ │ │ ├── checkbox.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── collapsible/
│ │ │ │ │ ├── collapsible-content.svelte
│ │ │ │ │ ├── collapsible-trigger.svelte
│ │ │ │ │ ├── collapsible.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── command/
│ │ │ │ │ ├── command-dialog.svelte
│ │ │ │ │ ├── command-empty.svelte
│ │ │ │ │ ├── command-group.svelte
│ │ │ │ │ ├── command-input.svelte
│ │ │ │ │ ├── command-item.svelte
│ │ │ │ │ ├── command-link-item.svelte
│ │ │ │ │ ├── command-list.svelte
│ │ │ │ │ ├── command-loading.svelte
│ │ │ │ │ ├── command-separator.svelte
│ │ │ │ │ ├── command-shortcut.svelte
│ │ │ │ │ ├── command.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── context-menu/
│ │ │ │ │ ├── context-menu-checkbox-item.svelte
│ │ │ │ │ ├── context-menu-content.svelte
│ │ │ │ │ ├── context-menu-group-heading.svelte
│ │ │ │ │ ├── context-menu-group.svelte
│ │ │ │ │ ├── context-menu-item.svelte
│ │ │ │ │ ├── context-menu-label.svelte
│ │ │ │ │ ├── context-menu-portal.svelte
│ │ │ │ │ ├── context-menu-radio-group.svelte
│ │ │ │ │ ├── context-menu-radio-item.svelte
│ │ │ │ │ ├── context-menu-separator.svelte
│ │ │ │ │ ├── context-menu-shortcut.svelte
│ │ │ │ │ ├── context-menu-sub-content.svelte
│ │ │ │ │ ├── context-menu-sub-trigger.svelte
│ │ │ │ │ ├── context-menu-sub.svelte
│ │ │ │ │ ├── context-menu-trigger.svelte
│ │ │ │ │ ├── context-menu.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── data-table/
│ │ │ │ │ ├── data-table.svelte.ts
│ │ │ │ │ ├── flex-render.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── render-helpers.ts
│ │ │ │ ├── dialog/
│ │ │ │ │ ├── dialog-close.svelte
│ │ │ │ │ ├── dialog-content.svelte
│ │ │ │ │ ├── dialog-description.svelte
│ │ │ │ │ ├── dialog-footer.svelte
│ │ │ │ │ ├── dialog-header.svelte
│ │ │ │ │ ├── dialog-overlay.svelte
│ │ │ │ │ ├── dialog-portal.svelte
│ │ │ │ │ ├── dialog-title.svelte
│ │ │ │ │ ├── dialog-trigger.svelte
│ │ │ │ │ ├── dialog.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── drawer/
│ │ │ │ │ ├── drawer-close.svelte
│ │ │ │ │ ├── drawer-content.svelte
│ │ │ │ │ ├── drawer-description.svelte
│ │ │ │ │ ├── drawer-footer.svelte
│ │ │ │ │ ├── drawer-header.svelte
│ │ │ │ │ ├── drawer-nested.svelte
│ │ │ │ │ ├── drawer-overlay.svelte
│ │ │ │ │ ├── drawer-portal.svelte
│ │ │ │ │ ├── drawer-title.svelte
│ │ │ │ │ ├── drawer-trigger.svelte
│ │ │ │ │ ├── drawer.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── dropdown-menu/
│ │ │ │ │ ├── dropdown-menu-checkbox-group.svelte
│ │ │ │ │ ├── dropdown-menu-checkbox-item.svelte
│ │ │ │ │ ├── dropdown-menu-content.svelte
│ │ │ │ │ ├── dropdown-menu-group-heading.svelte
│ │ │ │ │ ├── dropdown-menu-group.svelte
│ │ │ │ │ ├── dropdown-menu-item.svelte
│ │ │ │ │ ├── dropdown-menu-label.svelte
│ │ │ │ │ ├── dropdown-menu-portal.svelte
│ │ │ │ │ ├── dropdown-menu-radio-group.svelte
│ │ │ │ │ ├── dropdown-menu-radio-item.svelte
│ │ │ │ │ ├── dropdown-menu-separator.svelte
│ │ │ │ │ ├── dropdown-menu-shortcut.svelte
│ │ │ │ │ ├── dropdown-menu-sub-content.svelte
│ │ │ │ │ ├── dropdown-menu-sub-trigger.svelte
│ │ │ │ │ ├── dropdown-menu-sub.svelte
│ │ │ │ │ ├── dropdown-menu-trigger.svelte
│ │ │ │ │ ├── dropdown-menu.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── empty/
│ │ │ │ │ ├── empty-content.svelte
│ │ │ │ │ ├── empty-description.svelte
│ │ │ │ │ ├── empty-header.svelte
│ │ │ │ │ ├── empty-media.svelte
│ │ │ │ │ ├── empty-title.svelte
│ │ │ │ │ ├── empty.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── field/
│ │ │ │ │ ├── field-content.svelte
│ │ │ │ │ ├── field-description.svelte
│ │ │ │ │ ├── field-error.svelte
│ │ │ │ │ ├── field-group.svelte
│ │ │ │ │ ├── field-label.svelte
│ │ │ │ │ ├── field-legend.svelte
│ │ │ │ │ ├── field-separator.svelte
│ │ │ │ │ ├── field-set.svelte
│ │ │ │ │ ├── field-title.svelte
│ │ │ │ │ ├── field.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── form/
│ │ │ │ │ ├── form-button.svelte
│ │ │ │ │ ├── form-description.svelte
│ │ │ │ │ ├── form-element-field.svelte
│ │ │ │ │ ├── form-field-errors.svelte
│ │ │ │ │ ├── form-field.svelte
│ │ │ │ │ ├── form-fieldset.svelte
│ │ │ │ │ ├── form-label.svelte
│ │ │ │ │ ├── form-legend.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── hover-card/
│ │ │ │ │ ├── hover-card-content.svelte
│ │ │ │ │ ├── hover-card-portal.svelte
│ │ │ │ │ ├── hover-card-trigger.svelte
│ │ │ │ │ ├── hover-card.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── input/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── input.svelte
│ │ │ │ ├── input-group/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── input-group-addon.svelte
│ │ │ │ │ ├── input-group-button.svelte
│ │ │ │ │ ├── input-group-input.svelte
│ │ │ │ │ ├── input-group-text.svelte
│ │ │ │ │ ├── input-group-textarea.svelte
│ │ │ │ │ └── input-group.svelte
│ │ │ │ ├── input-otp/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── input-otp-group.svelte
│ │ │ │ │ ├── input-otp-separator.svelte
│ │ │ │ │ ├── input-otp-slot.svelte
│ │ │ │ │ └── input-otp.svelte
│ │ │ │ ├── item/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── item-actions.svelte
│ │ │ │ │ ├── item-content.svelte
│ │ │ │ │ ├── item-description.svelte
│ │ │ │ │ ├── item-footer.svelte
│ │ │ │ │ ├── item-group.svelte
│ │ │ │ │ ├── item-header.svelte
│ │ │ │ │ ├── item-media.svelte
│ │ │ │ │ ├── item-separator.svelte
│ │ │ │ │ ├── item-title.svelte
│ │ │ │ │ └── item.svelte
│ │ │ │ ├── kbd/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── kbd-group.svelte
│ │ │ │ │ └── kbd.svelte
│ │ │ │ ├── label/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── label.svelte
│ │ │ │ ├── menubar/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── menubar-checkbox-item.svelte
│ │ │ │ │ ├── menubar-content.svelte
│ │ │ │ │ ├── menubar-group-heading.svelte
│ │ │ │ │ ├── menubar-group.svelte
│ │ │ │ │ ├── menubar-item.svelte
│ │ │ │ │ ├── menubar-label.svelte
│ │ │ │ │ ├── menubar-menu.svelte
│ │ │ │ │ ├── menubar-portal.svelte
│ │ │ │ │ ├── menubar-radio-group.svelte
│ │ │ │ │ ├── menubar-radio-item.svelte
│ │ │ │ │ ├── menubar-separator.svelte
│ │ │ │ │ ├── menubar-shortcut.svelte
│ │ │ │ │ ├── menubar-sub-content.svelte
│ │ │ │ │ ├── menubar-sub-trigger.svelte
│ │ │ │ │ ├── menubar-sub.svelte
│ │ │ │ │ ├── menubar-trigger.svelte
│ │ │ │ │ └── menubar.svelte
│ │ │ │ ├── native-select/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── native-select-opt-group.svelte
│ │ │ │ │ ├── native-select-option.svelte
│ │ │ │ │ └── native-select.svelte
│ │ │ │ ├── navigation-menu/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── navigation-menu-content.svelte
│ │ │ │ │ ├── navigation-menu-indicator.svelte
│ │ │ │ │ ├── navigation-menu-item.svelte
│ │ │ │ │ ├── navigation-menu-link.svelte
│ │ │ │ │ ├── navigation-menu-list.svelte
│ │ │ │ │ ├── navigation-menu-trigger.svelte
│ │ │ │ │ ├── navigation-menu-viewport.svelte
│ │ │ │ │ └── navigation-menu.svelte
│ │ │ │ ├── pagination/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── pagination-content.svelte
│ │ │ │ │ ├── pagination-ellipsis.svelte
│ │ │ │ │ ├── pagination-item.svelte
│ │ │ │ │ ├── pagination-link.svelte
│ │ │ │ │ ├── pagination-next-button.svelte
│ │ │ │ │ ├── pagination-next.svelte
│ │ │ │ │ ├── pagination-prev-button.svelte
│ │ │ │ │ ├── pagination-previous.svelte
│ │ │ │ │ └── pagination.svelte
│ │ │ │ ├── popover/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── popover-close.svelte
│ │ │ │ │ ├── popover-content.svelte
│ │ │ │ │ ├── popover-description.svelte
│ │ │ │ │ ├── popover-header.svelte
│ │ │ │ │ ├── popover-portal.svelte
│ │ │ │ │ ├── popover-title.svelte
│ │ │ │ │ ├── popover-trigger.svelte
│ │ │ │ │ └── popover.svelte
│ │ │ │ ├── progress/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── progress.svelte
│ │ │ │ ├── radio-group/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── radio-group-item.svelte
│ │ │ │ │ └── radio-group.svelte
│ │ │ │ ├── range-calendar/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── range-calendar-caption.svelte
│ │ │ │ │ ├── range-calendar-cell.svelte
│ │ │ │ │ ├── range-calendar-day.svelte
│ │ │ │ │ ├── range-calendar-grid-body.svelte
│ │ │ │ │ ├── range-calendar-grid-head.svelte
│ │ │ │ │ ├── range-calendar-grid-row.svelte
│ │ │ │ │ ├── range-calendar-grid.svelte
│ │ │ │ │ ├── range-calendar-head-cell.svelte
│ │ │ │ │ ├── range-calendar-header.svelte
│ │ │ │ │ ├── range-calendar-heading.svelte
│ │ │ │ │ ├── range-calendar-month-select.svelte
│ │ │ │ │ ├── range-calendar-month.svelte
│ │ │ │ │ ├── range-calendar-months.svelte
│ │ │ │ │ ├── range-calendar-nav.svelte
│ │ │ │ │ ├── range-calendar-next-button.svelte
│ │ │ │ │ ├── range-calendar-prev-button.svelte
│ │ │ │ │ ├── range-calendar-year-select.svelte
│ │ │ │ │ └── range-calendar.svelte
│ │ │ │ ├── resizable/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── resizable-handle.svelte
│ │ │ │ │ └── resizable-pane-group.svelte
│ │ │ │ ├── scroll-area/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── scroll-area-scrollbar.svelte
│ │ │ │ │ └── scroll-area.svelte
│ │ │ │ ├── select/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── select-content.svelte
│ │ │ │ │ ├── select-group-heading.svelte
│ │ │ │ │ ├── select-group.svelte
│ │ │ │ │ ├── select-item.svelte
│ │ │ │ │ ├── select-label.svelte
│ │ │ │ │ ├── select-portal.svelte
│ │ │ │ │ ├── select-scroll-down-button.svelte
│ │ │ │ │ ├── select-scroll-up-button.svelte
│ │ │ │ │ ├── select-separator.svelte
│ │ │ │ │ ├── select-trigger.svelte
│ │ │ │ │ └── select.svelte
│ │ │ │ ├── separator/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── separator.svelte
│ │ │ │ ├── sheet/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── sheet-close.svelte
│ │ │ │ │ ├── sheet-content.svelte
│ │ │ │ │ ├── sheet-description.svelte
│ │ │ │ │ ├── sheet-footer.svelte
│ │ │ │ │ ├── sheet-header.svelte
│ │ │ │ │ ├── sheet-overlay.svelte
│ │ │ │ │ ├── sheet-portal.svelte
│ │ │ │ │ ├── sheet-title.svelte
│ │ │ │ │ ├── sheet-trigger.svelte
│ │ │ │ │ └── sheet.svelte
│ │ │ │ ├── sidebar/
│ │ │ │ │ ├── constants.ts
│ │ │ │ │ ├── context.svelte.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── sidebar-content.svelte
│ │ │ │ │ ├── sidebar-footer.svelte
│ │ │ │ │ ├── sidebar-group-action.svelte
│ │ │ │ │ ├── sidebar-group-content.svelte
│ │ │ │ │ ├── sidebar-group-label.svelte
│ │ │ │ │ ├── sidebar-group.svelte
│ │ │ │ │ ├── sidebar-header.svelte
│ │ │ │ │ ├── sidebar-input.svelte
│ │ │ │ │ ├── sidebar-inset.svelte
│ │ │ │ │ ├── sidebar-menu-action.svelte
│ │ │ │ │ ├── sidebar-menu-badge.svelte
│ │ │ │ │ ├── sidebar-menu-button.svelte
│ │ │ │ │ ├── sidebar-menu-item.svelte
│ │ │ │ │ ├── sidebar-menu-skeleton.svelte
│ │ │ │ │ ├── sidebar-menu-sub-button.svelte
│ │ │ │ │ ├── sidebar-menu-sub-item.svelte
│ │ │ │ │ ├── sidebar-menu-sub.svelte
│ │ │ │ │ ├── sidebar-menu.svelte
│ │ │ │ │ ├── sidebar-provider.svelte
│ │ │ │ │ ├── sidebar-rail.svelte
│ │ │ │ │ ├── sidebar-separator.svelte
│ │ │ │ │ ├── sidebar-trigger.svelte
│ │ │ │ │ └── sidebar.svelte
│ │ │ │ ├── skeleton/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── skeleton.svelte
│ │ │ │ ├── slider/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── slider.svelte
│ │ │ │ ├── sonner/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── sonner.svelte
│ │ │ │ ├── spinner/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── spinner.svelte
│ │ │ │ ├── switch/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── switch.svelte
│ │ │ │ ├── table/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── table-body.svelte
│ │ │ │ │ ├── table-caption.svelte
│ │ │ │ │ ├── table-cell.svelte
│ │ │ │ │ ├── table-footer.svelte
│ │ │ │ │ ├── table-head.svelte
│ │ │ │ │ ├── table-header.svelte
│ │ │ │ │ ├── table-row.svelte
│ │ │ │ │ └── table.svelte
│ │ │ │ ├── tabs/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── tabs-content.svelte
│ │ │ │ │ ├── tabs-list.svelte
│ │ │ │ │ ├── tabs-trigger.svelte
│ │ │ │ │ └── tabs.svelte
│ │ │ │ ├── textarea/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── textarea.svelte
│ │ │ │ ├── toggle/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── toggle.svelte
│ │ │ │ ├── toggle-group/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── toggle-group-item.svelte
│ │ │ │ │ └── toggle-group.svelte
│ │ │ │ └── tooltip/
│ │ │ │ ├── index.ts
│ │ │ │ ├── tooltip-content.svelte
│ │ │ │ ├── tooltip-portal.svelte
│ │ │ │ ├── tooltip-provider.svelte
│ │ │ │ ├── tooltip-trigger.svelte
│ │ │ │ └── tooltip.svelte
│ │ │ ├── themes.ts
│ │ │ ├── user-config.svelte.ts
│ │ │ └── utils.ts
│ │ ├── params/
│ │ │ └── view.ts
│ │ └── routes/
│ │ ├── (app)/
│ │ │ ├── (layout)/
│ │ │ │ ├── (create)/
│ │ │ │ │ ├── +layout@(app).svelte
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── action-menu.svelte
│ │ │ │ │ │ ├── base-color-picker.svelte
│ │ │ │ │ │ ├── copy-preset.svelte
│ │ │ │ │ │ ├── customizer-controls.svelte
│ │ │ │ │ │ ├── customizer.svelte
│ │ │ │ │ │ ├── example-wrapper.svelte
│ │ │ │ │ │ ├── example.svelte
│ │ │ │ │ │ ├── font-picker.svelte
│ │ │ │ │ │ ├── icon-library-picker.svelte
│ │ │ │ │ │ ├── initialize-dialog.svelte
│ │ │ │ │ │ ├── item-explorer.svelte
│ │ │ │ │ │ ├── lock-button.svelte
│ │ │ │ │ │ ├── main-menu.svelte
│ │ │ │ │ │ ├── menu-accent-picker.svelte
│ │ │ │ │ │ ├── menu-color-picker.svelte
│ │ │ │ │ │ ├── menu-icon-default.svelte
│ │ │ │ │ │ ├── menu-icon-inverted.svelte
│ │ │ │ │ │ ├── picker/
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ ├── picker-checkbox-item.svelte
│ │ │ │ │ │ │ ├── picker-content.svelte
│ │ │ │ │ │ │ ├── picker-group.svelte
│ │ │ │ │ │ │ ├── picker-item.svelte
│ │ │ │ │ │ │ ├── picker-label.svelte
│ │ │ │ │ │ │ ├── picker-radio-group.svelte
│ │ │ │ │ │ │ ├── picker-radio-item.svelte
│ │ │ │ │ │ │ ├── picker-separator.svelte
│ │ │ │ │ │ │ ├── picker-shortcut.svelte
│ │ │ │ │ │ │ ├── picker-trigger.svelte
│ │ │ │ │ │ │ └── picker.svelte
│ │ │ │ │ │ ├── preset-picker.svelte
│ │ │ │ │ │ ├── preview.svelte
│ │ │ │ │ │ ├── radius-picker.svelte
│ │ │ │ │ │ ├── random-button.svelte
│ │ │ │ │ │ ├── reset-button.svelte
│ │ │ │ │ │ ├── share.svelte
│ │ │ │ │ │ ├── style-picker.svelte
│ │ │ │ │ │ ├── theme-picker.svelte
│ │ │ │ │ │ └── welcome-dialog.svelte
│ │ │ │ │ ├── create/
│ │ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ │ ├── +page.server.ts
│ │ │ │ │ │ └── [item]/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── +page.ts
│ │ │ │ │ └── lib/
│ │ │ │ │ ├── randomize-biases.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── +layout.svelte
│ │ │ │ ├── +page.svelte
│ │ │ │ ├── +page.ts
│ │ │ │ ├── blocks/
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ ├── +page.ts
│ │ │ │ │ └── [category]/
│ │ │ │ │ ├── +page.server.ts
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ └── +page.ts
│ │ │ │ ├── charts/
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ ├── +page.ts
│ │ │ │ │ ├── [t]/
│ │ │ │ │ │ ├── +page.server.ts
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── +page.ts
│ │ │ │ │ └── charts.ts
│ │ │ │ ├── colors/
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ ├── +layout.ts
│ │ │ │ │ └── +page.svelte
│ │ │ │ ├── docs/
│ │ │ │ │ ├── +layout.server.ts
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ └── [...slug]/
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ └── +page.ts
│ │ │ │ ├── examples/
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ ├── +layout.ts
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ ├── +page.ts
│ │ │ │ │ ├── authentication/
│ │ │ │ │ │ ├── (components)/
│ │ │ │ │ │ │ └── user-auth-form.svelte
│ │ │ │ │ │ └── +page.svelte
│ │ │ │ │ ├── dashboard/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ │ ├── chart-area-interactive.svelte
│ │ │ │ │ │ │ ├── data-table-actions.svelte
│ │ │ │ │ │ │ ├── data-table-cell-viewer.svelte
│ │ │ │ │ │ │ ├── data-table-checkbox.svelte
│ │ │ │ │ │ │ ├── data-table-drag-handle.svelte
│ │ │ │ │ │ │ ├── data-table-header-limit.svelte
│ │ │ │ │ │ │ ├── data-table-header-target.svelte
│ │ │ │ │ │ │ ├── data-table-limit.svelte
│ │ │ │ │ │ │ ├── data-table-reviewer.svelte
│ │ │ │ │ │ │ ├── data-table-status.svelte
│ │ │ │ │ │ │ ├── data-table-target.svelte
│ │ │ │ │ │ │ ├── data-table-type.svelte
│ │ │ │ │ │ │ ├── data-table.svelte
│ │ │ │ │ │ │ ├── nav-documents.svelte
│ │ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ │ ├── schemas.ts
│ │ │ │ │ │ │ ├── section-cards.svelte
│ │ │ │ │ │ │ └── site-header.svelte
│ │ │ │ │ │ └── data.ts
│ │ │ │ │ ├── playground/
│ │ │ │ │ │ ├── (components)/
│ │ │ │ │ │ │ ├── code-viewer.svelte
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ ├── max-length-selector.svelte
│ │ │ │ │ │ │ ├── model-item.svelte
│ │ │ │ │ │ │ ├── model-selector.svelte
│ │ │ │ │ │ │ ├── preset-actions.svelte
│ │ │ │ │ │ │ ├── preset-save.svelte
│ │ │ │ │ │ │ ├── preset-selector.svelte
│ │ │ │ │ │ │ ├── preset-share.svelte
│ │ │ │ │ │ │ ├── temperature-selector.svelte
│ │ │ │ │ │ │ └── top-p-selector.svelte
│ │ │ │ │ │ ├── (data)/
│ │ │ │ │ │ │ ├── models.ts
│ │ │ │ │ │ │ └── presets.ts
│ │ │ │ │ │ └── +page.svelte
│ │ │ │ │ └── tasks/
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── data-table-cell.svelte
│ │ │ │ │ │ ├── data-table-column-header.svelte
│ │ │ │ │ │ ├── data-table-faceted-filter.svelte
│ │ │ │ │ │ ├── data-table-priority-cell.svelte
│ │ │ │ │ │ ├── data-table-row-actions.svelte
│ │ │ │ │ │ ├── data-table-status-cell.svelte
│ │ │ │ │ │ ├── data-table-title-cell.svelte
│ │ │ │ │ │ ├── data-table-toolbar.svelte
│ │ │ │ │ │ ├── data-table-view-options.svelte
│ │ │ │ │ │ ├── data-table.svelte
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── user-nav.svelte
│ │ │ │ │ └── data/
│ │ │ │ │ ├── data.ts
│ │ │ │ │ ├── schemas.ts
│ │ │ │ │ └── tasks.ts
│ │ │ │ └── themes/
│ │ │ │ ├── +layout.svelte
│ │ │ │ ├── +layout.ts
│ │ │ │ └── +page.svelte
│ │ │ ├── +layout.server.ts
│ │ │ ├── +layout.svelte
│ │ │ ├── +layout.ts
│ │ │ └── preview/
│ │ │ └── [item]/
│ │ │ ├── +page.svelte
│ │ │ └── +page.ts
│ │ ├── (view)/
│ │ │ ├── +layout.svelte
│ │ │ └── view/
│ │ │ └── [view=view]/
│ │ │ ├── +page.svelte
│ │ │ └── +page.ts
│ │ ├── +error.svelte
│ │ ├── +layout.svelte
│ │ ├── api/
│ │ │ └── block/
│ │ │ └── [block]/
│ │ │ └── +server.ts
│ │ ├── init/
│ │ │ └── +server.ts
│ │ ├── og/
│ │ │ ├── +server.ts
│ │ │ ├── create/
│ │ │ │ └── +server.ts
│ │ │ └── og.ts
│ │ ├── registry/
│ │ │ └── +server.ts
│ │ └── repro/
│ │ └── +server.ts
│ ├── static/
│ │ ├── schema.json
│ │ └── site.webmanifest
│ ├── svelte.config.js
│ ├── tsconfig.json
│ ├── velite.config.js
│ ├── vite.config.ts
│ └── wrangler.jsonc
├── eslint.config.js
├── package.json
├── packages/
│ ├── cli/
│ │ ├── .gitignore
│ │ ├── .prettierignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE.md
│ │ ├── README.md
│ │ ├── __mocks__/
│ │ │ ├── fs/
│ │ │ │ └── promises.cjs
│ │ │ └── fs.cjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── commands/
│ │ │ │ ├── add/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── init/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── preflight.ts
│ │ │ │ ├── registry/
│ │ │ │ │ ├── build.ts
│ │ │ │ │ ├── deps-resolver.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── update/
│ │ │ │ └── index.ts
│ │ │ ├── constants.ts
│ │ │ ├── icons/
│ │ │ │ ├── index.ts
│ │ │ │ └── libraries.ts
│ │ │ ├── index.ts
│ │ │ ├── preset/
│ │ │ │ ├── index.ts
│ │ │ │ ├── preset.ts
│ │ │ │ └── presets.ts
│ │ │ ├── schema/
│ │ │ │ └── index.ts
│ │ │ └── utils/
│ │ │ ├── add-registry-items.ts
│ │ │ ├── auto-detect.ts
│ │ │ ├── colors.ts
│ │ │ ├── config/
│ │ │ │ ├── index.ts
│ │ │ │ ├── schema.ts
│ │ │ │ └── utils.ts
│ │ │ ├── css.ts
│ │ │ ├── errors.ts
│ │ │ ├── fonts.ts
│ │ │ ├── get-env-proxy.ts
│ │ │ ├── get-package-info.ts
│ │ │ ├── install-deps.ts
│ │ │ ├── preconditions.ts
│ │ │ ├── project.ts
│ │ │ ├── prompt-helpers.ts
│ │ │ ├── registry/
│ │ │ │ ├── index.ts
│ │ │ │ └── schema.ts
│ │ │ ├── resolve-imports.ts
│ │ │ ├── transform-css.ts
│ │ │ ├── transformers/
│ │ │ │ ├── index.ts
│ │ │ │ ├── transform-icons.ts
│ │ │ │ ├── transform-imports.ts
│ │ │ │ ├── transform-menu.ts
│ │ │ │ └── transform-strip-types.ts
│ │ │ ├── updaters/
│ │ │ │ ├── index.ts
│ │ │ │ ├── update-css-vars.ts
│ │ │ │ └── update-css.ts
│ │ │ └── utils.ts
│ │ ├── test/
│ │ │ ├── commands/
│ │ │ │ └── init.test.ts
│ │ │ ├── fixtures/
│ │ │ │ ├── colors/
│ │ │ │ │ ├── neutral.json
│ │ │ │ │ ├── slate.json
│ │ │ │ │ ├── stone.json
│ │ │ │ │ └── zinc.json
│ │ │ │ ├── config-custom-tsconfig/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.base.json
│ │ │ │ ├── config-full/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ ├── src/
│ │ │ │ │ │ └── app.css
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-invalid/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-jsconfig/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── jsconfig.json
│ │ │ │ │ └── package.json
│ │ │ │ ├── config-none/
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-partial/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-trailing-slashes/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-vite/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── legacy/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── post-init-default/
│ │ │ │ │ │ ├── components.json
│ │ │ │ │ │ ├── package.json
│ │ │ │ │ │ └── tsconfig.json
│ │ │ │ │ ├── post-init-new-york/
│ │ │ │ │ │ ├── components.json
│ │ │ │ │ │ ├── package.json
│ │ │ │ │ │ └── tsconfig.json
│ │ │ │ │ ├── post-update-default/
│ │ │ │ │ │ ├── components.json
│ │ │ │ │ │ ├── package.json
│ │ │ │ │ │ └── tsconfig.json
│ │ │ │ │ ├── post-update-new-york/
│ │ │ │ │ │ ├── components.json
│ │ │ │ │ │ ├── package.json
│ │ │ │ │ │ └── tsconfig.json
│ │ │ │ │ └── pre-init/
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── project-bun/
│ │ │ │ │ ├── bun.lockb
│ │ │ │ │ └── package.json
│ │ │ │ ├── project-npm/
│ │ │ │ │ └── package.json
│ │ │ │ ├── project-pnpm/
│ │ │ │ │ └── package.json
│ │ │ │ └── project-yarn/
│ │ │ │ └── package.json
│ │ │ ├── preset.test.ts
│ │ │ ├── registry-template.test.ts
│ │ │ └── utils/
│ │ │ ├── add-registry-items.test.ts
│ │ │ ├── auto-detect.test.ts
│ │ │ ├── deps-resolver.test.ts
│ │ │ ├── get-config.test.ts
│ │ │ ├── get-env-proxy.test.ts
│ │ │ ├── get-package-info.test.ts
│ │ │ ├── preconditions.test.ts
│ │ │ ├── preflight-init.test.ts
│ │ │ ├── project.test.ts
│ │ │ ├── registry.test.ts
│ │ │ ├── resolve-imports.test.ts
│ │ │ ├── test-helpers.ts
│ │ │ ├── transformers.test.ts
│ │ │ └── utils.test.ts
│ │ ├── tsconfig.json
│ │ └── tsdown.config.ts
│ └── registry/
│ ├── .gitignore
│ ├── .prettierignore
│ ├── CHANGELOG.md
│ ├── LICENSE.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── index.ts
│ │ └── schemas.ts
│ ├── tsconfig.json
│ └── tsdown.config.ts
├── pnpm-workspace.yaml
├── registry-template/
│ ├── .gitignore
│ ├── .npmrc
│ ├── .prettierignore
│ ├── .prettierrc
│ ├── README.md
│ ├── eslint.config.js
│ ├── package.json
│ ├── registry.json
│ ├── src/
│ │ ├── app.css
│ │ ├── app.d.ts
│ │ ├── app.html
│ │ ├── lib/
│ │ │ ├── index.ts
│ │ │ ├── registry/
│ │ │ │ ├── blocks/
│ │ │ │ │ ├── checkout-steps/
│ │ │ │ │ │ └── checkout-steps.svelte
│ │ │ │ │ ├── complex-component/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ ├── pokemon-card.svelte
│ │ │ │ │ │ │ └── pokemon-image.svelte
│ │ │ │ │ │ ├── hooks/
│ │ │ │ │ │ │ └── use-pokemon.svelte.ts
│ │ │ │ │ │ └── lib/
│ │ │ │ │ │ └── pokemon.ts
│ │ │ │ │ ├── example-form/
│ │ │ │ │ │ └── example-form.svelte
│ │ │ │ │ ├── example-with-css/
│ │ │ │ │ │ ├── example-card.css
│ │ │ │ │ │ └── example-card.svelte
│ │ │ │ │ └── hello-world/
│ │ │ │ │ └── hello-world.svelte
│ │ │ │ └── ui/
│ │ │ │ ├── button/
│ │ │ │ │ ├── button.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── card/
│ │ │ │ │ ├── card-action.svelte
│ │ │ │ │ ├── card-content.svelte
│ │ │ │ │ ├── card-description.svelte
│ │ │ │ │ ├── card-footer.svelte
│ │ │ │ │ ├── card-header.svelte
│ │ │ │ │ ├── card-title.svelte
│ │ │ │ │ ├── card.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── input/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── input.svelte
│ │ │ │ ├── label/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── label.svelte
│ │ │ │ ├── stepper/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── stepper-item.svelte
│ │ │ │ │ └── stepper.svelte
│ │ │ │ └── textarea/
│ │ │ │ ├── index.ts
│ │ │ │ └── input.svelte
│ │ │ └── utils.ts
│ │ └── routes/
│ │ ├── +layout.svelte
│ │ └── +page.svelte
│ ├── svelte.config.js
│ ├── tsconfig.json
│ └── vite.config.ts
└── repro/
├── .gitignore
├── .npmrc
├── README.md
├── components.json
├── package.json
├── src/
│ ├── app.css
│ ├── app.d.ts
│ ├── app.html
│ ├── lib/
│ │ ├── index.ts
│ │ └── utils.ts
│ └── routes/
│ ├── +layout.svelte
│ └── +page.svelte
├── static/
│ └── robots.txt
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
"changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "huntabyte/shadcn-svelte" }],
"commit": false,
"fixed": [],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": []
}
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: [huntabyte, adriangonz97, ieedan]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: huntabyte
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .github/ISSUE_TEMPLATE/1-documentation_change.yml
================================================
name: Report Docs Issue
description: Suggest an addition or modification to the documentation
labels: [triage]
body:
- type: dropdown
attributes:
label: Change Type
description: What type of change are you proposing?
options:
- Addition
- Correction
- Removal
- Cleanup (formatting, typos, etc.)
validations:
required: true
- type: textarea
attributes:
label: Proposed Changes
description: Describe the proposed changes and why they are necessary
validations:
required: true
================================================
FILE: .github/ISSUE_TEMPLATE/2-feature_request.yml
================================================
name: Feature request
description: Request a new feature
labels: [triage]
body:
- type: checkboxes
attributes:
label: Prerequisites
description: Please make sure you have checked all of the following.
options:
- label: This feature already exists in [shadcn/ui](https://github.com/shadcn/ui) - if not, it won't be considered here so don't continue with your issue.
required: true
- type: markdown
attributes:
value: |
This project's goal is to remain aligned with [shadcn/ui](https://github.com/shadcn-ui/ui). If the feature you are requesting is not in the original shadcn/ui, it will not be considered here.
- type: textarea
id: feature-description
attributes:
label: Describe the feature
description: A clear and concise description of the feature. If you intend to submit a PR for this feature, tell us how in the description. Thanks!
placeholder: Feature description
validations:
required: true
================================================
FILE: .github/ISSUE_TEMPLATE/3-bug_report.yml
================================================
name: Bug report
description: Report an issue with shadcn-svelte
labels: [triage]
body:
- type: markdown
attributes:
value: |
### Thanks for taking the time to create an issue! Please search open/closed issues before submitting, as the issue may have already been reported/addressed.
- type: markdown
attributes:
value: |
#### If you aren't sure if something is a bug or not, please do not create an issue, instead ask in one of the following channels:
- [Discussions](https://github.com/huntabyte/shadcn-svelte/discussions/new?category=help)
- [Discord](https://discord.gg/fdXy3Sk8Gq)
- type: textarea
id: bug-description
attributes:
label: Describe the bug
description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us how in the description. Thanks!
placeholder: Bug description
validations:
required: true
- type: textarea
id: reproduction
attributes:
label: Reproduction
description: |
Provide a minimal reproduction of the problem. Include a StackBlitz or link to a GitHub repository that we can easily run to recreate the issue. If a report is vague and does not have a reproduction, it will be closed without warning.
To get started, you can use the following StackBlitz template:
https://shadcn-svelte.com/repro
***Do not simply add a code snippet or a screenshot. We need a reproduction that we can easily run to recreate the issue.***
placeholder: Reproduction
validations:
required: true
- type: textarea
id: logs
attributes:
label: Logs
description: Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.
render: bash
- type: textarea
id: system-info
attributes:
label: System Info
description: Output of `npx envinfo --system --npmPackages svelte,shadcn-svelte,tailwindcss,bits-ui,vaul-svelte,sveltekit-superforms,@sveltejs/kit,mode-watcher,formsnap,cmdk-sv,svelte-radix,@lucide/svelte,svelte-sonner --binaries --browsers`
render: bash
placeholder: System, Binaries, Browsers
validations:
required: true
- type: dropdown
id: severity
attributes:
label: Severity
description: Select the severity of this issue
options:
- annoyance
- blocking an upgrade
- blocking all usage of shadcn-svelte
validations:
required: true
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: Get Help
url: https://github.com/huntabyte/shadcn-svelte/discussions/new?category=help
about: If you can't get something to work the way you expect, open a question in our discussion forums.
- name: Discord
url: https://discord.gg/fdXy3Sk8Gq
about: If you need to have a back-and-forth conversation, join the Discord server.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--
### Before submitting the PR, please make sure you do the following
- If your PR isn't addressing a small fix (like a typo), it references an issue where it is discussed ahead of time and assigned to you. In many cases, features are absent for a reason.
- Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.
- This message body should clearly illustrate what problems it solves.
- Format & lint the code with `pnpm format` and `pnpm lint`
-->
================================================
FILE: .github/reproduire/needs-reproduction.md
================================================
Please provide a [reproduction](https://shadcn-svelte.com/repro).
<details>
<summary>More info</summary>
### Why do I need to provide a reproduction?
This project is maintained by a very small team, and we simply don't have the bandwidth to investigate issues that we can't easily replicate. Reproductions enable us to fix issues faster and more efficiently. If you care about getting your issue resolved, providing a reproduction is the best way to do that.
### I've provided a reproduction - what happens now?
Once a reproduction is provided, we'll remove the `needs reproduction` label and review the issue to determine how to resolve it. If we can confirm it's a bug, we'll label it as such and prioritize it based on its severity.
If `needs reproduction` labeled issues don't receive any activity (e.g., a comment with a reproduction link), they'll be closed. Feel free to comment with a reproduction at any time and the issue will be reopened.
### How can I create a reproduction?
You can use [this template](https://shadcn-svelte.com/repro) to create a minimal reproduction. You can also link to a GitHub repository with the reproduction.
Please ensure that the reproduction is as **minimal** as possible. If there is a ton of custom logic in your reproduction, it is difficult to determine if the issue is with your code or with the library. The more minimal the reproduction, the more likely it is that we'll be able to assist.
You might also find these other articles interesting and/or helpful:
- [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required)
- [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)
</details>
================================================
FILE: .github/workflows/autoformat.yml
================================================
name: Auto-format PR on Comment
on:
issue_comment:
types: [created]
jobs:
format:
# only run on PR comments
if: github.event.issue.pull_request
runs-on: macos-latest
permissions:
contents: write
pull-requests: write
steps:
- name: Check trigger and permissions
uses: actions/github-script@v7
id: check-permission
with:
script: |
const commentBody = context.payload.comment.body;
const hasTrigger = commentBody.includes('/format') || commentBody.includes('/autoformat');
if (!hasTrigger) {
console.log('Comment does not contain trigger phrase. Skipping.');
core.setOutput('should-continue', 'false');
return false;
}
const { data: perm } = await github.rest.repos.getCollaboratorPermissionLevel({
owner: context.repo.owner,
repo: context.repo.repo,
username: context.payload.comment.user.login
});
const hasWriteAccess = ['admin', 'write'].includes(perm.permission);
if (!hasWriteAccess) {
await github.rest.issues.createComment({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number,
body: '❌ Sorry, you need write access to trigger auto-formatting.'
});
core.setOutput('should-continue', 'false');
return false;
}
core.setOutput('should-continue', 'true');
return true;
- name: Get PR details
if: steps.check-permission.outputs.should-continue == 'true'
uses: actions/github-script@v7
id: get-pr
with:
script: |
const { data: pr } = await github.rest.pulls.get({
owner: context.repo.owner,
repo: context.repo.repo,
pull_number: context.issue.number
});
core.setOutput('head-ref', pr.head.ref);
core.setOutput('head-sha', pr.head.sha);
core.setOutput('base-ref', pr.base.ref);
core.setOutput('pr-number', pr.number);
- name: React to comment
if: steps.check-permission.outputs.should-continue == 'true'
uses: actions/github-script@v7
with:
script: |
await github.rest.reactions.createForIssueComment({
owner: context.repo.owner,
repo: context.repo.repo,
comment_id: context.payload.comment.id,
content: 'rocket'
});
- name: Checkout PR branch
if: steps.check-permission.outputs.should-continue == 'true'
uses: actions/checkout@v4
with:
ref: ${{ steps.get-pr.outputs.head-ref }}
- uses: pnpm/action-setup@v4
if: steps.check-permission.outputs.should-continue == 'true'
- uses: actions/setup-node@v4
if: steps.check-permission.outputs.should-continue == 'true'
with:
node-version: 20
cache: pnpm
- name: Install dependencies
if: steps.check-permission.outputs.should-continue == 'true'
run: pnpm install
- name: Run formatter
if: steps.check-permission.outputs.should-continue == 'true'
run: pnpm format .
- name: Check for changes
if: steps.check-permission.outputs.should-continue == 'true'
id: check-changes
run: |
if [[ -z $(git status --porcelain) ]]; then
echo "has-changes=false" >> $GITHUB_OUTPUT
else
echo "has-changes=true" >> $GITHUB_OUTPUT
fi
- name: Commit and push changes
if: steps.check-permission.outputs.should-continue == 'true' && steps.check-changes.outputs.has-changes == 'true'
run: |
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git add .
git commit -m "chore: auto-format code via GitHub Action
Triggered by @${{ github.event.comment.user.login }} in PR #${{ steps.get-pr.outputs.pr-number }}"
git push origin HEAD:${{ steps.get-pr.outputs.head-ref }}
- name: Comment on PR with result
uses: actions/github-script@v7
if: always() && steps.check-permission.outputs.should-continue == 'true'
with:
script: |
const hasChanges = '${{ steps.check-changes.outputs.has-changes }}' === 'true';
const success = '${{ job.status }}' === 'success';
let body;
if (!success) {
body = '❌ Auto-formatting failed. Please check the workflow logs.';
} else if (hasChanges) {
body = '✅ Code has been auto-formatted and changes have been pushed to this PR.';
} else {
body = '✅ No formatting changes needed. Code is already properly formatted.';
}
await github.rest.issues.createComment({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number,
body: body
});
================================================
FILE: .github/workflows/build-preview.yml
================================================
name: Build Preview Deployment
# cancel in-progress runs on new commits to same PR (github.event.number)
concurrency:
group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
cancel-in-progress: true
on:
pull_request:
types: [opened, synchronize]
jobs:
build-preview:
runs-on: macos-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Build site
env:
NODE_OPTIONS: --max-old-space-size=8192
run: pnpm build
- name: Upload build artifact
uses: actions/upload-artifact@v4
with:
name: preview-build
path: docs/.svelte-kit
include-hidden-files: true
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
pull_request:
concurrency:
group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
cancel-in-progress: true
jobs:
check:
name: Type Check
runs-on: macos-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Run svelte-check
run: pnpm check
lint:
name: Lint
runs-on: macos-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- name: Install dependencies
run: pnpm install
- run: pnpm lint
cli-test:
name: CLI-Tests
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [ubuntu-latest, windows-latest, macOS-latest]
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Build packages
run: pnpm build:cli
- name: Run tests
run: pnpm -F shadcn-svelte test
================================================
FILE: .github/workflows/deploy-preview.yml
================================================
name: Upload Preview Deployment
on:
workflow_run:
workflows: [Build Preview Deployment]
types:
- completed
permissions:
actions: read
deployments: write
contents: read
pull-requests: write
jobs:
deploy-preview:
runs-on: macos-latest
if: ${{ github.event.workflow_run.conclusion == 'success' }}
steps:
- name: Download build artifact
uses: actions/download-artifact@v4
id: preview-build-artifact
with:
name: preview-build
path: build
github-token: ${{ secrets.GITHUB_TOKEN }}
run-id: ${{ github.event.workflow_run.id }}
- name: Deploy to Cloudflare Pages
uses: AdrianGonz97/refined-cf-pages-action@v1
with:
apiToken: ${{ secrets.CF_API_TOKEN }}
accountId: ${{ secrets.CF_ACCOUNT_ID }}
githubToken: ${{ secrets.GITHUB_TOKEN }}
projectName: shadcn-svelte
deploymentName: Preview
directory: ${{ steps.preview-build-artifact.outputs.download-path }}/cloudflare
================================================
FILE: .github/workflows/deploy-prod.yml
================================================
name: Production Deployment
on:
push:
branches:
- main
paths:
- docs/**
- packages/registry/**
workflow_dispatch:
jobs:
deploy-production:
runs-on: macos-latest
permissions:
contents: read
deployments: write
name: Deploy Production Site to Cloudflare Pages
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Build site
env:
NODE_OPTIONS: --max-old-space-size=8192
run: pnpm build
- name: Deploy to Cloudflare
run: pnpm -F docs exec wrangler deploy
env:
CLOUDFLARE_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
================================================
FILE: .github/workflows/deploy-svelte-4.yml
================================================
name: Svelte 4 Deployment
on:
push:
branches:
- svelte-4
paths:
- sites/docs/**
workflow_dispatch:
jobs:
deploy-production:
runs-on: macos-latest
permissions:
contents: read
deployments: write
name: Deploy Production Site to Cloudflare Pages
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Build site
env:
NODE_OPTIONS: --max-old-space-size=8192
run: pnpm build
- name: Deploy to Cloudflare Pages
uses: AdrianGonz97/refined-cf-pages-action@v1
with:
apiToken: ${{ secrets.CF_API_TOKEN }}
accountId: ${{ secrets.CF_ACCOUNT_ID }}
githubToken: ${{ secrets.GITHUB_TOKEN }}
projectName: shadcn-svelte
directory: ./.svelte-kit/cloudflare
workingDirectory: sites/docs
branch: ${{ github.ref_name }}
================================================
FILE: .github/workflows/deploy-tailwind-3.yml
================================================
name: Tailwind 3 Deployment
on:
push:
branches:
- next-tailwind-3
paths:
- sites/docs/**
workflow_dispatch:
jobs:
deploy-production:
runs-on: macos-latest
permissions:
contents: read
deployments: write
name: Deploy Production Site to Cloudflare Pages
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: pnpm
- name: Install dependencies
run: pnpm install
- name: Build site
env:
NODE_OPTIONS: --max-old-space-size=8192
run: pnpm build
- name: Deploy to Cloudflare Pages
uses: AdrianGonz97/refined-cf-pages-action@v1
with:
apiToken: ${{ secrets.CF_API_TOKEN }}
accountId: ${{ secrets.CF_ACCOUNT_ID }}
githubToken: ${{ secrets.GITHUB_TOKEN }}
projectName: shadcn-svelte-tw-3
directory: ./.svelte-kit/cloudflare
workingDirectory: sites/docs
deploymentName: Production Tailwind 3
================================================
FILE: .github/workflows/pr-guard.yml
================================================
name: PR guard
on:
pull_request_target:
types: [opened, reopened]
permissions:
pull-requests: write
issues: write
jobs:
guard:
uses: huntabyte/actions/.github/workflows/guard-fork-main.yml@main
================================================
FILE: .github/workflows/release.yml
================================================
name: Publish
on:
push:
branches:
- main
- next
concurrency: ${{ github.workflow }}-${{ github.ref }}
jobs:
release:
permissions:
contents: write # to create release (changesets/action)
pull-requests: write # to create pull request (changesets/action)
id-token: write # Required for OIDC
name: Build & Publish Release
if: github.repository == 'huntabyte/shadcn-svelte'
runs-on: macos-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 24
cache: pnpm
- run: npm install -g npm@latest
- name: Install dependencies
run: pnpm install
- name: Create Release Pull Request or Publish
id: changesets
uses: changesets/action@v1
with:
commit: "chore(release): version package"
title: "chore(release): version package"
publish: pnpm ci:release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_CONFIG_PROVENANCE: true
NODE_ENV: production
================================================
FILE: .github/workflows/reproduire-close.yml
================================================
name: Close incomplete issues
on:
workflow_dispatch:
schedule:
- cron: "30 1 * * *" # run every day
permissions:
issues: write
jobs:
stale:
runs-on: macos-latest
steps:
- uses: actions/stale@28ca1036281a5e5922ead5184a1bbf96e5fc984e # v9.0.0
with:
days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
stale-issue-label: needs reproduction # Label that flags an issue as stale.
only-labels: needs reproduction # Only process these issues
days-before-issue-close: 7
ignore-updates: true
remove-stale-when-updated: false
close-issue-message: This issue was closed because it was open for 7 days without a reproduction.
close-issue-label: closed-by-bot
================================================
FILE: .github/workflows/reproduire.yml
================================================
name: Reproduire
on:
issues:
types: [labeled]
permissions:
issues: write
jobs:
reproduire:
runs-on: macos-latest
steps:
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: Hebilicious/reproduire@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac # v0.0.9-mp
with:
label: needs reproduction
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
dist
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
.turbo
**/.svelte-kit/**/*
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# JetBrains IDEs
.idea/
.velite
docs/static/registry
docs/static/themes.css
docs/static/schema/registry.json
docs/static/schema/registry-item.json
docs/src/__registry__
docs/static/docs
docs/static/llms.txt
docs/static/docs.md
registry-template/static/r
repro/src/lib/hooks
repro/src/lib/components/ui
!repro/src/lib/components/ui/light-switch
================================================
FILE: .npmrc
================================================
engine-strict=true # https://pnpm.io/npmrc#engine-strict
prefer-frozen-lockfile=false
supported-architecture-os=darwin,linux,win32
supported-architecture-cpu=x64,arm64
================================================
FILE: .nvmrc
================================================
v22.15.0
================================================
FILE: .prettierignore
================================================
.changeset
.DS_Store
node_modules
**/build
**/.svelte-kit
**/package
**/dist
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock
CHANGELOG.md
.github/
registry-template
# docs site specific
docs/other/themes/dark.json
docs/other/themes/light.json
docs/static
docs/.velite
docs/src/__registry__
packages/cli/test/fixtures
playgrounds
registry-template/static
.svelte-kit
docs/src/routes/og/*-otf.json
**/__*__/**/*
================================================
FILE: .prettierrc
================================================
{
"useTabs": true,
"tabWidth": 4,
"singleQuote": false,
"trailingComma": "es5",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
},
{
"files": "*.md",
"options": {
"tabWidth": 2,
"useTabs": false,
"printWidth": 79
}
},
{
"files": ".github/**/*",
"options": {
"tabWidth": 2,
"useTabs": false
}
}
],
"tailwindFunctions": ["clsx", "cn", "tv"]
}
================================================
FILE: .vscode/settings.json
================================================
{
// Enable the ESlint flat config support
"eslint.useFlatConfig": true,
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never",
"source.removeUnusedImports": "never",
"source.removeUnused.ts": "never"
},
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"svelte",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"astro"
]
}
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to shadcn-svelte
We appreciate your interest in contributing. This guide will help you get started with the contribution process.
## Table of Contents
- [Contributing to shadcn-svelte](#contributing-to-shadcn-svelte)
- [Table of Contents](#table-of-contents)
- [Ways to contribute](#ways-to-contribute)
- [How to contribute](#how-to-contribute)
- [Questions](#questions)
- [License](#license)
## Ways to contribute
We welcome all kinds of contributions:
- **Feedback** - have suggestions or ideas? [Open a discussion](https://github.com/huntabyte/shadcn-svelte/discussions) to discuss it. Just note that this project is a port of [shadcn/ui](https://github.com/shadcn/ui), meaning we won't be adding new components to this project unless they are added to `shadcn/ui` first.
- **Help & Support** - if you enjoy helping others, join the [Discord](https://discord.gg/SRbSSrvXug) and help out in the `libs` -> `shadcn-support` channel, or answer questions asked in [Discussions](https://github.com/huntabyte/shadcn-svelte/discussions)
- **Bug reports** - please [open an issue](https://github.com/huntabyte/shadcn-svelte/issues/new) to report a bug.
- **Docs fixes** - spot a typo or broken link? Open a PR. If it's a larger change, please start a discussion first.
- **Code improvements** - For anything more involved than a quick fix, start a discussion first so we can align before you dive in.
## How to contribute
We try to keep the process simple to avoid wasted effort:
1. **Open an issue** for bugs
2. **Start a discussion** for feature ideas, improvements, or questions
3. A maintainer will review and tag it (e.g. help wanted, under review, etc.)
4. Want to work on something? Just comment on the thread or open a PR.
**Quick fix?** For typos or small tweaks, feel free to skip the discussion and just open a PR.
**Bigger change?** Open a discussion first so we can figure things out together.
## Questions
If you're looking to contribute and have questions about the process or the codebase in general, feel free to ask in the [Discord](https://hbyt.us/discord) in the `libs`->`shadcn-chat` channel!
## License
By contributing to this project, you agree that your contributions will be licensed under the [LICENSE](LICENSE.md) of the project.
================================================
FILE: LICENSE.md
================================================
MIT License
Copyright (c) 2023 Hunter Johnston <https://github.com/huntabyte>
Copyright (c) 2023 CokaKoala <https://github.com/adriangonz97>
Copyright (c) 2023 shadcn
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<img align="center" src="https://raw.githubusercontent.com/huntabyte/shadcn-svelte/main/docs/static/android-chrome-192x192.png" height="96" />
<h1 align="center">
shadcn-svelte
</h1>
</p>
[](https://discord.gg/fdXy3Sk8Gq)
[shadcn-svelte](https://www.shadcn-svelte.com/) is an unofficial community-led [Svelte](https://svelte.dev) port of [shadcn/ui](https://ui.shadcn.com/).
> **Note** <br> **We are not affiliated with shadcn, but we did get his blessing prior to creating this project** <br> This is a project born out of the need for a similar project for the Svelte ecosystem.
Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.
## Documentation
Visit https://shadcn-svelte.com/docs to view the documentation.
## Sponsors
This project is supported by the following beautiful people/organizations:
<p align="center">
<a href="https://github.com/sponsors/huntabyte">
<img src='https://github.com/huntabyte/static/blob/main/sponsors.svg?raw=true' alt="Logos from Sponsors" />
</a>
</p>
## License
<!-- automd:contributors license=MIT author="huntabyte" -->
Published under the [MIT](https://github.com/huntabyte/shadcn-svelte/blob/main/LICENSE.md) license.
Built by [@huntabyte](https://github.com/huntabyte), [CokaKoala](https://github.com/adriangonz97),and [community](https://github.com/huntabyte/shadcn-svelte/graphs/contributors) 💛
<br><br>
<a href="https://github.com/huntabyte/shadcn-svelte/graphs/contributors">
<img src="https://contrib.rocks/image?repo=huntabyte/shadcn-svelte" />
</a>
<!-- /automd -->
## Community
Join the Discord server to ask questions, find collaborators, or just say hi!
<a href="https://discord.gg/fdXy3Sk8Gq" alt="Svecosystem Discord community">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://invidget.switchblade.xyz/fdXy3Sk8Gq">
<img alt="Svecosystem Discord community" src="https://invidget.switchblade.xyz/fdXy3Sk8Gq?theme=light">
</picture>
</a>
================================================
FILE: docs/.gitignore
================================================
node_modules
# Output
.output
.vercel
.netlify
.wrangler
/.svelte-kit
/build
# OS
.DS_Store
Thumbs.db
# Env
.env
.env.*
!.env.example
!.env.test
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
================================================
FILE: docs/.npmrc
================================================
engine-strict=true
================================================
FILE: docs/README.md
================================================
# shadcn-svelte docs
================================================
FILE: docs/_headers
================================================
/*
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
================================================
FILE: docs/content/about.md
================================================
---
title: About
description: Powered by amazing open source projects.
---
## About
[shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) is a port of [shadcn/ui](https://ui.shadcn.com) for Svelte/SvelteKit. It's maintained by [Huntabyte](https://x.com/huntabyte), [CokaKoala](https://github.com/adriangonz97), and [Aidan Bleser](https://x.com/ieeeedan) and has received countless contributions from the community.
## Credits
- [shadcn](https://twitter.com/shadcn) - The brilliant mind behind the designs, methodology, and implementation of the original [shadcn/ui](https://ui.shadcn.com).
- [Bits UI](https://bits-ui.com) - The headless components that power this project.
- [Formsnap](https://formsnap.dev) - The form components that power this project.
- [Paneforge](https://paneforge.com) - The resizable components that power this project.
- [Vaul Svelte](https://vaul-svelte.com) - The drawer components that power this project.
- [Radix UI](https://radix-ui.com) - The headless components and examples that the original [shadcn/ui](https://ui.shadcn.com) was built on.
- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
- [Cal](https://cal.com) - Where shad copied the styles for the first component: the `Button`.
## License
MIT © [shadcn](https://shadcn.com) & [huntabyte](https://twitter.com/huntabyte)
================================================
FILE: docs/content/changelog.md
================================================
---
title: Changelog
description: Latest updates and announcements.
---
<script>
import Steps from '$lib/components/steps.svelte'
import Callout from '$lib/components/callout.svelte'
import ComponentPreview from '$lib/components/component-preview.svelte'
</script>
## October 2025 - New Components
For this round of components, I looked at what we build every day, the boring stuff we rebuild over and over, and made reusable abstractions you can actually use.
- [Spinner](/docs/components/spinner): An indicator to show a loading state.
- [Kbd](/docs/components/kbd): Display a keyboard key or group of keys.
- [Button Group](/docs/components/button-group): A group of buttons for actions and split buttons.
- [Input Group](/docs/components/input-group): Input with icons, buttons, labels and more.
- [Field](/docs/components/field): One component. All your forms.
- [Item](/docs/components/item): Display lists of items, cards, and more.
- [Empty](/docs/components/empty): Use this one for empty states.
---
## June 2025
### New Calendar Components
We've completely overhauled the `Calendar` and `RangeCalendar` components to support dropdowns for the month and year selectors, and have added 30+ Calendar blocks to help you get started building your own calendar components.
Check out the [Calendar](/docs/components/calendar) docs page and the [Calendar Blocks](/blocks/calendar) page for more.
---
## May 2025
### Tailwind v4 Support
Tailwind v4 support has officially landed. You can see a full demo of the refreshed styles that come with it here: [https://v4.shadcn-svelte.com](https://v4.shadcn-svelte.com).
This release includes several key changes, all outlined in the [Tailwind v4 migration guide](/docs/migration/tailwind-v4). If you're still using Svelte v5 with Tailwind v3, your project and the CLI will continue to work as expected until you're ready to upgrade.
### Charts
Charts have been added as a preview component to the project. See the [Charts](/charts) page for examples.
If you're running Svelte v5 and Tailwind v4 you can add them to your project via the CLI.
### Custom Registry Support
We've added support for custom/remote registries - This means you can publish your own components and share them with the community via the `shadcn-svelte` CLI.
See the [Registry documentation](/docs/registry) for more information.
---
## March 2024
### Introducing Blocks
[Blocks](/blocks) are ready-made components that you can use to build your apps. They are fully responsive, accessible, and composable, meaning they are built using the same principles as the rest of the components in shadcn-svelte.
[v0](https://v0.dev) only supports React at the moment, so you can't customize them like you can the original from [shadcn/ui](https://ui.shadcn.com). However, if having support for Svelte interests you, I'm sure the v0 team would love to hear about it. :)
### New Component: Breadcrumb
We've added a new component to the project, [Breadcrumb](/docs/components/breadcrumb).
### New Component: Scroll Area
We've added a new component to the project, [Scroll Area](/docs/components/scroll-area), which is built on top of the [Scroll Area](https://bits-ui.com/docs/components/scroll-area) component from Bits UI.
It supports both vertical and horizontal scrolling, and is designed to provide a consistent experience across all browsers and platforms.
## February 2024
### New Component: Resizable
We've added a new component to the project, [Resizable](/docs/components/resizable), which is built on top of [PaneForge](https://paneforge.com). PaneForge is still in an early stage, so be sure to raise any issues you find with the library on the [PaneForge GitHub](https://github.com/svecosystem/paneforge).
### Updated Icon Imports
After some feedback about dev server performance, we've updated the way we import icons. With this change, we've decided to move away from the unmaintained `radix-icons-svelte` package to [svelte-radix](https://github.com/shinokada/svelte-radix) for the `new-york` style.
Instead of importing icons like so:
```ts
import { Check } from "@lucide/svelte";
```
We now import them directly:
```ts
import Check from "@lucide/svelte/icons/check";
```
With deep imports, we're preventing Vite from optimizing the entire icon collections, and instead only optimizing the icons that are actually used in your project. From what we've seen, this has a massive impact on dev server performance. Enjoy! 🚀
### Major Forms Update
Formsnap has been completely rewritten to be more flexible, easier to use, and less opinionated. This means we've had to make some changes to the way we use it in `shadcn-svelte`, but once you get the hang of it, you'll find it's much more powerful and less restrictive than the previous iteration.
Since the changes are so significant, there isn't a direct migration path from the old version to the new version. You'll need to update your components to use the new API, as well as ensure you're using the latest version of `formsnap` and `sveltekit-superforms`.
All of the `Form` components have been updated to use the new API, and you can see live examples of them on the [Forms Examples](/examples/forms) page.
Visit the [Formsnap](https://formsnap.dev) documentation (which has also been updated) to learn more about the new API and how its used.
## January 2024
We've added four new components to the project, [Carousel](/docs/components/carousel), [Drawer](/docs/components/drawer), [Sonner](/docs/components/sonner), & [Pagination](/docs/components/pagination).
### New Component: Carousel
We've added a new component to the project, [Carousel](/docs/components/carousel).
<ComponentPreview name="carousel-demo">
<div></div>
</ComponentPreview>
### New Component: Drawer
The Drawer is built on top of [vaul-svelte](https://vaul-svelte.com) and is a port of [vaul](https://vaul.emilkowalski.ski/), originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React.
<ComponentPreview name="drawer-demo">
<div></div>
</ComponentPreview>
### New Component: Sonner
The Sonner component is provided by [svelte-sonner](https://svelte-sonner.vercel.app/), which is a Svelte port of [Sonner](https://sonner.emilkowal.ski/), originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React.
<ComponentPreview name="sonner-demo">
<div></div>
</ComponentPreview>
### New Component: Pagination
Pagination leverages the [Pagination](https://bits-ui.com/docs/components/pagination) component from Bits UI.
## December 2023
We've added three new components to the project, [Calendar](/docs/components/calendar), [Range Calendar](/docs/components/range-calendar), & [Date Picker](/docs/components/date-picker).
## November 2023
### New Component: Toggle Group
We've added a new component to the library, [Toggle Group](/docs/components/toggle-group).
## October 2023
We've added two new components to the library, [Command](/docs/components/command) & [Combobox](/docs/components/combobox). We've also made some updates to the `<Form.Label />` component that you'll want to be aware of.
### New Component: Command
Command is a component that allows you to create a command palette. It's built on top of [cmdk-sv](https://cmdk-sv.com), which is a Svelte port of [cmdk](https://cmdk.paco.me). The library is still in its infancy, but we're excited to see where it goes. If you notice any issues, please [open an issue](https://github.com/huntabyte/cmdk-sv) with the library.
Be sure to check out the [Command](/docs/components/command) docs for more information.
### New Component: Combobox
Combobox is a combination of the `<Command />` & `<Popover />` components. It allows you to create a searchable dropdown menu.
Be sure to check out the [Combobox](/docs/components/combobox) docs for more information.
### Updates to Form
#### Form.Label Changes
Since we had to make some internal changes to formsnap to fix outstanding issues, there is a slight modification we have to make to the `<Form.Label />` component. The `ids` returned from `getFormField()` is now a store, so we need to prefix it with `$` when we use it.
```svelte title="form-label.svelte" {2}
<Label
for={$ids.input}
class={cn($errors && "text-destructive", className)}
{...$$restProps}
>
<slot />
</Label>
```
### Form.Control
Formsnap introduced a new component `<Form.Control />` which wraps non-traditional form elements. This allows us to ensure the components are accessible, and work well with the rest of the form components. You'll need to define & export that control in your `form/index.ts` file.
```ts title="src/lib/ui/form/index.ts"
// ...rest
const Control = FormPrimitive.Control;
export {
// ...rest
Control,
Control as FormControl,
};
```
================================================
FILE: docs/content/cli.md
================================================
---
title: shadcn-svelte
description: Use the shadcn-svelte CLI to add components to your project.
---
<script>
import PMExecute from "$lib/components/pm-execute.svelte";
</script>
## init
Use the `init` command to initialize dependencies for a new project.
The `init` command installs dependencies, adds the `cn` util, and creates CSS variables for the project.
<PMExecute command="shadcn-svelte@latest init" />
You will be asked a few questions to configure `components.json`:
```txt showLineNumbers
Which base color would you like to use? › Slate
Where is your global CSS file? (this file will be overwritten) › src/routes/layout.css
Configure the import alias for lib: › $lib
Configure the import alias for components: › $lib/components
Configure the import alias for utils: › $lib/utils
Configure the import alias for hooks: › $lib/hooks
Configure the import alias for ui: › $lib/components/ui
```
**Options**
```bash
Usage: shadcn-svelte init [options]
initialize your project and install dependencies
Options:
-c, --cwd <path> the working directory (default: the current directory)
-o, --overwrite overwrite existing files (default: false)
--no-deps disable adding & installing dependencies
--skip-preflight ignore preflight checks and continue (default: false)
--base-color <name> the base color for the components (choices: "slate", "gray", "zinc",
"neutral", "stone")
--css <path> path to the global CSS file
--components-alias <path> import alias for components
--lib-alias <path> import alias for lib
--utils-alias <path> import alias for utils
--hooks-alias <path> import alias for hooks
--ui-alias <path> import alias for ui
--proxy <proxy> fetch items from registry using a proxy
-h, --help display help for command
```
---
## add
Use the `add` command to add components and dependencies to your project.
<PMExecute command="shadcn-svelte@latest add [component]" />
**Options**
```bash
Usage: shadcn-svelte add [options] [components...]
add components to your project
Arguments:
components the components to add or a url to the component
Options:
-c, --cwd <path> the working directory (default: the current directory)
--no-deps skips adding & installing package dependencies
--skip-preflight ignore preflight checks and continue (default: false)
-a, --all install all components to your project (default: false)
-y, --yes skip confirmation prompt (default: false)
-o, --overwrite overwrite existing files (default: false)
--proxy <proxy> fetch components from registry using a proxy
-h, --help display help for command
```
---
## registry build
Use the `registry build` command to generate the registry JSON files.
<PMExecute command="shadcn-svelte@latest registry build [registry.json]" />
This command reads the `registry.json` file and generates the registry JSON files into the `static/r` directory.
**Options**
```bash
Usage: shadcn-svelte registry build [options] [registry]
build components for a shadcn-svelte registry
Arguments:
registry path to registry.json file (default: ./registry.json)
Options:
-c, --cwd <path> the working directory (default: the current directory)
-o, --output <path> destination directory for json files (default: ./static/r)
-h, --help display help for command
```
---
## Outgoing Requests
### Proxy
This enables the use of a proxy when sending out requests to fetch from the `shadcn-svelte` registry. If the `HTTP_PROXY` or `http_proxy` environment variables have been set, the request library underneath will respect the proxy settings.
```bash
HTTP_PROXY="<proxy-url>" npx shadcn-svelte@latest init
```
================================================
FILE: docs/content/components/accordion.md
================================================
---
title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/accordion
doc: https://bits-ui.com/docs/components/accordion
api: https://bits-ui.com/docs/components/accordion#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
import Step from "$lib/components/step.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="accordion-demo" class="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]" description="An accordion with three items" align="start">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="accordion" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`
</Step>
<PMInstall command="bits-ui" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Accordion from "$lib/components/ui/accordion/index.js";
</script>
```
```svelte showLineNumbers
<Accordion.Root type="single">
<Accordion.Item value="item-1">
<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
<Accordion.Content>
Yes. It adheres to the WAI-ARIA design pattern.
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
```
================================================
FILE: docs/content/components/alert-dialog.md
================================================
---
title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/alert-dialog
doc: https://bits-ui.com/docs/components/alert-dialog
api: https://bits-ui.com/docs/components/alert-dialog#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="alert-dialog-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="alert-dialog" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbersw
<script lang="ts">
import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
</script>
```
```svelte showLineNumbers
<AlertDialog.Root>
<AlertDialog.Trigger>Open</AlertDialog.Trigger>
<AlertDialog.Content>
<AlertDialog.Header>
<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
<AlertDialog.Description>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</AlertDialog.Description>
</AlertDialog.Header>
<AlertDialog.Footer>
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
<AlertDialog.Action>Continue</AlertDialog.Action>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Root>
```
================================================
FILE: docs/content/components/alert.md
================================================
---
title: Alert
description: Displays a callout for user attention.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/alert
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="alert-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="alert" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Alert from "$lib/components/ui/alert/index.js";
</script>
```
```svelte showLineNumbers
<Alert.Root>
<Alert.Title>Heads up!</Alert.Title>
<Alert.Description>
You can add components to your app using the cli.
</Alert.Description>
</Alert.Root>
```
================================================
FILE: docs/content/components/aspect-ratio.md
================================================
---
title: Aspect Ratio
description: Displays content within a desired ratio.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/aspect-ratio
doc: https://bits-ui.com/docs/components/aspect-ratio
api: https://bits-ui.com/docs/components/aspect-ratio#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="aspect-ratio-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="aspect-ratio" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import { AspectRatio } from "$lib/components/ui/aspect-ratio/index.js";
</script>
```
```svelte showLineNumbers
<div class="w-[450px]">
<AspectRatio ratio={16 / 9} class="bg-muted">
<img src="..." alt="..." class="rounded-md object-cover" />
</AspectRatio>
</div>
```
================================================
FILE: docs/content/components/avatar.md
================================================
---
title: Avatar
description: An image element with a fallback for representing the user.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/avatar
doc: https://bits-ui.com/docs/components/avatar
api: https://bits-ui.com/docs/components/avatar#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="avatar-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="avatar" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
```
```svelte showLineNumbers
<Avatar.Root>
<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
<Avatar.Fallback>CN</Avatar.Fallback>
</Avatar.Root>
```
================================================
FILE: docs/content/components/badge.md
================================================
---
title: Badge
description: Displays a badge or a component that looks like a badge.
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/badge
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="badge-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="badge" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte
<script lang="ts">
import { Badge } from "$lib/components/ui/badge/index.js";
</script>
```
```svelte
<Badge variant="outline">Badge</Badge>
```
### Link
You can use the `badgeVariants` helper to create a link that looks like a badge.
```svelte
<script lang="ts">
import { badgeVariants } from "$lib/components/ui/badge/index.js";
</script>
<a href="/dashboard" class={badgeVariants({ variant: "outline" })}>Badge</a>
```
================================================
FILE: docs/content/components/breadcrumb.md
================================================
---
title: Breadcrumb
description: Displays the path to the current resource using a hierarchy of links.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/breadcrumb
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="breadcrumb-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="breadcrumb" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
```
```svelte showLineNumbers
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
```
## Examples
### Custom separator
Use a custom component in the `<slot>` of `<Breadcrumb.Separator />` to create a custom separator.
<ComponentPreview name="breadcrumb-separator">
<div></div>
</ComponentPreview>
```svelte showLineNumbers {2,11-13}
<script lang="ts">
import SlashIcon from "@lucide/svelte/icons/slash";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<SlashIcon />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
```
---
### Dropdown
You can compose `<Breadcrumb.Item />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
<ComponentPreview name="breadcrumb-dropdown">
<div></div>
</ComponentPreview>
```svelte showLineNumbers {2-5,11-22}
<script lang="ts">
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
import SlashIcon from "@lucide/svelte/icons/slash";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
</script>
<!-- ... -->
<Breadcrumb.Item>
<DropdownMenu.Root>
<DropdownMenu.Trigger class="flex items-center gap-1">
Components
<ChevronDownIcon class="size-4" />
</DropdownMenu.Trigger>
<DropdownMenu.Content align="start">
<DropdownMenu.Item>Documentation</DropdownMenu.Item>
<DropdownMenu.Item>Themes</DropdownMenu.Item>
<DropdownMenu.Item>GitHub</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Breadcrumb.Item>
```
---
### Collapsed
We provide a `<Breadcrumb.Ellipsis />` component to show a collapsed state when the breadcrumb is too long.
<ComponentPreview name="breadcrumb-ellipsis">
<div></div>
</ComponentPreview>
```svelte showLineNumbers {2,9}
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
{/* ... */}
<Breadcrumb.Item>
<Breadcrumb.Ellipsis />
</Breadcrumb.Item>
{/* ... */}
</Breadcrumb.List>
</Breadcrumb.Root>
```
---
### Link component
To use a link just add the `href` prop to `<Breadcrumb.Link />`.
<ComponentPreview name="breadcrumb-link">
<div></div>
</ComponentPreview>
```svelte showLineNumbers {2,7-9}
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
{/* ... */}
</Breadcrumb.List>
</Breadcrumb.Root>
```
---
### Responsive
Here's an example of a responsive breadcrumb that composes `<Breadcrumb.Item />` with `<Breadcrumb.Ellipsis />`, `<DropdownMenu />`, and `<Drawer />`.
It displays a dropdown on desktop and a drawer on mobile.
<ComponentPreview name="breadcrumb-responsive">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/button-group.md
================================================
---
title: Button Group
description: A container that groups related buttons together with consistent styling.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/button-group
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="button-group-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="button-group" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte
<script lang="ts">
import * as ButtonGroup from "$lib/components/ui/button-group/index.js";
</script>
```
```svelte
<ButtonGroup.Root>
<Button>Button 1</Button>
<Button>Button 2</Button>
</ButtonGroup.Root>
```
## Accessibility
- The `ButtonGroup` component has the `role` attribute set to `group`.
- Use `tabindex` to navigate between the buttons in the group.
- Use `aria-label` or `aria-labelledby` to label the button group.
```svelte showLineNumbers
<ButtonGroup aria-label="Button group">
<Button>Button 1</Button>
<Button>Button 2</Button>
</ButtonGroup>
```
## ButtonGroup vs ToggleGroup
- Use the `ButtonGroup` component when you want to group buttons that perform an action.
- Use the `ToggleGroup` component when you want to group buttons that toggle a state.
## Examples
### Orientation
Set the `orientation` prop to change the button group layout.
<ComponentPreview name="button-group-orientation-demo">
<div></div>
</ComponentPreview>
### Size
Control the size of buttons using the `size` prop on individual buttons.
<ComponentPreview name="button-group-size-demo">
<div></div>
</ComponentPreview>
### Nested
Nest `ButtonGroup` components to create button groups with spacing.
<ComponentPreview name="button-group-nested-demo">
<div></div>
</ComponentPreview>
### Separator
The `ButtonGroupSeparator` component visually divides buttons within a group.
Buttons with variant `outline` do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.
<ComponentPreview name="button-group-separator-demo">
<div></div>
</ComponentPreview>
### Split
Create a split button group by adding two buttons separated by a `ButtonGroupSeparator`.
<ComponentPreview name="button-group-split-demo">
<div></div>
</ComponentPreview>
### Input
Wrap an `Input` component with buttons.
<ComponentPreview name="button-group-input-demo">
<div></div>
</ComponentPreview>
### Input Group
Wrap an `InputGroup` component to create complex input layouts.
<ComponentPreview name="button-group-input-group-demo">
<div></div>
</ComponentPreview>
### Dropdown Menu
Create a split button group with a `DropdownMenu` component.
<ComponentPreview name="button-group-dropdown-menu-demo">
<div></div>
</ComponentPreview>
### Select
Pair with a `Select` component.
<ComponentPreview name="button-group-select-demo">
<div></div>
</ComponentPreview>
### Popover
Use with a `Popover` component.
<ComponentPreview name="button-group-popover-demo">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/button.md
================================================
---
title: Button
description: Displays a button or a component that looks like a button.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/button
api: https://bits-ui.com/docs/components/button#api-reference
---
<script>
import Callout from "$lib/components/callout.svelte";
import InfoIcon from "@lucide/svelte/icons/info";
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
import Step from "$lib/components/step.svelte";
let { viewerData, links } = $props();
</script>
<Callout variant="info" icon={InfoIcon}>
**Updated:** We have updated the button component to add new sizes: `icon-sm` and `icon-lg`. See the
[changelog](/docs/components/button#changelog) for more details. Follow the
instructions to update your project.
</Callout>
<ComponentPreview name="button-demo" class="mb-4">
<div></div>
</ComponentPreview>
```svelte showLineNumbers
<Button variant="outline">Button</Button>
<Button variant="outline" size="icon" aria-label="Submit">
<ArrowUpIcon />
</Button>
```
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="button" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline">Button</Button>
```
## Examples
### Size
<ComponentPreview name="button-size" class="mb-4" >
<div></div>
</ComponentPreview>
```svelte
<!-- Small -->
<Button size="sm" variant="outline">Small</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
<!-- Medium -->
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
<!-- Large -->
<Button size="lg" variant="outline">Large</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
<ArrowUpRightIcon />
</Button>
```
### Default
<ComponentPreview name="button-default" description="A primary button" class="mb-4">
<div></div>
</ComponentPreview>
```svelte
<Button>Button</Button>
```
### Outline
<ComponentPreview name="button-outline" description="A button using the outline variant." class="mb-4">
<div></div>
</ComponentPreview>
```svelte
<Button variant="outline">Outline</Button>
```
### Secondary
<ComponentPreview name="button-secondary" description="A secondary button" class="mb-4">
<div></div>
</ComponentPreview>
```svelte
<Button variant="secondary">Secondary</Button>
```
### Ghost
<ComponentPreview name="button-ghost" description="A button using the ghost variant" class="mb-4">
<div></div>
</ComponentPreview>
```svelte
<Button variant="ghost">Ghost</Button>
```
### Destructive
<ComponentPreview name="button-destructive" description="A destructive button" class="mb-4">
<div></div>
</ComponentPreview>
```svelte
<Button variant="destructive">Destructive</Button>
```
### Link
<ComponentPreview name="button-link" description="A button using the link variant." class="mb-4">
<div></div>
</ComponentPreview>
```svelte
<Button variant="link">Link</Button>
```
### Icon
<ComponentPreview name="button-icon" description="An icon button" class="mb-4">
<div></div>
</ComponentPreview>
```svelte
<Button variant="outline" size="icon" aria-label="Submit">
<CircleFadingArrowUpIcon />
</Button>
```
### With Icon
The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.
<ComponentPreview name="button-with-icon" description="A button with an icon" class="mb-4">
<div></div>
</ComponentPreview>
```svelte
<Button variant="outline" size="sm">
<IconGitBranch /> New Branch
</Button>
```
### Rounded
Use the `rounded-full` class to make the button rounded.
<ComponentPreview name="button-rounded" class="mb-4" >
<div></div>
</ComponentPreview>
```svelte
<Button variant="outline" size="icon" className="rounded-full">
<ArrowUpRightIcon />
</Button>
```
### Spinner
<ComponentPreview name="button-loading" description="A button with a loading state." class="mb-4">
<div></div>
</ComponentPreview>
```svelte showLineNumbers
<Button size="sm" variant="outline" disabled>
<Spinner />
Submit
</Button>
```
### Button Group
To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) documentation for more details.
<ComponentPreview name="button-group-demo" class="mb-4" >
<div></div>
</ComponentPreview>
```svelte showLineNumbers
<ButtonGroup.Root>
<ButtonGroup.Root class="hidden sm:flex">
<Button variant="outline" size="icon" aria-label="Go Back">
<ArrowLeft />
</Button>
</ButtonGroup.Root>
<ButtonGroup.Root>
<Button variant="outline">Archive</Button>
<Button variant="outline">Report</Button>
</ButtonGroup.Root>
<ButtonGroup.Root>
<Button variant="outline">Snooze</Button>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
{#snippet child({ props })}
<Button
{...props}
variant="outline"
size="icon"
aria-label="More Options"
>
<MoreHorizontal />
</Button>
{/snippet}
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end" class="w-52">
<DropdownMenu.Group>
<DropdownMenu.Item>
<MailCheck />
Mark as Read
</DropdownMenu.Item>
<DropdownMenu.Item>
<Archive />
Archive
</DropdownMenu.Item>
</DropdownMenu.Group>
<DropdownMenu.Separator />
<DropdownMenu.Group>
<DropdownMenu.Item>
<Clock />
Snooze
</DropdownMenu.Item>
<DropdownMenu.Item>
<CalendarPlus />
Add to Calendar
</DropdownMenu.Item>
<DropdownMenu.Item>
<ListFilter />
Add to List
</DropdownMenu.Item>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger>
<Tag />
Label As...
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent>
<DropdownMenu.RadioGroup bind:value={label}>
<DropdownMenu.RadioItem value="personal">
Personal
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem value="work"
>Work</DropdownMenu.RadioItem
>
<DropdownMenu.RadioItem value="other"
>Other</DropdownMenu.RadioItem
>
</DropdownMenu.RadioGroup>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
</DropdownMenu.Group>
<DropdownMenu.Separator />
<DropdownMenu.Group>
<DropdownMenu.Item class="text-destructive focus:text-destructive">
<Trash2 />
Trash
</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
</ButtonGroup.Root>
</ButtonGroup.Root>
```
### Link
You can convert the `<button>` into an `<a>` element by simply passing an `href` as a prop.
```svelte
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button href="/dashboard">Dashboard</Button>
```
Alternatively, you can use the `buttonVariants` helper to create a link that looks like a button.
```svelte
<script lang="ts">
import { buttonVariants } from "$lib/components/ui/button";
</script>
<a href="/dashboard" class={buttonVariants({ variant: "outline" })}>
Dashboard
</a>
```
## Changelog
### 2025-09-24 New sizes
We have added two new sizes to the button component: `icon-sm` and `icon-lg`. These sizes are used to create icon buttons. To add them, edit `button.svelte` and add the following code under `size` in `buttonVariants`:
```ts showLineNumbers title="components/ui/button.svelte"
export const buttonVariants = tv({
// ...
variants: {
// ...
size: {
// ...
icon: "size-9",
"icon-sm": "size-8",
"icon-lg": "size-10",
},
},
});
```
================================================
FILE: docs/content/components/calendar.md
================================================
---
title: Calendar
description: A calendar component that allows users to select dates.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/calendar
doc: https://bits-ui.com/docs/components/calendar
api: https://bits-ui.com/docs/components/calendar#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import Callout from "$lib/components/callout.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="calendar-demo">
<div></div>
</ComponentPreview>
## Blocks
We have built a collection of 30+ calendar blocks that you can use to build your own calendar components.
See call calendar blocks in the [Blocks Library](/blocks/calendar) page.
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="calendar" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui` and `@internationalized/date`:
</Step>
<PMInstall command="bits-ui @internationalized/date -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## About
The `<Calendar />` component is built on top of the [Bits UI Calendar](https://www.bits-ui.com/docs/components/calendar) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
If you're looking for a range calendar, check out the [Range Calendar](/docs/components/range-calendar) component.
## Date Picker
You can use the `<Calendar />` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
## Examples
### Range Calendar
<ComponentPreview name="calendar-02" class="**:[.preview]:h-auto lg:**:[.preview]:h-[450px]">
<div></div>
</ComponentPreview>
### Month and Year Selector
<ComponentPreview name="calendar-13">
<div></div>
</ComponentPreview>
### Date of Birth Picker
<ComponentPreview name="calendar-22">
<div></div>
</ComponentPreview>
### Date and Time Picker
<ComponentPreview name="calendar-24">
<div></div>
</ComponentPreview>
### Natural Language Picker
This component uses the `chrono-node` library to parse natural language dates.
<ComponentPreview name="calendar-29">
<div></div>
</ComponentPreview>
## Upgrade Guide
You can upgrade to the latest version of the `<Calendar />` component by running the following command:
<PMAddComp name="calendar" />
When you're prompted to overwrite the existing files, select `Yes`. **If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
#### Installing Blocks
After upgrading the `Calendar` component, you can add the new blocks with the following:
<PMAddComp name="calendar-02" />
This will add the latest version of the calendar blocks.
================================================
FILE: docs/content/components/card.md
================================================
---
title: Card
description: Displays a card with header, content, and footer.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/card
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="card-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="card" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Card from "$lib/components/ui/card/index.js";
</script>
```
```svelte showLineNumbers
<Card.Root>
<Card.Header>
<Card.Title>Card Title</Card.Title>
<Card.Description>Card Description</Card.Description>
</Card.Header>
<Card.Content>
<p>Card Content</p>
</Card.Content>
<Card.Footer>
<p>Card Footer</p>
</Card.Footer>
</Card.Root>
```
## Examples
<ComponentPreview name="card-demo">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/carousel.md
================================================
---
title: Carousel
description: A carousel with motion and swipe built using Embla.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/carousel
doc: https://www.embla-carousel.com/get-started/svelte
api: https://www.embla-carousel.com/api
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="carousel-demo">
<div></div>
</ComponentPreview>
## About
The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/get-started/svelte/) library.
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="carousel" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `embla-carousel-svelte`:
</Step>
<PMInstall command="embla-carousel-svelte -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
```
```svelte showLineNumbers
<Carousel.Root>
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
<Carousel.Previous />
<Carousel.Next />
</Carousel.Root>
```
## Examples
### Sizes
To set the size of the items, you can use the `basis` utility class on the `<Carousel.Item />`.
<ComponentPreview name="carousel-size">
<div></div>
</ComponentPreview>
```svelte showLineNumbers {4-6}
<!-- 33% of the carousel width. -->
<Carousel.Root>
<Carousel.Content>
<Carousel.Item class="basis-1/3">...</Carousel.Item>
<Carousel.Item class="basis-1/3">...</Carousel.Item>
<Carousel.Item class="basis-1/3">...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
```
```svelte showLineNumbers {4-6}
<!-- 50% on small screens and 33% on larger screens. -->
<Carousel.Root>
<Carousel.Content>
<Carousel.Item class="md:basis-1/2 lg:basis-1/3">...</Carousel.Item>
<Carousel.Item class="md:basis-1/2 lg:basis-1/3">...</Carousel.Item>
<Carousel.Item class="md:basis-1/2 lg:basis-1/3">...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
```
### Spacing
To set the spacing between the items, we use a `ps-[VALUE]` utility on the `<Carousel.Item />` and a negative `-ms-[VALUE]` on the `<Carousel.Content />`.
<ComponentPreview name="carousel-spacing">
<div></div>
</ComponentPreview>
```svelte showLineNumbers /-ms-4/ /ps-4/
<Carousel.Root>
<Carousel.Content class="-ms-4">
<Carousel.Item class="ps-4">...</Carousel.Item>
<Carousel.Item class="ps-4">...</Carousel.Item>
<Carousel.Item class="ps-4">...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
```
```svelte showLineNumbers /-ms-2/ /ps-2/ /md:-ms-4/ /md:ps-4/
<Carousel.Root>
<Carousel.Content class="-ms-2 md:-ms-4">
<Carousel.Item class="ps-2 md:ps-4">...</Carousel.Item>
<Carousel.Item class="ps-2 md:ps-4">...</Carousel.Item>
<Carousel.Item class="ps-2 md:ps-4">...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
```
### Orientation
Use the `orientation` prop to set the orientation of the carousel.
<ComponentPreview name="carousel-orientation">
<div></div>
</ComponentPreview>
```svelte showLineNumbers /vertical | horizontal/
<Carousel.Root orientation="vertical | horizontal">
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
```
## Options
You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
```svelte showLineNumbers {2-5}
<Carousel.Root
opts={{
align: "start",
loop: true,
}}
>
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
```
## API
Use reactive state and the `setApi` callback to get an instance of the carousel API.
<ComponentPreview name="carousel-api">
<div></div>
</ComponentPreview>
```svelte showLineNumbers {2,5,19}
<script lang="ts">
import { type CarouselAPI } from "$lib/components/ui/carousel/context.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
let api = $state<CarouselAPI>();
let current = $state(0);
const count = $derived(api ? api.scrollSnapList().length : 0);
$effect(() => {
if (api) {
current = api.selectedScrollSnap() + 1;
api.on("select", () => {
current = api!.selectedScrollSnap() + 1;
});
}
});
</script>
<Carousel.Root setApi={(emblaApi) => (api = emblaApi)}>
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
```
## Events
You can listen to events using the api instance from `bind:api`.
```svelte showLineNumbers {2,5,7-13,16}
<script lang="ts">
import { type CarouselAPI } from "$lib/components/ui/carousel/context.js";
import * as Carousel from "$lib/components/ui/carousel/index.js";
let api = $state<CarouselAPI>();
$effect(() => {
if (api) {
api.on("select", () => {
// do something
});
}
});
</script>
<Carousel.Root setApi={(emblaApi) => (api = emblaApi)}>
<Carousel.Content>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
<Carousel.Item>...</Carousel.Item>
</Carousel.Content>
</Carousel.Root>
```
## Plugins
You can use the `plugins` prop to add plugins to the carousel.
```svelte showLineNumbers {2,7-11}
<script lang="ts">
import Autoplay from "embla-carousel-autoplay";
import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root
plugins={[
Autoplay({
delay: 2000,
}),
]}
>
<!-- ... -->
</Carousel.Root>
```
<ComponentPreview name="carousel-plugin">
<div></div>
</ComponentPreview>
See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
================================================
FILE: docs/content/components/chart.md
================================================
---
title: Chart
description: Beautiful charts. Built using LayerChart. Copy and paste into your apps.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/chart
---
<script>
import * as Alert from "$lib/registry/ui/alert/index.js";
import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import Callout from "$lib/components/callout.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
import Step from "$lib/components/step.svelte";
let { viewerData } = $props();
</script>
<Callout class="mt-0 mb-6">
**Important:** LayerChart v2 is still in pre-release and is actively evolving. Only use if you're comfortable with potential breaking changes before stable v2.
Your feedback will be invaluable in shaping the release and features. Current development status can be tracked [here](https://github.com/techniq/layerchart/pull/449).
</Callout>
<ComponentPreview name="chart-bar-interactive" class="-mt-2 [&_.preview]:p-0 [&_.preview]:border-t [&_.preview>div]:shadow-none [&_.preview]:border-none [&_.preview>div]:w-full [&_.preview]:lg:min-h-[404px] [&_[data-slot='card-footer']]:hidden [&_[data-slot='card']]:py-0 [&_[data-slot='card-header'].border-b]:pb-0 [&_[data-slot='card']]:bg-background [&_[data-slot='card']]:border-none" hideCode>
<div></div>
</ComponentPreview>
Introducing **Charts**. A collection of chart components that you can copy and paste into your apps.
Charts are designed to look great out of the box. They work well with other components are are fully customizable to fit your project.
[Browse the Charts Library](/charts)
## Component
We use [LayerChart](https://next.layerchart.com) under the hood.
We designed the `Chart` component with composition in mind. **You build your charts using LayerChart components and only bring in custom components, such as `ChartTooltip`, when and where you need it**
```svelte showLineNumbers /Chart.Container/ /Chart.Tooltip/
<script lang="ts">
import * as Chart from "$lib/components/ui/chart/index.js";
import { BarChart } from "layerchart";
const data = [
// ...
];
</script>
<Chart.Container>
<BarChart {data} x="date" y="value">
{#snippet tooltip()}
<Chart.Tooltip />
{/snippet}
</BarChart>
</Chart.Container>
```
We do not wrap LayerChart. This means you're not locked into an abstraction. When a new LayerChart version is released, you can follow the official upgrade path to upgrade your charts.
**The components are yours**.
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="chart" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `layerchart`:
</Step>
<PMInstall command="layerchart@next -D" />
<Step>
Add the following colors to your CSS file
</Step>
```css title="src/app.css" showLineNumbers
:root {
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
}
.dark {
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
}
@theme inline {
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
}
```
<Step>
Copy and paste the following code into your project.
</Step>
</Steps>
{/snippet}
</InstallTabs>
## Your First Chart
Let's build your first chart. We'll build a bar chart with an axis, grid, tooltip, and legend.
<Steps>
### Start by defining your data
The following data represents the number of desktop and mobile users for each month.
<Callout class="mt-4">
**Note:** Your data can be in any shape. You are not limited to the shape of the data below. Use the `dataKey` prop to map your data to the chart.
</Callout>
```svelte title="lib/components/example-chart.svelte" showLineNumbers
<script lang="ts">
const chartData = [
{ month: "January", desktop: 186, mobile: 80 },
{ month: "February", desktop: 305, mobile: 200 },
{ month: "March", desktop: 237, mobile: 120 },
{ month: "April", desktop: 73, mobile: 190 },
{ month: "May", desktop: 209, mobile: 130 },
{ month: "June", desktop: 214, mobile: 140 },
];
</script>
```
### Define your chart config
The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons, and color tokens for theming.
```svelte title="lib/components/example-chart.svelte" showLineNumbers
<script lang="ts">
import * as Chart from "$lib/components/ui/chart/index.js";
const chartConfig = {
desktop: {
label: "Desktop",
color: "#2563eb",
},
mobile: {
label: "Mobile",
color: "#60a5fa",
},
} satisfies Chart.ChartConfig;
</script>
```
### Build your chart
You can now build your chart using LayerChart components. We're using the `BarChart` component in this example, which is one of LayerChart's "Simplified Charts".
These components handle a lot of the common chart scaffolding for you, while allowing you to customize them to your liking.
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
<ComponentPreview name="chart-bar-demo" class="[&_.preview]:p-4">
<div></div>
</ComponentPreview>
</Steps>
We now have a group-stacked bar chart with an x axis and a grid.
### Adjusting the Axis Ticks
Our bar chart is currently displaying the full month name for each tick on the x axis. Let's shorten it to just the first three letters.
<Steps>
### Add a custom formatter to the x axis
The `props` prop is how you can pass custom props to the various components that make up the chart. Here we're passing a custom formatter to the x axis.
```svelte showLineNumbers {21-25}
<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
<BarChart
data={chartData}
xScale={scaleBand().padding(0.25)}
x="month"
axis="x"
tooltip={false}
seriesLayout="group"
series={[
{
key: "desktop",
label: chartConfig.desktop.label,
color: chartConfig.desktop.color,
},
{
key: "mobile",
label: chartConfig.mobile.label,
color: chartConfig.mobile.color,
},
]}
props={{
xAxis: {
format: (d) => d.slice(0, 3),
},
}}
/>
</Chart.Container>
```
<ComponentPreview name="chart-bar-axis-tick-demo" class="[&_.preview]:p-4">
<div></div>
</ComponentPreview>
</Steps>
### Add Tooltip
So far we've only used the `BarChart` component from LayerChart. They look great out of the box thanks to some customizations in the `chart` component.
To add a tooltip, we'll use the custom `Chart.Tooltip` component from `chart`.
<Steps>
### Add the `Chart.Tooltip` component to the chart
We'll replace the `tooltip={false}` prop with the `tooltip` snippet where we'll place the `Chart.Tooltip` component.
```svelte showLineNumbers {26-28}
<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
<BarChart
data={chartData}
xScale={scaleBand().padding(0.25)}
x="month"
axis="x"
seriesLayout="group"
series={[
{
key: "desktop",
label: chartConfig.desktop.label,
color: chartConfig.desktop.color,
},
{
key: "mobile",
label: chartConfig.mobile.label,
color: chartConfig.mobile.color,
},
]}
props={{
xAxis: {
format: (d) => d.slice(0, 3),
},
}}
>
{#snippet tooltip()}
<Chart.Tooltip />
{/snippet}
</BarChart>
</Chart.Container>
```
<ComponentPreview name="chart-bar-tooltip-demo" class="[&_.preview]:p-4">
<div></div>
</ComponentPreview>
</Steps>
### Add Legend
<Steps>
### Set the `legend` prop to `true`
The `legend` prop is used to show a legend for the chart. We are working with LayerChart to add a payload similar to the tooltip so we can more easily create a custom legend.
```svelte showLineNumbers {8}
<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
<BarChart
data={chartData}
xScale={scaleBand().padding(0.25)}
x="month"
axis="x"
seriesLayout="group"
legend
series={[
{
key: "desktop",
label: chartConfig.desktop.label,
color: chartConfig.desktop.color,
},
{
key: "mobile",
label: chartConfig.mobile.label,
color: chartConfig.mobile.color,
},
]}
props={{
xAxis: {
format: (d) => d.slice(0, 3),
},
}}
>
{#snippet tooltip()}
<Chart.Tooltip />
{/snippet}
</BarChart>
</Chart.Container>
```
<ComponentPreview name="chart-bar-legend-demo" class="[&_.preview]:p-4">
<div></div>
</ComponentPreview>
</Steps>
Done. You've built your first chart! What's next?
- [Themes and Colors](/docs/components/chart#theming)
- [Tooltip](/docs/components/chart#tooltip)
## Chart Config
The chart config is where you define the labels, icons and colors for a chart.
It is intentionally decoupled from chart data.
This allows you to share config and color tokens between charts. It can also works independently for cases where your data or color tokens live remotely or in a different format.
```svelte
<script lang="ts">
import MonitorIcon from "@lucide/svelte/icons/monitor";
import * as Chart from "$lib/components/ui/chart/index.js";
const chartConfig = {
desktop: {
label: "Desktop",
icon: MonitorIcon,
// A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
color: "#2563eb",
// OR a theme object with 'light' and 'dark' keys
theme: {
light: "#2563eb",
dark: "#dc2626",
},
},
} satisfies Chart.ChartConfig;
</script>
```
## Theming
Charts has built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl, or oklch.
### CSS Variables
<Steps>
### Define your colors in your css file
```css {5-6,13-14} title="src/routes/layout.css" showLineNumbers
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
/* ... */
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
/* ... */
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
}
```
### Add the color to your `chartConfig`
```svelte {5,9} showLineNumbers
<script lang="ts">
const chartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
mobile: {
label: "Mobile",
color: "var(--chart-2)",
},
} satisfies Chart.ChartConfig;
</script>
```
</Steps>
### hex, hsl or oklch
You can also define your colors directly in the chart config. Use the color format you prefer.
```svelte showLineNumbers
<script lang="ts">
const chartConfig = {
desktop: {
label: "Desktop",
color: "#2563eb",
},
} satisfies Chart.ChartConfig;
</script>
```
### Using Colors
To use the theme colors in your chart, reference the colors using the format `var(--color-KEY)`.
#### Components
```svelte
<Bar fill="var(--color-desktop)" />
```
#### Chart Data
```ts showLineNumbers
const chartData = [
{ browser: "chrome", visitors: 275, color: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, color: "var(--color-safari)" },
];
```
#### Tailwind
```svelte
<Label class="fill-(--color-desktop)" />
```
## Tooltip
A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.
<ComponentPreview name="chart-tooltip-demo" class="[&_.preview]:p-0" hideCode>
<div></div>
</ComponentPreview>
You can turn on/off any of these using the `hideLabel`, `hideIndicator` props and customize the indicator style using the `indicator` prop.
Use `labelKey` and `nameKey` to use a custom key for the tooltip label and name.
Chart comes with the `<Chart.Tooltip>` component. You can use this component to add custom tooltips to your chart.
### Props
Use the following props to customize the tooltip.
| Prop | Type | Description |
| :--------------- | :----------------------- | :------------------------------------------------------ |
| `labelKey` | string | The config or data key to use for the label. |
| `nameKey` | string | The config or data key to use for the name. |
| `indicator` | `dot` `line` or `dashed` | The indicator style for the tooltip. |
| `hideLabel` | boolean | Whether to hide the label. |
| `hideIndicator` | boolean | Whether to hide the indicator. |
| `label` | string | A custom label for the tooltip |
| `labelFormatter` | function | A function to format the label. |
| `formatter` | Snippet | A snippet to provide flexible rendering of the tooltip. |
### Colors
Colors are automatically referenced from the chart config.
### Custom
To use a custom key for tooltip label and names, use the `labelKey` and `nameKey` props.
```svelte showLineNumbers /browser/
<script lang="ts">
const chartData = [
{ browser: "chrome", visitors: 187, color: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, color: "var(--color-safari)" },
];
const chartConfig = {
visitors: {
label: "Total Visitors",
},
chrome: {
label: "Chrome",
color: "var(--chart-1)",
},
safari: {
label: "Safari",
color: "var(--chart-2)",
},
} satisfies ChartConfig;
</script>
<Chart.Tooltip labelKey="visitors" nameKey="browser" />
```
This will use `Total Visitors` for label and `Chrome` and `Safari` for the tooltip names.
================================================
FILE: docs/content/components/checkbox.md
================================================
---
title: Checkbox
description: A control that allows the user to toggle between checked and not checked.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/checkbox
doc: https://bits-ui.com/docs/components/checkbox
api: https://bits-ui.com/docs/components/checkbox#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="checkbox-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="checkbox" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte
<script lang="ts">
import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>
```
```svelte
<Checkbox />
```
================================================
FILE: docs/content/components/collapsible.md
================================================
---
title: Collapsible
description: An interactive component which expands/collapses a panel.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/collapsible
doc: https://bits-ui.com/docs/components/collapsible
api: https://bits-ui.com/docs/components/collapsible#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="collapsible-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="collapsible" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Collapsible from "$lib/components/ui/collapsible/index.js";
</script>
```
```svelte showLineNumbers
<Collapsible.Root>
<Collapsible.Trigger>Can I use this in my project?</Collapsible.Trigger>
<Collapsible.Content>
Yes. Free to use for personal and commercial projects. No attribution
required.
</Collapsible.Content>
</Collapsible.Root>
```
================================================
FILE: docs/content/components/combobox.md
================================================
---
title: Combobox
description: Autocomplete input and command palette with a list of suggestions.
component: true
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import CodeCollapsibleWrapper from "$lib/components/code-collapsible-wrapper.svelte";
</script>
<ComponentPreview name="combobox-demo">
<div></div>
</ComponentPreview>
## Installation
The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
## Usage
<CodeCollapsibleWrapper >
```svelte title="lib/components/example-combobox.svelte"
<script lang="ts">
import CheckIcon from "@lucide/svelte/icons/check";
import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
import { tick } from "svelte";
import * as Command from "$lib/components/ui/command/index.js";
import * as Popover from "$lib/components/ui/popover/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import { cn } from "$lib/utils.js";
const frameworks = [
{
value: "sveltekit",
label: "SvelteKit",
},
{
value: "next.js",
label: "Next.js",
},
{
value: "nuxt.js",
label: "Nuxt.js",
},
{
value: "remix",
label: "Remix",
},
{
value: "astro",
label: "Astro",
},
];
let open = $state(false);
let value = $state("");
let triggerRef = $state<HTMLButtonElement>(null!);
const selectedValue = $derived(
frameworks.find((f) => f.value === value)?.label
);
// We want to refocus the trigger button when the user selects
// an item from the list so users can continue navigating the
// rest of the form with the keyboard.
function closeAndFocusTrigger() {
open = false;
tick().then(() => {
triggerRef.focus();
});
}
</script>
<Popover.Root bind:open>
<Popover.Trigger bind:ref={triggerRef}>
{#snippet child({ props })}
<Button
variant="outline"
class="w-[200px] justify-between"
{...props}
role="combobox"
aria-expanded={open}
>
{selectedValue || "Select a framework..."}
<ChevronsUpDownIcon class="ms-2 size-4 shrink-0 opacity-50" />
</Button>
{/snippet}
</Popover.Trigger>
<Popover.Content class="w-[200px] p-0">
<Command.Root>
<Command.Input placeholder="Search framework..." />
<Command.List>
<Command.Empty>No framework found.</Command.Empty>
<Command.Group>
{#each frameworks as framework}
<Command.Item
value={framework.value}
onSelect={() => {
value = framework.value;
closeAndFocusTrigger();
}}
>
<CheckIcon
class={cn(
"me-2 size-4",
value !== framework.value && "text-transparent"
)}
/>
{framework.label}
</Command.Item>
{/each}
</Command.Group>
</Command.List>
</Command.Root>
</Popover.Content>
</Popover.Root>
```
</CodeCollapsibleWrapper>
## Examples
### Combobox
<ComponentPreview name="combobox-demo">
<div></div>
</ComponentPreview>
### Popover
<ComponentPreview name="combobox-popover">
<div></div>
</ComponentPreview>
### Dropdown menu
<ComponentPreview name="combobox-dropdown-menu">
<div></div>
</ComponentPreview>
### Responsive
You can create a responsive combobox by using the `<Popover />` on desktop and the `<Drawer />` components on mobile.
<ComponentPreview name="combobox-responsive" >
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/command.md
================================================
---
title: Command
description: Fast, composable, unstyled command menu for Svelte.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/command
doc: https://bits-ui.com/docs/components/command
api: https://bits-ui.com/docs/components/command#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import Callout from "$lib/components/callout.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="command-demo" align="start" class="[&_.preview>div]:max-w-[450px]">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="command" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Command from "$lib/components/ui/command/index.js";
</script>
```
```svelte showLineNumbers
<Command.Root>
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>Calendar</Command.Item>
<Command.Item>Search Emoji</Command.Item>
<Command.Item>Calculator</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>Profile</Command.Item>
<Command.Item>Billing</Command.Item>
<Command.Item>Settings</Command.Item>
</Command.Group>
</Command.List>
</Command.Root>
```
## Examples
### Dialog
<ComponentPreview name="command-dialog">
<div></div>
</ComponentPreview>
To show the command menu in a dialog, use the `<Command.Dialog />` component instead of `<Command.Root />`. It accepts props for both the `<Dialog.Root />` and `<Command.Root />` components.
```svelte title="lib/components/example-command-menu.svelte" showLineNumbers
<script lang="ts">
import * as Command from "$lib/components/ui/command/index.js";
import { onMount } from "svelte";
let open = $state(false);
function handleKeydown(e: KeyboardEvent) {
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
open = !open;
}
}
</script>
<svelte:document onkeydown={handleKeydown} />
<Command.Dialog bind:open>
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>Calendar</Command.Item>
<Command.Item>Search Emoji</Command.Item>
<Command.Item>Calculator</Command.Item>
</Command.Group>
</Command.List>
</Command.Dialog>
```
### Combobox
You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
## Changelog
### 2024-10-30 Classes for icons
- Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<Command.Item>` component to automatically style the icons inside.
================================================
FILE: docs/content/components/context-menu.md
================================================
---
title: Context Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by right click.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/context-menu
doc: https://bits-ui.com/docs/components/context-menu
api: https://bits-ui.com/docs/components/context-menu#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="context-menu-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="context-menu" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>
```
```svelte showLineNumbers
<ContextMenu.Root>
<ContextMenu.Trigger>Right click</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item>Profile</ContextMenu.Item>
<ContextMenu.Item>Billing</ContextMenu.Item>
<ContextMenu.Item>Team</ContextMenu.Item>
<ContextMenu.Item>Subscription</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Root>
```
================================================
FILE: docs/content/components/data-table.md
================================================
---
title: Data Table
description: Powerful table and datagrids built using TanStack Table.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/data-table
doc: https://tanstack.com/table/v8/docs/introduction
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import Callout from "$lib/components/callout.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="data-table-demo">
<div></div>
</ComponentPreview>
## Introduction
Data tables are difficult to componentize because of the wide variety of features they support, and the uniqueness of every data set.
So instead of trying to create a one-size-fits-all solution, we've created a guide to help you build your own data tables.
We'll start with the basic `<Table />` component, and work our way up to a fully-featured data table.
<Callout>
Tip: If you find yourself using the same table in multiple places, you can always extract it into a reusable component.
</Callout>
## Table of Contents
This guide will show you how to use [TanStack Table](https://tanstack.com/table) and the `<Table />` component to build your own custom data table. We'll cover the following topics:
- [Basic Table](#basic-table)
- [Row Actions](#row-actions)
- [Pagination](#pagination)
- [Sorting](#sorting)
- [Filtering](#filtering)
- [Visibility](#visibility)
- [Row Selection](#row-selection)
- [Reusable Components](#reusable-components)
## Installation
1. Add the `<Table />` component to your project along with the `data-table` helpers. These helpers enable TanStack Table v8 to work with Svelte 5 Snippets, Components, etc.
<PMAddComp name="table data-table" />
2. Add `@tanstack/table-core` as a dependency:
<PMInstall command="@tanstack/table-core" />
## Prerequisites
We're going to build a table to show recent payments. Here's what our data looks like:
```ts showLineNumbers
type Payment = {
id: string;
amount: number;
status: "pending" | "processing" | "success" | "failed";
email: string;
};
export const data: Payment[] = [
{
id: "728ed52f",
amount: 100,
status: "pending",
email: "m@example.com",
},
{
id: "489e1d42",
amount: 125,
status: "processing",
email: "example@gmail.com",
},
// ...
];
```
## Project Structure
Start by creating a route where your data table will live (we'll call ours payments), along with the following files:
```txt
routes
└── payments
├── columns.ts
├── data-table.svelte
├── data-table-actions.svelte
├── data-table-checkbox.svelte
├── data-table-email-button.svelte
└── +page.svelte
```
- `columns.ts` will contain our column definitions.
- `data-table.svelte` will contain the `<Table />` component and the complete `<DataTable />` component.
- `data-table-actions.svelte` will contain the actions menu for each row.
- `data-table-checkbox.svelte` will contain the checkbox for each row.
- `data-table-email-button.svelte` will contain the sortable email header button.
- `+page.svelte` is where we'll render and access `<DataTable />` component.
## Basic Table
Let's start by building a basic table.
<Steps>
### Column Definitions
First, we'll define our columns.
```ts showLineNumbers {1,12-25} title="routes/payments/columns.ts"
import type { ColumnDef } from "@tanstack/table-core";
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Payment = {
id: string;
amount: number;
status: "pending" | "processing" | "success" | "failed";
email: string;
};
export const columns: ColumnDef<Payment>[] = [
{
accessorKey: "status",
header: "Status",
},
{
accessorKey: "email",
header: "Email",
},
{
accessorKey: "amount",
header: "Amount",
},
];
```
<Callout class="mt-4">
**Note:** Columns are where you define the core of what your table will look like. They define the data that will be displayed, how it will be formatted, sorted and filtered.
</Callout>
### `<DataTable />` Component
Next, we'll create a `<DataTable />` component to render our table.
```svelte showLineNumbers title="routes/payments/data-table.svelte"
<script lang="ts" generics="TData, TValue">
import { type ColumnDef, getCoreRowModel } from "@tanstack/table-core";
import {
createSvelteTable,
FlexRender,
} from "$lib/components/ui/data-table/index.js";
import * as Table from "$lib/components/ui/table/index.js";
type DataTableProps<TData, TValue> = {
columns: ColumnDef<TData, TValue>[];
data: TData[];
};
let { data, columns }: DataTableProps<TData, TValue> = $props();
const table = createSvelteTable({
get data() {
return data;
},
columns,
getCoreRowModel: getCoreRowModel(),
});
</script>
<div class="rounded-md border">
<Table.Root>
<Table.Header>
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
<Table.Row>
{#each headerGroup.headers as header (header.id)}
<Table.Head colspan={header.colSpan}>
{#if !header.isPlaceholder}
<FlexRender
content={header.column.columnDef.header}
context={header.getContext()}
/>
{/if}
</Table.Head>
{/each}
</Table.Row>
{/each}
</Table.Header>
<Table.Body>
{#each table.getRowModel().rows as row (row.id)}
<Table.Row data-state={row.getIsSelected() && "selected"}>
{#each row.getVisibleCells() as cell (cell.id)}
<Table.Cell>
<FlexRender
content={cell.column.columnDef.cell}
context={cell.getContext()}
/>
</Table.Cell>
{/each}
</Table.Row>
{:else}
<Table.Row>
<Table.Cell colspan={columns.length} class="h-24 text-center">
No results.
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
</div>
```
<Callout>
**Tip**: If you find yourself using `<DataTable />` in multiple places, this is the component you could make reusable by extracting it to `components/ui/data-table.svelte`.
`<DataTable columns={columns} data={data} />`
</Callout>
### Render the table
Finally, we'll render our table in our page component.
```ts showLineNumbers title="routes/payments/+page.server.ts"
export async function load() {
// logic to fetch payments data here
const payments = await getPayments();
return {
payments,
};
}
```
```svelte showLineNumbers {8} title="routes/payments/+page.svelte"
<script lang="ts">
import DataTable from "./data-table.svelte";
import { columns } from "./columns.js";
let { data } = $props();
</script>
<DataTable data={data.payments} {columns} />
```
</Steps>
## Cell Formatting
Let's format the amount cell to display the dollar amount. We'll also align the cell to the right.
<Steps>
### Update columns definition
Update the `header` and `cell` definitions for amount as follows:
```ts showLineNumbers title="routes/payments/columns.ts"
import type { ColumnDef } from "@tanstack/table-core";
import { createRawSnippet } from "svelte";
import { renderSnippet } from "$lib/components/ui/data-table/index.js";
export const columns: ColumnDef<Payment>[] = [
{
accessorKey: "amount",
header: () => {
const amountHeaderSnippet = createRawSnippet(() => ({
render: () => `<div class="text-end">Amount</div>`,
}));
return renderSnippet(amountHeaderSnippet);
},
cell: ({ row }) => {
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
});
const amountCellSnippet = createRawSnippet<[{ amount: number }]>(
(getAmount) => {
const { amount } = getAmount();
const formatted = formatter.format(amount);
return {
render: () =>
`<div class="text-end font-medium">${formatted}</div>`,
};
}
);
return renderSnippet(amountCellSnippet, {
amount: row.original.amount,
});
},
},
];
```
We're using the `createRawSnippet` function to create a Svelte Snippet for rendering simple HTML elements that don't require full lifecycle and state capabilities like a component. We then use the `renderSnippet` helper function to render the snippet.
You can use the same approach to format other cells and headers.
</Steps>
## Row Actions
Let's add row actions to our table. We'll use the `<DropdownMenu />` and the `<Button />` components for this, so you have install them if not done already:
<PMAddComp name="button dropdown-menu" />
<Steps>
### Create actions component
We'll start by defining the actions menu in our `data-table-actions.svelte` component.
```svelte showLineNumbers title="routes/payments/data-table-actions.svelte"
<script lang="ts">
import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
import { Button } from "$lib/components/ui/button/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
let { id }: { id: string } = $props();
</script>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
{#snippet child({ props })}
<Button
{...props}
variant="ghost"
size="icon"
class="relative size-8 p-0"
>
<span class="sr-only">Open menu</span>
<EllipsisIcon />
</Button>
{/snippet}
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Group>
<DropdownMenu.Label>Actions</DropdownMenu.Label>
<DropdownMenu.Item onclick={() => navigator.clipboard.writeText(id)}>
Copy payment ID
</DropdownMenu.Item>
</DropdownMenu.Group>
<DropdownMenu.Separator />
<DropdownMenu.Item>View customer</DropdownMenu.Item>
<DropdownMenu.Item>View payment details</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
```
### Update columns definition
Now that we've defined the `<DataTableActions />` component, let's update our `actions` column definition to use it.
```ts showLineNumbers title="routes/payments/columns.ts"
import type { ColumnDef } from "@tanstack/table-core";
import { renderComponent } from "$lib/components/ui/data-table/index.js";
import DataTableActions from "./data-table-actions.svelte";
export const columns: ColumnDef<Payment>[] = [
// ...
{
id: "actions",
cell: ({ row }) => {
// You can pass whatever you need from `row.original` to the component
return renderComponent(DataTableActions, { id: row.original.id });
},
},
];
```
You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API.
</Steps>
## Pagination
Next, we'll add pagination to our table.
<Steps>
### Update `<DataTable />`
```svelte showLineNumbers title="routes/payments/data-table.svelte"
<script lang="ts" generics="TData, TValue">
import {
type ColumnDef,
type PaginationState,
getCoreRowModel,
getPaginationRowModel,
} from "@tanstack/table-core";
type DataTableProps<TData, TValue> = {
data: TData[];
columns: ColumnDef<TData, TValue>[];
};
let { data, columns }: DataTableProps<TData, TValue> = $props();
let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
const table = createSvelteTable({
get data() {
return data;
},
columns,
state: {
get pagination() {
return pagination;
},
},
onPaginationChange: (updater) => {
if (typeof updater === "function") {
pagination = updater(pagination);
} else {
pagination = updater;
}
},
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
});
</script>
```
This will automatically paginate your rows into pages of 10. See the [pagination docs](https://tanstack.com/table/v8/docs/api/features/pagination) for more information on customizing page size and implementing manual pagination.
### Adding pagination controls
We can add pagination controls to our table using the `<Button />` component and the `table.previousPage()`, `table.nextPage()` API methods.
```svelte showLineNumbers title="routes/payments/data-table.svelte"
<script lang="ts" generics="TData, TValue">
import { Button } from "$lib/components/ui/button/index.js";
let { columns, data }: DataTableProps<TData, TValue> = $props();
let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
const table = createSvelteTable({
get data() {
return data;
},
columns,
state: {
get pagination() {
return pagination;
},
},
onPaginationChange: (updater) => {
if (typeof updater === "function") {
pagination = updater(pagination);
} else {
pagination = updater;
}
},
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
});
</script>
<div>
<div class="rounded-md border">
<Table.Root>
<!--- ... table implementation -->
</Table.Root>
</div>
<div class="flex items-center justify-end space-x-2 py-4">
<Button
variant="outline"
size="sm"
onclick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
Previous
</Button>
<Button
variant="outline"
size="sm"
onclick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
Next
</Button>
</div>
</div>
```
See [Reusable Components](#reusable-components) section for a more advanced pagination component.
</Steps>
## Sorting
Let's make the email column sortable.
<Steps>
### Define `<DataTableEmailButton />` component
We'll start by creating a component to render a sortable email header button.
```svelte showLineNumbers title="routes/payments/data-table-email-button.svelte"
<script lang="ts">
import type { ComponentProps } from "svelte";
import ArrowUpDownIcon from "@lucide/svelte/icons/arrow-up-down";
import { Button } from "$lib/components/ui/button/index.js";
let { variant = "ghost", ...restProps }: ComponentProps<typeof Button> =
$props();
</script>
<Button {variant} {...restProps}>
Email
<ArrowUpDownIcon class="ms-2" />
</Button>
```
### Update `<DataTable />`
```svelte showLineNumbers title="routes/payments/data-table.svelte"
<script lang="ts" generics="TData, TValue">
import {
type ColumnDef,
type PaginationState,
type SortingState,
getCoreRowModel,
getPaginationRowModel,
getSortedRowModel,
} from "@tanstack/table-core";
let { columns, data }: DataTableProps<TData, TValue> = $props();
let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
let sorting = $state<SortingState>([]);
const table = createSvelteTable({
get data() {
return data;
},
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: (updater) => {
if (typeof updater === "function") {
sorting = updater(sorting);
} else {
sorting = updater;
}
},
onPaginationChange: (updater) => {
if (typeof updater === "function") {
pagination = updater(pagination);
} else {
pagination = updater;
}
},
state: {
get pagination() {
return pagination;
},
get sorting() {
return sorting;
},
},
});
</script>
```
### Make header cell sortable
We can now update the `email` header cell to add sorting controls.
```ts showLineNumbers title="src/routes/payments/columns.ts"
import type { ColumnDef } from "@tanstack/table-core";
import { renderComponent } from "$lib/components/ui/data-table/index.js";
import DataTableEmailButton from "./data-table-email-button.svelte";
export const columns: ColumnDef<Payment>[] = [
// ...
{
accessorKey: "email",
header: ({ column }) =>
renderComponent(DataTableEmailButton, {
onclick: column.getToggleSortingHandler(),
}),
},
];
```
This will automatically sort the table (asc and desc) when the user toggles on the header cell.
</Steps>
## Filtering
Let's add a search input to filter emails in our table.
<Steps>
### Update `<DataTable />`
```svelte showLineNumbers title="routes/payments/data-table.svelte"
<script lang="ts" generics="TData, TValue">
import {
type ColumnDef,
type PaginationState,
type SortingState,
type ColumnFiltersState,
getCoreRowModel,
getPaginationRowModel,
getSortedRowModel,
getFilteredRowModel,
} from "@tanstack/table-core";
import { Input } from "$lib/components/ui/input/index.js";
let { columns, data }: DataTableProps<TData, TValue> = $props();
let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
let sorting = $state<SortingState>([]);
let columnFilters = $state<ColumnFiltersState>([]);
const table = createSvelteTable({
get data() {
return data;
},
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onPaginationChange: (updater) => {
if (typeof updater === "function") {
pagination = updater(pagination);
} else {
pagination = updater;
}
},
onSortingChange: (updater) => {
if (typeof updater === "function") {
sorting = updater(sorting);
} else {
sorting = updater;
}
},
onColumnFiltersChange: (updater) => {
if (typeof updater === "function") {
columnFilters = updater(columnFilters);
} else {
columnFilters = updater;
}
},
state: {
get pagination() {
return pagination;
},
get sorting() {
return sorting;
},
get columnFilters() {
return columnFilters;
},
},
});
</script>
<div>
<div class="flex items-center py-4">
<Input
placeholder="Filter emails..."
value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
onchange={(e) => {
table.getColumn("email")?.setFilterValue(e.currentTarget.value);
}}
oninput={(e) => {
table.getColumn("email")?.setFilterValue(e.currentTarget.value);
}}
class="max-w-sm"
/>
</div>
<div class="rounded-md border">
<Table.Root><!-- ... --></Table.Root>
</div>
</div>
```
Filtering is now enabled for the `email` column. You can add filters to other columns as well. See the [filtering docs](https://tanstack.com/table/v8/docs/guide/filters) for more information on customizing filters.
</Steps>
## Visibility
Adding column visibility is fairly simple using `@tanstack/table-core` visibility API.
<Steps>
### Update `<DataTable />`
```svelte showLineNumbers title="routes/payments/data-table.svelte"
<script lang="ts" generics="TData, TValue">
import {
type ColumnDef,
type PaginationState,
type SortingState,
type ColumnFiltersState,
type VisibilityState,
getCoreRowModel,
getPaginationRowModel,
getSortedRowModel,
getFilteredRowModel,
} from "@tanstack/table-core";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
let { columns, data }: DataTableProps<TData, TValue> = $props();
let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
let sorting = $state<SortingState>([]);
let columnFilters = $state<ColumnFiltersState>([]);
let columnVisibility = $state<VisibilityState>({});
const table = createSvelteTable({
get data() {
return data;
},
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onPaginationChange: (updater) => {
if (typeof updater === "function") {
pagination = updater(pagination);
} else {
pagination = updater;
}
},
onSortingChange: (updater) => {
if (typeof updater === "function") {
sorting = updater(sorting);
} else {
sorting = updater;
}
},
onColumnFiltersChange: (updater) => {
if (typeof updater === "function") {
columnFilters = updater(columnFilters);
} else {
columnFilters = updater;
}
},
onColumnVisibilityChange: (updater) => {
if (typeof updater === "function") {
columnVisibility = updater(columnVisibility);
} else {
columnVisibility = updater;
}
},
state: {
get pagination() {
return pagination;
},
get sorting() {
return sorting;
},
get columnFilters() {
return columnFilters;
},
get columnVisibility() {
return columnVisibility;
},
},
});
</script>
<div>
<div class="flex items-center py-4">
<Input
placeholder="Filter emails..."
value={table.getColumn("email")?.getFilterValue() as string}
onchange={(e) =>
table.getColumn("email")?.setFilterValue(e.currentTarget.value)}
oninput={(e) =>
table.getColumn("email")?.setFilterValue(e.currentTarget.value)}
class="max-w-sm"
/>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
{#snippet child({ props })}
<Button {...props} variant="outline" class="ms-auto">Columns</Button>
{/snippet}
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
{#each table
.getAllColumns()
.filter((col) => col.getCanHide()) as column (column.id)}
<DropdownMenu.CheckboxItem
class="capitalize"
bind:checked={
() => column.getIsVisible(), (v) => column.toggleVisibility(!!v)
}
>
{column.id}
</DropdownMenu.CheckboxItem>
{/each}
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
<div class="rounded-md border">
<Table.Root><!--...--></Table.Root>
</div>
</div>
```
This adds a dropdown menu that you can use to toggle column visibility.
</Steps>
## Row Selection
Next, we're going to add row selection to our table.
<Steps>
### Define `<DataTableCheckbox />` component
We'll start by defining the checkbox component in our `data-table-checkbox.svelte` component.
```svelte showLineNumbers title="routes/payments/data-table-checkbox.svelte"
<script lang="ts">
import type { ComponentProps } from "svelte";
import { Checkbox } from "$lib/components/ui/checkbox/index.js";
let {
checked = false,
onCheckedChange = (v) => (checked = v),
...restProps
}: ComponentProps<typeof Checkbox> = $props();
</script>
<Checkbox bind:checked={() => checked, onCheckedChange} {...restProps} />
```
### Update columns definition
Now that we have a new component, we can add a `select` column definition to render a checkbox.
```ts showLineNumbers title="routes/payments/columns.ts"
import type { ColumnDef } from "@tanstack/table-core";
import { renderComponent } from "$lib/components/ui/data-table/index.js";
import { Checkbox } from "$lib/components/ui/checkbox/index.js";
export const columns: ColumnDef<Payment>[] = [
// ...
{
id: "select",
header: ({ table }) =>
renderComponent(Checkbox, {
checked: table.getIsAllPageRowsSelected(),
indeterminate:
table.getIsSomePageRowsSelected() &&
!table.getIsAllPageRowsSelected(),
onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
"aria-label": "Select all",
}),
cell: ({ row }) =>
renderComponent(Checkbox, {
checked: row.getIsSelected(),
onCheckedChange: (value) => row.toggleSelected(!!value),
"aria-label": "Select row",
}),
enableSorting: false,
enableHiding: false,
},
];
```
### Update `<DataTable />`
```svelte showLineNumbers title="routes/payments/data-table.svelte"
<script lang="ts" generics="TData, TValue">
import {
type ColumnDef,
type PaginationState,
type SortingState,
type ColumnFiltersState,
type VisibilityState,
type RowSelectionState,
getCoreRowModel,
getPaginationRowModel,
getSortedRowModel,
getFilteredRowModel,
} from "@tanstack/table-core";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
let { columns, data }: DataTableProps<TData, TValue> = $props();
let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
let sorting = $state<SortingState>([]);
let columnFilters = $state<ColumnFiltersState>([]);
let columnVisibility = $state<VisibilityState>({});
let rowSelection = $state<RowSelectionState>({});
const table = createSvelteTable({
get data() {
return data;
},
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onPaginationChange: (updater) => {
if (typeof updater === "function") {
pagination = updater(pagination);
} else {
pagination = updater;
}
},
onSortingChange: (updater) => {
if (typeof updater === "function") {
sorting = updater(sorting);
} else {
sorting = updater;
}
},
onColumnFiltersChange: (updater) => {
if (typeof updater === "function") {
columnFilters = updater(columnFilters);
} else {
columnFilters = updater;
}
},
onColumnVisibilityChange: (updater) => {
if (typeof updater === "function") {
columnVisibility = updater(columnVisibility);
} else {
columnVisibility = updater;
}
},
onRowSelectionChange: (updater) => {
if (typeof updater === "function") {
rowSelection = updater(rowSelection);
} else {
rowSelection = updater;
}
},
state: {
get pagination() {
return pagination;
},
get sorting() {
return sorting;
},
get columnFilters() {
return columnFilters;
},
get columnVisibility() {
return columnVisibility;
},
get rowSelection() {
return rowSelection;
},
},
});
</script>
```
This adds a checkbox to each row and a checkbox in the header to select all rows.
### Show selected rows
You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
```svelte
<div class="text-muted-foreground flex-1 text-sm">
{table.getFilteredSelectedRowModel().rows.length} of{" "}
{table.getFilteredRowModel().rows.length} row(s) selected.
</div>
```
</Steps>
## Reusable Components
Check out the [Tasks](/examples/tasks) example to learn about creating reusable components for your data tables.
================================================
FILE: docs/content/components/date-picker.md
================================================
---
title: Date Picker
description: A date picker component with range and presets.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/examples/date-picker-demo.svelte
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
</script>
<ComponentPreview name="calendar-22">
<div></div>
</ComponentPreview>
## Installation
The Date Picker is built using a composition of the `<Popover />` and either the `<Calendar />` or `<RangeCalendar />` components.
See installations instructions for the [Popover](/docs/components/popover#installation), [Calendar](/docs/components/calendar#installation), and [Range Calendar](/docs/components/range-calendar#installation) components.
## Usage
```svelte showLineNumbers title="lib/components/example-date-picker.svelte"
<script lang="ts">
import CalendarIcon from "@lucide/svelte/icons/calendar";
import {
type DateValue,
DateFormatter,
getLocalTimeZone,
} from "@internationalized/date";
import { cn } from "$lib/utils.js";
import { Button } from "$lib/components/ui/button/index.js";
import { Calendar } from "$lib/components/ui/calendar/index.js";
import * as Popover from "$lib/components/ui/popover/index.js";
const df = new DateFormatter("en-US", {
dateStyle: "long",
});
let value = $state<DateValue>();
</script>
<Popover.Root>
<Popover.Trigger>
{#snippet child({ props })}
<Button
variant="outline"
class={cn(
"w-[280px] justify-start text-start font-normal",
!value && "text-muted-foreground"
)}
{...props}
>
<CalendarIcon class="me-2 size-4" />
{value ? df.format(value.toDate(getLocalTimeZone())) : "Select a date"}
</Button>
{/snippet}
</Popover.Trigger>
<Popover.Content class="w-auto p-0">
<Calendar bind:value type="single" initialFocus captionLayout="dropdown" />
</Popover.Content>
</Popover.Root>
```
## Examples
### Date of Birth Picker
<ComponentPreview name="calendar-22" description="A calendar with date of birth picker." >
<div></div>
</ComponentPreview>
### Picker with Input
<!--need to fix code not showing due to type-->
<ComponentPreview name="calendar-28" description="A calendar with input and picker." >
<div></div>
</ComponentPreview>
### Date and Time Picker
<ComponentPreview name="calendar-24" description="A calendar with date and time picker." >
<div></div>
</ComponentPreview>
### Natural Language Picker
This component uses the `chrono-node` library to parse natural language dates.
<ComponentPreview name="calendar-29" description="A calendar with natural language picker.">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/dialog.md
================================================
---
title: Dialog
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/dialog
doc: https://bits-ui.com/docs/components/dialog
api: https://bits-ui.com/docs/components/dialog#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="dialog-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="dialog" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Dialog from "$lib/components/ui/dialog/index.js";
</script>
```
```svelte showLineNumbers
<Dialog.Root>
<Dialog.Trigger>Open</Dialog.Trigger>
<Dialog.Content>
<Dialog.Header>
<Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
<Dialog.Description>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</Dialog.Description>
</Dialog.Header>
</Dialog.Content>
</Dialog.Root>
```
## Examples
### Custom close button
<ComponentPreview name="dialog-close-button" >
<div></div>
</ComponentPreview>
<!-- Need to convert to svelte component
## Notes
To use the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or
`Dropdown Menu` component in the `Dialog` component.
```tsx showLineNumbers title="components/example-dialog-context-menu.svelte" {1, 26}
<Dialog>
<ContextMenu>
<ContextMenuTrigger>Right click</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Open</ContextMenuItem>
<ContextMenuItem>Download</ContextMenuItem>
<DialogTrigger>
{#snippet child({ props })}
<ContextMenuItem {...props}>
<span>Delete</span>
</ContextMenuItem>
{/snippet}
</DialogTrigger>
</ContextMenuContent>
</ContextMenu>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. Are you sure you want to permanently
delete this file from our servers?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit">Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
```
-->
================================================
FILE: docs/content/components/drawer.md
================================================
---
title: Drawer
description: A drawer component for Svelte.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/drawer
doc: https://github.com/huntabyte/vaul-svelte
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="drawer-demo">
<div></div>
</ComponentPreview>
## About
Drawer is built on top of [Vaul Svelte](https://vaul-svelte.com), which is a Svelte port of [Vaul](https://vaul.emilkowal.ski) by [Emil Kowalski](https://twitter.com/emilkowalski_).
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="drawer" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `vaul-svelte`:
</Step>
<PMInstall command="vaul-svelte@next -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Drawer from "$lib/components/ui/drawer/index.js";
</script>
```
```svelte showLineNumbers
<Drawer.Root>
<Drawer.Trigger>Open</Drawer.Trigger>
<Drawer.Content>
<Drawer.Header>
<Drawer.Title>Are you sure absolutely sure?</Drawer.Title>
<Drawer.Description>This action cannot be undone.</Drawer.Description>
</Drawer.Header>
<Drawer.Footer>
<Button>Submit</Button>
<Drawer.Close>Cancel</Drawer.Close>
</Drawer.Footer>
</Drawer.Content>
</Drawer.Root>
```
## Examples
### Responsive Dialog
You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` on desktop and a `Drawer` on mobile.
<ComponentPreview name="drawer-dialog">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/dropdown-menu.md
================================================
---
title: Dropdown Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/dropdown-menu
doc: https://bits-ui.com/docs/components/dropdown-menu
api: https://bits-ui.com/docs/components/dropdown-menu#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="dropdown-menu-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="dropdown-menu" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
</script>
```
```svelte showLineNumbers
<DropdownMenu.Root>
<DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Group>
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Profile</DropdownMenu.Item>
<DropdownMenu.Item>Billing</DropdownMenu.Item>
<DropdownMenu.Item>Team</DropdownMenu.Item>
<DropdownMenu.Item>Subscription</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
```
## Examples
### Checkboxes
<ComponentPreview name="dropdown-menu-checkboxes">
<div></div>
</ComponentPreview>
### Radio Group
<ComponentPreview name="dropdown-menu-radio-group">
<div></div>
</ComponentPreview>
### Dialog
This example shows how to open a dialog from a dropdown menu.
```svelte showLineNumbers
<DropdownMenu.Root>
<DropdownMenu.Trigger class={buttonVariants({ variant: "outline" })}>
Actions
</DropdownMenu.Trigger>
</DropdownMenu.Root>
```
<ComponentPreview name="dropdown-menu-dialog" >
<div></div>
</ComponentPreview>
## Changelog
### 2024-10-30 Classes for DropdownMenu.SubTrigger
- Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<DropdownMenu.SubTrigger>` to automatically style icon inside the dropdown menu sub trigger.
- Removed `size-4` from the icon inside the `<DropdownMenu.SubTrigger>` since it is now handled by the parent `<DropdownMenu.SubTrigger>`.
================================================
FILE: docs/content/components/empty.md
================================================
---
title: Empty
description: Use the Empty component to display a empty state.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/empty
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="empty-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="empty" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte
<script lang="ts">
import * as Empty from "$lib/components/ui/empty/index.js";
import FolderCodeIcon from "@tabler/icons-svelte/icons/folder-code";
</script>
```
```svelte
<Empty.Root>
<Empty.Header>
<Empty.Media variant="icon">
<FolderCodeIcon />
</Empty.Media>
<Empty.Title>No data</Empty.Title>
<Empty.Description>No data found</Empty.Description>
</Empty.Header>
<Empty.Content>
<Button>Add data</Button>
</Empty.Content>
</Empty.Root>
```
## Examples
### Outline
Use the `border` utility class to create a outline empty state.
<ComponentPreview name="empty-outline-demo">
<div></div>
</ComponentPreview>
### Background
Use the `bg-*` and `bg-gradient-*` utilities to add a background to the empty state.
<ComponentPreview name="empty-background-demo">
<div></div>
</ComponentPreview>
### Avatar
Use the `EmptyMedia` component to display an avatar in the empty state.
<ComponentPreview name="empty-avatar-demo">
<div></div>
</ComponentPreview>
### Avatar Group
Use the `EmptyMedia` component to display an avatar group in the empty state.
<ComponentPreview name="empty-avatar-group-demo">
<div></div>
</ComponentPreview>
### InputGroup
You can add an `InputGroup` component to the `EmptyContent` component.
<ComponentPreview name="empty-input-group-demo">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/field.md
================================================
---
title: Field
description: Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/field
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="field-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="field" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Field from "$lib/components/ui/field/index.js";
</script>
```
```svelte showLineNumbers
<Field.Set>
<Field.Legend>Profile</Field.Legend>
<Field.Description>This appears on invoices and emails.</Field.Description>
<Field.Group>
<Field.Field>
<Field.Label for="name">Full name</Field.Label>
<Input id="name" autocomplete="off" placeholder="Evil Rabbit" />
<Field.Description
>This appears on invoices and emails.</Field.Description
>
</Field.Field>
<Field.Field>
<Field.Label for="username">Username</Field.Label>
<Input id="username" autoComplete="off" aria-invalid />
<Field.Error>Choose another username.</Field.Error>
</Field.Field>
<Field.Field orientation="horizontal">
<Switch id="newsletter" />
<Field.Label for="newsletter">Subscribe to the newsletter</Field.Label>
</Field.Field>
</Field.Group>
</Field.Set>
```
## Anatomy
The `Field` family is designed for composing accessible forms. A typical field is structured as follows:
```svelte
<Field.Field>
<Field.Label for="input-id">Label</Field.Label>
<!-- Input, Select, Switch, etc. -->
<Field.Description>Optional helper text.</Field.Description>
<Field.Error>Validation message.</Field.Error>
</Field.Field>
```
- `Field.Field` is the core wrapper for a single field.
- `Field.Content` is a flex column that groups label and description. Not required if you have no description.
- Wrap related fields with `Field.Group`, and use `Field.Set` with `Field.Legend` for semantic grouping.
## Examples
### Input
<ComponentPreview name="field-input">
<div></div>
</ComponentPreview>
### Textarea
<ComponentPreview name="field-textarea">
<div></div>
</ComponentPreview>
### Select
<ComponentPreview name="field-select">
<div></div>
</ComponentPreview>
### Slider
<ComponentPreview name="field-slider">
<div></div>
</ComponentPreview>
### Fieldset
<ComponentPreview name="field-field-set-demo">
<div></div>
</ComponentPreview>
### Checkbox
<ComponentPreview name="field-checkbox">
<div></div>
</ComponentPreview>
### Radio
<ComponentPreview name="field-radio">
<div></div>
</ComponentPreview>
### Switch
<ComponentPreview name="field-switch">
<div></div>
</ComponentPreview>
### Choice Card
Wrap `Field` components inside `FieldLabel` to create selectable field groups. This works with `RadioItem`, `Checkbox` and `Switch` components.
<ComponentPreview name="field-choice-card">
<div></div>
</ComponentPreview>
### Field Group
Stack `Field` components with `Field.Group`. Add `Field.Separator` to divide them.
<ComponentPreview name="field-field-group-demo">
<div></div>
</ComponentPreview>
### Responsive Layout
- **Vertical fields:** Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
- **Horizontal fields:** Set `orientation="horizontal"` on `Field` to align the label and control side-by-side. Pair with `Field.Content` to keep descriptions aligned.
- **Responsive fields:** Set `orientation="responsive"` for automatic column layouts inside container-aware parents. Apply `@container/field-group` classes on `Field.Group` to switch orientations at specific breakpoints.
<ComponentPreview name="field-responsive-layout-demo">
<div></div>
</ComponentPreview>
## Validation and Errors
- Add `data-invalid` to `Field` to switch the entire block into an error state.
- Add `aria-invalid` on the input itself for assistive technologies.
- Render `FieldError` immediately after the control or inside `FieldContent` to keep error messages aligned with the field.
Copy
```svelte
<Field.Field data-invalid>
<Field.Label for="email">Email</Field.Label>
<Input id="email" type="email" aria-invalid />
<Field.Error>Enter a valid email address.</Field.Error>
</Field.Field>
```
## Accessibility
- `Field.Set` and `Field.Legend` keep related controls grouped for keyboard and assistive tech users.
- `Field` outputs `role="group"` so nested controls inherit labeling from `Field.Label` and `Field.Legend` when combined.
- Apply `Field.Separator` sparingly to ensure screen readers encounter clear section boundaries.
================================================
FILE: docs/content/components/form.md
================================================
---
title: Formsnap
description: Building forms with Formsnap, Superforms, & Zod.
links:
doc: https://formsnap.dev
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/form
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
</script>
Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.
Well-designed HTML forms are:
- Well-structured and semantically correct.
- Easy to use and navigate (keyboard).
- Accessible with ARIA attributes and proper labels.
- Has support for client and server side validation.
- Well-styled and consistent with the rest of the application.
In this guide, we will take a look at building forms with [formsnap](https://formsnap.dev), [sveltekit-superforms](https://superforms.rocks) and [zod](https://zod.dev).
## Features
The `Form` components offered by `shadcn-svelte` are wrappers around `formsnap` & `sveltekit-superforms` which provide a few things:
- Composable components for building forms.
- Form field components for scoping form state.
- Form validation using [Zod](https://zod.dev) or any other validation library supported by [Superforms](https://superforms.rocks).
- Applies the correct `aria` attributes to form fields based on states.
- Enables you to easily use various components like [Select](/docs/components/select), [RadioGroup](/docs/components/radio-group), [Switch](/docs/components/switch), [Checkbox](/docs/components/checkbox) and other form components with forms.
If you aren't familiar with [Superforms](https://superforms.rocks) & [Formsnap](https://formsnap.dev), you should check out their documentation first, as this guide assumes you have a basic understanding of how they work together.
## Anatomy
```svelte showLineNumbers
<form>
<Form.Field>
<Form.Control>
<Form.Label />
<!-- Any Form input component -->
</Form.Control>
<Form.Description />
<Form.FieldErrors />
</Form.Field>
</form>
```
## Example
```svelte showLineNumbers
<form method="POST" use:enhance>
<Form.Field {form} name="email">
<Form.Control>
{#snippet children({ props })}
<Form.Label>Email</Form.Label>
<Input {...props} bind:value={$formData.email} />
{/snippet}
</Form.Control>
<Form.Description />
<Form.FieldErrors />
</Form.Field>
</form>
```
## Installation
<PMAddComp name="form" />
## Usage
<Steps>
### Create a form schema
Define the shape of your form using a Zod schema. You can read more about using Zod in the [Zod documentation](https://zod.dev). We're going to define it in a file called `schema.ts` in the same directory as our page component, but you can put it anywhere you like.
```ts title="src/routes/settings/schema.ts" showLineNumbers
import { z } from "zod";
export const formSchema = z.object({
username: z.string().min(2).max(50),
});
export type FormSchema = typeof formSchema;
```
### Setup the load function
```ts title="src/routes/settings/+page.server.ts" showLineNumbers
import type { PageServerLoad } from "./$types.js";
import { superValidate } from "sveltekit-superforms";
import { formSchema } from "./schema";
import { zod4 } from "sveltekit-superforms/adapters";
export const load: PageServerLoad = async () => {
return {
form: await superValidate(zod4(formSchema)),
};
};
```
### Create form component
For this example, we'll be passing the `form` returned from the load function as a prop to this component. To ensure it's typed properly, we'll use the `SuperValidated` type from `sveltekit-superforms`, and pass in the type of our form schema.
```svelte title="src/routes/settings/settings-form.svelte" showLineNumbers
<script lang="ts">
import * as Form from "$lib/components/ui/form/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { formSchema, type FormSchema } from "./schema";
import {
type SuperValidated,
type Infer,
superForm,
} from "sveltekit-superforms";
import { zod4Client } from "sveltekit-superforms/adapters";
let { data }: { data: { form: SuperValidated<Infer<FormSchema>> } } =
$props();
const form = superForm(data.form, {
validators: zod4Client(formSchema),
});
const { form: formData, enhance } = form;
</script>
<form method="POST" use:enhance>
<Form.Field {form} name="username">
<Form.Control>
{#snippet children({ props })}
<Form.Label>Username</Form.Label>
<Input {...props} bind:value={$formData.username} />
{/snippet}
</Form.Control>
<Form.Description>This is your public display name.</Form.Description>
<Form.FieldErrors />
</Form.Field>
<Form.Button>Submit</Form.Button>
</form>
```
The `name`, `id`, and all accessibility attributes are applied to the input by spreading the `attrs` object from the `Form.Control` component. The `Form.Label` will automatically be associated with the input using the `for` attribute, so you don't have to worry about that.
### Use the component
We'll pass the `form` from the data returned from the load function to the form component we created above.
```svelte title="src/routes/settings/+page.svelte" showLineNumbers
<script lang="ts">
import type { PageData } from "./$types.js";
import SettingsForm from "./settings-form.svelte";
let { data }: { data: PageData } = $props();
</script>
<SettingsForm {data} />
```
### Create an Action
```ts title="src/routes/settings/+page.server.ts" showLineNumbers {1-2,13-25}
import type { PageServerLoad, Actions } from "./$types.js";
import { fail } from "@sveltejs/kit";
import { superValidate } from "sveltekit-superforms";
import { zod4 } from "sveltekit-superforms/adapters";
import { formSchema } from "./schema";
export const load: PageServerLoad = async () => {
return {
form: await superValidate(zod4(formSchema)),
};
};
export const actions: Actions = {
default: async (event) => {
const form = await superValidate(event, zod4(formSchema));
if (!form.valid) {
return fail(400, {
form,
});
}
return {
form,
};
},
};
```
### Done
That's it. You now have a fully accessible form that is type-safe and has client & server side validation.
<ComponentPreview name="form-demo">
<div></div>
</ComponentPreview>
</Steps>
## Next Steps
Be sure to check out the [Formsnap](https://formsnap.dev) and [Superforms](https://superforms.rocks) documentation for more information on how to use them.
## Examples
See the following links for more examples on how to use the other `Form` components:
- [Checkbox](/docs/components/checkbox#form)
- [Date Picker](/docs/components/date-picker#form)
- [Input](/docs/components/input#form)
- [Radio Group](/docs/components/radio-group#form)
- [Select](/docs/components/select#form)
- [Switch](/docs/components/switch#form)
- [Textarea](/docs/components/textarea#form)
================================================
FILE: docs/content/components/hover-card.md
================================================
---
title: Hover Card
description: For sighted users to preview content available behind a link.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/link-preview
doc: https://bits-ui.com/docs/components/link-preview
api: https://bits-ui.com/docs/components/link-preview#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="hover-card-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="hover-card" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as HoverCard from "$lib/components/ui/hover-card/index.js";
</script>
```
```svelte showLineNumbers
<HoverCard.Root>
<HoverCard.Trigger>Hover</HoverCard.Trigger>
<HoverCard.Content>
SvelteKit - Web development, streamlined
</HoverCard.Content>
</HoverCard.Root>
```
================================================
FILE: docs/content/components/index.md
================================================
---
title: Components
description: Here you can find all the components available in the library. We are working on adding more components.
---
<script>
import ComponentsList from "$lib/components/components-list.svelte";
</script>
<ComponentsList />
================================================
FILE: docs/content/components/input-group.md
================================================
---
title: Input Group
description: Display additional information or actions to an input or textarea.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/input-group
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="input-group-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="input-group" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `@lucide/svelte`:
</Step>
<PMInstall command="@lucide/svelte -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as InputGroup from "$lib/components/ui/input-group/index.js";
import SearchIcon from "@lucide/svelte/icons/search";
</script>
```
```svelte showLineNumbers
<InputGroup.Root>
<InputGroup.Input placeholder="Search..." />
<InputGroup.Addon>
<SearchIcon />
</InputGroup.Addon>
<InputGroup.Addon align="inline-end">
<InputGroup.Button>Search</InputGroup.Button>
</InputGroup.Addon>
</InputGroup.Root>
```
## Examples
### Icon
<ComponentPreview name="input-group-icon-demo">
<div></div>
</ComponentPreview>
### Text
Display additional text information alongside inputs.
<ComponentPreview name="input-group-text-demo">
<div></div>
</ComponentPreview>
### Button
Add buttons to perform actions within the input group.
<ComponentPreview name="input-group-button-demo">
<div></div>
</ComponentPreview>
### Tooltip
Add tooltips to provide additional context or help.
<ComponentPreview name="input-group-tooltip-demo">
<div></div>
</ComponentPreview>
### Textarea
Input groups also work with textarea components. Use `block-start` or `block-end` for alignment.
<ComponentPreview name="input-group-textarea-demo">
<div></div>
</ComponentPreview>
### Spinner
Show loading indicators while processing input.
<ComponentPreview name="input-group-spinner-demo">
<div></div>
</ComponentPreview>
### Label
Add labels within input groups to improve accessibility.
<ComponentPreview name="input-group-label-demo">
<div></div>
</ComponentPreview>
### Dropdown
Pair input groups with dropdown menus for complex interactions.
<ComponentPreview name="input-group-dropdown-demo">
<div></div>
</ComponentPreview>
### Button Group
Wrap input groups with button groups to create prefixes and suffixes.
<ComponentPreview name="input-group-button-group-demo">
<div></div>
</ComponentPreview>
### Custom Input
Add the `data-slot="input-group-control"` attribute to your custom input for automatic behavior and focus state handling.
No style is applied to the custom input. Apply your own styles using the `class` prop.
<ComponentPreview name="input-group-custom-input-demo">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/input-otp.md
================================================
---
title: Input OTP
description: Accessible one-time password component with copy paste functionality.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/input-otp
doc: https://bits-ui.com/docs/components/pin-input
api: https://bits-ui.com/docs/components/pin-input#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="input-otp-demo">
<div></div>
</ComponentPreview>
## About
Input OTP is built on top of Bits UI's [PinInput](https://bits-ui.com/docs/components/pin-input) which is inspired by [@guilherme_rodz](https://twitter.com/guilherme_rodz)'s Input OTP component.
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="input-otp" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as InputOTP from "$lib/components/ui/input-otp/index.js";
</script>
```
```svelte showLineNumbers
<InputOTP.Root maxlength={6}>
{#snippet children({ cells })}
<InputOTP.Group>
{#each cells.slice(0, 3) as cell}
<InputOTP.Slot {cell} />
{/each}
</InputOTP.Group>
<InputOTP.Separator />
<InputOTP.Group>
{#each cells.slice(3, 6) as cell}
<InputOTP.Slot {cell} />
{/each}
</InputOTP.Group>
{/snippet}
</InputOTP.Root>
```
## Examples
### Pattern
Use the `pattern` prop to define a custom pattern for the OTP input.
<ComponentPreview name="input-otp-pattern">
<div></div>
</ComponentPreview>
```svelte showLineNumbers {3,6}
<script lang="ts">
import * as InputOTP from "$lib/components/ui/input-otp/index.js";
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "bits-ui";
</script>
<InputOTP.Root maxlength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
<!-- ... -->
</InputOTP.Root>
```
### Separator
You can use the `InputOTP.Separator` component to add a separator between the groups of cells.
<ComponentPreview name="input-otp-separator">
<div></div>
</ComponentPreview>
```svelte showLineNumbers {12}
<script lang="ts">
import * as InputOTP from "$lib/components/ui/input-otp/index.js";
</script>
<InputOTP.Root maxlength={4}>
{#snippet children({ cells })}
<InputOTP.Group>
{#each cells.slice(0, 2) as cell}
<InputOTP.Slot {cell} />
{/each}
</InputOTP.Group>
<InputOTP.Separator />
<InputOTP.Group>
{#each cells.slice(2, 4) as cell}
<InputOTP.Slot {cell} />
{/each}
</InputOTP.Group>
{/snippet}
</InputOTP.Root>
```
### Controlled
<ComponentPreview name="input-otp-controlled">
<div></div>
</ComponentPreview>
### Form
<ComponentPreview name="input-otp-form">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/input.md
================================================
---
title: Input
description: Displays a form input field or a component that looks like an input field.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/input
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="input-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="input" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte
<script lang="ts">
import { Input } from "$lib/components/ui/input/index.js";
</script>
```
```svelte
<Input />
```
## Examples
### Default
<ComponentPreview name="input-demo">
<div></div>
</ComponentPreview>
### File
<ComponentPreview name="input-file">
<div></div>
</ComponentPreview>
### Disabled
<ComponentPreview name="input-disabled">
<div></div>
</ComponentPreview>
### With Label
<ComponentPreview name="input-with-label">
<div></div>
</ComponentPreview>
### With Button
<ComponentPreview name="input-with-button">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/item.md
================================================
---
title: Item
description: A versatile component that you can use to display any content.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/item
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items.
You can pretty much achieve the same result with the `div` element and some classes, but **I've built this so many times** that I decided to create a component for it. Now I use it all the time.
<ComponentPreview name="item-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="item" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Item from "$lib/components/ui/item/index.js";
</script>
```
```svelte showLineNumbers
<Item.Root>
<Item.Header>Item Header</Item.Header>
<Item.Media />
<Item.Content>
<Item.Title>Item</Item.Title>
<Item.Description>Item</Item.Description>
</Item.Content>
<Item.Actions />
<Item.Footer>Item Footer</Item.Footer>
</Item.Root>
```
## Item vs Field
Use Field if you need to display a form input such as a checkbox, input, radio, or select.
If you only need to display content such as a title, description, and actions, use `Item`.
## Examples
### Variants
<ComponentPreview name="item-variants-demo">
<div></div>
</ComponentPreview>
### Size
The `Item` component has different sizes for different use cases. For example, you can use the `sm` size for a compact item or the default size for a standard item.
<ComponentPreview name="item-size-demo">
<div></div>
</ComponentPreview>
### Icon
<ComponentPreview name="item-icon-demo">
<div></div>
</ComponentPreview>
### Avatar
<ComponentPreview name="item-avatar-demo">
<div></div>
</ComponentPreview>
### Image
<ComponentPreview name="item-image-demo">
<div></div>
</ComponentPreview>
### Group
<ComponentPreview name="item-group-demo">
<div></div>
</ComponentPreview>
### Header
<ComponentPreview name="item-header-demo">
<div></div>
</ComponentPreview>
### Link
To render an item as a link, use the the `child` snippet. The hover and focus states will be applied to the anchor element.
<ComponentPreview name="item-link-demo">
<div></div>
</ComponentPreview>
### Dropdown
<ComponentPreview name="item-dropdown-demo">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/kbd.md
================================================
---
title: Kbd
description: Used to display textual user input from keyboard.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/kbd
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
</script>
<ComponentPreview name="kbd-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="kbd" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte
<script lang="ts">
import * as Kbd from "$lib/components/ui/kbd/index.js";
</script>
```
```svelte
<Kbd.Root>B</Kbd.Root>
```
## Examples
### Group
Use the `Kbd.Group` component to group keyboard keys together.
<ComponentPreview name="kbd-group-demo">
<div></div>
</ComponentPreview>
### Button
Use the `Kbd.Root` component inside a `Button` component to display a keyboard key inside a button.
<ComponentPreview name="kbd-button-demo">
<div></div>
</ComponentPreview>
### Tooltip
You can use the `Kbd.Root` component inside a `Tooltip` component to display a tooltip with a keyboard key.
<ComponentPreview name="kbd-tooltip-demo">
<div></div>
</ComponentPreview>
### Input Group
You can use the `Kbd.Root` component inside a `InputGroup.Addon` component to display a keyboard key inside an input group.
<ComponentPreview name="kbd-input-group-demo">
<div></div>
</ComponentPreview>
================================================
FILE: docs/content/components/label.md
================================================
---
title: Label
description: Renders an accessible label associated with controls.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/label
doc: https://bits-ui.com/docs/components/label
api: https://bits-ui.com/docs/components/label#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="label-demo">
<div></div>
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="label" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte
<script lang="ts">
import { Label } from "$lib/components/ui/label/index.js";
</script>
```
```svelte
<Label for="email">Your email address</Label>
```
================================================
FILE: docs/content/components/menubar.md
================================================
---
title: Menubar
description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/menubar
doc: https://bits-ui.com/docs/components/menubar
api: https://bits-ui.com/docs/components/menubar#api-reference
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import PMInstall from "$lib/components/pm-install.svelte";
import Steps from "$lib/components/steps.svelte";
import Step from "$lib/components/step.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
</script>
<ComponentPreview name="menubar-demo">
</ComponentPreview>
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="menubar" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Install `bits-ui`:
</Step>
<PMInstall command="bits-ui -D" />
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as Menubar from "$lib/components/ui/menubar/index.js";
</script>
```
```svelte showLineNumbers
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger>File</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item>
New Tab
<Menubar.Shortcut>⌘T</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item>New Window</Menubar.Item>
<Menubar.Separator />
<Menubar.Item>Share</Menubar.Item>
<Menubar.Separator />
<Menubar.Item>Print</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>
</Menubar.Root>
```
================================================
FILE: docs/content/components/native-select.md
================================================
---
title: Native Select
description: A styled native HTML select element with consistent design system integration.
component: true
links:
source: https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/native-select
---
<script>
import ComponentPreview from "$lib/components/component-preview.svelte";
import ComponentSource from "$lib/components/component-source.svelte";
import PMAddComp from "$lib/components/pm-add-comp.svelte";
import InstallTabs from "$lib/components/install-tabs.svelte";
let { viewerData } = $props();
import Step from "$lib/components/step.svelte";
import Steps from "$lib/components/steps.svelte";
import Callout from "$lib/components/callout.svelte";
import InfoIcon from "@lucide/svelte/icons/info";
</script>
<Callout variant="info" icon={InfoIcon} class="!translate-y-[3px]" >
For a styled select component, see the [Select](/docs/components/select) component.
</Callout>
<ComponentPreview name="native-select-demo" />
## Installation
<InstallTabs>
{#snippet cli()}
<PMAddComp name="native-select" />
{/snippet}
{#snippet manual()}
<Steps>
<Step>
Copy and paste the following code into your project.
</Step>
{#if viewerData}
<ComponentSource item={viewerData} data-llm-ignore/>
{/if}
</Steps>
{/snippet}
</InstallTabs>
## Usage
```svelte showLineNumbers
<script lang="ts">
import * as NativeSelect from "$lib/components/ui/native-select/index.js";
</script>
```
```svelte showLineNumbers
<NativeSelect.Root>
<NativeSelect.Option value="">Select a fruit</NativeSelect.Option>
<NativeSelect.Option value="apple">Apple</NativeSelect.Option>
<NativeSelect.Option value="banana">Banana</NativeSelect.Option>
<NativeSelect.Option value="blueberry">Blueberry</NativeSelect.Option>
<NativeSelect.Option value="grapes" disabled>Grapes</NativeSelect.Option>
<NativeSelect.Option value="pineapple">Pineapple</NativeSelect.Option>
</NativeSelect.Root>
```
## Examples
### With Groups
Organize options using `NativeSelect.OptGroup` for better categorization.
<ComponentPreview name="native-select-groups" >
<div></div>
</ComponentPreview>
```svelte showLineNumbers
<NativeSelect.Root>
<NativeSelect.Option value="">Select a food</NativeSelect.Option>
<NativeSelect.OptGroup label="Fruits">
<NativeSelect.Option value="apple">Apple</NativeSelect.Option>
<NativeSelect.Option value="banana">Banana</NativeSelect.Option>
<NativeSelect.Option value="blueberry">Blueberry</NativeSelect.Option>
</NativeSelect.OptGroup>
<NativeSelect.OptGroup label="Vegetables">
<NativeSelect.Option value="carrot">Carrot</NativeSelect.Option>
<NativeSelect.Option value="broccoli">Broccoli</NativeSelect.Option>
<NativeSelect.Option value="spinach">Spinach</NativeSelect.Option>
</NativeSelect.OptGroup>
</NativeSelect.Root>
```
### Disabled State
Disable individual options or the entire select component.
<ComponentPreview name="native-select-disabled" >
<div></div>
</ComponentPreview>
### Invalid State
Show validation errors with the `aria-invalid` attribute and error styling.
<ComponentPreview name="native-select-invalid" >
<div></div>
</ComponentPreview>
```svelte showLineNumbers
<NativeSelect.Root aria-invalid="true">
<NativeSelect.Option value="">Select a country</NativeSelect.Option>
<NativeSelect.Option value="us">United States</NativeSelect.Option>
<NativeSelect.Option value="uk">United Kingdom</NativeSelect.Option>
<NativeSelect.Option value="ca">Canada</NativeSelect.Option>
</NativeSelect.Root>
```
## Native Select vs Select
- Use `NativeSelect` when you need native browser behavior, better performance, or mobile-optimized dropdowns.
- Use `Select` when you need custom styling, animations, or complex interactions.
The `NativeSelect` component provides native HTML select functionality with consistent styling that matches your design system.
## Accessibility
- The component maintains all native HTML select accessibility features.
- Screen readers can navigate through options using arrow keys.
- The chevron icon is marked as `aria-hidden="true"` to avoid duplication.
- Use `aria-label` or `aria-labelledby` for additional context when needed.
```tsx showLineNumbers
<NativeSelect.Root aria-label="Choose your preferred language">
<NativeSelect.Option value="en">English</NativeSelect.Option>
<NativeSelect.Option value="es">Spanish</NativeSelect.Option>
<NativeSelect.Option value="fr">French</NativeSelect.Option>
</NativeSelect.Root>
```
## API Reference
### NativeSelect.Root
The main select component that wraps the native HTML select element.
| Prop | Type | Default |
| ------- | -------- | ------- |
| `class` | `string` | |
All other props are passed through to the underlying `<select>` element.
```svelte
<NativeSelect.Root>
<NativeSelect.Option value="option1">Option 1</NativeSelect.Option>
<NativeSelect.Option value="option2">Option 2</NativeSelect.Option>
</NativeSelect.Root>
```
### NativeSelect.Option
Represents an individual option within the select.
| Prop | Type | Default |
| ---------- | --------- | ------- |
| `value` | `string` | |
| `disabled` | `boolean` | `false` |
| `class` | `string` | |
All other props are passed through to the underlying `<option>` element.
```svelte
<NativeSelect.Option value="apple">Apple</NativeSelect.Option>
<NativeSelect.Option value="banana" disabled>Banana</NativeSelect.Option>
```
### NativeSelect.OptGroup
Groups related options together for better organization.
| Prop | Type | Default |
| ---------- | --------- | ------- |
| `label` | `string` | |
| `disabled` | `boolean` | `false` |
| `class` | `string` | |
All other props are passed through to the underlying `<optgroup>` element.
```svelte
<NativeSelect.OptGroup label="Fruits">
<NativeSelect.Option value="apple">Apple</NativeSelect.Option>
<NativeSelect.Option value="banana">Banana</NativeSelec
gitextract_t3sawww4/
├── .changeset/
│ ├── README.md
│ └── config.json
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── 1-documentation_change.yml
│ │ ├── 2-feature_request.yml
│ │ ├── 3-bug_report.yml
│ │ └── config.yml
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── reproduire/
│ │ └── needs-reproduction.md
│ └── workflows/
│ ├── autoformat.yml
│ ├── build-preview.yml
│ ├── ci.yml
│ ├── deploy-preview.yml
│ ├── deploy-prod.yml
│ ├── deploy-svelte-4.yml
│ ├── deploy-tailwind-3.yml
│ ├── pr-guard.yml
│ ├── release.yml
│ ├── reproduire-close.yml
│ └── reproduire.yml
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .vscode/
│ └── settings.json
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── docs/
│ ├── .gitignore
│ ├── .npmrc
│ ├── README.md
│ ├── _headers
│ ├── content/
│ │ ├── about.md
│ │ ├── changelog.md
│ │ ├── cli.md
│ │ ├── components/
│ │ │ ├── accordion.md
│ │ │ ├── alert-dialog.md
│ │ │ ├── alert.md
│ │ │ ├── aspect-ratio.md
│ │ │ ├── avatar.md
│ │ │ ├── badge.md
│ │ │ ├── breadcrumb.md
│ │ │ ├── button-group.md
│ │ │ ├── button.md
│ │ │ ├── calendar.md
│ │ │ ├── card.md
│ │ │ ├── carousel.md
│ │ │ ├── chart.md
│ │ │ ├── checkbox.md
│ │ │ ├── collapsible.md
│ │ │ ├── combobox.md
│ │ │ ├── command.md
│ │ │ ├── context-menu.md
│ │ │ ├── data-table.md
│ │ │ ├── date-picker.md
│ │ │ ├── dialog.md
│ │ │ ├── drawer.md
│ │ │ ├── dropdown-menu.md
│ │ │ ├── empty.md
│ │ │ ├── field.md
│ │ │ ├── form.md
│ │ │ ├── hover-card.md
│ │ │ ├── index.md
│ │ │ ├── input-group.md
│ │ │ ├── input-otp.md
│ │ │ ├── input.md
│ │ │ ├── item.md
│ │ │ ├── kbd.md
│ │ │ ├── label.md
│ │ │ ├── menubar.md
│ │ │ ├── native-select.md
│ │ │ ├── navigation-menu.md
│ │ │ ├── pagination.md
│ │ │ ├── popover.md
│ │ │ ├── progress.md
│ │ │ ├── radio-group.md
│ │ │ ├── range-calendar.md
│ │ │ ├── resizable.md
│ │ │ ├── scroll-area.md
│ │ │ ├── select.md
│ │ │ ├── separator.md
│ │ │ ├── sheet.md
│ │ │ ├── sidebar.md
│ │ │ ├── skeleton.md
│ │ │ ├── slider.md
│ │ │ ├── sonner.md
│ │ │ ├── spinner.md
│ │ │ ├── switch.md
│ │ │ ├── table.md
│ │ │ ├── tabs.md
│ │ │ ├── textarea.md
│ │ │ ├── toggle-group.md
│ │ │ ├── toggle.md
│ │ │ ├── tooltip.md
│ │ │ └── typography.md
│ │ ├── components-json.md
│ │ ├── dark-mode/
│ │ │ ├── astro.md
│ │ │ ├── index.md
│ │ │ └── svelte.md
│ │ ├── figma.md
│ │ ├── index.md
│ │ ├── installation/
│ │ │ ├── astro.md
│ │ │ ├── index.md
│ │ │ ├── manual.md
│ │ │ ├── sveltekit.md
│ │ │ └── vite.md
│ │ ├── javascript.md
│ │ ├── legacy.md
│ │ ├── migration/
│ │ │ ├── index.md
│ │ │ ├── svelte-5.md
│ │ │ └── tailwind-v4.md
│ │ ├── registry/
│ │ │ ├── examples.md
│ │ │ ├── faq.md
│ │ │ ├── getting-started.md
│ │ │ ├── index.md
│ │ │ ├── registry-item-json.md
│ │ │ └── registry-json.md
│ │ └── theming.md
│ ├── mdsx.config.js
│ ├── package.json
│ ├── scripts/
│ │ ├── build-icons.ts
│ │ ├── build-llm-placeholders.ts
│ │ ├── build-llms.ts
│ │ ├── build-registry.ts
│ │ ├── pull-styles.ts
│ │ ├── registry.ts
│ │ ├── tsconfig.json
│ │ └── velite/
│ │ ├── velite-update-json.ts
│ │ ├── velite-utils.ts
│ │ └── velite-watch-output.ts
│ ├── src/
│ │ ├── app.css
│ │ ├── app.d.ts
│ │ ├── app.html
│ │ ├── lib/
│ │ │ ├── blocks.ts
│ │ │ ├── colors.ts
│ │ │ ├── components/
│ │ │ │ ├── announcement.svelte
│ │ │ │ ├── block-viewer-code.svelte
│ │ │ │ ├── block-viewer-copy-code-button.svelte
│ │ │ │ ├── block-viewer-file-tree.svelte
│ │ │ │ ├── block-viewer-iframe.svelte
│ │ │ │ ├── block-viewer-toolbar.svelte
│ │ │ │ ├── block-viewer-tree.svelte
│ │ │ │ ├── block-viewer-view-mobile.svelte
│ │ │ │ ├── block-viewer-view.svelte
│ │ │ │ ├── block-viewer.svelte
│ │ │ │ ├── blocks-nav.svelte
│ │ │ │ ├── callout.svelte
│ │ │ │ ├── cards/
│ │ │ │ │ ├── activity-goal.svelte
│ │ │ │ │ ├── appearance-settings.svelte
│ │ │ │ │ ├── calendar.svelte
│ │ │ │ │ ├── cards-demo.svelte
│ │ │ │ │ ├── chat.svelte
│ │ │ │ │ ├── cookie-settings.svelte
│ │ │ │ │ ├── create-account.svelte
│ │ │ │ │ ├── demo.svelte
│ │ │ │ │ ├── exercise-minutes.svelte
│ │ │ │ │ ├── field-checkbox.svelte
│ │ │ │ │ ├── field-hear.svelte
│ │ │ │ │ ├── forms.svelte
│ │ │ │ │ ├── input-demo.svelte
│ │ │ │ │ ├── input-group-button-demo.svelte
│ │ │ │ │ ├── item-demo.svelte
│ │ │ │ │ ├── nested.svelte
│ │ │ │ │ ├── notion-prompt-form.svelte
│ │ │ │ │ ├── payments-actions-cell.svelte
│ │ │ │ │ ├── payments-email-header.svelte
│ │ │ │ │ ├── payments.svelte
│ │ │ │ │ ├── report-issue.svelte
│ │ │ │ │ ├── root-components.svelte
│ │ │ │ │ ├── share.svelte
│ │ │ │ │ ├── stats.svelte
│ │ │ │ │ └── team-members.svelte
│ │ │ │ ├── chart-code-viewer.svelte
│ │ │ │ ├── chart-copy-button.svelte
│ │ │ │ ├── chart-display.svelte
│ │ │ │ ├── chart-toolbar.svelte
│ │ │ │ ├── chart-tooltip-demo-item.svelte
│ │ │ │ ├── charts-nav.svelte
│ │ │ │ ├── code-collapsible-wrapper.svelte
│ │ │ │ ├── code-tabs.svelte
│ │ │ │ ├── color-format-selector.svelte
│ │ │ │ ├── color-indicator.svelte
│ │ │ │ ├── color-palette.svelte
│ │ │ │ ├── color.svelte
│ │ │ │ ├── colors/
│ │ │ │ │ ├── color-card.svelte
│ │ │ │ │ └── colors.ts
│ │ │ │ ├── colors-nav.svelte
│ │ │ │ ├── command-menu/
│ │ │ │ │ ├── command-menu-item.svelte
│ │ │ │ │ └── command-menu.svelte
│ │ │ │ ├── component-code-viewer/
│ │ │ │ │ ├── component-code-viewer-code-title.svelte
│ │ │ │ │ ├── component-code-viewer-code.svelte
│ │ │ │ │ ├── component-code-viewer-copy-code-button.svelte
│ │ │ │ │ ├── component-code-viewer-file-tree.svelte
│ │ │ │ │ ├── component-code-viewer-tree.svelte
│ │ │ │ │ └── component-code-viewer.svelte
│ │ │ │ ├── component-preview-tabs.svelte
│ │ │ │ ├── component-preview.svelte
│ │ │ │ ├── component-source.svelte
│ │ │ │ ├── components-list.svelte
│ │ │ │ ├── copy-button.svelte
│ │ │ │ ├── cta-mobile.svelte
│ │ │ │ ├── cta.svelte
│ │ │ │ ├── customizer.svelte
│ │ │ │ ├── doc-tabs/
│ │ │ │ │ ├── doc-tabs-content.svelte
│ │ │ │ │ ├── doc-tabs-list.svelte
│ │ │ │ │ ├── doc-tabs-trigger.svelte
│ │ │ │ │ ├── doc-tabs.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── docs-copy-page.svelte
│ │ │ │ ├── docs-figure.svelte
│ │ │ │ ├── docs-sidebar.svelte
│ │ │ │ ├── docs-toc.svelte
│ │ │ │ ├── ethical.svelte
│ │ │ │ ├── examples-nav.svelte
│ │ │ │ ├── github-link.svelte
│ │ │ │ ├── github.svelte
│ │ │ │ ├── icon-placeholder/
│ │ │ │ │ ├── hugeicons-icon.svelte
│ │ │ │ │ ├── icon-loader.ts
│ │ │ │ │ ├── icon-placeholder.svelte
│ │ │ │ │ ├── lucide-icon.svelte
│ │ │ │ │ ├── phosphor-icon.svelte
│ │ │ │ │ ├── remixicon-icon.svelte
│ │ │ │ │ └── tabler-icon.svelte
│ │ │ │ ├── icons/
│ │ │ │ │ ├── bash.svelte
│ │ │ │ │ ├── css.svelte
│ │ │ │ │ ├── icons.ts
│ │ │ │ │ ├── json.svelte
│ │ │ │ │ ├── svelte.svelte
│ │ │ │ │ └── ts.svelte
│ │ │ │ ├── install-cards.svelte
│ │ │ │ ├── install-tabs.svelte
│ │ │ │ ├── layout-toggle.svelte
│ │ │ │ ├── linked-card.svelte
│ │ │ │ ├── logo.svelte
│ │ │ │ ├── main-nav.svelte
│ │ │ │ ├── mdsx/
│ │ │ │ │ ├── a.svelte
│ │ │ │ │ ├── blockquote.svelte
│ │ │ │ │ ├── blueprint.svelte
│ │ │ │ │ ├── figcaption.svelte
│ │ │ │ │ ├── h1.svelte
│ │ │ │ │ ├── h2.svelte
│ │ │ │ │ ├── h3.svelte
│ │ │ │ │ ├── h4.svelte
│ │ │ │ │ ├── h5.svelte
│ │ │ │ │ ├── h6.svelte
│ │ │ │ │ ├── hr.svelte
│ │ │ │ │ ├── img.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── li.svelte
│ │ │ │ │ ├── ol.svelte
│ │ │ │ │ ├── p.svelte
│ │ │ │ │ ├── pre.svelte
│ │ │ │ │ ├── strong.svelte
│ │ │ │ │ ├── table.svelte
│ │ │ │ │ ├── td.svelte
│ │ │ │ │ ├── th.svelte
│ │ │ │ │ ├── tr.svelte
│ │ │ │ │ └── ul.svelte
│ │ │ │ ├── metadata.svelte
│ │ │ │ ├── mobile-nav.svelte
│ │ │ │ ├── mode-switcher.svelte
│ │ │ │ ├── og.svelte
│ │ │ │ ├── page-header/
│ │ │ │ │ ├── page-actions.svelte
│ │ │ │ │ ├── page-header-description.svelte
│ │ │ │ │ ├── page-header-heading.svelte
│ │ │ │ │ └── page-header.svelte
│ │ │ │ ├── page-nav.svelte
│ │ │ │ ├── pm-add-comp.svelte
│ │ │ │ ├── pm-block.svelte
│ │ │ │ ├── pm-create.svelte
│ │ │ │ ├── pm-execute.svelte
│ │ │ │ ├── pm-install.svelte
│ │ │ │ ├── pm-remove.svelte
│ │ │ │ ├── pm-run.svelte
│ │ │ │ ├── pm-upgrade.svelte
│ │ │ │ ├── site-footer.svelte
│ │ │ │ ├── site-header.svelte
│ │ │ │ ├── spinner.svelte
│ │ │ │ ├── step.svelte
│ │ │ │ ├── steps.svelte
│ │ │ │ ├── svelte-white.svelte
│ │ │ │ ├── tab.svelte
│ │ │ │ ├── tailwind-indicator.svelte
│ │ │ │ ├── theme-customizer-code.svelte
│ │ │ │ ├── theme-customizer.svelte
│ │ │ │ └── theme-selector.svelte
│ │ │ ├── config.ts
│ │ │ ├── constants.ts
│ │ │ ├── docs.ts
│ │ │ ├── features/
│ │ │ │ └── design-system/
│ │ │ │ ├── components/
│ │ │ │ │ ├── design-system-provider-state.svelte.ts
│ │ │ │ │ └── design-system-provider.svelte
│ │ │ │ └── index.ts
│ │ │ ├── highlight-code.ts
│ │ │ ├── hooks/
│ │ │ │ ├── use-clipboard.svelte.ts
│ │ │ │ ├── use-is-mac.svelte.ts
│ │ │ │ └── use-mutation-observer.svelte.ts
│ │ │ ├── navigation.ts
│ │ │ ├── package-manager.ts
│ │ │ ├── registry/
│ │ │ │ ├── blocks/
│ │ │ │ │ ├── calendar-01.svelte
│ │ │ │ │ ├── calendar-02.svelte
│ │ │ │ │ ├── calendar-03.svelte
│ │ │ │ │ ├── calendar-04.svelte
│ │ │ │ │ ├── calendar-05.svelte
│ │ │ │ │ ├── calendar-06.svelte
│ │ │ │ │ ├── calendar-07.svelte
│ │ │ │ │ ├── calendar-08.svelte
│ │ │ │ │ ├── calendar-09.svelte
│ │ │ │ │ ├── calendar-10.svelte
│ │ │ │ │ ├── calendar-11.svelte
│ │ │ │ │ ├── calendar-12.svelte
│ │ │ │ │ ├── calendar-13.svelte
│ │ │ │ │ ├── calendar-14.svelte
│ │ │ │ │ ├── calendar-15.svelte
│ │ │ │ │ ├── calendar-16.svelte
│ │ │ │ │ ├── calendar-17.svelte
│ │ │ │ │ ├── calendar-18.svelte
│ │ │ │ │ ├── calendar-19.svelte
│ │ │ │ │ ├── calendar-20.svelte
│ │ │ │ │ ├── calendar-21.svelte
│ │ │ │ │ ├── calendar-22.svelte
│ │ │ │ │ ├── calendar-23.svelte
│ │ │ │ │ ├── calendar-24.svelte
│ │ │ │ │ ├── calendar-25.svelte
│ │ │ │ │ ├── calendar-26.svelte
│ │ │ │ │ ├── calendar-27.svelte
│ │ │ │ │ ├── calendar-28.svelte
│ │ │ │ │ ├── calendar-29.svelte
│ │ │ │ │ ├── calendar-30.svelte
│ │ │ │ │ ├── calendar-31.svelte
│ │ │ │ │ ├── calendar-32.svelte
│ │ │ │ │ ├── chart-area-axes.svelte
│ │ │ │ │ ├── chart-area-default.svelte
│ │ │ │ │ ├── chart-area-gradient.svelte
│ │ │ │ │ ├── chart-area-icons.svelte
│ │ │ │ │ ├── chart-area-interactive.svelte
│ │ │ │ │ ├── chart-area-legend.svelte
│ │ │ │ │ ├── chart-area-linear.svelte
│ │ │ │ │ ├── chart-area-stacked-expand.svelte
│ │ │ │ │ ├── chart-area-stacked.svelte
│ │ │ │ │ ├── chart-area-step.svelte
│ │ │ │ │ ├── chart-bar-active.svelte
│ │ │ │ │ ├── chart-bar-default.svelte
│ │ │ │ │ ├── chart-bar-horizontal.svelte
│ │ │ │ │ ├── chart-bar-interactive.svelte
│ │ │ │ │ ├── chart-bar-label-custom.svelte
│ │ │ │ │ ├── chart-bar-label.svelte
│ │ │ │ │ ├── chart-bar-mixed.svelte
│ │ │ │ │ ├── chart-bar-multiple.svelte
│ │ │ │ │ ├── chart-bar-negative.svelte
│ │ │ │ │ ├── chart-bar-stacked.svelte
│ │ │ │ │ ├── chart-line-default.svelte
│ │ │ │ │ ├── chart-line-dots-colors.svelte
│ │ │ │ │ ├── chart-line-dots-custom.svelte
│ │ │ │ │ ├── chart-line-dots.svelte
│ │ │ │ │ ├── chart-line-interactive.svelte
│ │ │ │ │ ├── chart-line-label-custom.svelte
│ │ │ │ │ ├── chart-line-label.svelte
│ │ │ │ │ ├── chart-line-linear.svelte
│ │ │ │ │ ├── chart-line-multiple.svelte
│ │ │ │ │ ├── chart-line-step.svelte
│ │ │ │ │ ├── chart-pie-donut-active.svelte
│ │ │ │ │ ├── chart-pie-donut-text.svelte
│ │ │ │ │ ├── chart-pie-donut.svelte
│ │ │ │ │ ├── chart-pie-interactive.svelte
│ │ │ │ │ ├── chart-pie-label-custom.svelte
│ │ │ │ │ ├── chart-pie-label-list.svelte
│ │ │ │ │ ├── chart-pie-label.svelte
│ │ │ │ │ ├── chart-pie-legend.svelte
│ │ │ │ │ ├── chart-pie-separator-none.svelte
│ │ │ │ │ ├── chart-pie-simple.svelte
│ │ │ │ │ ├── chart-pie-stacked.svelte
│ │ │ │ │ ├── chart-radar-default.svelte
│ │ │ │ │ ├── chart-radar-dots.svelte
│ │ │ │ │ ├── chart-radar-grid-circle-fill.svelte
│ │ │ │ │ ├── chart-radar-grid-circle-no-lines.svelte
│ │ │ │ │ ├── chart-radar-grid-circle.svelte
│ │ │ │ │ ├── chart-radar-grid-custom.svelte
│ │ │ │ │ ├── chart-radar-grid-fill.svelte
│ │ │ │ │ ├── chart-radar-grid-none.svelte
│ │ │ │ │ ├── chart-radar-icons.svelte
│ │ │ │ │ ├── chart-radar-label-custom.svelte
│ │ │ │ │ ├── chart-radar-legend.svelte
│ │ │ │ │ ├── chart-radar-lines-only.svelte
│ │ │ │ │ ├── chart-radar-multiple.svelte
│ │ │ │ │ ├── chart-radar-radius.svelte
│ │ │ │ │ ├── chart-radial-grid.svelte
│ │ │ │ │ ├── chart-radial-label.svelte
│ │ │ │ │ ├── chart-radial-shape.svelte
│ │ │ │ │ ├── chart-radial-simple.svelte
│ │ │ │ │ ├── chart-radial-stacked.svelte
│ │ │ │ │ ├── chart-radial-text.svelte
│ │ │ │ │ ├── chart-tooltip-advanced.svelte
│ │ │ │ │ ├── chart-tooltip-default.svelte
│ │ │ │ │ ├── chart-tooltip-formatter.svelte
│ │ │ │ │ ├── chart-tooltip-icons.svelte
│ │ │ │ │ ├── chart-tooltip-indicator-line.svelte
│ │ │ │ │ ├── chart-tooltip-indicator-none.svelte
│ │ │ │ │ ├── chart-tooltip-label-custom.svelte
│ │ │ │ │ ├── chart-tooltip-label-formatter.svelte
│ │ │ │ │ ├── chart-tooltip-label-none.svelte
│ │ │ │ │ ├── dashboard-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ │ ├── chart-area-interactive.svelte
│ │ │ │ │ │ │ ├── data-table-actions.svelte
│ │ │ │ │ │ │ ├── data-table-cell-viewer.svelte
│ │ │ │ │ │ │ ├── data-table-checkbox.svelte
│ │ │ │ │ │ │ ├── data-table-drag-handle.svelte
│ │ │ │ │ │ │ ├── data-table-header-limit.svelte
│ │ │ │ │ │ │ ├── data-table-header-target.svelte
│ │ │ │ │ │ │ ├── data-table-limit.svelte
│ │ │ │ │ │ │ ├── data-table-reviewer.svelte
│ │ │ │ │ │ │ ├── data-table-status.svelte
│ │ │ │ │ │ │ ├── data-table-target.svelte
│ │ │ │ │ │ │ ├── data-table-type.svelte
│ │ │ │ │ │ │ ├── data-table.svelte
│ │ │ │ │ │ │ ├── nav-documents.svelte
│ │ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ │ ├── schemas.ts
│ │ │ │ │ │ │ ├── section-cards.svelte
│ │ │ │ │ │ │ └── site-header.svelte
│ │ │ │ │ │ └── data.ts
│ │ │ │ │ ├── demo-sidebar-controlled.svelte
│ │ │ │ │ ├── demo-sidebar-footer.svelte
│ │ │ │ │ ├── demo-sidebar-group-action.svelte
│ │ │ │ │ ├── demo-sidebar-group-collapsible.svelte
│ │ │ │ │ ├── demo-sidebar-group.svelte
│ │ │ │ │ ├── demo-sidebar-header.svelte
│ │ │ │ │ ├── demo-sidebar-menu-action.svelte
│ │ │ │ │ ├── demo-sidebar-menu-badge.svelte
│ │ │ │ │ ├── demo-sidebar-menu-collapsible.svelte
│ │ │ │ │ ├── demo-sidebar-menu-sub.svelte
│ │ │ │ │ ├── demo-sidebar-menu.svelte
│ │ │ │ │ ├── demo-sidebar.svelte
│ │ │ │ │ ├── login-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── login-02/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── login-03/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── login-04/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── login-05/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── login-form.svelte
│ │ │ │ │ ├── new-components-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── appearance-settings.svelte
│ │ │ │ │ │ ├── button-group-demo.svelte
│ │ │ │ │ │ ├── button-group-input-group.svelte
│ │ │ │ │ │ ├── button-group-nested.svelte
│ │ │ │ │ │ ├── button-group-popover.svelte
│ │ │ │ │ │ ├── empty-avatar-group.svelte
│ │ │ │ │ │ ├── empty-input-group.svelte
│ │ │ │ │ │ ├── field-choice-card.svelte
│ │ │ │ │ │ ├── field-demo.svelte
│ │ │ │ │ │ ├── field-slider.svelte
│ │ │ │ │ │ ├── input-group-button.svelte
│ │ │ │ │ │ ├── input-group-demo.svelte
│ │ │ │ │ │ ├── input-group-textarea.svelte
│ │ │ │ │ │ ├── item-avatar.svelte
│ │ │ │ │ │ ├── item-demo.svelte
│ │ │ │ │ │ ├── notion-prompt-form.svelte
│ │ │ │ │ │ ├── spinner-badge.svelte
│ │ │ │ │ │ └── spinner-empty.svelte
│ │ │ │ │ ├── otp-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── otp-02/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── otp-03/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── otp-04/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── otp-05/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── otp-form.svelte
│ │ │ │ │ ├── sidebar-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── search-form.svelte
│ │ │ │ │ │ └── version-switcher.svelte
│ │ │ │ │ ├── sidebar-02/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── search-form.svelte
│ │ │ │ │ │ └── version-switcher.svelte
│ │ │ │ │ ├── sidebar-03/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── app-sidebar.svelte
│ │ │ │ │ ├── sidebar-04/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── app-sidebar.svelte
│ │ │ │ │ ├── sidebar-05/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ └── search-form.svelte
│ │ │ │ │ ├── sidebar-06/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ └── sidebar-opt-in-form.svelte
│ │ │ │ │ ├── sidebar-07/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-projects.svelte
│ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ └── team-switcher.svelte
│ │ │ │ │ ├── sidebar-08/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-projects.svelte
│ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ └── nav-user.svelte
│ │ │ │ │ ├── sidebar-09/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ └── nav-user.svelte
│ │ │ │ │ ├── sidebar-10/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-actions.svelte
│ │ │ │ │ │ ├── nav-favorites.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ ├── nav-workspaces.svelte
│ │ │ │ │ │ └── team-switcher.svelte
│ │ │ │ │ ├── sidebar-11/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── app-sidebar.svelte
│ │ │ │ │ ├── sidebar-12/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── calendars.svelte
│ │ │ │ │ │ ├── date-picker.svelte
│ │ │ │ │ │ └── nav-user.svelte
│ │ │ │ │ ├── sidebar-13/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── settings-dialog.svelte
│ │ │ │ │ ├── sidebar-14/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── app-sidebar.svelte
│ │ │ │ │ ├── sidebar-15/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── calendars.svelte
│ │ │ │ │ │ ├── date-picker.svelte
│ │ │ │ │ │ ├── nav-favorites.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ ├── nav-workspaces.svelte
│ │ │ │ │ │ ├── sidebar-left.svelte
│ │ │ │ │ │ ├── sidebar-right.svelte
│ │ │ │ │ │ └── team-switcher.svelte
│ │ │ │ │ ├── sidebar-16/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ ├── nav-projects.svelte
│ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ ├── search-form.svelte
│ │ │ │ │ │ └── site-header.svelte
│ │ │ │ │ ├── signup-01/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── signup-form.svelte
│ │ │ │ │ ├── signup-02/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── signup-form.svelte
│ │ │ │ │ ├── signup-03/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── signup-form.svelte
│ │ │ │ │ ├── signup-04/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── components/
│ │ │ │ │ │ └── signup-form.svelte
│ │ │ │ │ └── signup-05/
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ └── components/
│ │ │ │ │ └── signup-form.svelte
│ │ │ │ ├── colors.ts
│ │ │ │ ├── config.ts
│ │ │ │ ├── examples/
│ │ │ │ │ ├── accordion-demo.svelte
│ │ │ │ │ ├── alert-demo.svelte
│ │ │ │ │ ├── alert-destructive.svelte
│ │ │ │ │ ├── alert-dialog-demo.svelte
│ │ │ │ │ ├── aspect-ratio-demo.svelte
│ │ │ │ │ ├── avatar-demo.svelte
│ │ │ │ │ ├── badge-demo.svelte
│ │ │ │ │ ├── badge-destructive.svelte
│ │ │ │ │ ├── badge-outline.svelte
│ │ │ │ │ ├── badge-secondary.svelte
│ │ │ │ │ ├── breadcrumb-demo.svelte
│ │ │ │ │ ├── breadcrumb-dropdown.svelte
│ │ │ │ │ ├── breadcrumb-ellipsis.svelte
│ │ │ │ │ ├── breadcrumb-link.svelte
│ │ │ │ │ ├── breadcrumb-responsive.svelte
│ │ │ │ │ ├── breadcrumb-separator.svelte
│ │ │ │ │ ├── button-default.svelte
│ │ │ │ │ ├── button-demo.svelte
│ │ │ │ │ ├── button-destructive.svelte
│ │ │ │ │ ├── button-ghost.svelte
│ │ │ │ │ ├── button-group-demo.svelte
│ │ │ │ │ ├── button-group-dropdown-menu-demo.svelte
│ │ │ │ │ ├── button-group-input-demo.svelte
│ │ │ │ │ ├── button-group-input-group-demo.svelte
│ │ │ │ │ ├── button-group-nested-demo.svelte
│ │ │ │ │ ├── button-group-orientation-demo.svelte
│ │ │ │ │ ├── button-group-popover-demo.svelte
│ │ │ │ │ ├── button-group-select-demo.svelte
│ │ │ │ │ ├── button-group-separator-demo.svelte
│ │ │ │ │ ├── button-group-size-demo.svelte
│ │ │ │ │ ├── button-group-split-demo.svelte
│ │ │ │ │ ├── button-icon.svelte
│ │ │ │ │ ├── button-link.svelte
│ │ │ │ │ ├── button-loading.svelte
│ │ │ │ │ ├── button-outline.svelte
│ │ │ │ │ ├── button-rounded.svelte
│ │ │ │ │ ├── button-secondary.svelte
│ │ │ │ │ ├── button-size.svelte
│ │ │ │ │ ├── button-with-icon.svelte
│ │ │ │ │ ├── calendar-demo.svelte
│ │ │ │ │ ├── calendar-with-selects.svelte
│ │ │ │ │ ├── card-demo.svelte
│ │ │ │ │ ├── card-with-form.svelte
│ │ │ │ │ ├── carousel-api.svelte
│ │ │ │ │ ├── carousel-demo.svelte
│ │ │ │ │ ├── carousel-orientation.svelte
│ │ │ │ │ ├── carousel-plugin.svelte
│ │ │ │ │ ├── carousel-size.svelte
│ │ │ │ │ ├── carousel-spacing.svelte
│ │ │ │ │ ├── chart-bar-axis-tick-demo.svelte
│ │ │ │ │ ├── chart-bar-demo.svelte
│ │ │ │ │ ├── chart-bar-legend-demo.svelte
│ │ │ │ │ ├── chart-bar-tooltip-demo.svelte
│ │ │ │ │ ├── chart-tooltip-demo.svelte
│ │ │ │ │ ├── checkbox-demo.svelte
│ │ │ │ │ ├── checkbox-disabled.svelte
│ │ │ │ │ ├── checkbox-form-multiple.svelte
│ │ │ │ │ ├── checkbox-form-single.svelte
│ │ │ │ │ ├── checkbox-with-text.svelte
│ │ │ │ │ ├── collapsible-demo.svelte
│ │ │ │ │ ├── combobox-demo.svelte
│ │ │ │ │ ├── combobox-dropdown-menu.svelte
│ │ │ │ │ ├── combobox-form.svelte
│ │ │ │ │ ├── combobox-popover.svelte
│ │ │ │ │ ├── combobox-responsive.svelte
│ │ │ │ │ ├── command-demo.svelte
│ │ │ │ │ ├── command-dialog.svelte
│ │ │ │ │ ├── context-menu-demo.svelte
│ │ │ │ │ ├── create/
│ │ │ │ │ │ ├── accordion/
│ │ │ │ │ │ │ ├── accordion-basic.svelte
│ │ │ │ │ │ │ ├── accordion-in-card.svelte
│ │ │ │ │ │ │ ├── accordion-multiple.svelte
│ │ │ │ │ │ │ ├── accordion-with-borders.svelte
│ │ │ │ │ │ │ ├── accordion-with-disabled.svelte
│ │ │ │ │ │ │ └── accordion.svelte
│ │ │ │ │ │ ├── alert/
│ │ │ │ │ │ │ ├── alert-basic.svelte
│ │ │ │ │ │ │ ├── alert-destructive.svelte
│ │ │ │ │ │ │ ├── alert-with-actions.svelte
│ │ │ │ │ │ │ ├── alert-with-icons.svelte
│ │ │ │ │ │ │ └── alert.svelte
│ │ │ │ │ │ ├── alert-dialog/
│ │ │ │ │ │ │ ├── alert-dialog-basic.svelte
│ │ │ │ │ │ │ ├── alert-dialog-destructive.svelte
│ │ │ │ │ │ │ ├── alert-dialog-in-dialog.svelte
│ │ │ │ │ │ │ ├── alert-dialog-small-with-media.svelte
│ │ │ │ │ │ │ ├── alert-dialog-small.svelte
│ │ │ │ │ │ │ ├── alert-dialog-with-media.svelte
│ │ │ │ │ │ │ └── alert-dialog.svelte
│ │ │ │ │ │ ├── aspect-ratio/
│ │ │ │ │ │ │ ├── aspect-ratio-16x9.svelte
│ │ │ │ │ │ │ ├── aspect-ratio-1x1.svelte
│ │ │ │ │ │ │ ├── aspect-ratio-21x9.svelte
│ │ │ │ │ │ │ ├── aspect-ratio-9x16.svelte
│ │ │ │ │ │ │ └── aspect-ratio.svelte
│ │ │ │ │ │ ├── avatar/
│ │ │ │ │ │ │ ├── avatar-group-example.svelte
│ │ │ │ │ │ │ ├── avatar-group-with-count.svelte
│ │ │ │ │ │ │ ├── avatar-group-with-icon-count.svelte
│ │ │ │ │ │ │ ├── avatar-in-empty.svelte
│ │ │ │ │ │ │ ├── avatar-sizes.svelte
│ │ │ │ │ │ │ ├── avatar-with-badge-icon.svelte
│ │ │ │ │ │ │ ├── avatar-with-badge.svelte
│ │ │ │ │ │ │ └── avatar.svelte
│ │ │ │ │ │ ├── badge/
│ │ │ │ │ │ │ ├── badge-as-link.svelte
│ │ │ │ │ │ │ ├── badge-custom-colors.svelte
│ │ │ │ │ │ │ ├── badge-long-text.svelte
│ │ │ │ │ │ │ ├── badge-variants.svelte
│ │ │ │ │ │ │ ├── badge-with-icon-left.svelte
│ │ │ │ │ │ │ ├── badge-with-icon-right.svelte
│ │ │ │ │ │ │ ├── badge-with-spinner.svelte
│ │ │ │ │ │ │ └── badge.svelte
│ │ │ │ │ │ ├── breadcrumb/
│ │ │ │ │ │ │ ├── breadcrumb-basic.svelte
│ │ │ │ │ │ │ ├── breadcrumb-with-dropdown.svelte
│ │ │ │ │ │ │ ├── breadcrumb-with-link.svelte
│ │ │ │ │ │ │ └── breadcrumb.svelte
│ │ │ │ │ │ ├── button/
│ │ │ │ │ │ │ ├── button-examples.svelte
│ │ │ │ │ │ │ ├── button-icon-left.svelte
│ │ │ │ │ │ │ ├── button-icon-only.svelte
│ │ │ │ │ │ │ ├── button-icon-right.svelte
│ │ │ │ │ │ │ ├── button-invalid-states.svelte
│ │ │ │ │ │ │ ├── button-variants-and-sizes.svelte
│ │ │ │ │ │ │ └── button.svelte
│ │ │ │ │ │ ├── button-group/
│ │ │ │ │ │ │ ├── button-group-basic.svelte
│ │ │ │ │ │ │ ├── button-group-navigation.svelte
│ │ │ │ │ │ │ ├── button-group-nested.svelte
│ │ │ │ │ │ │ ├── button-group-pagination-split.svelte
│ │ │ │ │ │ │ ├── button-group-pagination.svelte
│ │ │ │ │ │ │ ├── button-group-text-alignment.svelte
│ │ │ │ │ │ │ ├── button-group-vertical-nested.svelte
│ │ │ │ │ │ │ ├── button-group-vertical.svelte
│ │ │ │ │ │ │ ├── button-group-with-dropdown.svelte
│ │ │ │ │ │ │ ├── button-group-with-fields.svelte
│ │ │ │ │ │ │ ├── button-group-with-icons.svelte
│ │ │ │ │ │ │ ├── button-group-with-input-group.svelte
│ │ │ │ │ │ │ ├── button-group-with-input.svelte
│ │ │ │ │ │ │ ├── button-group-with-like.svelte
│ │ │ │ │ │ │ ├── button-group-with-select-and-input.svelte
│ │ │ │ │ │ │ ├── button-group-with-select.svelte
│ │ │ │ │ │ │ ├── button-group-with-text.svelte
│ │ │ │ │ │ │ └── button-group.svelte
│ │ │ │ │ │ ├── calendar/
│ │ │ │ │ │ │ ├── calendar-booked-dates.svelte
│ │ │ │ │ │ │ ├── calendar-custom-days.svelte
│ │ │ │ │ │ │ ├── calendar-in-card.svelte
│ │ │ │ │ │ │ ├── calendar-in-popover.svelte
│ │ │ │ │ │ │ ├── calendar-multiple.svelte
│ │ │ │ │ │ │ ├── calendar-range-multiple-months.svelte
│ │ │ │ │ │ │ ├── calendar-range.svelte
│ │ │ │ │ │ │ ├── calendar-single.svelte
│ │ │ │ │ │ │ ├── calendar-week-numbers.svelte
│ │ │ │ │ │ │ ├── calendar-with-presets.svelte
│ │ │ │ │ │ │ ├── calendar-with-time.svelte
│ │ │ │ │ │ │ ├── calendar.svelte
│ │ │ │ │ │ │ ├── date-picker-simple.svelte
│ │ │ │ │ │ │ ├── date-picker-with-dropdowns.svelte
│ │ │ │ │ │ │ └── date-picker-with-range.svelte
│ │ │ │ │ │ ├── card/
│ │ │ │ │ │ │ ├── card-default.svelte
│ │ │ │ │ │ │ ├── card-footer-with-border-small.svelte
│ │ │ │ │ │ │ ├── card-footer-with-border.svelte
│ │ │ │ │ │ │ ├── card-header-with-border-small.svelte
│ │ │ │ │ │ │ ├── card-header-with-border.svelte
│ │ │ │ │ │ │ ├── card-login.svelte
│ │ │ │ │ │ │ ├── card-meeting-notes.svelte
│ │ │ │ │ │ │ ├── card-small.svelte
│ │ │ │ │ │ │ ├── card-with-image-small.svelte
│ │ │ │ │ │ │ ├── card-with-image.svelte
│ │ │ │ │ │ │ └── card.svelte
│ │ │ │ │ │ ├── carousel/
│ │ │ │ │ │ │ ├── carousel-basic.svelte
│ │ │ │ │ │ │ ├── carousel-multiple.svelte
│ │ │ │ │ │ │ ├── carousel-with-gap.svelte
│ │ │ │ │ │ │ └── carousel.svelte
│ │ │ │ │ │ ├── chart/
│ │ │ │ │ │ │ ├── chart-area-example.svelte
│ │ │ │ │ │ │ ├── chart-bar-example.svelte
│ │ │ │ │ │ │ ├── chart-line-example.svelte
│ │ │ │ │ │ │ ├── chart-radar-example.svelte
│ │ │ │ │ │ │ ├── chart-radial-example.svelte
│ │ │ │ │ │ │ └── chart.svelte
│ │ │ │ │ │ ├── chatgpt/
│ │ │ │ │ │ │ ├── chatgpt.svelte
│ │ │ │ │ │ │ ├── create-project-form.svelte
│ │ │ │ │ │ │ ├── group-chat-dialog.svelte
│ │ │ │ │ │ │ ├── model-selector.svelte
│ │ │ │ │ │ │ └── prompt-form.svelte
│ │ │ │ │ │ ├── checkbox/
│ │ │ │ │ │ │ ├── checkbox-basic.svelte
│ │ │ │ │ │ │ ├── checkbox-disabled.svelte
│ │ │ │ │ │ │ ├── checkbox-group.svelte
│ │ │ │ │ │ │ ├── checkbox-in-table.svelte
│ │ │ │ │ │ │ ├── checkbox-invalid.svelte
│ │ │ │ │ │ │ ├── checkbox-with-description.svelte
│ │ │ │ │ │ │ ├── checkbox-with-title.svelte
│ │ │ │ │ │ │ └── checkbox.svelte
│ │ │ │ │ │ ├── collapsible/
│ │ │ │ │ │ │ ├── collapsible-file-tree.svelte
│ │ │ │ │ │ │ ├── collapsible-settings.svelte
│ │ │ │ │ │ │ └── collapsible.svelte
│ │ │ │ │ │ ├── combobox/
│ │ │ │ │ │ │ ├── combobox-basic.svelte
│ │ │ │ │ │ │ ├── combobox-disabled-items.svelte
│ │ │ │ │ │ │ ├── combobox-disabled.svelte
│ │ │ │ │ │ │ ├── combobox-in-dialog.svelte
│ │ │ │ │ │ │ ├── combobox-in-popup.svelte
│ │ │ │ │ │ │ ├── combobox-invalid.svelte
│ │ │ │ │ │ │ ├── combobox-large-list.svelte
│ │ │ │ │ │ │ ├── combobox-multiple-invalid.svelte
│ │ │ │ │ │ │ ├── combobox-multiple.svelte
│ │ │ │ │ │ │ ├── combobox-with-custom-items.svelte
│ │ │ │ │ │ │ ├── combobox-with-form.svelte
│ │ │ │ │ │ │ ├── combobox-with-groups-and-separator.svelte
│ │ │ │ │ │ │ ├── combobox-with-groups.svelte
│ │ │ │ │ │ │ └── combobox.svelte
│ │ │ │ │ │ ├── command/
│ │ │ │ │ │ │ ├── command-basic.svelte
│ │ │ │ │ │ │ ├── command-inline.svelte
│ │ │ │ │ │ │ ├── command-many-items.svelte
│ │ │ │ │ │ │ ├── command-with-groups.svelte
│ │ │ │ │ │ │ ├── command-with-shortcuts.svelte
│ │ │ │ │ │ │ └── command.svelte
│ │ │ │ │ │ ├── context-menu/
│ │ │ │ │ │ │ ├── context-menu-basic.svelte
│ │ │ │ │ │ │ ├── context-menu-in-dialog.svelte
│ │ │ │ │ │ │ ├── context-menu-with-checkboxes.svelte
│ │ │ │ │ │ │ ├── context-menu-with-destructive.svelte
│ │ │ │ │ │ │ ├── context-menu-with-groups.svelte
│ │ │ │ │ │ │ ├── context-menu-with-icons.svelte
│ │ │ │ │ │ │ ├── context-menu-with-inset.svelte
│ │ │ │ │ │ │ ├── context-menu-with-radio.svelte
│ │ │ │ │ │ │ ├── context-menu-with-shortcuts.svelte
│ │ │ │ │ │ │ ├── context-menu-with-sides.svelte
│ │ │ │ │ │ │ ├── context-menu-with-submenu.svelte
│ │ │ │ │ │ │ └── context-menu.svelte
│ │ │ │ │ │ ├── demo/
│ │ │ │ │ │ │ └── demo.svelte
│ │ │ │ │ │ ├── dialog/
│ │ │ │ │ │ │ ├── dialog-chat-settings.svelte
│ │ │ │ │ │ │ ├── dialog-no-close-button.svelte
│ │ │ │ │ │ │ ├── dialog-scrollable-content.svelte
│ │ │ │ │ │ │ ├── dialog-with-form.svelte
│ │ │ │ │ │ │ ├── dialog-with-sticky-footer.svelte
│ │ │ │ │ │ │ └── dialog.svelte
│ │ │ │ │ │ ├── drawer/
│ │ │ │ │ │ │ ├── drawer-scrollable-content.svelte
│ │ │ │ │ │ │ ├── drawer-with-sides.svelte
│ │ │ │ │ │ │ └── drawer.svelte
│ │ │ │ │ │ ├── dropdown-menu/
│ │ │ │ │ │ │ ├── dropdown-menu-basic.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-complex.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-in-dialog.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-avatar.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-checkboxes-icons.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-checkboxes.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-destructive.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-icons.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-radio-icons.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-radio.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-shortcuts.svelte
│ │ │ │ │ │ │ ├── dropdown-menu-with-submenu.svelte
│ │ │ │ │ │ │ └── dropdown-menu.svelte
│ │ │ │ │ │ ├── elevenlabs/
│ │ │ │ │ │ │ ├── bar-visualizer-demo.svelte
│ │ │ │ │ │ │ ├── bar-visualizer.svelte
│ │ │ │ │ │ │ ├── elevenlabs.svelte
│ │ │ │ │ │ │ ├── live-waveform.svelte
│ │ │ │ │ │ │ └── waveform-demo.svelte
│ │ │ │ │ │ ├── empty/
│ │ │ │ │ │ │ ├── empty-basic.svelte
│ │ │ │ │ │ │ ├── empty-in-card.svelte
│ │ │ │ │ │ │ ├── empty-with-border.svelte
│ │ │ │ │ │ │ ├── empty-with-icon.svelte
│ │ │ │ │ │ │ ├── empty-with-muted-background-alt.svelte
│ │ │ │ │ │ │ ├── empty-with-muted-background.svelte
│ │ │ │ │ │ │ └── empty.svelte
│ │ │ │ │ │ ├── field/
│ │ │ │ │ │ │ ├── field-checkbox-fields.svelte
│ │ │ │ │ │ │ ├── field-horizontal-fields.svelte
│ │ │ │ │ │ │ ├── field-input-fields.svelte
│ │ │ │ │ │ │ ├── field-input-otp-fields.svelte
│ │ │ │ │ │ │ ├── field-native-select-fields.svelte
│ │ │ │ │ │ │ ├── field-radio-fields.svelte
│ │ │ │ │ │ │ ├── field-select-fields.svelte
│ │ │ │ │ │ │ ├── field-slider-fields.svelte
│ │ │ │ │ │ │ ├── field-switch-fields.svelte
│ │ │ │ │ │ │ ├── field-textarea-fields.svelte
│ │ │ │ │ │ │ └── field.svelte
│ │ │ │ │ │ ├── github/
│ │ │ │ │ │ │ ├── assign-issue.svelte
│ │ │ │ │ │ │ ├── codespaces-card.svelte
│ │ │ │ │ │ │ ├── contributions-activity.svelte
│ │ │ │ │ │ │ ├── contributors.svelte
│ │ │ │ │ │ │ ├── github.svelte
│ │ │ │ │ │ │ ├── navbar.svelte
│ │ │ │ │ │ │ ├── profile.svelte
│ │ │ │ │ │ │ └── repository-toolbar.svelte
│ │ │ │ │ │ ├── home/
│ │ │ │ │ │ │ ├── badge-examples.svelte
│ │ │ │ │ │ │ ├── button-group-examples.svelte
│ │ │ │ │ │ │ ├── empty-avatar-group.svelte
│ │ │ │ │ │ │ ├── field-examples.svelte
│ │ │ │ │ │ │ ├── form-example.svelte
│ │ │ │ │ │ │ ├── home.svelte
│ │ │ │ │ │ │ ├── input-group-examples.svelte
│ │ │ │ │ │ │ ├── item-example.svelte
│ │ │ │ │ │ │ ├── observability-card.svelte
│ │ │ │ │ │ │ ├── sheet-example.svelte
│ │ │ │ │ │ │ └── small-form-example.svelte
│ │ │ │ │ │ ├── hover-card/
│ │ │ │ │ │ │ ├── hover-card-in-dialog.svelte
│ │ │ │ │ │ │ ├── hover-card-sides.svelte
│ │ │ │ │ │ │ └── hover-card.svelte
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── input/
│ │ │ │ │ │ │ ├── input-basic.svelte
│ │ │ │ │ │ │ ├── input-disabled.svelte
│ │ │ │ │ │ │ ├── input-form.svelte
│ │ │ │ │ │ │ ├── input-invalid.svelte
│ │ │ │ │ │ │ ├── input-types.svelte
│ │ │ │ │ │ │ ├── input-with-button.svelte
│ │ │ │ │ │ │ ├── input-with-description.svelte
│ │ │ │ │ │ │ ├── input-with-label.svelte
│ │ │ │ │ │ │ ├── input-with-native-select.svelte
│ │ │ │ │ │ │ ├── input-with-select.svelte
│ │ │ │ │ │ │ └── input.svelte
│ │ │ │ │ │ ├── input-group/
│ │ │ │ │ │ │ ├── input-group-basic.svelte
│ │ │ │ │ │ │ ├── input-group-in-card.svelte
│ │ │ │ │ │ │ ├── input-group-textarea-examples.svelte
│ │ │ │ │ │ │ ├── input-group-with-addons.svelte
│ │ │ │ │ │ │ ├── input-group-with-buttons.svelte
│ │ │ │ │ │ │ ├── input-group-with-kbd.svelte
│ │ │ │ │ │ │ ├── input-group-with-tooltip.svelte
│ │ │ │ │ │ │ └── input-group.svelte
│ │ │ │ │ │ ├── input-otp/
│ │ │ │ │ │ │ ├── input-otp-alphanumeric.svelte
│ │ │ │ │ │ │ ├── input-otp-disabled.svelte
│ │ │ │ │ │ │ ├── input-otp-form.svelte
│ │ │ │ │ │ │ ├── input-otp-four-digits.svelte
│ │ │ │ │ │ │ ├── input-otp-invalid.svelte
│ │ │ │ │ │ │ ├── input-otp-pattern.svelte
│ │ │ │ │ │ │ ├── input-otp-simple.svelte
│ │ │ │ │ │ │ ├── input-otp-with-separator.svelte
│ │ │ │ │ │ │ └── input-otp.svelte
│ │ │ │ │ │ ├── item/
│ │ │ │ │ │ │ ├── item-as-child.svelte
│ │ │ │ │ │ │ ├── item-footer.svelte
│ │ │ │ │ │ │ ├── item-group.svelte
│ │ │ │ │ │ │ ├── item-header-and-footer.svelte
│ │ │ │ │ │ │ ├── item-header.svelte
│ │ │ │ │ │ │ ├── item-muted-group.svelte
│ │ │ │ │ │ │ ├── item-muted-image.svelte
│ │ │ │ │ │ │ ├── item-muted-link.svelte
│ │ │ │ │ │ │ ├── item-outline-group.svelte
│ │ │ │ │ │ │ ├── item-outline-image-extra-small.svelte
│ │ │ │ │ │ │ ├── item-outline-image-small.svelte
│ │ │ │ │ │ │ ├── item-outline-image.svelte
│ │ │ │ │ │ │ ├── item-outline-link.svelte
│ │ │ │ │ │ │ ├── item-separator.svelte
│ │ │ │ │ │ │ ├── item-variants.svelte
│ │ │ │ │ │ │ ├── item-with-image.svelte
│ │ │ │ │ │ │ └── item.svelte
│ │ │ │ │ │ ├── kbd/
│ │ │ │ │ │ │ ├── kbd-arrow-keys.svelte
│ │ │ │ │ │ │ ├── kbd-basic.svelte
│ │ │ │ │ │ │ ├── kbd-group-example.svelte
│ │ │ │ │ │ │ ├── kbd-in-input-group.svelte
│ │ │ │ │ │ │ ├── kbd-in-tooltip.svelte
│ │ │ │ │ │ │ ├── kbd-modifier-keys.svelte
│ │ │ │ │ │ │ ├── kbd-with-icons-and-text.svelte
│ │ │ │ │ │ │ ├── kbd-with-icons.svelte
│ │ │ │ │ │ │ ├── kbd-with-samp.svelte
│ │ │ │ │ │ │ └── kbd.svelte
│ │ │ │ │ │ ├── label/
│ │ │ │ │ │ │ ├── label-disabled.svelte
│ │ │ │ │ │ │ ├── label-with-checkbox.svelte
│ │ │ │ │ │ │ ├── label-with-input.svelte
│ │ │ │ │ │ │ ├── label-with-textarea.svelte
│ │ │ │ │ │ │ └── label.svelte
│ │ │ │ │ │ ├── menubar/
│ │ │ │ │ │ │ ├── menubar-basic.svelte
│ │ │ │ │ │ │ ├── menubar-destructive.svelte
│ │ │ │ │ │ │ ├── menubar-format.svelte
│ │ │ │ │ │ │ ├── menubar-in-dialog.svelte
│ │ │ │ │ │ │ ├── menubar-insert.svelte
│ │ │ │ │ │ │ ├── menubar-with-checkboxes.svelte
│ │ │ │ │ │ │ ├── menubar-with-icons.svelte
│ │ │ │ │ │ │ ├── menubar-with-inset.svelte
│ │ │ │ │ │ │ ├── menubar-with-radio.svelte
│ │ │ │ │ │ │ ├── menubar-with-shortcuts.svelte
│ │ │ │ │ │ │ ├── menubar-with-submenu.svelte
│ │ │ │ │ │ │ └── menubar.svelte
│ │ │ │ │ │ ├── native-select/
│ │ │ │ │ │ │ ├── native-select-basic.svelte
│ │ │ │ │ │ │ ├── native-select-disabled.svelte
│ │ │ │ │ │ │ ├── native-select-invalid.svelte
│ │ │ │ │ │ │ ├── native-select-sizes.svelte
│ │ │ │ │ │ │ ├── native-select-with-field.svelte
│ │ │ │ │ │ │ ├── native-select-with-groups.svelte
│ │ │ │ │ │ │ └── native-select.svelte
│ │ │ │ │ │ ├── navigation-menu/
│ │ │ │ │ │ │ ├── navigation-menu-with-viewport.svelte
│ │ │ │ │ │ │ ├── navigation-menu-without-viewport.svelte
│ │ │ │ │ │ │ └── navigation-menu.svelte
│ │ │ │ │ │ ├── pagination/
│ │ │ │ │ │ │ ├── pagination-basic.svelte
│ │ │ │ │ │ │ ├── pagination-simple.svelte
│ │ │ │ │ │ │ ├── pagination-with-select.svelte
│ │ │ │ │ │ │ └── pagination.svelte
│ │ │ │ │ │ ├── popover/
│ │ │ │ │ │ │ ├── popover-alignments.svelte
│ │ │ │ │ │ │ ├── popover-basic.svelte
│ │ │ │ │ │ │ ├── popover-in-dialog.svelte
│ │ │ │ │ │ │ ├── popover-with-form.svelte
│ │ │ │ │ │ │ └── popover.svelte
│ │ │ │ │ │ ├── preview/
│ │ │ │ │ │ │ ├── cards/
│ │ │ │ │ │ │ │ ├── activate-agent-dialog.svelte
│ │ │ │ │ │ │ │ ├── analytics-card.svelte
│ │ │ │ │ │ │ │ ├── anomaly-alert.svelte
│ │ │ │ │ │ │ │ ├── assign-issue.svelte
│ │ │ │ │ │ │ │ ├── bar-chart-card.svelte
│ │ │ │ │ │ │ │ ├── bar-visualizer-card.svelte
│ │ │ │ │ │ │ │ ├── book-appointment.svelte
│ │ │ │ │ │ │ │ ├── codespaces-card.svelte
│ │ │ │ │ │ │ │ ├── contributions-activity.svelte
│ │ │ │ │ │ │ │ ├── contributors.svelte
│ │ │ │ │ │ │ │ ├── environment-variables.svelte
│ │ │ │ │ │ │ │ ├── feedback-form.svelte
│ │ │ │ │ │ │ │ ├── file-upload.svelte
│ │ │ │ │ │ │ │ ├── github-profile.svelte
│ │ │ │ │ │ │ │ ├── icon-preview-grid.svelte
│ │ │ │ │ │ │ │ ├── invite-team.svelte
│ │ │ │ │ │ │ │ ├── invoice.svelte
│ │ │ │ │ │ │ │ ├── live-waveform.svelte
│ │ │ │ │ │ │ │ ├── no-team-members.svelte
│ │ │ │ │ │ │ │ ├── not-found.svelte
│ │ │ │ │ │ │ │ ├── observability-card.svelte
│ │ │ │ │ │ │ │ ├── pie-chart-card.svelte
│ │ │ │ │ │ │ │ ├── report-bug.svelte
│ │ │ │ │ │ │ │ ├── shipping-address.svelte
│ │ │ │ │ │ │ │ ├── shortcuts.svelte
│ │ │ │ │ │ │ │ ├── skeleton-loading.svelte
│ │ │ │ │ │ │ │ ├── sleep-report.svelte
│ │ │ │ │ │ │ │ ├── style-overview.svelte
│ │ │ │ │ │ │ │ ├── ui-elements.svelte
│ │ │ │ │ │ │ │ ├── usage-card.svelte
│ │ │ │ │ │ │ │ ├── visitors.svelte
│ │ │ │ │ │ │ │ └── weekly-fitness-summary.svelte
│ │ │ │ │ │ │ └── preview.svelte
│ │ │ │ │ │ ├── progress/
│ │ │ │ │ │ │ ├── progress-bar.svelte
│ │ │ │ │ │ │ ├── progress-controlled.svelte
│ │ │ │ │ │ │ ├── progress-file-upload-list.svelte
│ │ │ │ │ │ │ ├── progress-with-label.svelte
│ │ │ │ │ │ │ └── progress.svelte
│ │ │ │ │ │ ├── radio-group/
│ │ │ │ │ │ │ ├── radio-group-basic.svelte
│ │ │ │ │ │ │ ├── radio-group-disabled.svelte
│ │ │ │ │ │ │ ├── radio-group-grid.svelte
│ │ │ │ │ │ │ ├── radio-group-invalid.svelte
│ │ │ │ │ │ │ ├── radio-group-with-descriptions.svelte
│ │ │ │ │ │ │ ├── radio-group-with-field-set.svelte
│ │ │ │ │ │ │ └── radio-group.svelte
│ │ │ │ │ │ ├── resizable/
│ │ │ │ │ │ │ ├── resizable-controlled.svelte
│ │ │ │ │ │ │ ├── resizable-horizontal.svelte
│ │ │ │ │ │ │ ├── resizable-nested.svelte
│ │ │ │ │ │ │ ├── resizable-vertical.svelte
│ │ │ │ │ │ │ ├── resizable-with-handle.svelte
│ │ │ │ │ │ │ └── resizable.svelte
│ │ │ │ │ │ ├── scroll-area/
│ │ │ │ │ │ │ ├── scroll-area-horizontal.svelte
│ │ │ │ │ │ │ ├── scroll-area-vertical.svelte
│ │ │ │ │ │ │ └── scroll-area.svelte
│ │ │ │ │ │ ├── select/
│ │ │ │ │ │ │ ├── select-basic.svelte
│ │ │ │ │ │ │ ├── select-disabled.svelte
│ │ │ │ │ │ │ ├── select-in-dialog.svelte
│ │ │ │ │ │ │ ├── select-inline.svelte
│ │ │ │ │ │ │ ├── select-invalid.svelte
│ │ │ │ │ │ │ ├── select-item-aligned.svelte
│ │ │ │ │ │ │ ├── select-large-list.svelte
│ │ │ │ │ │ │ ├── select-multiple.svelte
│ │ │ │ │ │ │ ├── select-plan.svelte
│ │ │ │ │ │ │ ├── select-sizes.svelte
│ │ │ │ │ │ │ ├── select-with-button.svelte
│ │ │ │ │ │ │ ├── select-with-field.svelte
│ │ │ │ │ │ │ ├── select-with-groups.svelte
│ │ │ │ │ │ │ ├── select-with-icons.svelte
│ │ │ │ │ │ │ └── select.svelte
│ │ │ │ │ │ ├── separator/
│ │ │ │ │ │ │ ├── separator-horizontal.svelte
│ │ │ │ │ │ │ ├── separator-in-list.svelte
│ │ │ │ │ │ │ ├── separator-vertical-menu.svelte
│ │ │ │ │ │ │ ├── separator-vertical.svelte
│ │ │ │ │ │ │ └── separator.svelte
│ │ │ │ │ │ ├── sheet/
│ │ │ │ │ │ │ ├── sheet-no-close-button.svelte
│ │ │ │ │ │ │ ├── sheet-with-form.svelte
│ │ │ │ │ │ │ ├── sheet-with-sides.svelte
│ │ │ │ │ │ │ └── sheet.svelte
│ │ │ │ │ │ ├── sidebar/
│ │ │ │ │ │ │ └── sidebar.svelte
│ │ │ │ │ │ ├── sidebar-floating/
│ │ │ │ │ │ │ └── sidebar-floating.svelte
│ │ │ │ │ │ ├── sidebar-icon/
│ │ │ │ │ │ │ └── sidebar-icon.svelte
│ │ │ │ │ │ ├── sidebar-inset/
│ │ │ │ │ │ │ └── sidebar-inset.svelte
│ │ │ │ │ │ ├── skeleton/
│ │ │ │ │ │ │ ├── skeleton-avatar.svelte
│ │ │ │ │ │ │ ├── skeleton-card.svelte
│ │ │ │ │ │ │ ├── skeleton-form.svelte
│ │ │ │ │ │ │ ├── skeleton-table.svelte
│ │ │ │ │ │ │ ├── skeleton-text.svelte
│ │ │ │ │ │ │ └── skeleton.svelte
│ │ │ │ │ │ ├── slider/
│ │ │ │ │ │ │ ├── slider-basic.svelte
│ │ │ │ │ │ │ ├── slider-controlled.svelte
│ │ │ │ │ │ │ ├── slider-disabled.svelte
│ │ │ │ │ │ │ ├── slider-multiple.svelte
│ │ │ │ │ │ │ ├── slider-range.svelte
│ │ │ │ │ │ │ ├── slider-vertical.svelte
│ │ │ │ │ │ │ └── slider.svelte
│ │ │ │ │ │ ├── sonner/
│ │ │ │ │ │ │ ├── sonner-basic.svelte
│ │ │ │ │ │ │ ├── sonner-with-description.svelte
│ │ │ │ │ │ │ └── sonner.svelte
│ │ │ │ │ │ ├── spinner/
│ │ │ │ │ │ │ ├── spinner-basic.svelte
│ │ │ │ │ │ │ ├── spinner-in-badges.svelte
│ │ │ │ │ │ │ ├── spinner-in-buttons.svelte
│ │ │ │ │ │ │ ├── spinner-in-empty.svelte
│ │ │ │ │ │ │ ├── spinner-in-input-group.svelte
│ │ │ │ │ │ │ └── spinner.svelte
│ │ │ │ │ │ ├── switch/
│ │ │ │ │ │ │ ├── switch-basic.svelte
│ │ │ │ │ │ │ ├── switch-disabled.svelte
│ │ │ │ │ │ │ ├── switch-sizes.svelte
│ │ │ │ │ │ │ ├── switch-with-description.svelte
│ │ │ │ │ │ │ └── switch.svelte
│ │ │ │ │ │ ├── table/
│ │ │ │ │ │ │ ├── table-basic.svelte
│ │ │ │ │ │ │ ├── table-simple.svelte
│ │ │ │ │ │ │ ├── table-with-actions.svelte
│ │ │ │ │ │ │ ├── table-with-badges.svelte
│ │ │ │ │ │ │ ├── table-with-footer.svelte
│ │ │ │ │ │ │ ├── table-with-input.svelte
│ │ │ │ │ │ │ ├── table-with-select.svelte
│ │ │ │ │ │ │ └── table.svelte
│ │ │ │ │ │ ├── tabs/
│ │ │ │ │ │ │ ├── tabs-basic.svelte
│ │ │ │ │ │ │ ├── tabs-disabled.svelte
│ │ │ │ │ │ │ ├── tabs-icon-only.svelte
│ │ │ │ │ │ │ ├── tabs-line-disabled.svelte
│ │ │ │ │ │ │ ├── tabs-line-with-content.svelte
│ │ │ │ │ │ │ ├── tabs-line.svelte
│ │ │ │ │ │ │ ├── tabs-multiple.svelte
│ │ │ │ │ │ │ ├── tabs-variants-comparison.svelte
│ │ │ │ │ │ │ ├── tabs-vertical.svelte
│ │ │ │ │ │ │ ├── tabs-with-content.svelte
│ │ │ │ │ │ │ ├── tabs-with-dropdown.svelte
│ │ │ │ │ │ │ ├── tabs-with-icons.svelte
│ │ │ │ │ │ │ ├── tabs-with-input-and-button.svelte
│ │ │ │ │ │ │ └── tabs.svelte
│ │ │ │ │ │ ├── textarea/
│ │ │ │ │ │ │ ├── textarea-basic.svelte
│ │ │ │ │ │ │ ├── textarea-disabled.svelte
│ │ │ │ │ │ │ ├── textarea-invalid.svelte
│ │ │ │ │ │ │ ├── textarea-with-description.svelte
│ │ │ │ │ │ │ ├── textarea-with-label.svelte
│ │ │ │ │ │ │ └── textarea.svelte
│ │ │ │ │ │ ├── toggle/
│ │ │ │ │ │ │ ├── toggle-basic.svelte
│ │ │ │ │ │ │ ├── toggle-disabled.svelte
│ │ │ │ │ │ │ ├── toggle-outline.svelte
│ │ │ │ │ │ │ ├── toggle-sizes.svelte
│ │ │ │ │ │ │ ├── toggle-with-button-icon-text.svelte
│ │ │ │ │ │ │ ├── toggle-with-button-icon.svelte
│ │ │ │ │ │ │ ├── toggle-with-button-text.svelte
│ │ │ │ │ │ │ ├── toggle-with-icon.svelte
│ │ │ │ │ │ │ └── toggle.svelte
│ │ │ │ │ │ ├── toggle-group/
│ │ │ │ │ │ │ ├── toggle-group-basic.svelte
│ │ │ │ │ │ │ ├── toggle-group-date-range.svelte
│ │ │ │ │ │ │ ├── toggle-group-filter.svelte
│ │ │ │ │ │ │ ├── toggle-group-font-weight-selector.svelte
│ │ │ │ │ │ │ ├── toggle-group-outline-with-icons.svelte
│ │ │ │ │ │ │ ├── toggle-group-outline.svelte
│ │ │ │ │ │ │ ├── toggle-group-sizes.svelte
│ │ │ │ │ │ │ ├── toggle-group-sort.svelte
│ │ │ │ │ │ │ ├── toggle-group-spacing.svelte
│ │ │ │ │ │ │ ├── toggle-group-vertical-outline-with-icons.svelte
│ │ │ │ │ │ │ ├── toggle-group-vertical-outline.svelte
│ │ │ │ │ │ │ ├── toggle-group-vertical-with-spacing.svelte
│ │ │ │ │ │ │ ├── toggle-group-vertical.svelte
│ │ │ │ │ │ │ ├── toggle-group-with-icons.svelte
│ │ │ │ │ │ │ ├── toggle-group-with-input-and-select.svelte
│ │ │ │ │ │ │ └── toggle-group.svelte
│ │ │ │ │ │ ├── tooltip/
│ │ │ │ │ │ │ ├── tooltip-basic.svelte
│ │ │ │ │ │ │ ├── tooltip-disabled.svelte
│ │ │ │ │ │ │ ├── tooltip-formatted.svelte
│ │ │ │ │ │ │ ├── tooltip-long-content.svelte
│ │ │ │ │ │ │ ├── tooltip-on-link.svelte
│ │ │ │ │ │ │ ├── tooltip-sides.svelte
│ │ │ │ │ │ │ ├── tooltip-with-icon.svelte
│ │ │ │ │ │ │ ├── tooltip-with-keyboard.svelte
│ │ │ │ │ │ │ └── tooltip.svelte
│ │ │ │ │ │ └── vercel/
│ │ │ │ │ │ ├── activate-agent-dialog.svelte
│ │ │ │ │ │ ├── analytics-card.svelte
│ │ │ │ │ │ ├── anomaly-alert.svelte
│ │ │ │ │ │ ├── billing-list.svelte
│ │ │ │ │ │ ├── circular-gauge.svelte
│ │ │ │ │ │ ├── deployment-filter.svelte
│ │ │ │ │ │ ├── feedback-form.svelte
│ │ │ │ │ │ ├── observability-card.svelte
│ │ │ │ │ │ ├── usage-card.svelte
│ │ │ │ │ │ └── vercel.svelte
│ │ │ │ │ ├── dark-mode-dropdown-menu.svelte
│ │ │ │ │ ├── dark-mode-light-switch.svelte
│ │ │ │ │ ├── data-table/
│ │ │ │ │ │ ├── data-table-actions.svelte
│ │ │ │ │ │ ├── data-table-checkbox.svelte
│ │ │ │ │ │ └── data-table-email-button.svelte
│ │ │ │ │ ├── data-table-demo.svelte
│ │ │ │ │ ├── date-picker-demo.svelte
│ │ │ │ │ ├── date-picker-form.svelte
│ │ │ │ │ ├── date-picker-with-presets.svelte
│ │ │ │ │ ├── date-picker-with-range.svelte
│ │ │ │ │ ├── dialog-close-button.svelte
│ │ │ │ │ ├── dialog-demo.svelte
│ │ │ │ │ ├── drawer-demo.svelte
│ │ │ │ │ ├── drawer-dialog.svelte
│ │ │ │ │ ├── dropdown-menu-checkboxes.svelte
│ │ │ │ │ ├── dropdown-menu-demo.svelte
│ │ │ │ │ ├── dropdown-menu-dialog.svelte
│ │ │ │ │ ├── dropdown-menu-radio-group.svelte
│ │ │ │ │ ├── empty-avatar-demo.svelte
│ │ │ │ │ ├── empty-avatar-group-demo.svelte
│ │ │ │ │ ├── empty-background-demo.svelte
│ │ │ │ │ ├── empty-demo.svelte
│ │ │ │ │ ├── empty-input-group-demo.svelte
│ │ │ │ │ ├── empty-outline-demo.svelte
│ │ │ │ │ ├── field-checkbox-demo.svelte
│ │ │ │ │ ├── field-checkbox.svelte
│ │ │ │ │ ├── field-choice-card.svelte
│ │ │ │ │ ├── field-demo.svelte
│ │ │ │ │ ├── field-field-group-demo.svelte
│ │ │ │ │ ├── field-field-set-demo.svelte
│ │ │ │ │ ├── field-input-demo.svelte
│ │ │ │ │ ├── field-input.svelte
│ │ │ │ │ ├── field-radio-demo.svelte
│ │ │ │ │ ├── field-radio.svelte
│ │ │ │ │ ├── field-responsive-layout-demo.svelte
│ │ │ │ │ ├── field-select-demo.svelte
│ │ │ │ │ ├── field-select.svelte
│ │ │ │ │ ├── field-slider-demo.svelte
│ │ │ │ │ ├── field-slider.svelte
│ │ │ │ │ ├── field-switch-demo.svelte
│ │ │ │ │ ├── field-switch.svelte
│ │ │ │ │ ├── field-textarea-demo.svelte
│ │ │ │ │ ├── field-textarea.svelte
│ │ │ │ │ ├── form-demo.svelte
│ │ │ │ │ ├── hover-card-demo.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── input-demo.svelte
│ │ │ │ │ ├── input-disabled.svelte
│ │ │ │ │ ├── input-file.svelte
│ │ │ │ │ ├── input-group-button-demo.svelte
│ │ │ │ │ ├── input-group-button-group-demo.svelte
│ │ │ │ │ ├── input-group-custom-input-demo.svelte
│ │ │ │ │ ├── input-group-demo.svelte
│ │ │ │ │ ├── input-group-dropdown-demo.svelte
│ │ │ │ │ ├── input-group-icon-demo.svelte
│ │ │ │ │ ├── input-group-label-demo.svelte
│ │ │ │ │ ├── input-group-spinner-demo.svelte
│ │ │ │ │ ├── input-group-text-demo.svelte
│ │ │ │ │ ├── input-group-textarea-demo.svelte
│ │ │ │ │ ├── input-group-tooltip-demo.svelte
│ │ │ │ │ ├── input-invalid.svelte
│ │ │ │ │ ├── input-otp-controlled.svelte
│ │ │ │ │ ├── input-otp-demo.svelte
│ │ │ │ │ ├── input-otp-form.svelte
│ │ │ │ │ ├── input-otp-invalid.svelte
│ │ │ │ │ ├── input-otp-pattern.svelte
│ │ │ │ │ ├── input-otp-separator.svelte
│ │ │ │ │ ├── input-with-button.svelte
│ │ │ │ │ ├── input-with-label.svelte
│ │ │ │ │ ├── input-with-text.svelte
│ │ │ │ │ ├── item-avatar-demo.svelte
│ │ │ │ │ ├── item-demo.svelte
│ │ │ │ │ ├── item-dropdown-demo.svelte
│ │ │ │ │ ├── item-group-demo.svelte
│ │ │ │ │ ├── item-header-demo.svelte
│ │ │ │ │ ├── item-icon-demo.svelte
│ │ │ │ │ ├── item-image-demo.svelte
│ │ │ │ │ ├── item-link-demo.svelte
│ │ │ │ │ ├── item-size-demo.svelte
│ │ │ │ │ ├── item-variants-demo.svelte
│ │ │ │ │ ├── kbd-button-demo.svelte
│ │ │ │ │ ├── kbd-demo.svelte
│ │ │ │ │ ├── kbd-group-demo.svelte
│ │ │ │ │ ├── kbd-input-group-demo.svelte
│ │ │ │ │ ├── kbd-tooltip-demo.svelte
│ │ │ │ │ ├── label-demo.svelte
│ │ │ │ │ ├── menubar-demo.svelte
│ │ │ │ │ ├── native-select-demo.svelte
│ │ │ │ │ ├── native-select-disabled.svelte
│ │ │ │ │ ├── native-select-groups.svelte
│ │ │ │ │ ├── native-select-invalid.svelte
│ │ │ │ │ ├── navigation-menu-demo.svelte
│ │ │ │ │ ├── pagination-demo.svelte
│ │ │ │ │ ├── popover-demo.svelte
│ │ │ │ │ ├── progress-demo.svelte
│ │ │ │ │ ├── radio-group-demo.svelte
│ │ │ │ │ ├── radio-group-form.svelte
│ │ │ │ │ ├── range-calendar-demo.svelte
│ │ │ │ │ ├── resizable-demo.svelte
│ │ │ │ │ ├── resizable-handle.svelte
│ │ │ │ │ ├── resizable-vertical.svelte
│ │ │ │ │ ├── scroll-area-both.svelte
│ │ │ │ │ ├── scroll-area-demo.svelte
│ │ │ │ │ ├── scroll-area-horizontal.svelte
│ │ │ │ │ ├── select-demo.svelte
│ │ │ │ │ ├── select-form.svelte
│ │ │ │ │ ├── select-scrollable.svelte
│ │ │ │ │ ├── separator-demo.svelte
│ │ │ │ │ ├── sheet-demo.svelte
│ │ │ │ │ ├── sheet-side.svelte
│ │ │ │ │ ├── skeleton-card.svelte
│ │ │ │ │ ├── skeleton-demo.svelte
│ │ │ │ │ ├── slider-demo.svelte
│ │ │ │ │ ├── slider-multiple.svelte
│ │ │ │ │ ├── slider-vertical.svelte
│ │ │ │ │ ├── sonner-demo.svelte
│ │ │ │ │ ├── sonner-types.svelte
│ │ │ │ │ ├── spinner-badge-demo.svelte
│ │ │ │ │ ├── spinner-button-demo.svelte
│ │ │ │ │ ├── spinner-color-demo.svelte
│ │ │ │ │ ├── spinner-custom-demo.svelte
│ │ │ │ │ ├── spinner-demo.svelte
│ │ │ │ │ ├── spinner-empty-demo.svelte
│ │ │ │ │ ├── spinner-input-group-demo.svelte
│ │ │ │ │ ├── spinner-item-demo.svelte
│ │ │ │ │ ├── spinner-size-demo.svelte
│ │ │ │ │ ├── switch-demo.svelte
│ │ │ │ │ ├── switch-form.svelte
│ │ │ │ │ ├── table-demo.svelte
│ │ │ │ │ ├── tabs-demo.svelte
│ │ │ │ │ ├── textarea-demo.svelte
│ │ │ │ │ ├── textarea-disabled.svelte
│ │ │ │ │ ├── textarea-form.svelte
│ │ │ │ │ ├── textarea-with-button.svelte
│ │ │ │ │ ├── textarea-with-label.svelte
│ │ │ │ │ ├── textarea-with-text.svelte
│ │ │ │ │ ├── toggle-demo.svelte
│ │ │ │ │ ├── toggle-disabled.svelte
│ │ │ │ │ ├── toggle-group-demo.svelte
│ │ │ │ │ ├── toggle-group-disabled.svelte
│ │ │ │ │ ├── toggle-group-lg.svelte
│ │ │ │ │ ├── toggle-group-outline.svelte
│ │ │ │ │ ├── toggle-group-single.svelte
│ │ │ │ │ ├── toggle-group-sm.svelte
│ │ │ │ │ ├── toggle-group-spacing.svelte
│ │ │ │ │ ├── toggle-lg.svelte
│ │ │ │ │ ├── toggle-outline.svelte
│ │ │ │ │ ├── toggle-sm.svelte
│ │ │ │ │ ├── toggle-with-text.svelte
│ │ │ │ │ ├── tooltip-demo.svelte
│ │ │ │ │ ├── typography-blockquote.svelte
│ │ │ │ │ ├── typography-demo.svelte
│ │ │ │ │ ├── typography-h1.svelte
│ │ │ │ │ ├── typography-h2.svelte
│ │ │ │ │ ├── typography-h3.svelte
│ │ │ │ │ ├── typography-h4.svelte
│ │ │ │ │ ├── typography-inline-code.svelte
│ │ │ │ │ ├── typography-large.svelte
│ │ │ │ │ ├── typography-lead.svelte
│ │ │ │ │ ├── typography-list.svelte
│ │ │ │ │ ├── typography-muted.svelte
│ │ │ │ │ ├── typography-p.svelte
│ │ │ │ │ ├── typography-small.svelte
│ │ │ │ │ └── typography-table.svelte
│ │ │ │ ├── fonts.ts
│ │ │ │ ├── hooks/
│ │ │ │ │ └── is-mobile.svelte.ts
│ │ │ │ ├── icons/
│ │ │ │ │ ├── __hugeicons__/
│ │ │ │ │ │ ├── ActivityIcon.ts
│ │ │ │ │ │ ├── Add01Icon.ts
│ │ │ │ │ │ ├── AddToListIcon.ts
│ │ │ │ │ │ ├── AiCloud01Icon.ts
│ │ │ │ │ │ ├── Alert02Icon.ts
│ │ │ │ │ │ ├── AlertCircleIcon.ts
│ │ │ │ │ │ ├── Archive02Icon.ts
│ │ │ │ │ │ ├── ArchiveIcon.ts
│ │ │ │ │ │ ├── ArrowDown01Icon.ts
│ │ │ │ │ │ ├── ArrowDownIcon.ts
│ │ │ │ │ │ ├── ArrowExpandIcon.ts
│ │ │ │ │ │ ├── ArrowLeft01Icon.ts
│ │ │ │ │ │ ├── ArrowLeft02Icon.ts
│ │ │ │ │ │ ├── ArrowRight01Icon.ts
│ │ │ │ │ │ ├── ArrowRight02Icon.ts
│ │ │ │ │ │ ├── ArrowShrinkIcon.ts
│ │ │ │ │ │ ├── ArrowUp01Icon.ts
│ │ │ │ │ │ ├── ArrowUp02Icon.ts
│ │ │ │ │ │ ├── ArrowUpIcon.ts
│ │ │ │ │ │ ├── ArrowUpRight01Icon.ts
│ │ │ │ │ │ ├── ArrowUpRightIcon.ts
│ │ │ │ │ │ ├── AttachmentIcon.ts
│ │ │ │ │ │ ├── AudioWave01Icon.ts
│ │ │ │ │ │ ├── BankIcon.ts
│ │ │ │ │ │ ├── BluetoothIcon.ts
│ │ │ │ │ │ ├── BookIcon.ts
│ │ │ │ │ │ ├── BookOpen02Icon.ts
│ │ │ │ │ │ ├── BookmarkIcon.ts
│ │ │ │ │ │ ├── BotIcon.ts
│ │ │ │ │ │ ├── BulbIcon.ts
│ │ │ │ │ │ ├── CalculatorIcon.ts
│ │ │ │ │ │ ├── Calendar01Icon.ts
│ │ │ │ │ │ ├── CalendarAdd01Icon.ts
│ │ │ │ │ │ ├── CalendarIcon.ts
│ │ │ │ │ │ ├── Cancel01Icon.ts
│ │ │ │ │ │ ├── Chart03Icon.ts
│ │ │ │ │ │ ├── ChartUpIcon.ts
│ │ │ │ │ │ ├── CheckmarkBadge02Icon.ts
│ │ │ │ │ │ ├── CheckmarkBadgeIcon.ts
│ │ │ │ │ │ ├── CheckmarkCircle02Icon.ts
│ │ │ │ │ │ ├── CircleArrowLeft02Icon.ts
│ │ │ │ │ │ ├── CircleIcon.ts
│ │ │ │ │ │ ├── ClipboardIcon.ts
│ │ │ │ │ │ ├── Clock03Icon.ts
│ │ │ │ │ │ ├── ClockIcon.ts
│ │ │ │ │ │ ├── CloudUploadIcon.ts
│ │ │ │ │ │ ├── CodeIcon.ts
│ │ │ │ │ │ ├── ComputerIcon.ts
│ │ │ │ │ │ ├── ComputerTerminal01Icon.ts
│ │ │ │ │ │ ├── ComputerTerminalIcon.ts
│ │ │ │ │ │ ├── Copy01Icon.ts
│ │ │ │ │ │ ├── CopyIcon.ts
│ │ │ │ │ │ ├── CreditCardIcon.ts
│ │ │ │ │ │ ├── CropIcon.ts
│ │ │ │ │ │ ├── CubeIcon.ts
│ │ │ │ │ │ ├── Cursor01Icon.ts
│ │ │ │ │ │ ├── CursorInWindowIcon.ts
│ │ │ │ │ │ ├── DashedLineCircleIcon.ts
│ │ │ │ │ │ ├── Delete02Icon.ts
│ │ │ │ │ │ ├── DeleteIcon.ts
│ │ │ │ │ │ ├── DollarCircleIcon.ts
│ │ │ │ │ │ ├── DownloadIcon.ts
│ │ │ │ │ │ ├── EditIcon.ts
│ │ │ │ │ │ ├── EyeIcon.ts
│ │ │ │ │ │ ├── FavouriteIcon.ts
│ │ │ │ │ │ ├── File01Icon.ts
│ │ │ │ │ │ ├── File02Icon.ts
│ │ │ │ │ │ ├── FileIcon.ts
│ │ │ │ │ │ ├── FlipHorizontalIcon.ts
│ │ │ │ │ │ ├── FlipVerticalIcon.ts
│ │ │ │ │ │ ├── FloppyDiskIcon.ts
│ │ │ │ │ │ ├── Folder01Icon.ts
│ │ │ │ │ │ ├── FolderAddIcon.ts
│ │ │ │ │ │ ├── FolderIcon.ts
│ │ │ │ │ │ ├── FolderOpenIcon.ts
│ │ │ │ │ │ ├── GitBranchIcon.ts
│ │ │ │ │ │ ├── GlobalIcon.ts
│ │ │ │ │ │ ├── GridIcon.ts
│ │ │ │ │ │ ├── HelpCircleIcon.ts
│ │ │ │ │ │ ├── HomeIcon.ts
│ │ │ │ │ │ ├── ImageIcon.ts
│ │ │ │ │ │ ├── InboxIcon.ts
│ │ │ │ │ │ ├── InformationCircleIcon.ts
│ │ │ │ │ │ ├── KeyboardIcon.ts
│ │ │ │ │ │ ├── LanguageCircleIcon.ts
│ │ │ │ │ │ ├── LayoutIcon.ts
│ │ │ │ │ │ ├── LayoutLeftIcon.ts
│ │ │ │ │ │ ├── LinkIcon.ts
│ │ │ │ │ │ ├── LinkSquare02Icon.ts
│ │ │ │ │ │ ├── Loading03Icon.ts
│ │ │ │ │ │ ├── LogoutIcon.ts
│ │ │ │ │ │ ├── MagicWand05Icon.ts
│ │ │ │ │ │ ├── MailIcon.ts
│ │ │ │ │ │ ├── MailValidation01Icon.ts
│ │ │ │ │ │ ├── MapsIcon.ts
│ │ │ │ │ │ ├── Menu05Icon.ts
│ │ │ │ │ │ ├── Menu09Icon.ts
│ │ │ │ │ │ ├── MessageIcon.ts
│ │ │ │ │ │ ├── MinusSignIcon.ts
│ │ │ │ │ │ ├── MoonIcon.ts
│ │ │ │ │ │ ├── MoreHorizontalCircle01Icon.ts
│ │ │ │ │ │ ├── MoreVerticalCircle01Icon.ts
│ │ │ │ │ │ ├── MultiplicationSignCircleIcon.ts
│ │ │ │ │ │ ├── Notification02Icon.ts
│ │ │ │ │ │ ├── NotificationIcon.ts
│ │ │ │ │ │ ├── PaintBoardIcon.ts
│ │ │ │ │ │ ├── PenIcon.ts
│ │ │ │ │ │ ├── PieChartIcon.ts
│ │ │ │ │ │ ├── PlusSignIcon.ts
│ │ │ │ │ │ ├── RecordIcon.ts
│ │ │ │ │ │ ├── RefreshIcon.ts
│ │ │ │ │ │ ├── RoboticIcon.ts
│ │ │ │ │ │ ├── Rotate01Icon.ts
│ │ │ │ │ │ ├── ScissorIcon.ts
│ │ │ │ │ │ ├── Search01Icon.ts
│ │ │ │ │ │ ├── SearchIcon.ts
│ │ │ │ │ │ ├── SentIcon.ts
│ │ │ │ │ │ ├── ServerStackIcon.ts
│ │ │ │ │ │ ├── Settings01Icon.ts
│ │ │ │ │ │ ├── Settings05Icon.ts
│ │ │ │ │ │ ├── SettingsIcon.ts
│ │ │ │ │ │ ├── Share03Icon.ts
│ │ │ │ │ │ ├── ShareIcon.ts
│ │ │ │ │ │ ├── ShieldIcon.ts
│ │ │ │ │ │ ├── ShoppingBag01Icon.ts
│ │ │ │ │ │ ├── ShoppingBasket01Icon.ts
│ │ │ │ │ │ ├── SidebarLeftIcon.ts
│ │ │ │ │ │ ├── SlidersHorizontalIcon.ts
│ │ │ │ │ │ ├── SmileIcon.ts
│ │ │ │ │ │ ├── SparklesIcon.ts
│ │ │ │ │ │ ├── StarIcon.ts
│ │ │ │ │ │ ├── SunIcon.ts
│ │ │ │ │ │ ├── TableIcon.ts
│ │ │ │ │ │ ├── TagIcon.ts
│ │ │ │ │ │ ├── TextBoldIcon.ts
│ │ │ │ │ │ ├── TextCheckIcon.ts
│ │ │ │ │ │ ├── TextItalicIcon.ts
│ │ │ │ │ │ ├── TextUnderlineIcon.ts
│ │ │ │ │ │ ├── Tick02Icon.ts
│ │ │ │ │ │ ├── TradeUpIcon.ts
│ │ │ │ │ │ ├── UnfoldMoreIcon.ts
│ │ │ │ │ │ ├── Upload01Icon.ts
│ │ │ │ │ │ ├── UserIcon.ts
│ │ │ │ │ │ ├── UserRemove01Icon.ts
│ │ │ │ │ │ ├── ViewOffIcon.ts
│ │ │ │ │ │ ├── VoiceIcon.ts
│ │ │ │ │ │ ├── VolumeOffIcon.ts
│ │ │ │ │ │ ├── WalletIcon.ts
│ │ │ │ │ │ ├── ZapIcon.ts
│ │ │ │ │ │ ├── ZoomInAreaIcon.ts
│ │ │ │ │ │ ├── ZoomOutAreaIcon.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── __lucide__/
│ │ │ │ │ │ ├── ActivityIcon.ts
│ │ │ │ │ │ ├── AlertTriangleIcon.ts
│ │ │ │ │ │ ├── AppWindowIcon.ts
│ │ │ │ │ │ ├── ArchiveIcon.ts
│ │ │ │ │ │ ├── ArrowDownIcon.ts
│ │ │ │ │ │ ├── ArrowLeftCircleIcon.ts
│ │ │ │ │ │ ├── ArrowLeftIcon.ts
│ │ │ │ │ │ ├── ArrowRightIcon.ts
│ │ │ │ │ │ ├── ArrowUpIcon.ts
│ │ │ │ │ │ ├── ArrowUpRightIcon.ts
│ │ │ │ │ │ ├── AudioLinesIcon.ts
│ │ │ │ │ │ ├── BadgeCheck.ts
│ │ │ │ │ │ ├── BadgeCheckIcon.ts
│ │ │ │ │ │ ├── BellIcon.ts
│ │ │ │ │ │ ├── BluetoothIcon.ts
│ │ │ │ │ │ ├── BoldIcon.ts
│ │ │ │ │ │ ├── BookOpen.ts
│ │ │ │ │ │ ├── BookOpenIcon.ts
│ │ │ │ │ │ ├── BookmarkIcon.ts
│ │ │ │ │ │ ├── BotIcon.ts
│ │ │ │ │ │ ├── Building2Icon.ts
│ │ │ │ │ │ ├── CalculatorIcon.ts
│ │ │ │ │ │ ├── CalendarIcon.ts
│ │ │ │ │ │ ├── CalendarPlusIcon.ts
│ │ │ │ │ │ ├── CaptionsIcon.ts
│ │ │ │ │ │ ├── ChartBarIcon.ts
│ │ │ │ │ │ ├── ChartLineIcon.ts
│ │ │ │ │ │ ├── ChartPieIcon.ts
│ │ │ │ │ │ ├── CheckCircle2Icon.ts
│ │ │ │ │ │ ├── CheckIcon.ts
│ │ │ │ │ │ ├── ChevronDownIcon.ts
│ │ │ │ │ │ ├── ChevronLeftIcon.ts
│ │ │ │ │ │ ├── ChevronRightIcon.ts
│ │ │ │ │ │ ├── ChevronUpIcon.ts
│ │ │ │ │ │ ├── ChevronsUpDownIcon.ts
│ │ │ │ │ │ ├── CircleAlertIcon.ts
│ │ │ │ │ │ ├── CircleCheckIcon.ts
│ │ │ │ │ │ ├── CircleDashedIcon.ts
│ │ │ │ │ │ ├── CircleDollarSignIcon.ts
│ │ │ │ │ │ ├── CircleIcon.ts
│ │ │ │ │ │ ├── ClipboardPasteIcon.ts
│ │ │ │ │ │ ├── Clock2Icon.ts
│ │ │ │ │ │ ├── ClockIcon.ts
│ │ │ │ │ │ ├── CloudCogIcon.ts
│ │ │ │ │ │ ├── CodeIcon.ts
│ │ │ │ │ │ ├── ContainerIcon.ts
│ │ │ │ │ │ ├── CopyIcon.ts
│ │ │ │ │ │ ├── CreditCardIcon.ts
│ │ │ │ │ │ ├── DownloadIcon.ts
│ │ │ │ │ │ ├── ExternalLinkIcon.ts
│ │ │ │ │ │ ├── EyeIcon.ts
│ │ │ │ │ │ ├── EyeOffIcon.ts
│ │ │ │ │ │ ├── FileCodeIcon.ts
│ │ │ │ │ │ ├── FileIcon.ts
│ │ │ │ │ │ ├── FileTextIcon.ts
│ │ │ │ │ │ ├── FlipHorizontalIcon.ts
│ │ │ │ │ │ ├── FlipVerticalIcon.ts
│ │ │ │ │ │ ├── FolderIcon.ts
│ │ │ │ │ │ ├── FolderOpenIcon.ts
│ │ │ │ │ │ ├── FolderPlusIcon.ts
│ │ │ │ │ │ ├── FolderSearchIcon.ts
│ │ │ │ │ │ ├── FrameIcon.ts
│ │ │ │ │ │ ├── GitBranchIcon.ts
│ │ │ │ │ │ ├── GlobeIcon.ts
│ │ │ │ │ │ ├── HeartIcon.ts
│ │ │ │ │ │ ├── HelpCircleIcon.ts
│ │ │ │ │ │ ├── HomeIcon.ts
│ │ │ │ │ │ ├── ImageIcon.ts
│ │ │ │ │ │ ├── InboxIcon.ts
│ │ │ │ │ │ ├── InfoIcon.ts
│ │ │ │ │ │ ├── ItalicIcon.ts
│ │ │ │ │ │ ├── KeyboardIcon.ts
│ │ │ │ │ │ ├── LanguagesIcon.ts
│ │ │ │ │ │ ├── LayoutGridIcon.ts
│ │ │ │ │ │ ├── LayoutIcon.ts
│ │ │ │ │ │ ├── LightbulbIcon.ts
│ │ │ │ │ │ ├── LinkIcon.ts
│ │ │ │ │ │ ├── ListFilterIcon.ts
│ │ │ │ │ │ ├── ListIcon.ts
│ │ │ │ │ │ ├── Loader2Icon.ts
│ │ │ │ │ │ ├── LogOutIcon.ts
│ │ │ │ │ │ ├── MailCheckIcon.ts
│ │ │ │ │ │ ├── MailIcon.ts
│ │ │ │ │ │ ├── MapIcon.ts
│ │ │ │ │ │ ├── MaximizeIcon.ts
│ │ │ │ │ │ ├── MenuIcon.ts
│ │ │ │ │ │ ├── MessageSquareIcon.ts
│ │ │ │ │ │ ├── MicIcon.ts
│ │ │ │ │ │ ├── MinimizeIcon.ts
│ │ │ │ │ │ ├── MinusIcon.ts
│ │ │ │ │ │ ├── MonitorIcon.ts
│ │ │ │ │ │ ├── MoonIcon.ts
│ │ │ │ │ │ ├── MoreHorizontalIcon.ts
│ │ │ │ │ │ ├── MoreVerticalIcon.ts
│ │ │ │ │ │ ├── MousePointerIcon.ts
│ │ │ │ │ │ ├── OctagonXIcon.ts
│ │ │ │ │ │ ├── PaletteIcon.ts
│ │ │ │ │ │ ├── PanelLeftIcon.ts
│ │ │ │ │ │ ├── PaperclipIcon.ts
│ │ │ │ │ │ ├── PenToolIcon.ts
│ │ │ │ │ │ ├── PencilIcon.ts
│ │ │ │ │ │ ├── PieChartIcon.ts
│ │ │ │ │ │ ├── PlusIcon.ts
│ │ │ │ │ │ ├── RadioIcon.ts
│ │ │ │ │ │ ├── RefreshCwIcon.ts
│ │ │ │ │ │ ├── RotateCwIcon.ts
│ │ │ │ │ │ ├── SaveIcon.ts
│ │ │ │ │ │ ├── ScissorsIcon.ts
│ │ │ │ │ │ ├── Search.ts
│ │ │ │ │ │ ├── SearchIcon.ts
│ │ │ │ │ │ ├── SendIcon.ts
│ │ │ │ │ │ ├── ServerIcon.ts
│ │ │ │ │ │ ├── Settings2Icon.ts
│ │ │ │ │ │ ├── SettingsIcon.ts
│ │ │ │ │ │ ├── ShareIcon.ts
│ │ │ │ │ │ ├── ShieldIcon.ts
│ │ │ │ │ │ ├── ShoppingBagIcon.ts
│ │ │ │ │ │ ├── SlidersHorizontalIcon.ts
│ │ │ │ │ │ ├── SmileIcon.ts
│ │ │ │ │ │ ├── SparklesIcon.ts
│ │ │ │ │ │ ├── StarIcon.ts
│ │ │ │ │ │ ├── SunIcon.ts
│ │ │ │ │ │ ├── TableIcon.ts
│ │ │ │ │ │ ├── TagIcon.ts
│ │ │ │ │ │ ├── TerminalIcon.ts
│ │ │ │ │ │ ├── TerminalSquareIcon.ts
│ │ │ │ │ │ ├── Trash2Icon.ts
│ │ │ │ │ │ ├── TrashIcon.ts
│ │ │ │ │ │ ├── TrendingUpIcon.ts
│ │ │ │ │ │ ├── TriangleAlertIcon.ts
│ │ │ │ │ │ ├── UnderlineIcon.ts
│ │ │ │ │ │ ├── UploadCloudIcon.ts
│ │ │ │ │ │ ├── UploadIcon.ts
│ │ │ │ │ │ ├── UserIcon.ts
│ │ │ │ │ │ ├── UserRoundXIcon.ts
│ │ │ │ │ │ ├── VolumeX.ts
│ │ │ │ │ │ ├── WalletIcon.ts
│ │ │ │ │ │ ├── WandIcon.ts
│ │ │ │ │ │ ├── XIcon.ts
│ │ │ │ │ │ ├── ZapIcon.ts
│ │ │ │ │ │ ├── ZoomInIcon.ts
│ │ │ │ │ │ ├── ZoomOutIcon.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── __phosphor__/
│ │ │ │ │ │ ├── AppWindowIcon.ts
│ │ │ │ │ │ ├── ArchiveIcon.ts
│ │ │ │ │ │ ├── ArrowCircleLeftIcon.ts
│ │ │ │ │ │ ├── ArrowClockwiseIcon.ts
│ │ │ │ │ │ ├── ArrowDownIcon.ts
│ │ │ │ │ │ ├── ArrowLeftIcon.ts
│ │ │ │ │ │ ├── ArrowRightIcon.ts
│ │ │ │ │ │ ├── ArrowSquareOutIcon.ts
│ │ │ │ │ │ ├── ArrowUpIcon.ts
│ │ │ │ │ │ ├── ArrowUpRightIcon.ts
│ │ │ │ │ │ ├── ArrowsHorizontalIcon.ts
│ │ │ │ │ │ ├── ArrowsVerticalIcon.ts
│ │ │ │ │ │ ├── BagIcon.ts
│ │ │ │ │ │ ├── BankIcon.ts
│ │ │ │ │ │ ├── BellIcon.ts
│ │ │ │ │ │ ├── BluetoothIcon.ts
│ │ │ │ │ │ ├── BookOpenIcon.ts
│ │ │ │ │ │ ├── BookmarkIcon.ts
│ │ │ │ │ │ ├── CalculatorIcon.ts
│ │ │ │ │ │ ├── CalendarBlankIcon.ts
│ │ │ │ │ │ ├── CalendarIcon.ts
│ │ │ │ │ │ ├── CalendarPlusIcon.ts
│ │ │ │ │ │ ├── CaretDownIcon.ts
│ │ │ │ │ │ ├── CaretLeftIcon.ts
│ │ │ │ │ │ ├── CaretRightIcon.ts
│ │ │ │ │ │ ├── CaretUpDownIcon.ts
│ │ │ │ │ │ ├── CaretUpIcon.ts
│ │ │ │ │ │ ├── ChartBarIcon.ts
│ │ │ │ │ │ ├── ChartLineIcon.ts
│ │ │ │ │ │ ├── ChartPieIcon.ts
│ │ │ │ │ │ ├── ChatCircleIcon.ts
│ │ │ │ │ │ ├── CheckCircleIcon.ts
│ │ │ │ │ │ ├── CheckIcon.ts
│ │ │ │ │ │ ├── CircleDashedIcon.ts
│ │ │ │ │ │ ├── CircleIcon.ts
│ │ │ │ │ │ ├── ClipboardIcon.ts
│ │ │ │ │ │ ├── ClockIcon.ts
│ │ │ │ │ │ ├── CloudArrowUpIcon.ts
│ │ │ │ │ │ ├── CodeIcon.ts
│ │ │ │ │ │ ├── CopyIcon.ts
│ │ │ │ │ │ ├── CornersInIcon.ts
│ │ │ │ │ │ ├── CornersOutIcon.ts
│ │ │ │ │ │ ├── CreditCardIcon.ts
│ │ │ │ │ │ ├── CropIcon.ts
│ │ │ │ │ │ ├── CubeIcon.ts
│ │ │ │ │ │ ├── CurrencyCircleDollarIcon.ts
│ │ │ │ │ │ ├── DotsThreeIcon.ts
│ │ │ │ │ │ ├── DotsThreeOutlineIcon.ts
│ │ │ │ │ │ ├── DotsThreeVerticalIcon.ts
│ │ │ │ │ │ ├── DownloadIcon.ts
│ │ │ │ │ │ ├── EnvelopeIcon.ts
│ │ │ │ │ │ ├── EyeIcon.ts
│ │ │ │ │ │ ├── EyeSlashIcon.ts
│ │ │ │ │ │ ├── FileCodeIcon.ts
│ │ │ │ │ │ ├── FileIcon.ts
│ │ │ │ │ │ ├── FileTextIcon.ts
│ │ │ │ │ │ ├── FloppyDiskIcon.ts
│ │ │ │ │ │ ├── FolderIcon.ts
│ │ │ │ │ │ ├── FolderOpenIcon.ts
│ │ │ │ │ │ ├── FolderPlusIcon.ts
│ │ │ │ │ │ ├── GearIcon.ts
│ │ │ │ │ │ ├── GitBranchIcon.ts
│ │ │ │ │ │ ├── GlobeIcon.ts
│ │ │ │ │ │ ├── GridFourIcon.ts
│ │ │ │ │ │ ├── HandPointingIcon.ts
│ │ │ │ │ │ ├── HardDrivesIcon.ts
│ │ │ │ │ │ ├── HeartIcon.ts
│ │ │ │ │ │ ├── HouseIcon.ts
│ │ │ │ │ │ ├── ImageIcon.ts
│ │ │ │ │ │ ├── InfoIcon.ts
│ │ │ │ │ │ ├── KeyboardIcon.ts
│ │ │ │ │ │ ├── LayoutIcon.ts
│ │ │ │ │ │ ├── LightbulbIcon.ts
│ │ │ │ │ │ ├── LightningIcon.ts
│ │ │ │ │ │ ├── LinkIcon.ts
│ │ │ │ │ │ ├── ListIcon.ts
│ │ │ │ │ │ ├── ListPlusIcon.ts
│ │ │ │ │ │ ├── MagicWandIcon.ts
│ │ │ │ │ │ ├── MagnifyingGlassIcon.ts
│ │ │ │ │ │ ├── MagnifyingGlassMinusIcon.ts
│ │ │ │ │ │ ├── MagnifyingGlassPlusIcon.ts
│ │ │ │ │ │ ├── MapTrifoldIcon.ts
│ │ │ │ │ │ ├── MicrophoneIcon.ts
│ │ │ │ │ │ ├── MinusIcon.ts
│ │ │ │ │ │ ├── MonitorIcon.ts
│ │ │ │ │ │ ├── MoonIcon.ts
│ │ │ │ │ │ ├── PaletteIcon.ts
│ │ │ │ │ │ ├── PaperPlaneTiltIcon.ts
│ │ │ │ │ │ ├── PaperclipIcon.ts
│ │ │ │ │ │ ├── PencilIcon.ts
│ │ │ │ │ │ ├── PlusIcon.ts
│ │ │ │ │ │ ├── PulseIcon.ts
│ │ │ │ │ │ ├── QuestionIcon.ts
│ │ │ │ │ │ ├── RecordIcon.ts
│ │ │ │ │ │ ├── RobotIcon.ts
│ │ │ │ │ │ ├── ScissorsIcon.ts
│ │ │ │ │ │ ├── ShareIcon.ts
│ │ │ │ │ │ ├── ShieldIcon.ts
│ │ │ │ │ │ ├── SidebarIcon.ts
│ │ │ │ │ │ ├── SignOutIcon.ts
│ │ │ │ │ │ ├── SlidersHorizontalIcon.ts
│ │ │ │ │ │ ├── SmileyIcon.ts
│ │ │ │ │ │ ├── SparkleIcon.ts
│ │ │ │ │ │ ├── SpeakerSlashIcon.ts
│ │ │ │ │ │ ├── SpinnerIcon.ts
│ │ │ │ │ │ ├── StarIcon.ts
│ │ │ │ │ │ ├── SunIcon.ts
│ │ │ │ │ │ ├── TableIcon.ts
│ │ │ │ │ │ ├── TagIcon.ts
│ │ │ │ │ │ ├── TerminalIcon.ts
│ │ │ │ │ │ ├── TextBIcon.ts
│ │ │ │ │ │ ├── TextItalicIcon.ts
│ │ │ │ │ │ ├── TextTIcon.ts
│ │ │ │ │ │ ├── TextUnderlineIcon.ts
│ │ │ │ │ │ ├── TranslateIcon.ts
│ │ │ │ │ │ ├── TrashIcon.ts
│ │ │ │ │ │ ├── TrayIcon.ts
│ │ │ │ │ │ ├── TrendUpIcon.ts
│ │ │ │ │ │ ├── UploadIcon.ts
│ │ │ │ │ │ ├── UserIcon.ts
│ │ │ │ │ │ ├── UserMinusIcon.ts
│ │ │ │ │ │ ├── WalletIcon.ts
│ │ │ │ │ │ ├── WarningCircleIcon.ts
│ │ │ │ │ │ ├── WarningIcon.ts
│ │ │ │ │ │ ├── XCircleIcon.ts
│ │ │ │ │ │ ├── XIcon.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── __remixicon__/
│ │ │ │ │ │ ├── RiAddBoxLine.ts
│ │ │ │ │ │ ├── RiAddLine.ts
│ │ │ │ │ │ ├── RiAlertLine.ts
│ │ │ │ │ │ ├── RiArchiveLine.ts
│ │ │ │ │ │ ├── RiArrowDownLine.ts
│ │ │ │ │ │ ├── RiArrowDownSLine.ts
│ │ │ │ │ │ ├── RiArrowLeftCircleLine.ts
│ │ │ │ │ │ ├── RiArrowLeftLine.ts
│ │ │ │ │ │ ├── RiArrowLeftSLine.ts
│ │ │ │ │ │ ├── RiArrowRightLine.ts
│ │ │ │ │ │ ├── RiArrowRightSLine.ts
│ │ │ │ │ │ ├── RiArrowRightUpLine.ts
│ │ │ │ │ │ ├── RiArrowUpDownLine.ts
│ │ │ │ │ │ ├── RiArrowUpLine.ts
│ │ │ │ │ │ ├── RiArrowUpSLine.ts
│ │ │ │ │ │ ├── RiAttachmentLine.ts
│ │ │ │ │ │ ├── RiBankCardLine.ts
│ │ │ │ │ │ ├── RiBankLine.ts
│ │ │ │ │ │ ├── RiBarChartLine.ts
│ │ │ │ │ │ ├── RiBluetoothLine.ts
│ │ │ │ │ │ ├── RiBold.ts
│ │ │ │ │ │ ├── RiBookOpenLine.ts
│ │ │ │ │ │ ├── RiBookmarkLine.ts
│ │ │ │ │ │ ├── RiBox1Line.ts
│ │ │ │ │ │ ├── RiCalculatorLine.ts
│ │ │ │ │ │ ├── RiCalendarCheckLine.ts
│ │ │ │ │ │ ├── RiCalendarLine.ts
│ │ │ │ │ │ ├── RiChat1Line.ts
│ │ │ │ │ │ ├── RiCheckLine.ts
│ │ │ │ │ │ ├── RiCheckboxCircleLine.ts
│ │ │ │ │ │ ├── RiCircleLine.ts
│ │ │ │ │ │ ├── RiClipboardLine.ts
│ │ │ │ │ │ ├── RiCloseCircleLine.ts
│ │ │ │ │ │ ├── RiCloseLine.ts
│ │ │ │ │ │ ├── RiClosedCaptioningLine.ts
│ │ │ │ │ │ ├── RiCloudLine.ts
│ │ │ │ │ │ ├── RiCodeLine.ts
│ │ │ │ │ │ ├── RiComputerLine.ts
│ │ │ │ │ │ ├── RiContractUpDownLine.ts
│ │ │ │ │ │ ├── RiCropLine.ts
│ │ │ │ │ │ ├── RiCursorLine.ts
│ │ │ │ │ │ ├── RiDeleteBinLine.ts
│ │ │ │ │ │ ├── RiDownloadLine.ts
│ │ │ │ │ │ ├── RiEmotionLine.ts
│ │ │ │ │ │ ├── RiErrorWarningLine.ts
│ │ │ │ │ │ ├── RiExpandDiagonalLine.ts
│ │ │ │ │ │ ├── RiExpandUpDownLine.ts
│ │ │ │ │ │ ├── RiExternalLinkLine.ts
│ │ │ │ │ │ ├── RiEyeLine.ts
│ │ │ │ │ │ ├── RiEyeOffLine.ts
│ │ │ │ │ │ ├── RiFileCodeLine.ts
│ │ │ │ │ │ ├── RiFileCopyLine.ts
│ │ │ │ │ │ ├── RiFileLine.ts
│ │ │ │ │ │ ├── RiFileTextLine.ts
│ │ │ │ │ │ ├── RiFlashlightLine.ts
│ │ │ │ │ │ ├── RiFlipHorizontalLine.ts
│ │ │ │ │ │ ├── RiFlipVerticalLine.ts
│ │ │ │ │ │ ├── RiFolderAddLine.ts
│ │ │ │ │ │ ├── RiFolderLine.ts
│ │ │ │ │ │ ├── RiFolderOpenLine.ts
│ │ │ │ │ │ ├── RiGitBranchLine.ts
│ │ │ │ │ │ ├── RiGlobalLine.ts
│ │ │ │ │ │ ├── RiGridLine.ts
│ │ │ │ │ │ ├── RiHardDriveLine.ts
│ │ │ │ │ │ ├── RiHeartLine.ts
│ │ │ │ │ │ ├── RiHomeLine.ts
│ │ │ │ │ │ ├── RiImageLine.ts
│ │ │ │ │ │ ├── RiInboxLine.ts
│ │ │ │ │ │ ├── RiInformationLine.ts
│ │ │ │ │ │ ├── RiItalic.ts
│ │ │ │ │ │ ├── RiKeyboardLine.ts
│ │ │ │ │ │ ├── RiLayoutLine.ts
│ │ │ │ │ │ ├── RiLightbulbLine.ts
│ │ │ │ │ │ ├── RiLineChartLine.ts
│ │ │ │ │ │ ├── RiLink.ts
│ │ │ │ │ │ ├── RiLinksLine.ts
│ │ │ │ │ │ ├── RiListUnordered.ts
│ │ │ │ │ │ ├── RiLoaderLine.ts
│ │ │ │ │ │ ├── RiLogoutBoxLine.ts
│ │ │ │ │ │ ├── RiMagicLine.ts
│ │ │ │ │ │ ├── RiMailCheckLine.ts
│ │ │ │ │ │ ├── RiMailLine.ts
│ │ │ │ │ │ ├── RiMapLine.ts
│ │ │ │ │ │ ├── RiMenuLine.ts
│ │ │ │ │ │ ├── RiMicLine.ts
│ │ │ │ │ │ ├── RiMoneyDollarCircleLine.ts
│ │ │ │ │ │ ├── RiMoonLine.ts
│ │ │ │ │ │ ├── RiMore2Line.ts
│ │ │ │ │ │ ├── RiMoreLine.ts
│ │ │ │ │ │ ├── RiNotificationLine.ts
│ │ │ │ │ │ ├── RiPaletteLine.ts
│ │ │ │ │ │ ├── RiPencilLine.ts
│ │ │ │ │ │ ├── RiPieChartLine.ts
│ │ │ │ │ │ ├── RiPriceTagLine.ts
│ │ │ │ │ │ ├── RiPulseLine.ts
│ │ │ │ │ │ ├── RiQuestionLine.ts
│ │ │ │ │ │ ├── RiRecordCircleLine.ts
│ │ │ │ │ │ ├── RiRefreshLine.ts
│ │ │ │ │ │ ├── RiRobotLine.ts
│ │ │ │ │ │ ├── RiSaveLine.ts
│ │ │ │ │ │ ├── RiScissorsLine.ts
│ │ │ │ │ │ ├── RiSearchEyeLine.ts
│ │ │ │ │ │ ├── RiSearchLine.ts
│ │ │ │ │ │ ├── RiSendPlaneLine.ts
│ │ │ │ │ │ ├── RiServerLine.ts
│ │ │ │ │ │ ├── RiSettingsLine.ts
│ │ │ │ │ │ ├── RiShareLine.ts
│ │ │ │ │ │ ├── RiShieldLine.ts
│ │ │ │ │ │ ├── RiShoppingBagLine.ts
│ │ │ │ │ │ ├── RiSideBarLine.ts
│ │ │ │ │ │ ├── RiSparklingLine.ts
│ │ │ │ │ │ ├── RiStarLine.ts
│ │ │ │ │ │ ├── RiSubtractLine.ts
│ │ │ │ │ │ ├── RiSunLine.ts
│ │ │ │ │ │ ├── RiTableLine.ts
│ │ │ │ │ │ ├── RiTerminalBoxLine.ts
│ │ │ │ │ │ ├── RiTimeLine.ts
│ │ │ │ │ │ ├── RiTranslate.ts
│ │ │ │ │ │ ├── RiUnderline.ts
│ │ │ │ │ │ ├── RiUploadCloudLine.ts
│ │ │ │ │ │ ├── RiUploadLine.ts
│ │ │ │ │ │ ├── RiUserLine.ts
│ │ │ │ │ │ ├── RiUserMinusLine.ts
│ │ │ │ │ │ ├── RiUserUnfollowLine.ts
│ │ │ │ │ │ ├── RiVolumeMuteLine.ts
│ │ │ │ │ │ ├── RiWalletLine.ts
│ │ │ │ │ │ ├── RiWindowLine.ts
│ │ │ │ │ │ ├── RiZoomInLine.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── __tabler__/
│ │ │ │ │ │ ├── IconActivity.ts
│ │ │ │ │ │ ├── IconAdjustmentsHorizontal.ts
│ │ │ │ │ │ ├── IconAlertOctagon.ts
│ │ │ │ │ │ ├── IconAlertTriangle.ts
│ │ │ │ │ │ ├── IconAppWindow.ts
│ │ │ │ │ │ ├── IconArchive.ts
│ │ │ │ │ │ ├── IconArrowDown.ts
│ │ │ │ │ │ ├── IconArrowLeft.ts
│ │ │ │ │ │ ├── IconArrowRight.ts
│ │ │ │ │ │ ├── IconArrowUp.ts
│ │ │ │ │ │ ├── IconArrowUpRight.ts
│ │ │ │ │ │ ├── IconBell.ts
│ │ │ │ │ │ ├── IconBluetooth.ts
│ │ │ │ │ │ ├── IconBold.ts
│ │ │ │ │ │ ├── IconBolt.ts
│ │ │ │ │ │ ├── IconBook.ts
│ │ │ │ │ │ ├── IconBookmark.ts
│ │ │ │ │ │ ├── IconBorderCorners.ts
│ │ │ │ │ │ ├── IconBox.ts
│ │ │ │ │ │ ├── IconBrandJavascript.ts
│ │ │ │ │ │ ├── IconBuildingBank.ts
│ │ │ │ │ │ ├── IconBulb.ts
│ │ │ │ │ │ ├── IconCalculator.ts
│ │ │ │ │ │ ├── IconCalendar.ts
│ │ │ │ │ │ ├── IconCalendarPlus.ts
│ │ │ │ │ │ ├── IconChartBar.ts
│ │ │ │ │ │ ├── IconChartLine.ts
│ │ │ │ │ │ ├── IconChartPie.ts
│ │ │ │ │ │ ├── IconCheck.ts
│ │ │ │ │ │ ├── IconChevronDown.ts
│ │ │ │ │ │ ├── IconChevronLeft.ts
│ │ │ │ │ │ ├── IconChevronRight.ts
│ │ │ │ │ │ ├── IconChevronUp.ts
│ │ │ │ │ │ ├── IconCircle.ts
│ │ │ │ │ │ ├── IconCircleArrowLeft.ts
│ │ │ │ │ │ ├── IconCircleCheck.ts
│ │ │ │ │ │ ├── IconCircleCheckFilled.ts
│ │ │ │ │ │ ├── IconCircleDashed.ts
│ │ │ │ │ │ ├── IconClipboard.ts
│ │ │ │ │ │ ├── IconClock.ts
│ │ │ │ │ │ ├── IconClockHour2.ts
│ │ │ │ │ │ ├── IconCloudCog.ts
│ │ │ │ │ │ ├── IconCloudUpload.ts
│ │ │ │ │ │ ├── IconCode.ts
│ │ │ │ │ │ ├── IconCoin.ts
│ │ │ │ │ │ ├── IconCopy.ts
│ │ │ │ │ │ ├── IconCreditCard.ts
│ │ │ │ │ │ ├── IconCut.ts
│ │ │ │ │ │ ├── IconDeviceDesktop.ts
│ │ │ │ │ │ ├── IconDeviceFloppy.ts
│ │ │ │ │ │ ├── IconDots.ts
│ │ │ │ │ │ ├── IconDotsVertical.ts
│ │ │ │ │ │ ├── IconDownload.ts
│ │ │ │ │ │ ├── IconExclamationCircle.ts
│ │ │ │ │ │ ├── IconExternalLink.ts
│ │ │ │ │ │ ├── IconEye.ts
│ │ │ │ │ │ ├── IconEyeClosed.ts
│ │ │ │ │ │ ├── IconFile.ts
│ │ │ │ │ │ ├── IconFileCode.ts
│ │ │ │ │ │ ├── IconFileText.ts
│ │ │ │ │ │ ├── IconFilterPlus.ts
│ │ │ │ │ │ ├── IconFlipHorizontal.ts
│ │ │ │ │ │ ├── IconFlipVertical.ts
│ │ │ │ │ │ ├── IconFolder.ts
│ │ │ │ │ │ ├── IconFolderOpen.ts
│ │ │ │ │ │ ├── IconFolderPlus.ts
│ │ │ │ │ │ ├── IconFolderSearch.ts
│ │ │ │ │ │ ├── IconFrame.ts
│ │ │ │ │ │ ├── IconGitBranch.ts
│ │ │ │ │ │ ├── IconHeadphones.ts
│ │ │ │ │ │ ├── IconHeart.ts
│ │ │ │ │ │ ├── IconHelpCircle.ts
│ │ │ │ │ │ ├── IconHome.ts
│ │ │ │ │ │ ├── IconInbox.ts
│ │ │ │ │ │ ├── IconInfoCircle.ts
│ │ │ │ │ │ ├── IconItalic.ts
│ │ │ │ │ │ ├── IconKeyboard.ts
│ │ │ │ │ │ ├── IconLanguage.ts
│ │ │ │ │ │ ├── IconLayout.ts
│ │ │ │ │ │ ├── IconLayoutGrid.ts
│ │ │ │ │ │ ├── IconLayoutSidebar.ts
│ │ │ │ │ │ ├── IconLink.ts
│ │ │ │ │ │ ├── IconList.ts
│ │ │ │ │ │ ├── IconLoader.ts
│ │ │ │ │ │ ├── IconLogout.ts
│ │ │ │ │ │ ├── IconMail.ts
│ │ │ │ │ │ ├── IconMailCheck.ts
│ │ │ │ │ │ ├── IconMap.ts
│ │ │ │ │ │ ├── IconMenu.ts
│ │ │ │ │ │ ├── IconMenu2.ts
│ │ │ │ │ │ ├── IconMessage.ts
│ │ │ │ │ │ ├── IconMicrophone.ts
│ │ │ │ │ │ ├── IconMinimize.ts
│ │ │ │ │ │ ├── IconMinus.ts
│ │ │ │ │ │ ├── IconMoodSmile.ts
│ │ │ │ │ │ ├── IconMoon.ts
│ │ │ │ │ │ ├── IconPalette.ts
│ │ │ │ │ │ ├── IconPaperclip.ts
│ │ │ │ │ │ ├── IconPencil.ts
│ │ │ │ │ │ ├── IconPhoto.ts
│ │ │ │ │ │ ├── IconPlayerRecordFilled.ts
│ │ │ │ │ │ ├── IconPlus.ts
│ │ │ │ │ │ ├── IconPointer.ts
│ │ │ │ │ │ ├── IconRefresh.ts
│ │ │ │ │ │ ├── IconRobot.ts
│ │ │ │ │ │ ├── IconRosetteDiscountCheck.ts
│ │ │ │ │ │ ├── IconRotateClockwise2.ts
│ │ │ │ │ │ ├── IconSearch.ts
│ │ │ │ │ │ ├── IconSelector.ts
│ │ │ │ │ │ ├── IconSend.ts
│ │ │ │ │ │ ├── IconServer.ts
│ │ │ │ │ │ ├── IconServerSpark.ts
│ │ │ │ │ │ ├── IconSettings.ts
│ │ │ │ │ │ ├── IconShare.ts
│ │ │ │ │ │ ├── IconShare2.ts
│ │ │ │ │ │ ├── IconShield.ts
│ │ │ │ │ │ ├── IconShoppingBag.ts
│ │ │ │ │ │ ├── IconSparkles.ts
│ │ │ │ │ │ ├── IconStar.ts
│ │ │ │ │ │ ├── IconSun.ts
│ │ │ │ │ │ ├── IconTable.ts
│ │ │ │ │ │ ├── IconTag.ts
│ │ │ │ │ │ ├── IconTerminal.ts
│ │ │ │ │ │ ├── IconTerminal2.ts
│ │ │ │ │ │ ├── IconTextCaption.ts
│ │ │ │ │ │ ├── IconTrash.ts
│ │ │ │ │ │ ├── IconTrendingUp.ts
│ │ │ │ │ │ ├── IconUnderline.ts
│ │ │ │ │ │ ├── IconUpload.ts
│ │ │ │ │ │ ├── IconUser.ts
│ │ │ │ │ │ ├── IconUserX.ts
│ │ │ │ │ │ ├── IconVolume.ts
│ │ │ │ │ │ ├── IconWallet.ts
│ │ │ │ │ │ ├── IconWand.ts
│ │ │ │ │ │ ├── IconWaveSine.ts
│ │ │ │ │ │ ├── IconWorld.ts
│ │ │ │ │ │ ├── IconX.ts
│ │ │ │ │ │ ├── IconZoomIn.ts
│ │ │ │ │ │ ├── IconZoomOut.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ └── logos/
│ │ │ │ │ ├── hugeicons.svelte
│ │ │ │ │ ├── lucide.svelte
│ │ │ │ │ ├── phosphor.svelte
│ │ │ │ │ ├── remixicon.svelte
│ │ │ │ │ └── tabler.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── lib/
│ │ │ │ │ ├── casing.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── registry-base-colors.ts
│ │ │ │ ├── registry-block-meta.ts
│ │ │ │ ├── registry-categories.ts
│ │ │ │ ├── registry-colors.ts
│ │ │ │ ├── registry-utils.ts
│ │ │ │ ├── schema.ts
│ │ │ │ ├── styles/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── icons/
│ │ │ │ │ │ ├── lyra.svelte
│ │ │ │ │ │ ├── maia.svelte
│ │ │ │ │ │ ├── mira.svelte
│ │ │ │ │ │ ├── nova.svelte
│ │ │ │ │ │ └── vega.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── style-lyra.css
│ │ │ │ │ ├── style-maia.css
│ │ │ │ │ ├── style-mira.css
│ │ │ │ │ ├── style-nova.css
│ │ │ │ │ └── style-vega.css
│ │ │ │ ├── templates.ts
│ │ │ │ ├── themes.ts
│ │ │ │ └── ui/
│ │ │ │ ├── accordion/
│ │ │ │ │ ├── accordion-content.svelte
│ │ │ │ │ ├── accordion-item.svelte
│ │ │ │ │ ├── accordion-trigger.svelte
│ │ │ │ │ ├── accordion.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── alert/
│ │ │ │ │ ├── alert-action.svelte
│ │ │ │ │ ├── alert-description.svelte
│ │ │ │ │ ├── alert-title.svelte
│ │ │ │ │ ├── alert.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── alert-dialog/
│ │ │ │ │ ├── alert-dialog-action.svelte
│ │ │ │ │ ├── alert-dialog-cancel.svelte
│ │ │ │ │ ├── alert-dialog-content.svelte
│ │ │ │ │ ├── alert-dialog-description.svelte
│ │ │ │ │ ├── alert-dialog-footer.svelte
│ │ │ │ │ ├── alert-dialog-header.svelte
│ │ │ │ │ ├── alert-dialog-media.svelte
│ │ │ │ │ ├── alert-dialog-overlay.svelte
│ │ │ │ │ ├── alert-dialog-portal.svelte
│ │ │ │ │ ├── alert-dialog-title.svelte
│ │ │ │ │ ├── alert-dialog-trigger.svelte
│ │ │ │ │ ├── alert-dialog.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── aspect-ratio/
│ │ │ │ │ ├── aspect-ratio.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── avatar/
│ │ │ │ │ ├── avatar-badge.svelte
│ │ │ │ │ ├── avatar-fallback.svelte
│ │ │ │ │ ├── avatar-group-count.svelte
│ │ │ │ │ ├── avatar-group.svelte
│ │ │ │ │ ├── avatar-image.svelte
│ │ │ │ │ ├── avatar.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── badge/
│ │ │ │ │ ├── badge.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── breadcrumb/
│ │ │ │ │ ├── breadcrumb-ellipsis.svelte
│ │ │ │ │ ├── breadcrumb-item.svelte
│ │ │ │ │ ├── breadcrumb-link.svelte
│ │ │ │ │ ├── breadcrumb-list.svelte
│ │ │ │ │ ├── breadcrumb-page.svelte
│ │ │ │ │ ├── breadcrumb-separator.svelte
│ │ │ │ │ ├── breadcrumb.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── button/
│ │ │ │ │ ├── button.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── button-group/
│ │ │ │ │ ├── button-group-separator.svelte
│ │ │ │ │ ├── button-group-text.svelte
│ │ │ │ │ ├── button-group.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── calendar/
│ │ │ │ │ ├── calendar-caption.svelte
│ │ │ │ │ ├── calendar-cell.svelte
│ │ │ │ │ ├── calendar-day.svelte
│ │ │ │ │ ├── calendar-grid-body.svelte
│ │ │ │ │ ├── calendar-grid-head.svelte
│ │ │ │ │ ├── calendar-grid-row.svelte
│ │ │ │ │ ├── calendar-grid.svelte
│ │ │ │ │ ├── calendar-head-cell.svelte
│ │ │ │ │ ├── calendar-header.svelte
│ │ │ │ │ ├── calendar-heading.svelte
│ │ │ │ │ ├── calendar-month-select.svelte
│ │ │ │ │ ├── calendar-month.svelte
│ │ │ │ │ ├── calendar-months.svelte
│ │ │ │ │ ├── calendar-nav.svelte
│ │ │ │ │ ├── calendar-next-button.svelte
│ │ │ │ │ ├── calendar-prev-button.svelte
│ │ │ │ │ ├── calendar-year-select.svelte
│ │ │ │ │ ├── calendar.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── card/
│ │ │ │ │ ├── card-action.svelte
│ │ │ │ │ ├── card-content.svelte
│ │ │ │ │ ├── card-description.svelte
│ │ │ │ │ ├── card-footer.svelte
│ │ │ │ │ ├── card-header.svelte
│ │ │ │ │ ├── card-title.svelte
│ │ │ │ │ ├── card.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── carousel/
│ │ │ │ │ ├── carousel-content.svelte
│ │ │ │ │ ├── carousel-item.svelte
│ │ │ │ │ ├── carousel-next.svelte
│ │ │ │ │ ├── carousel-previous.svelte
│ │ │ │ │ ├── carousel.svelte
│ │ │ │ │ ├── context.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── chart/
│ │ │ │ │ ├── chart-container.svelte
│ │ │ │ │ ├── chart-style.svelte
│ │ │ │ │ ├── chart-tooltip.svelte
│ │ │ │ │ ├── chart-utils.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── checkbox/
│ │ │ │ │ ├── checkbox.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── collapsible/
│ │ │ │ │ ├── collapsible-content.svelte
│ │ │ │ │ ├── collapsible-trigger.svelte
│ │ │ │ │ ├── collapsible.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── command/
│ │ │ │ │ ├── command-dialog.svelte
│ │ │ │ │ ├── command-empty.svelte
│ │ │ │ │ ├── command-group.svelte
│ │ │ │ │ ├── command-input.svelte
│ │ │ │ │ ├── command-item.svelte
│ │ │ │ │ ├── command-link-item.svelte
│ │ │ │ │ ├── command-list.svelte
│ │ │ │ │ ├── command-loading.svelte
│ │ │ │ │ ├── command-separator.svelte
│ │ │ │ │ ├── command-shortcut.svelte
│ │ │ │ │ ├── command.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── context-menu/
│ │ │ │ │ ├── context-menu-checkbox-item.svelte
│ │ │ │ │ ├── context-menu-content.svelte
│ │ │ │ │ ├── context-menu-group-heading.svelte
│ │ │ │ │ ├── context-menu-group.svelte
│ │ │ │ │ ├── context-menu-item.svelte
│ │ │ │ │ ├── context-menu-label.svelte
│ │ │ │ │ ├── context-menu-portal.svelte
│ │ │ │ │ ├── context-menu-radio-group.svelte
│ │ │ │ │ ├── context-menu-radio-item.svelte
│ │ │ │ │ ├── context-menu-separator.svelte
│ │ │ │ │ ├── context-menu-shortcut.svelte
│ │ │ │ │ ├── context-menu-sub-content.svelte
│ │ │ │ │ ├── context-menu-sub-trigger.svelte
│ │ │ │ │ ├── context-menu-sub.svelte
│ │ │ │ │ ├── context-menu-trigger.svelte
│ │ │ │ │ ├── context-menu.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── data-table/
│ │ │ │ │ ├── data-table.svelte.ts
│ │ │ │ │ ├── flex-render.svelte
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── render-helpers.ts
│ │ │ │ ├── dialog/
│ │ │ │ │ ├── dialog-close.svelte
│ │ │ │ │ ├── dialog-content.svelte
│ │ │ │ │ ├── dialog-description.svelte
│ │ │ │ │ ├── dialog-footer.svelte
│ │ │ │ │ ├── dialog-header.svelte
│ │ │ │ │ ├── dialog-overlay.svelte
│ │ │ │ │ ├── dialog-portal.svelte
│ │ │ │ │ ├── dialog-title.svelte
│ │ │ │ │ ├── dialog-trigger.svelte
│ │ │ │ │ ├── dialog.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── drawer/
│ │ │ │ │ ├── drawer-close.svelte
│ │ │ │ │ ├── drawer-content.svelte
│ │ │ │ │ ├── drawer-description.svelte
│ │ │ │ │ ├── drawer-footer.svelte
│ │ │ │ │ ├── drawer-header.svelte
│ │ │ │ │ ├── drawer-nested.svelte
│ │ │ │ │ ├── drawer-overlay.svelte
│ │ │ │ │ ├── drawer-portal.svelte
│ │ │ │ │ ├── drawer-title.svelte
│ │ │ │ │ ├── drawer-trigger.svelte
│ │ │ │ │ ├── drawer.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── dropdown-menu/
│ │ │ │ │ ├── dropdown-menu-checkbox-group.svelte
│ │ │ │ │ ├── dropdown-menu-checkbox-item.svelte
│ │ │ │ │ ├── dropdown-menu-content.svelte
│ │ │ │ │ ├── dropdown-menu-group-heading.svelte
│ │ │ │ │ ├── dropdown-menu-group.svelte
│ │ │ │ │ ├── dropdown-menu-item.svelte
│ │ │ │ │ ├── dropdown-menu-label.svelte
│ │ │ │ │ ├── dropdown-menu-portal.svelte
│ │ │ │ │ ├── dropdown-menu-radio-group.svelte
│ │ │ │ │ ├── dropdown-menu-radio-item.svelte
│ │ │ │ │ ├── dropdown-menu-separator.svelte
│ │ │ │ │ ├── dropdown-menu-shortcut.svelte
│ │ │ │ │ ├── dropdown-menu-sub-content.svelte
│ │ │ │ │ ├── dropdown-menu-sub-trigger.svelte
│ │ │ │ │ ├── dropdown-menu-sub.svelte
│ │ │ │ │ ├── dropdown-menu-trigger.svelte
│ │ │ │ │ ├── dropdown-menu.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── empty/
│ │ │ │ │ ├── empty-content.svelte
│ │ │ │ │ ├── empty-description.svelte
│ │ │ │ │ ├── empty-header.svelte
│ │ │ │ │ ├── empty-media.svelte
│ │ │ │ │ ├── empty-title.svelte
│ │ │ │ │ ├── empty.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── field/
│ │ │ │ │ ├── field-content.svelte
│ │ │ │ │ ├── field-description.svelte
│ │ │ │ │ ├── field-error.svelte
│ │ │ │ │ ├── field-group.svelte
│ │ │ │ │ ├── field-label.svelte
│ │ │ │ │ ├── field-legend.svelte
│ │ │ │ │ ├── field-separator.svelte
│ │ │ │ │ ├── field-set.svelte
│ │ │ │ │ ├── field-title.svelte
│ │ │ │ │ ├── field.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── form/
│ │ │ │ │ ├── form-button.svelte
│ │ │ │ │ ├── form-description.svelte
│ │ │ │ │ ├── form-element-field.svelte
│ │ │ │ │ ├── form-field-errors.svelte
│ │ │ │ │ ├── form-field.svelte
│ │ │ │ │ ├── form-fieldset.svelte
│ │ │ │ │ ├── form-label.svelte
│ │ │ │ │ ├── form-legend.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── hover-card/
│ │ │ │ │ ├── hover-card-content.svelte
│ │ │ │ │ ├── hover-card-portal.svelte
│ │ │ │ │ ├── hover-card-trigger.svelte
│ │ │ │ │ ├── hover-card.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── input/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── input.svelte
│ │ │ │ ├── input-group/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── input-group-addon.svelte
│ │ │ │ │ ├── input-group-button.svelte
│ │ │ │ │ ├── input-group-input.svelte
│ │ │ │ │ ├── input-group-text.svelte
│ │ │ │ │ ├── input-group-textarea.svelte
│ │ │ │ │ └── input-group.svelte
│ │ │ │ ├── input-otp/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── input-otp-group.svelte
│ │ │ │ │ ├── input-otp-separator.svelte
│ │ │ │ │ ├── input-otp-slot.svelte
│ │ │ │ │ └── input-otp.svelte
│ │ │ │ ├── item/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── item-actions.svelte
│ │ │ │ │ ├── item-content.svelte
│ │ │ │ │ ├── item-description.svelte
│ │ │ │ │ ├── item-footer.svelte
│ │ │ │ │ ├── item-group.svelte
│ │ │ │ │ ├── item-header.svelte
│ │ │ │ │ ├── item-media.svelte
│ │ │ │ │ ├── item-separator.svelte
│ │ │ │ │ ├── item-title.svelte
│ │ │ │ │ └── item.svelte
│ │ │ │ ├── kbd/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── kbd-group.svelte
│ │ │ │ │ └── kbd.svelte
│ │ │ │ ├── label/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── label.svelte
│ │ │ │ ├── menubar/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── menubar-checkbox-item.svelte
│ │ │ │ │ ├── menubar-content.svelte
│ │ │ │ │ ├── menubar-group-heading.svelte
│ │ │ │ │ ├── menubar-group.svelte
│ │ │ │ │ ├── menubar-item.svelte
│ │ │ │ │ ├── menubar-label.svelte
│ │ │ │ │ ├── menubar-menu.svelte
│ │ │ │ │ ├── menubar-portal.svelte
│ │ │ │ │ ├── menubar-radio-group.svelte
│ │ │ │ │ ├── menubar-radio-item.svelte
│ │ │ │ │ ├── menubar-separator.svelte
│ │ │ │ │ ├── menubar-shortcut.svelte
│ │ │ │ │ ├── menubar-sub-content.svelte
│ │ │ │ │ ├── menubar-sub-trigger.svelte
│ │ │ │ │ ├── menubar-sub.svelte
│ │ │ │ │ ├── menubar-trigger.svelte
│ │ │ │ │ └── menubar.svelte
│ │ │ │ ├── native-select/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── native-select-opt-group.svelte
│ │ │ │ │ ├── native-select-option.svelte
│ │ │ │ │ └── native-select.svelte
│ │ │ │ ├── navigation-menu/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── navigation-menu-content.svelte
│ │ │ │ │ ├── navigation-menu-indicator.svelte
│ │ │ │ │ ├── navigation-menu-item.svelte
│ │ │ │ │ ├── navigation-menu-link.svelte
│ │ │ │ │ ├── navigation-menu-list.svelte
│ │ │ │ │ ├── navigation-menu-trigger.svelte
│ │ │ │ │ ├── navigation-menu-viewport.svelte
│ │ │ │ │ └── navigation-menu.svelte
│ │ │ │ ├── pagination/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── pagination-content.svelte
│ │ │ │ │ ├── pagination-ellipsis.svelte
│ │ │ │ │ ├── pagination-item.svelte
│ │ │ │ │ ├── pagination-link.svelte
│ │ │ │ │ ├── pagination-next-button.svelte
│ │ │ │ │ ├── pagination-next.svelte
│ │ │ │ │ ├── pagination-prev-button.svelte
│ │ │ │ │ ├── pagination-previous.svelte
│ │ │ │ │ └── pagination.svelte
│ │ │ │ ├── popover/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── popover-close.svelte
│ │ │ │ │ ├── popover-content.svelte
│ │ │ │ │ ├── popover-description.svelte
│ │ │ │ │ ├── popover-header.svelte
│ │ │ │ │ ├── popover-portal.svelte
│ │ │ │ │ ├── popover-title.svelte
│ │ │ │ │ ├── popover-trigger.svelte
│ │ │ │ │ └── popover.svelte
│ │ │ │ ├── progress/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── progress.svelte
│ │ │ │ ├── radio-group/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── radio-group-item.svelte
│ │ │ │ │ └── radio-group.svelte
│ │ │ │ ├── range-calendar/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── range-calendar-caption.svelte
│ │ │ │ │ ├── range-calendar-cell.svelte
│ │ │ │ │ ├── range-calendar-day.svelte
│ │ │ │ │ ├── range-calendar-grid-body.svelte
│ │ │ │ │ ├── range-calendar-grid-head.svelte
│ │ │ │ │ ├── range-calendar-grid-row.svelte
│ │ │ │ │ ├── range-calendar-grid.svelte
│ │ │ │ │ ├── range-calendar-head-cell.svelte
│ │ │ │ │ ├── range-calendar-header.svelte
│ │ │ │ │ ├── range-calendar-heading.svelte
│ │ │ │ │ ├── range-calendar-month-select.svelte
│ │ │ │ │ ├── range-calendar-month.svelte
│ │ │ │ │ ├── range-calendar-months.svelte
│ │ │ │ │ ├── range-calendar-nav.svelte
│ │ │ │ │ ├── range-calendar-next-button.svelte
│ │ │ │ │ ├── range-calendar-prev-button.svelte
│ │ │ │ │ ├── range-calendar-year-select.svelte
│ │ │ │ │ └── range-calendar.svelte
│ │ │ │ ├── resizable/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── resizable-handle.svelte
│ │ │ │ │ └── resizable-pane-group.svelte
│ │ │ │ ├── scroll-area/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── scroll-area-scrollbar.svelte
│ │ │ │ │ └── scroll-area.svelte
│ │ │ │ ├── select/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── select-content.svelte
│ │ │ │ │ ├── select-group-heading.svelte
│ │ │ │ │ ├── select-group.svelte
│ │ │ │ │ ├── select-item.svelte
│ │ │ │ │ ├── select-label.svelte
│ │ │ │ │ ├── select-portal.svelte
│ │ │ │ │ ├── select-scroll-down-button.svelte
│ │ │ │ │ ├── select-scroll-up-button.svelte
│ │ │ │ │ ├── select-separator.svelte
│ │ │ │ │ ├── select-trigger.svelte
│ │ │ │ │ └── select.svelte
│ │ │ │ ├── separator/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── separator.svelte
│ │ │ │ ├── sheet/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── sheet-close.svelte
│ │ │ │ │ ├── sheet-content.svelte
│ │ │ │ │ ├── sheet-description.svelte
│ │ │ │ │ ├── sheet-footer.svelte
│ │ │ │ │ ├── sheet-header.svelte
│ │ │ │ │ ├── sheet-overlay.svelte
│ │ │ │ │ ├── sheet-portal.svelte
│ │ │ │ │ ├── sheet-title.svelte
│ │ │ │ │ ├── sheet-trigger.svelte
│ │ │ │ │ └── sheet.svelte
│ │ │ │ ├── sidebar/
│ │ │ │ │ ├── constants.ts
│ │ │ │ │ ├── context.svelte.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── sidebar-content.svelte
│ │ │ │ │ ├── sidebar-footer.svelte
│ │ │ │ │ ├── sidebar-group-action.svelte
│ │ │ │ │ ├── sidebar-group-content.svelte
│ │ │ │ │ ├── sidebar-group-label.svelte
│ │ │ │ │ ├── sidebar-group.svelte
│ │ │ │ │ ├── sidebar-header.svelte
│ │ │ │ │ ├── sidebar-input.svelte
│ │ │ │ │ ├── sidebar-inset.svelte
│ │ │ │ │ ├── sidebar-menu-action.svelte
│ │ │ │ │ ├── sidebar-menu-badge.svelte
│ │ │ │ │ ├── sidebar-menu-button.svelte
│ │ │ │ │ ├── sidebar-menu-item.svelte
│ │ │ │ │ ├── sidebar-menu-skeleton.svelte
│ │ │ │ │ ├── sidebar-menu-sub-button.svelte
│ │ │ │ │ ├── sidebar-menu-sub-item.svelte
│ │ │ │ │ ├── sidebar-menu-sub.svelte
│ │ │ │ │ ├── sidebar-menu.svelte
│ │ │ │ │ ├── sidebar-provider.svelte
│ │ │ │ │ ├── sidebar-rail.svelte
│ │ │ │ │ ├── sidebar-separator.svelte
│ │ │ │ │ ├── sidebar-trigger.svelte
│ │ │ │ │ └── sidebar.svelte
│ │ │ │ ├── skeleton/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── skeleton.svelte
│ │ │ │ ├── slider/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── slider.svelte
│ │ │ │ ├── sonner/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── sonner.svelte
│ │ │ │ ├── spinner/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── spinner.svelte
│ │ │ │ ├── switch/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── switch.svelte
│ │ │ │ ├── table/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── table-body.svelte
│ │ │ │ │ ├── table-caption.svelte
│ │ │ │ │ ├── table-cell.svelte
│ │ │ │ │ ├── table-footer.svelte
│ │ │ │ │ ├── table-head.svelte
│ │ │ │ │ ├── table-header.svelte
│ │ │ │ │ ├── table-row.svelte
│ │ │ │ │ └── table.svelte
│ │ │ │ ├── tabs/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── tabs-content.svelte
│ │ │ │ │ ├── tabs-list.svelte
│ │ │ │ │ ├── tabs-trigger.svelte
│ │ │ │ │ └── tabs.svelte
│ │ │ │ ├── textarea/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── textarea.svelte
│ │ │ │ ├── toggle/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── toggle.svelte
│ │ │ │ ├── toggle-group/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── toggle-group-item.svelte
│ │ │ │ │ └── toggle-group.svelte
│ │ │ │ └── tooltip/
│ │ │ │ ├── index.ts
│ │ │ │ ├── tooltip-content.svelte
│ │ │ │ ├── tooltip-portal.svelte
│ │ │ │ ├── tooltip-provider.svelte
│ │ │ │ ├── tooltip-trigger.svelte
│ │ │ │ └── tooltip.svelte
│ │ │ ├── themes.ts
│ │ │ ├── user-config.svelte.ts
│ │ │ └── utils.ts
│ │ ├── params/
│ │ │ └── view.ts
│ │ └── routes/
│ │ ├── (app)/
│ │ │ ├── (layout)/
│ │ │ │ ├── (create)/
│ │ │ │ │ ├── +layout@(app).svelte
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── action-menu.svelte
│ │ │ │ │ │ ├── base-color-picker.svelte
│ │ │ │ │ │ ├── copy-preset.svelte
│ │ │ │ │ │ ├── customizer-controls.svelte
│ │ │ │ │ │ ├── customizer.svelte
│ │ │ │ │ │ ├── example-wrapper.svelte
│ │ │ │ │ │ ├── example.svelte
│ │ │ │ │ │ ├── font-picker.svelte
│ │ │ │ │ │ ├── icon-library-picker.svelte
│ │ │ │ │ │ ├── initialize-dialog.svelte
│ │ │ │ │ │ ├── item-explorer.svelte
│ │ │ │ │ │ ├── lock-button.svelte
│ │ │ │ │ │ ├── main-menu.svelte
│ │ │ │ │ │ ├── menu-accent-picker.svelte
│ │ │ │ │ │ ├── menu-color-picker.svelte
│ │ │ │ │ │ ├── menu-icon-default.svelte
│ │ │ │ │ │ ├── menu-icon-inverted.svelte
│ │ │ │ │ │ ├── picker/
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ ├── picker-checkbox-item.svelte
│ │ │ │ │ │ │ ├── picker-content.svelte
│ │ │ │ │ │ │ ├── picker-group.svelte
│ │ │ │ │ │ │ ├── picker-item.svelte
│ │ │ │ │ │ │ ├── picker-label.svelte
│ │ │ │ │ │ │ ├── picker-radio-group.svelte
│ │ │ │ │ │ │ ├── picker-radio-item.svelte
│ │ │ │ │ │ │ ├── picker-separator.svelte
│ │ │ │ │ │ │ ├── picker-shortcut.svelte
│ │ │ │ │ │ │ ├── picker-trigger.svelte
│ │ │ │ │ │ │ └── picker.svelte
│ │ │ │ │ │ ├── preset-picker.svelte
│ │ │ │ │ │ ├── preview.svelte
│ │ │ │ │ │ ├── radius-picker.svelte
│ │ │ │ │ │ ├── random-button.svelte
│ │ │ │ │ │ ├── reset-button.svelte
│ │ │ │ │ │ ├── share.svelte
│ │ │ │ │ │ ├── style-picker.svelte
│ │ │ │ │ │ ├── theme-picker.svelte
│ │ │ │ │ │ └── welcome-dialog.svelte
│ │ │ │ │ ├── create/
│ │ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ │ ├── +page.server.ts
│ │ │ │ │ │ └── [item]/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── +page.ts
│ │ │ │ │ └── lib/
│ │ │ │ │ ├── randomize-biases.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── +layout.svelte
│ │ │ │ ├── +page.svelte
│ │ │ │ ├── +page.ts
│ │ │ │ ├── blocks/
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ ├── +page.ts
│ │ │ │ │ └── [category]/
│ │ │ │ │ ├── +page.server.ts
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ └── +page.ts
│ │ │ │ ├── charts/
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ ├── +page.ts
│ │ │ │ │ ├── [t]/
│ │ │ │ │ │ ├── +page.server.ts
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ └── +page.ts
│ │ │ │ │ └── charts.ts
│ │ │ │ ├── colors/
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ ├── +layout.ts
│ │ │ │ │ └── +page.svelte
│ │ │ │ ├── docs/
│ │ │ │ │ ├── +layout.server.ts
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ └── [...slug]/
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ └── +page.ts
│ │ │ │ ├── examples/
│ │ │ │ │ ├── +layout.svelte
│ │ │ │ │ ├── +layout.ts
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ ├── +page.ts
│ │ │ │ │ ├── authentication/
│ │ │ │ │ │ ├── (components)/
│ │ │ │ │ │ │ └── user-auth-form.svelte
│ │ │ │ │ │ └── +page.svelte
│ │ │ │ │ ├── dashboard/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ ├── app-sidebar.svelte
│ │ │ │ │ │ │ ├── chart-area-interactive.svelte
│ │ │ │ │ │ │ ├── data-table-actions.svelte
│ │ │ │ │ │ │ ├── data-table-cell-viewer.svelte
│ │ │ │ │ │ │ ├── data-table-checkbox.svelte
│ │ │ │ │ │ │ ├── data-table-drag-handle.svelte
│ │ │ │ │ │ │ ├── data-table-header-limit.svelte
│ │ │ │ │ │ │ ├── data-table-header-target.svelte
│ │ │ │ │ │ │ ├── data-table-limit.svelte
│ │ │ │ │ │ │ ├── data-table-reviewer.svelte
│ │ │ │ │ │ │ ├── data-table-status.svelte
│ │ │ │ │ │ │ ├── data-table-target.svelte
│ │ │ │ │ │ │ ├── data-table-type.svelte
│ │ │ │ │ │ │ ├── data-table.svelte
│ │ │ │ │ │ │ ├── nav-documents.svelte
│ │ │ │ │ │ │ ├── nav-main.svelte
│ │ │ │ │ │ │ ├── nav-secondary.svelte
│ │ │ │ │ │ │ ├── nav-user.svelte
│ │ │ │ │ │ │ ├── schemas.ts
│ │ │ │ │ │ │ ├── section-cards.svelte
│ │ │ │ │ │ │ └── site-header.svelte
│ │ │ │ │ │ └── data.ts
│ │ │ │ │ ├── playground/
│ │ │ │ │ │ ├── (components)/
│ │ │ │ │ │ │ ├── code-viewer.svelte
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ ├── max-length-selector.svelte
│ │ │ │ │ │ │ ├── model-item.svelte
│ │ │ │ │ │ │ ├── model-selector.svelte
│ │ │ │ │ │ │ ├── preset-actions.svelte
│ │ │ │ │ │ │ ├── preset-save.svelte
│ │ │ │ │ │ │ ├── preset-selector.svelte
│ │ │ │ │ │ │ ├── preset-share.svelte
│ │ │ │ │ │ │ ├── temperature-selector.svelte
│ │ │ │ │ │ │ └── top-p-selector.svelte
│ │ │ │ │ │ ├── (data)/
│ │ │ │ │ │ │ ├── models.ts
│ │ │ │ │ │ │ └── presets.ts
│ │ │ │ │ │ └── +page.svelte
│ │ │ │ │ └── tasks/
│ │ │ │ │ ├── +page.svelte
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── data-table-cell.svelte
│ │ │ │ │ │ ├── data-table-column-header.svelte
│ │ │ │ │ │ ├── data-table-faceted-filter.svelte
│ │ │ │ │ │ ├── data-table-priority-cell.svelte
│ │ │ │ │ │ ├── data-table-row-actions.svelte
│ │ │ │ │ │ ├── data-table-status-cell.svelte
│ │ │ │ │ │ ├── data-table-title-cell.svelte
│ │ │ │ │ │ ├── data-table-toolbar.svelte
│ │ │ │ │ │ ├── data-table-view-options.svelte
│ │ │ │ │ │ ├── data-table.svelte
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── user-nav.svelte
│ │ │ │ │ └── data/
│ │ │ │ │ ├── data.ts
│ │ │ │ │ ├── schemas.ts
│ │ │ │ │ └── tasks.ts
│ │ │ │ └── themes/
│ │ │ │ ├── +layout.svelte
│ │ │ │ ├── +layout.ts
│ │ │ │ └── +page.svelte
│ │ │ ├── +layout.server.ts
│ │ │ ├── +layout.svelte
│ │ │ ├── +layout.ts
│ │ │ └── preview/
│ │ │ └── [item]/
│ │ │ ├── +page.svelte
│ │ │ └── +page.ts
│ │ ├── (view)/
│ │ │ ├── +layout.svelte
│ │ │ └── view/
│ │ │ └── [view=view]/
│ │ │ ├── +page.svelte
│ │ │ └── +page.ts
│ │ ├── +error.svelte
│ │ ├── +layout.svelte
│ │ ├── api/
│ │ │ └── block/
│ │ │ └── [block]/
│ │ │ └── +server.ts
│ │ ├── init/
│ │ │ └── +server.ts
│ │ ├── og/
│ │ │ ├── +server.ts
│ │ │ ├── create/
│ │ │ │ └── +server.ts
│ │ │ └── og.ts
│ │ ├── registry/
│ │ │ └── +server.ts
│ │ └── repro/
│ │ └── +server.ts
│ ├── static/
│ │ ├── schema.json
│ │ └── site.webmanifest
│ ├── svelte.config.js
│ ├── tsconfig.json
│ ├── velite.config.js
│ ├── vite.config.ts
│ └── wrangler.jsonc
├── eslint.config.js
├── package.json
├── packages/
│ ├── cli/
│ │ ├── .gitignore
│ │ ├── .prettierignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE.md
│ │ ├── README.md
│ │ ├── __mocks__/
│ │ │ ├── fs/
│ │ │ │ └── promises.cjs
│ │ │ └── fs.cjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── commands/
│ │ │ │ ├── add/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── init/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── preflight.ts
│ │ │ │ ├── registry/
│ │ │ │ │ ├── build.ts
│ │ │ │ │ ├── deps-resolver.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── update/
│ │ │ │ └── index.ts
│ │ │ ├── constants.ts
│ │ │ ├── icons/
│ │ │ │ ├── index.ts
│ │ │ │ └── libraries.ts
│ │ │ ├── index.ts
│ │ │ ├── preset/
│ │ │ │ ├── index.ts
│ │ │ │ ├── preset.ts
│ │ │ │ └── presets.ts
│ │ │ ├── schema/
│ │ │ │ └── index.ts
│ │ │ └── utils/
│ │ │ ├── add-registry-items.ts
│ │ │ ├── auto-detect.ts
│ │ │ ├── colors.ts
│ │ │ ├── config/
│ │ │ │ ├── index.ts
│ │ │ │ ├── schema.ts
│ │ │ │ └── utils.ts
│ │ │ ├── css.ts
│ │ │ ├── errors.ts
│ │ │ ├── fonts.ts
│ │ │ ├── get-env-proxy.ts
│ │ │ ├── get-package-info.ts
│ │ │ ├── install-deps.ts
│ │ │ ├── preconditions.ts
│ │ │ ├── project.ts
│ │ │ ├── prompt-helpers.ts
│ │ │ ├── registry/
│ │ │ │ ├── index.ts
│ │ │ │ └── schema.ts
│ │ │ ├── resolve-imports.ts
│ │ │ ├── transform-css.ts
│ │ │ ├── transformers/
│ │ │ │ ├── index.ts
│ │ │ │ ├── transform-icons.ts
│ │ │ │ ├── transform-imports.ts
│ │ │ │ ├── transform-menu.ts
│ │ │ │ └── transform-strip-types.ts
│ │ │ ├── updaters/
│ │ │ │ ├── index.ts
│ │ │ │ ├── update-css-vars.ts
│ │ │ │ └── update-css.ts
│ │ │ └── utils.ts
│ │ ├── test/
│ │ │ ├── commands/
│ │ │ │ └── init.test.ts
│ │ │ ├── fixtures/
│ │ │ │ ├── colors/
│ │ │ │ │ ├── neutral.json
│ │ │ │ │ ├── slate.json
│ │ │ │ │ ├── stone.json
│ │ │ │ │ └── zinc.json
│ │ │ │ ├── config-custom-tsconfig/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.base.json
│ │ │ │ ├── config-full/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ ├── src/
│ │ │ │ │ │ └── app.css
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-invalid/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-jsconfig/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── jsconfig.json
│ │ │ │ │ └── package.json
│ │ │ │ ├── config-none/
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-partial/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-trailing-slashes/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── config-vite/
│ │ │ │ │ ├── components.json
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── legacy/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── post-init-default/
│ │ │ │ │ │ ├── components.json
│ │ │ │ │ │ ├── package.json
│ │ │ │ │ │ └── tsconfig.json
│ │ │ │ │ ├── post-init-new-york/
│ │ │ │ │ │ ├── components.json
│ │ │ │ │ │ ├── package.json
│ │ │ │ │ │ └── tsconfig.json
│ │ │ │ │ ├── post-update-default/
│ │ │ │ │ │ ├── components.json
│ │ │ │ │ │ ├── package.json
│ │ │ │ │ │ └── tsconfig.json
│ │ │ │ │ ├── post-update-new-york/
│ │ │ │ │ │ ├── components.json
│ │ │ │ │ │ ├── package.json
│ │ │ │ │ │ └── tsconfig.json
│ │ │ │ │ └── pre-init/
│ │ │ │ │ ├── package.json
│ │ │ │ │ └── tsconfig.json
│ │ │ │ ├── project-bun/
│ │ │ │ │ ├── bun.lockb
│ │ │ │ │ └── package.json
│ │ │ │ ├── project-npm/
│ │ │ │ │ └── package.json
│ │ │ │ ├── project-pnpm/
│ │ │ │ │ └── package.json
│ │ │ │ └── project-yarn/
│ │ │ │ └── package.json
│ │ │ ├── preset.test.ts
│ │ │ ├── registry-template.test.ts
│ │ │ └── utils/
│ │ │ ├── add-registry-items.test.ts
│ │ │ ├── auto-detect.test.ts
│ │ │ ├── deps-resolver.test.ts
│ │ │ ├── get-config.test.ts
│ │ │ ├── get-env-proxy.test.ts
│ │ │ ├── get-package-info.test.ts
│ │ │ ├── preconditions.test.ts
│ │ │ ├── preflight-init.test.ts
│ │ │ ├── project.test.ts
│ │ │ ├── registry.test.ts
│ │ │ ├── resolve-imports.test.ts
│ │ │ ├── test-helpers.ts
│ │ │ ├── transformers.test.ts
│ │ │ └── utils.test.ts
│ │ ├── tsconfig.json
│ │ └── tsdown.config.ts
│ └── registry/
│ ├── .gitignore
│ ├── .prettierignore
│ ├── CHANGELOG.md
│ ├── LICENSE.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── index.ts
│ │ └── schemas.ts
│ ├── tsconfig.json
│ └── tsdown.config.ts
├── pnpm-workspace.yaml
├── registry-template/
│ ├── .gitignore
│ ├── .npmrc
│ ├── .prettierignore
│ ├── .prettierrc
│ ├── README.md
│ ├── eslint.config.js
│ ├── package.json
│ ├── registry.json
│ ├── src/
│ │ ├── app.css
│ │ ├── app.d.ts
│ │ ├── app.html
│ │ ├── lib/
│ │ │ ├── index.ts
│ │ │ ├── registry/
│ │ │ │ ├── blocks/
│ │ │ │ │ ├── checkout-steps/
│ │ │ │ │ │ └── checkout-steps.svelte
│ │ │ │ │ ├── complex-component/
│ │ │ │ │ │ ├── +page.svelte
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ ├── pokemon-card.svelte
│ │ │ │ │ │ │ └── pokemon-image.svelte
│ │ │ │ │ │ ├── hooks/
│ │ │ │ │ │ │ └── use-pokemon.svelte.ts
│ │ │ │ │ │ └── lib/
│ │ │ │ │ │ └── pokemon.ts
│ │ │ │ │ ├── example-form/
│ │ │ │ │ │ └── example-form.svelte
│ │ │ │ │ ├── example-with-css/
│ │ │ │ │ │ ├── example-card.css
│ │ │ │ │ │ └── example-card.svelte
│ │ │ │ │ └── hello-world/
│ │ │ │ │ └── hello-world.svelte
│ │ │ │ └── ui/
│ │ │ │ ├── button/
│ │ │ │ │ ├── button.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── card/
│ │ │ │ │ ├── card-action.svelte
│ │ │ │ │ ├── card-content.svelte
│ │ │ │ │ ├── card-description.svelte
│ │ │ │ │ ├── card-footer.svelte
│ │ │ │ │ ├── card-header.svelte
│ │ │ │ │ ├── card-title.svelte
│ │ │ │ │ ├── card.svelte
│ │ │ │ │ └── index.ts
│ │ │ │ ├── input/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── input.svelte
│ │ │ │ ├── label/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── label.svelte
│ │ │ │ ├── stepper/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── stepper-item.svelte
│ │ │ │ │ └── stepper.svelte
│ │ │ │ └── textarea/
│ │ │ │ ├── index.ts
│ │ │ │ └── input.svelte
│ │ │ └── utils.ts
│ │ └── routes/
│ │ ├── +layout.svelte
│ │ └── +page.svelte
│ ├── svelte.config.js
│ ├── tsconfig.json
│ └── vite.config.ts
└── repro/
├── .gitignore
├── .npmrc
├── README.md
├── components.json
├── package.json
├── src/
│ ├── app.css
│ ├── app.d.ts
│ ├── app.html
│ ├── lib/
│ │ ├── index.ts
│ │ └── utils.ts
│ └── routes/
│ ├── +layout.svelte
│ └── +page.svelte
├── static/
│ └── robots.txt
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts
SYMBOL INDEX (554 symbols across 125 files)
FILE: docs/mdsx.config.js
function createHighlighter (line 42) | async function createHighlighter() {
method onVisitLine (line 82) | onVisitLine(node) {
method onVisitHighlightedLine (line 89) | onVisitHighlightedLine(node) {
method onVisitHighlightedChars (line 92) | onVisitHighlightedChars(node) {
function remarkRemovePrettierIgnore (line 130) | function remarkRemovePrettierIgnore() {
function rehypePreData (line 143) | function rehypePreData() {
function rehypeComponentExample (line 182) | function rehypeComponentExample() {
function rehypeHandleMetadata (line 263) | function rehypeHandleMetadata() {
function getComponentSourceFileContent (line 290) | function getComponentSourceFileContent(src = "") {
FILE: docs/scripts/build-icons.ts
constant SEARCH_BASE (line 7) | const SEARCH_BASE = "src/";
constant REGISTRY_BASE (line 8) | const REGISTRY_BASE = "src/lib/registry";
type IconUsage (line 10) | type IconUsage = Record<IconLibraryName, Set<string>>;
function findSvelteFiles (line 12) | async function findSvelteFiles(dir: string) {
function scanIconUsage (line 28) | async function scanIconUsage() {
function generateIconFiles (line 51) | async function generateIconFiles(iconUsage: IconUsage) {
function main (line 115) | async function main() {
FILE: docs/scripts/build-llm-placeholders.ts
function main (line 14) | async function main() {
FILE: docs/scripts/build-llms.ts
type FileMap (line 70) | type FileMap = Record<string, string>;
function collectFiles (line 72) | async function collectFiles(currentDir: string, baseDir: string): Promis...
type LinkData (line 103) | type LinkData = {
type VeliteData (line 110) | type VeliteData =
type CategorizedLinks (line 118) | type CategorizedLinks = {
constant REGEX_PATTERNS (line 135) | const REGEX_PATTERNS = {
function toMarkdown (line 151) | async function toMarkdown(rawHtml: string) {
function findVeliteData (line 213) | function findVeliteData(veliteData: Record<string, VeliteData[]>, path: ...
function createLLMsIndex (line 222) | async function createLLMsIndex(files: FileMap) {
function formatName (line 478) | function formatName(name: string): string {
function main (line 485) | async function main() {
FILE: docs/scripts/build-registry.ts
type BuildRegistryItem (line 16) | interface BuildRegistryItem {
constant INTERNAL_REGISTRY_PATH (line 31) | const INTERNAL_REGISTRY_PATH = path.resolve("src", "lib", "registry");
constant REGISTRY_PATH (line 32) | const REGISTRY_PATH = path.resolve("static", "registry");
constant STYLE_TEMP_BASE (line 33) | const STYLE_TEMP_BASE = path.join(REGISTRY_PATH, "temp", "style");
function writeFileWithDirs (line 35) | function writeFileWithDirs(
function log (line 48) | function log(message: string) {
function build (line 52) | async function build(): Promise<void> {
constant CN_CLASS_SELECTOR (line 198) | const CN_CLASS_SELECTOR = /^\.(cn-[\w-]+)$/;
function parseStyleCss (line 204) | function parseStyleCss(css: string): Record<string, string> {
function transformContentWithStyle (line 229) | function transformContentWithStyle(content: string, styleMap: Record<str...
constant TEXT_EXTENSIONS (line 244) | const TEXT_EXTENSIONS = new Set([".svelte", ".ts", ".svelte.ts"]);
function rewriteRegistryForStyle (line 246) | async function rewriteRegistryForStyle(
function validateRegistry (line 293) | function validateRegistry(registry: Awaited<ReturnType<typeof buildRegis...
function buildRegistryJson (line 305) | async function buildRegistryJson(
function runRegistryBuild (line 351) | function runRegistryBuild(style: PresetConfig["style"]) {
FILE: docs/scripts/pull-styles.ts
function pullStyles (line 9) | async function pullStyles() {
FILE: docs/scripts/registry.ts
constant REGISTRY_DEPENDENCY (line 10) | const REGISTRY_DEPENDENCY = "$lib/";
constant UTILS_PATH (line 11) | const UTILS_PATH = "$lib/utils.js";
type RegistryItems (line 15) | type RegistryItems = Registry["items"];
type RegistryItemFiles (line 16) | type RegistryItemFiles = Registry["items"][number]["files"];
function buildRegistry (line 18) | async function buildRegistry(): Promise<RegistryItems> {
function crawlUI (line 42) | async function crawlUI(rootPath: string): Promise<RegistryItems> {
function buildUIRegistry (line 57) | async function buildUIRegistry(
function crawlExamples (line 98) | async function crawlExamples(rootPath: string): Promise<RegistryItems> {
function buildBlockRegistry (line 124) | async function buildBlockRegistry(
function crawlBlocks (line 166) | async function crawlBlocks(rootPath: string): Promise<RegistryItems> {
function crawlLib (line 197) | async function crawlLib(rootPath: string): Promise<RegistryItems> {
function assembleFonts (line 222) | async function assembleFonts(): Promise<RegistryItems> {
function crawlHooks (line 238) | async function crawlHooks(rootPath: string): Promise<RegistryItems> {
function getFileDependencies (line 264) | async function getFileDependencies(
FILE: docs/scripts/velite/velite-utils.ts
function updateJsonImport (line 8) | async function updateJsonImport(onUpdatingChange?: (isUpdating: boolean)...
FILE: docs/src/lib/blocks.ts
type BlockName (line 4) | type BlockName = (typeof blocks)[number];
function isBlock (line 6) | function isBlock(name: unknown): name is BlockName {
type Block (line 21) | type Block = z.infer<typeof blockSchema>;
FILE: docs/src/lib/colors.ts
type ColorPalette (line 23) | type ColorPalette = z.infer<typeof colorPaletteSchema>;
type ColorFormat (line 25) | type ColorFormat = {
function getColorFormat (line 34) | function getColorFormat(color: Color): ColorFormat {
function getColors (line 45) | function getColors(): ColorPalette[] {
type Color (line 84) | type Color = ReturnType<typeof getColors>[number]["colors"][number];
function getForegroundFromBackground (line 86) | function getForegroundFromBackground(rgb: string): string {
FILE: docs/src/lib/components/colors/colors.ts
type ColorPalette (line 26) | type ColorPalette = z.infer<typeof colorPaletteSchema>;
function getColorFormat (line 28) | function getColorFormat(color: Color) {
type ColorFormat (line 38) | type ColorFormat = keyof ReturnType<typeof getColorFormat>;
function getColors (line 40) | function getColors() {
type Color (line 78) | type Color = ReturnType<typeof getColors>[number]["colors"][number];
function getForegroundFromBackground (line 80) | function getForegroundFromBackground(rgb: string) {
function generateBaseColorTemplate (line 93) | function generateBaseColorTemplate(baseColor: BaseColor) {
function getColorsData (line 129) | function getColorsData() {
FILE: docs/src/lib/components/icon-placeholder/icon-loader.ts
function createIconLoader (line 10) | function createIconLoader(iconLibrary: IconLibraryName) {
FILE: docs/src/lib/components/icons/icons.ts
function getIconForLanguageExtension (line 7) | function getIconForLanguageExtension(language: string) {
FILE: docs/src/lib/constants.ts
constant FALLBACK_STAR_COUNT (line 1) | const FALLBACK_STAR_COUNT = 8000;
FILE: docs/src/lib/docs.ts
type DocResolver (line 21) | type DocResolver = () => Promise<{ default: Component; metadata: compone...
type DocMetadata (line 22) | type DocMetadata = (typeof allDocs)[number];
function transformPath (line 24) | function transformPath(path: string): string {
function getDocMetadata (line 28) | function getDocMetadata(slug: string): DocMetadata | undefined {
function getDoc (line 32) | async function getDoc(
FILE: docs/src/lib/features/design-system/components/design-system-provider-state.svelte.ts
type IDesignSystemState (line 29) | interface IDesignSystemState extends PresetConfig {
type Lockable (line 43) | type Lockable = {
class DesignSystemState (line 56) | class DesignSystemState implements IDesignSystemState {
method constructor (line 60) | constructor() {
method system (line 89) | private get system(): PresetConfig {
method system (line 95) | private set system(value: PresetConfig) {
method undo (line 106) | undo() {
method redo (line 110) | redo() {
method canUndo (line 114) | get canUndo() {
method canRedo (line 118) | get canRedo() {
method preset (line 122) | get preset() {
method lock (line 128) | lock(key: keyof Lockable): void {
method unlock (line 132) | unlock(key: keyof Lockable): void {
method locks (line 136) | get locks(): Lockable {
method #getSearchParam (line 143) | #getSearchParam(key: string): string | null {
method #update (line 152) | #update(system: Partial<PresetConfig>) {
method baseColor (line 159) | get baseColor() {
method baseColor (line 163) | set baseColor(value: PresetConfig["baseColor"]) {
method font (line 173) | get font() {
method font (line 177) | set font(value: PresetConfig["font"]) {
method iconLibrary (line 181) | get iconLibrary() {
method iconLibrary (line 185) | set iconLibrary(value: PresetConfig["iconLibrary"]) {
method menuAccent (line 189) | get menuAccent() {
method menuAccent (line 193) | set menuAccent(value: PresetConfig["menuAccent"]) {
method menuColor (line 197) | get menuColor() {
method menuColor (line 201) | set menuColor(value: PresetConfig["menuColor"]) {
method radius (line 205) | get radius() {
method radius (line 209) | set radius(value: PresetConfig["radius"]) {
method style (line 213) | get style() {
method style (line 217) | set style(value: PresetConfig["style"]) {
method theme (line 221) | get theme() {
method theme (line 225) | set theme(value: PresetConfig["theme"]) {
method reset (line 229) | reset() {
method randomize (line 233) | randomize() {
method shareUrl (line 285) | get shareUrl() {
function randomItem (line 290) | function randomItem<T>(array: readonly T[]): T {
function useDesignSystem (line 296) | function useDesignSystem(): IDesignSystemState {
function setupDesignSystem (line 300) | function setupDesignSystem(): IDesignSystemState {
FILE: docs/src/lib/highlight-code.ts
function highlightCode (line 12) | async function highlightCode(code: string, language: string = "svelte"):...
function formatCode (line 45) | function formatCode(code: string): string {
FILE: docs/src/lib/hooks/use-clipboard.svelte.ts
type Options (line 1) | type Options = {
class UseClipboard (line 30) | class UseClipboard {
method constructor (line 36) | constructor({ delay = 2000, reset = true }: Partial<Options> = {}) {
method copy (line 51) | async copy(text: string | number): Promise<"success" | "failure"> {
method copied (line 67) | get copied(): boolean {
method status (line 73) | get status(): "success" | "failure" | undefined {
method lastCopied (line 80) | get lastCopied(): string | undefined {
function copyText (line 85) | async function copyText(text: string): Promise<"success" | "failure"> {
FILE: docs/src/lib/hooks/use-is-mac.svelte.ts
function useIsMac (line 3) | function useIsMac(): {
FILE: docs/src/lib/hooks/use-mutation-observer.svelte.ts
function useMutationObserver (line 1) | function useMutationObserver(
FILE: docs/src/lib/navigation.ts
constant NEW_COMPONENTS (line 5) | const NEW_COMPONENTS = new Set([
type NavItem (line 16) | type NavItem = {
type SidebarNavItem (line 26) | type SidebarNavItem = NavItem & {
type NavItemWithChildren (line 30) | type NavItemWithChildren = NavItem & {
function generateSectionsNav (line 34) | function generateSectionsNav(): SidebarNavItem[] {
function generateGetStartedNav (line 71) | function generateGetStartedNav(): SidebarNavItem[] {
constant INSTALL_ORDER (line 128) | const INSTALL_ORDER = ["SvelteKit", "Vite", "Astro", "Manual Installatio...
function generateInstallationNav (line 130) | function generateInstallationNav(): SidebarNavItem[] {
function generateComponentsNav (line 157) | function generateComponentsNav(): SidebarNavItem[] {
function generateDarkModeNav (line 181) | function generateDarkModeNav(): SidebarNavItem[] {
function generateRegistryNav (line 198) | function generateRegistryNav(): SidebarNavItem[] {
function generateMigrationNav (line 235) | function generateMigrationNav(): SidebarNavItem[] {
function getFullNavItems (line 328) | function getFullNavItems(): Array<SidebarNavItem & { index: number }> {
function findNeighbors (line 344) | function findNeighbors(pathName: string): {
FILE: docs/src/lib/package-manager.ts
constant PACKAGE_MANAGERS (line 4) | const PACKAGE_MANAGERS: Agent[] = ["pnpm", "npm", "yarn", "bun"] as const;
type PackageManager (line 5) | type PackageManager = (typeof PACKAGE_MANAGERS)[number];
type PackageManagerCommand (line 7) | type PackageManagerCommand = Command | "create";
function getCommand (line 9) | function getCommand(
FILE: docs/src/lib/registry/blocks/dashboard-01/components/schemas.ts
type Schema (line 13) | type Schema = z.infer<typeof schema>;
FILE: docs/src/lib/registry/colors.ts
type CompleteColorFormat (line 1) | type CompleteColorFormat = {
type ColorScale (line 8) | type ColorScale = {
type Colors (line 16) | type Colors = {
type BaseColor (line 71) | type BaseColor = (typeof baseColors)[number];
FILE: docs/src/lib/registry/config.ts
type StyleName (line 17) | type StyleName = Style["name"];
type ThemeName (line 18) | type ThemeName = Theme["name"];
type BaseColorName (line 19) | type BaseColorName = BaseTheme["name"];
type FontValue (line 21) | type FontValue = (typeof PRESET_FONTS)[number];
constant MENU_ACCENTS (line 23) | const MENU_ACCENTS = [
type MenuAccent (line 28) | type MenuAccent = (typeof MENU_ACCENTS)[number];
type MenuAccentValue (line 29) | type MenuAccentValue = MenuAccent["value"];
constant MENU_COLORS (line 31) | const MENU_COLORS = [
type MenuColor (line 38) | type MenuColor = (typeof MENU_COLORS)[number];
type MenuColorValue (line 40) | type MenuColorValue = MenuColor["value"];
constant RADII (line 42) | const RADII = [
type Radius (line 50) | type Radius = (typeof RADII)[number];
type RadiusValue (line 52) | type RadiusValue = Radius["name"];
type DesignSystemConfig (line 82) | type DesignSystemConfig = z.infer<typeof designSystemConfigSchema>;
constant DEFAULT_CONFIG (line 84) | const DEFAULT_CONFIG: DesignSystemConfig = {
type Preset (line 95) | type Preset = {
constant PRESETS (line 101) | const PRESETS: Preset[] = [
function getThemesForBaseColor (line 156) | function getThemesForBaseColor(baseColorName: string) {
function getFont (line 167) | function getFont(name: FontValue) {
function getStyle (line 171) | function getStyle(name: StyleName) {
function getTheme (line 175) | function getTheme(name: ThemeName) {
function getBaseColor (line 179) | function getBaseColor(name: BaseColorName) {
function getIconLibrary (line 183) | function getIconLibrary(name: IconLibraryName) {
function buildRegistryTheme (line 188) | function buildRegistryTheme(config: DesignSystemConfig) {
function buildRegistryBase (line 239) | function buildRegistryBase(config: PresetConfig) {
FILE: docs/src/lib/registry/examples/create/index.ts
type Example (line 3) | type Example = {
FILE: docs/src/lib/registry/hooks/is-mobile.svelte.ts
constant DEFAULT_MOBILE_BREAKPOINT (line 3) | const DEFAULT_MOBILE_BREAKPOINT = 768;
class IsMobile (line 5) | class IsMobile extends MediaQuery {
method constructor (line 6) | constructor(breakpoint: number = DEFAULT_MOBILE_BREAKPOINT) {
FILE: docs/src/lib/registry/icons/__hugeicons__/index.ts
type HugeIconsIconName (line 2) | type HugeIconsIconName = "ActivityIcon" | "Add01Icon" | "AddToListIcon" ...
FILE: docs/src/lib/registry/icons/__lucide__/index.ts
type LucideIconName (line 2) | type LucideIconName = "ActivityIcon" | "AlertTriangleIcon" | "AppWindowI...
FILE: docs/src/lib/registry/icons/__phosphor__/index.ts
type PhosphorIconName (line 2) | type PhosphorIconName = "AppWindowIcon" | "ArchiveIcon" | "ArrowCircleLe...
FILE: docs/src/lib/registry/icons/__remixicon__/index.ts
type RemixIconIconName (line 2) | type RemixIconIconName = "RiAddBoxLine" | "RiAddLine" | "RiAlertLine" | ...
FILE: docs/src/lib/registry/icons/__tabler__/index.ts
type TablerIconName (line 2) | type TablerIconName = "IconActivity" | "IconAdjustmentsHorizontal" | "Ic...
FILE: docs/src/lib/registry/lib/casing.ts
function pascalToKebab (line 1) | function pascalToKebab(str: string): string {
FILE: docs/src/lib/registry/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
type WithoutChild (line 9) | type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
type WithoutChildren (line 11) | type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "childr...
type WithoutChildrenOrChild (line 12) | type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
type WithElementRef (line 13) | type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?...
FILE: docs/src/lib/registry/registry-base-colors.ts
type BaseColor (line 756) | type BaseColor = (typeof baseColors)[number];
FILE: docs/src/lib/registry/registry-block-meta.ts
type BlockMeta (line 3) | type BlockMeta = {
FILE: docs/src/lib/registry/registry-colors.ts
type BaseColor (line 26) | type BaseColor = (typeof baseColors)[number];
FILE: docs/src/lib/registry/registry-utils.ts
type FileTree (line 7) | type FileTree = {
function transformBlockPath (line 13) | function transformBlockPath(target: string, type: RegistryItemFile["type...
function createFileTreeForRegistryItemFiles (line 31) | function createFileTreeForRegistryItemFiles(
function transformImportPaths (line 73) | function transformImportPaths(content: string): string {
type DesignSystemConfig (line 87) | type DesignSystemConfig = {
function transformDesignSystem (line 95) | async function transformDesignSystem(
type TransformConfig (line 126) | type TransformConfig = {
type TransformOptions (line 132) | type TransformOptions = {
type TransformerResult (line 138) | type TransformerResult = {
type Transformer (line 143) | type Transformer = (opts: TransformOptions) => Promise<Partial<Transform...
function transform (line 145) | async function transform(
function createTransformInjectStyles (line 167) | function createTransformInjectStyles(styles: Record<string, string>): Tr...
function parseStyleCss (line 182) | function parseStyleCss(css: string): Record<string, string> {
FILE: docs/src/lib/registry/schema.ts
type BlockName (line 33) | type BlockName = (typeof blockNames)[number];
function isBlockName (line 34) | function isBlockName(str: string): str is BlockName {
FILE: docs/src/lib/registry/styles/index.ts
constant STYLES (line 7) | const STYLES = [
type Style (line 40) | type Style = (typeof STYLES)[number];
FILE: docs/src/lib/registry/templates.ts
constant BASE_STYLES (line 1) | const BASE_STYLES = `@import "tailwindcss";
constant BASE_STYLES_WITH_VARIABLES (line 8) | const BASE_STYLES_WITH_VARIABLES = `@import "tailwindcss";
constant THEME_STYLES_WITH_VARIABLES (line 130) | const THEME_STYLES_WITH_VARIABLES = `.theme-<%- theme %> {
FILE: docs/src/lib/registry/themes.ts
constant BASE_THEMES (line 3) | const BASE_THEMES = [
constant THEMES (line 524) | const THEMES = [
type Theme (line 1090) | type Theme = (typeof THEMES)[number];
type BaseTheme (line 1091) | type BaseTheme = (typeof BASE_THEMES)[number];
FILE: docs/src/lib/registry/ui/carousel/context.ts
type CarouselAPI (line 9) | type CarouselAPI =
type EmblaCarouselConfig (line 16) | type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSv...
type CarouselOptions (line 18) | type CarouselOptions = EmblaCarouselConfig["options"];
type CarouselPlugins (line 19) | type CarouselPlugins = EmblaCarouselConfig["plugins"];
type CarouselProps (line 23) | type CarouselProps = {
constant EMBLA_CAROUSEL_CONTEXT (line 30) | const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
type EmblaContext (line 32) | type EmblaContext = {
function setEmblaContext (line 48) | function setEmblaContext(config: EmblaContext): EmblaContext {
function getEmblaContext (line 53) | function getEmblaContext(name = "This component") {
FILE: docs/src/lib/registry/ui/chart/chart-utils.ts
constant THEMES (line 4) | const THEMES = { light: "", dark: ".dark" } as const;
type ChartConfig (line 6) | type ChartConfig = {
type ExtractSnippetParams (line 16) | type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
type TooltipPayload (line 18) | type TooltipPayload = ExtractSnippetParams<
function getPayloadConfigFromPayload (line 23) | function getPayloadConfigFromPayload(
type ChartContextValue (line 54) | type ChartContextValue = {
function setChartContext (line 60) | function setChartContext(value: ChartContextValue) {
function useChart (line 64) | function useChart() {
FILE: docs/src/lib/registry/ui/data-table/data-table.svelte.ts
function createSvelteTable (line 36) | function createSvelteTable<TData extends RowData>(options: TableOptions<...
type MaybeThunk (line 79) | type MaybeThunk<T extends object> = T | (() => T | null | undefined);
type Intersection (line 80) | type Intersection<T extends readonly unknown[]> = (T extends [infer H, ....
function mergeObjects (line 91) | function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(
FILE: docs/src/lib/registry/ui/data-table/render-helpers.ts
class RenderComponentConfig (line 19) | class RenderComponentConfig<TComponent extends Component> {
method constructor (line 22) | constructor(
class RenderSnippetConfig (line 46) | class RenderSnippetConfig<TProps> {
method constructor (line 49) | constructor(snippet: Snippet<[TProps]>, params: TProps) {
function renderComponent (line 77) | function renderComponent<
function renderSnippet (line 109) | function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProp...
FILE: docs/src/lib/registry/ui/sidebar/constants.ts
constant SIDEBAR_COOKIE_NAME (line 1) | const SIDEBAR_COOKIE_NAME = "sidebar:state";
constant SIDEBAR_COOKIE_MAX_AGE (line 2) | const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
constant SIDEBAR_WIDTH (line 3) | const SIDEBAR_WIDTH = "16rem";
constant SIDEBAR_WIDTH_MOBILE (line 4) | const SIDEBAR_WIDTH_MOBILE = "18rem";
constant SIDEBAR_WIDTH_ICON (line 5) | const SIDEBAR_WIDTH_ICON = "3rem";
constant SIDEBAR_KEYBOARD_SHORTCUT (line 6) | const SIDEBAR_KEYBOARD_SHORTCUT = "b";
FILE: docs/src/lib/registry/ui/sidebar/context.svelte.ts
type Getter (line 5) | type Getter<T> = () => T;
type SidebarStateProps (line 7) | type SidebarStateProps = {
class SidebarState (line 23) | class SidebarState {
method constructor (line 31) | constructor(props: SidebarStateProps) {
method isMobile (line 39) | get isMobile() {
constant SYMBOL_KEY (line 62) | const SYMBOL_KEY = "scn-sidebar";
function setSidebar (line 70) | function setSidebar(props: SidebarStateProps): SidebarState {
function useSidebar (line 79) | function useSidebar(): SidebarState {
FILE: docs/src/lib/themes.ts
constant THEMES (line 1) | const THEMES = [
type Theme (line 31) | type Theme = (typeof THEMES)[number];
FILE: docs/src/lib/user-config.svelte.ts
constant USER_CONFIG_COOKIE_NAME (line 4) | const USER_CONFIG_COOKIE_NAME = "scn_user_config";
type Layout (line 29) | type Layout = z.infer<typeof layoutSchema>;
type InstallationType (line 30) | type InstallationType = z.infer<typeof installationTypeSchema>;
type PackageManager (line 31) | type PackageManager = z.infer<typeof packageManagerSchema>;
type ColorFormat (line 32) | type ColorFormat = z.infer<typeof colorFormatSchema>;
type ActiveTheme (line 33) | type ActiveTheme = z.infer<typeof activeTheme>;
type UserConfigType (line 51) | type UserConfigType = z.infer<typeof userConfigSchema>;
function parseCookie (line 53) | function parseCookie(cookie: string): Record<string, string> {
function parseUserConfig (line 63) | function parseUserConfig(cookie: string): UserConfigType {
class UserConfig (line 70) | class UserConfig {
method constructor (line 73) | constructor(config: UserConfigType) {
method current (line 77) | get current(): UserConfigType {
method setConfig (line 81) | setConfig(config: Partial<UserConfigType>): void {
function updateLayoutClass (line 89) | function updateLayoutClass(newLayout: Layout): void {
FILE: docs/src/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]): string {
function getComponentName (line 8) | function getComponentName(name: string): string {
type WithoutChild (line 14) | type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
type WithoutChildrenOrChild (line 15) | type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
type WithoutChildren (line 17) | type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "childr...
type WithElementRef (line 18) | type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?...
FILE: docs/src/routes/(app)/(layout)/(create)/create/+page.server.ts
function load (line 3) | function load({ url }) {
FILE: docs/src/routes/(app)/(layout)/(create)/create/[item]/+page.ts
function load (line 1) | function load({ params }) {
FILE: docs/src/routes/(app)/(layout)/(create)/lib/randomize-biases.ts
type RandomizeContext (line 3) | type RandomizeContext = {
type BiasFilter (line 14) | type BiasFilter<T> = (items: readonly T[], context: RandomizeContext) =>...
type RandomizeBiases (line 16) | type RandomizeBiases = {
constant RANDOMIZE_BIASES (line 30) | const RANDOMIZE_BIASES: RandomizeBiases = {
function applyBias (line 60) | function applyBias<T>(
FILE: docs/src/routes/(app)/(layout)/(create)/lib/utils.ts
function groupItemsByType (line 8) | function groupItemsByType(items: Pick<RegistryItem, "name" | "title" | "...
FILE: docs/src/routes/(app)/(layout)/blocks/+page.ts
constant FEATURED_BLOCKS (line 6) | const FEATURED_BLOCKS = ["dashboard-01", "sidebar-07", "sidebar-03", "lo...
FILE: docs/src/routes/(app)/(layout)/blocks/[category]/+page.server.ts
function getBlockNames (line 28) | function getBlockNames(glob: Record<string, unknown>) {
FILE: docs/src/routes/(app)/(layout)/blocks/[category]/+page.ts
type Item (line 12) | type Item = HighlightedBlock & {
FILE: docs/src/routes/(app)/(layout)/charts/+page.ts
function load (line 3) | function load() {
FILE: docs/src/routes/(app)/(layout)/charts/[t]/+page.server.ts
function getChartNames (line 19) | function getChartNames(glob: Record<string, unknown>) {
FILE: docs/src/routes/(app)/(layout)/charts/[t]/+page.ts
type ChartType (line 5) | type ChartType = (typeof chartTypes)[number];
FILE: docs/src/routes/(app)/(layout)/charts/charts.ts
type ChartItem (line 73) | interface ChartItem {
type ChartGroups (line 79) | interface ChartGroups {
FILE: docs/src/routes/(app)/(layout)/docs/[...slug]/+page.ts
constant ITEMS_TO_IGNORE (line 23) | const ITEMS_TO_IGNORE = ["combobox", "date-picker", "typography"];
FILE: docs/src/routes/(app)/(layout)/examples/dashboard/components/schemas.ts
type Schema (line 13) | type Schema = z.infer<typeof schema>;
FILE: docs/src/routes/(app)/(layout)/examples/playground/(data)/models.ts
type ModelType (line 3) | type ModelType = (typeof types)[number];
type Model (line 5) | type Model<Type = string> = {
FILE: docs/src/routes/(app)/(layout)/examples/playground/(data)/presets.ts
type Preset (line 1) | type Preset = {
FILE: docs/src/routes/(app)/(layout)/examples/tasks/data/schemas.ts
type Task (line 13) | type Task = z.output<typeof taskSchema>;
FILE: docs/src/routes/(app)/preview/[item]/+page.ts
function load (line 4) | function load({ params }) {
FILE: docs/src/routes/(view)/view/[view=view]/+page.ts
function load (line 11) | async function load({ params }) {
FILE: docs/src/routes/api/block/[block]/+server.ts
type HighlightedBlock (line 23) | interface HighlightedBlock {
type HighlightedFile (line 31) | interface HighlightedFile {
function loadItem (line 68) | async function loadItem(
FILE: docs/src/routes/init/+server.ts
function GET (line 5) | async function GET({ request }) {
FILE: docs/src/routes/og/+server.ts
function GET (line 4) | function GET({ url }) {
FILE: docs/src/routes/og/create/+server.ts
function GET (line 4) | function GET({ url }) {
FILE: docs/src/routes/og/og.ts
constant OG_IMAGE_BASE_URL (line 1) | const OG_IMAGE_BASE_URL = "https://og.shadcn-svelte.com";
FILE: docs/src/routes/registry/+server.ts
function GET (line 3) | function GET() {
FILE: docs/src/routes/repro/+server.ts
function GET (line 3) | function GET() {
FILE: docs/svelte.config.js
function componentPreviews (line 38) | function componentPreviews() {
FILE: docs/vite.config.ts
function buildRegistry (line 80) | async function buildRegistry() {
FILE: packages/cli/src/commands/add/index.ts
type AddOptions (line 29) | type AddOptions = z.infer<typeof addOptionsSchema>;
function runAdd (line 74) | async function runAdd(cwd: string, config: cliConfig.ResolvedConfig, opt...
FILE: packages/cli/src/commands/init/index.ts
type InitOptions (line 43) | type InitOptions = z.infer<typeof initOptionsSchema>;
function validateOptions (line 111) | function validateOptions(cwd: string, options: InitOptions, tsconfig: Ts...
function promptForConfig (line 130) | async function promptForConfig({
function runInit (line 247) | async function runInit({
FILE: packages/cli/src/commands/init/preflight.ts
function preflightInit (line 20) | function preflightInit(cwd: string, options: { skipPreflight: boolean }) {
type CheckInitDependenciesResult (line 40) | type CheckInitDependenciesResult =
function checkInitDependencies (line 50) | function checkInitDependencies(
FILE: packages/cli/src/commands/registry/build.ts
constant SPACER (line 17) | const SPACER = "\t";
type BuildOptions (line 25) | type BuildOptions = z.infer<typeof buildOptionsSchema>;
function runBuild (line 58) | async function runBuild(options: BuildOptions) {
function transformLocal (line 209) | function transformLocal(registryDep: string) {
function transformAliases (line 228) | function transformAliases(
FILE: packages/cli/src/commands/registry/deps-resolver.ts
type ResolvedDependencies (line 10) | type ResolvedDependencies = {
type ProjectDependencies (line 17) | type ProjectDependencies = {
function resolveProjectDeps (line 24) | function resolveProjectDeps(cwd: string): ProjectDependencies {
function resolveTypeDeps (line 40) | function resolveTypeDeps(projectDeps: ProjectDependencies) {
function resolvePeerVersions (line 65) | function resolvePeerVersions(projectDeps: ProjectDependencies): ProjectD...
constant IGNORE_DEPS (line 81) | const IGNORE_DEPS = ["svelte", "@sveltejs/kit", "tailwindcss", "vite"];
function resolvePeerDeps (line 88) | function resolvePeerDeps(
type GetFileDepOpts (line 115) | type GetFileDepOpts = {
function getFileDependencies (line 121) | async function getFileDependencies(opts: GetFileDepOpts) {
function resolveDepsFromImport (line 173) | function resolveDepsFromImport(source: string, dependencies: ResolvedDep...
FILE: packages/cli/src/commands/update/index.ts
type UpdateOptions (line 38) | type UpdateOptions = z.infer<typeof updateOptionsSchema>;
function runUpdate (line 85) | async function runUpdate(cwd: string, config: cliConfig.ResolvedConfig, ...
FILE: packages/cli/src/constants.ts
constant SITE_BASE_URL (line 3) | const SITE_BASE_URL = "https://shadcn-svelte.com";
constant TW3_SITE_BASE_URL (line 4) | const TW3_SITE_BASE_URL = "https://tw3.shadcn-svelte.com";
constant OFFICIAL_REGISTRY_URL (line 5) | const OFFICIAL_REGISTRY_URL = `${SITE_BASE_URL}/registry`;
constant ALIASES (line 7) | const ALIASES = ["components", "ui", "hooks", "utils", "lib"] as const;
constant ALIAS_DEFAULTS (line 9) | const ALIAS_DEFAULTS = ALIASES.reduce(
FILE: packages/cli/src/icons/libraries.ts
type IconLibraryName (line 5) | type IconLibraryName = keyof typeof iconLibraries;
type IconLibrary (line 7) | type IconLibrary = {
function toLucideKebab (line 68) | function toLucideKebab(name: string): string {
function toPhosphorName (line 72) | function toPhosphorName(name: string): string {
function toRemixKebab (line 76) | function toRemixKebab(name: string): string {
FILE: packages/cli/src/index.ts
constant MINIMUM_MAJOR (line 10) | const MINIMUM_MAJOR = 20;
function main (line 21) | async function main() {
FILE: packages/cli/src/preset/preset.ts
constant PRESET_STYLES (line 17) | const PRESET_STYLES = ["nova", "vega", "maia", "lyra", "mira"] as const;
constant PRESET_BASE_COLORS (line 19) | const PRESET_BASE_COLORS = {
constant PRESET_BASE_COLOR_KEYS (line 29) | const PRESET_BASE_COLOR_KEYS = keys(PRESET_BASE_COLORS);
constant PRESET_THEMES (line 31) | const PRESET_THEMES = {
constant PRESET_THEME_KEYS (line 58) | const PRESET_THEME_KEYS = keys(PRESET_THEMES);
constant PRESET_ICON_LIBRARIES (line 60) | const PRESET_ICON_LIBRARIES = keys(iconLibraries);
constant PRESET_FONTS (line 62) | const PRESET_FONTS = [
constant PRESET_RADII (line 82) | const PRESET_RADII = {
constant PRESET_RADII_KEYS (line 90) | const PRESET_RADII_KEYS = keys(PRESET_RADII);
constant PRESET_MENU_ACCENTS (line 92) | const PRESET_MENU_ACCENTS = ["subtle", "bold"] as const;
constant PRESET_MENU_COLORS (line 93) | const PRESET_MENU_COLORS = [
constant PRESET_FIELDS (line 103) | const PRESET_FIELDS = [
type PresetConfig (line 114) | type PresetConfig = {
constant DEFAULT_PRESET_CONFIG (line 125) | const DEFAULT_PRESET_CONFIG: PresetConfig = Object.fromEntries(
constant BASE62 (line 130) | const BASE62 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrst...
constant VERSION_CHAR (line 133) | const VERSION_CHAR = "a";
function toBase62 (line 135) | function toBase62(num: number) {
function fromBase62 (line 146) | function fromBase62(str: string) {
function encodePreset (line 157) | function encodePreset(config: Partial<PresetConfig>) {
function decodePreset (line 175) | function decodePreset(code: string): PresetConfig | null {
function isPresetCode (line 199) | function isPresetCode(value: string) {
function isValidPreset (line 218) | function isValidPreset(code: string) {
function generateRandomConfig (line 223) | function generateRandomConfig(): PresetConfig {
function generateRandomPreset (line 230) | function generateRandomPreset() {
FILE: packages/cli/src/preset/presets.ts
constant DEFAULT_PRESETS (line 20) | const DEFAULT_PRESETS = {
function promptForPreset (line 101) | async function promptForPreset(
type ContinuationOption (line 121) | type ContinuationOption = {
constant CONTINUATION_OPTIONS (line 126) | const CONTINUATION_OPTIONS = {
function customize (line 141) | async function customize(existingConfig: cliConfig.RawConfig | undefined...
function presets (line 182) | async function presets(existingConfig: cliConfig.RawConfig | undefined) {
function prompt (line 198) | async function prompt(existingConfig: cliConfig.RawConfig | undefined): ...
FILE: packages/cli/src/utils/add-registry-items.ts
constant STYLE_TYPES (line 20) | const STYLE_TYPES = ["registry:style", "registry:theme"];
type AddRegistryItemsProps (line 22) | type AddRegistryItemsProps = {
function addRegistryItems (line 30) | async function addRegistryItems(opts: AddRegistryItemsProps) {
FILE: packages/cli/src/utils/auto-detect.ts
constant STYLESHEETS (line 9) | const STYLESHEETS = ["app.css", "main.css", "globals.css", "global.css",...
constant IGNORE (line 12) | const IGNORE = ["node_modules", ".git", ".svelte-kit"];
function detectConfigs (line 17) | function detectConfigs(cwd: string, config?: { relative: boolean }) {
function findFiles (line 41) | function findFiles(dirPath: string) {
function walkDir (line 45) | function walkDir(dirPath: string, ignores: { dirPath: string; ig: Ignore...
function findTSConfig (line 80) | function findTSConfig(cwd: string): string | undefined {
constant AGENT_NAMES (line 87) | const AGENT_NAMES = AGENTS.filter((agent) => !agent.includes("@")) as Ag...
type Options (line 88) | type Options = Array<{ value: Agent | undefined; label: Agent | "None" }>;
function detectPM (line 89) | async function detectPM(cwd: string, prompt: boolean): Promise<Agent | u...
FILE: packages/cli/src/utils/colors.ts
function hexToRgb (line 8) | function hexToRgb(hex: string): [number, number, number] {
function hex (line 19) | function hex(hexValue: string) {
function bgHex (line 27) | function bgHex(hexValue: string) {
FILE: packages/cli/src/utils/config/schema.ts
constant STYLES (line 14) | const STYLES = PRESET_STYLES;
type StyleName (line 15) | type StyleName = (typeof STYLES)[number];
constant BASE_COLORS (line 16) | const BASE_COLORS = PRESET_BASE_COLOR_KEYS;
type BaseColorName (line 17) | type BaseColorName = (typeof BASE_COLORS)[number];
constant THEMES (line 18) | const THEMES = PRESET_THEME_KEYS;
type ThemeName (line 19) | type ThemeName = (typeof THEMES)[number];
constant MENU_ACCENTS (line 20) | const MENU_ACCENTS = PRESET_MENU_ACCENTS;
type MenuAccent (line 21) | type MenuAccent = (typeof MENU_ACCENTS)[number];
constant MENU_COLORS (line 22) | const MENU_COLORS = PRESET_MENU_COLORS;
type MenuColor (line 23) | type MenuColor = (typeof MENU_COLORS)[number];
constant DEFAULT_CONFIG (line 25) | const DEFAULT_CONFIG = {
type RawConfig (line 99) | type RawConfig = z.infer<typeof rawConfigSchema>;
type ResolvedConfig (line 110) | type ResolvedConfig = z.infer<typeof resolvedConfigSchema>;
FILE: packages/cli/src/utils/config/utils.ts
function getConfig (line 23) | async function getConfig(cwd: string): Promise<ResolvedConfig | undefine...
function resolveConfig (line 30) | async function resolveConfig(cwd: string, config: RawConfig): Promise<Re...
function loadConfig (line 66) | function loadConfig(cwd: string): RawConfig | undefined {
function parseRawConfig (line 83) | function parseRawConfig(config: unknown) {
function cleanAlias (line 98) | function cleanAlias(alias: string) {
function validateImportAlias (line 102) | function validateImportAlias(opts: Parameters<typeof resolveImportAlias>...
type PromptForAliasesOptions (line 109) | type PromptForAliasesOptions = {
function promptForAliases (line 119) | async function promptForAliases(options: PromptForAliasesOptions) {
function promptAlias (line 135) | async function promptAlias(
function writeConfig (line 161) | function writeConfig(cwd: string, config: RawConfig): void {
type TSConfigName (line 167) | type TSConfigName = "tsconfig.json" | "jsconfig.json" | (string & {});
function resolveTSConfig (line 168) | function resolveTSConfig(cwd: string, config: RawConfig) {
FILE: packages/cli/src/utils/css.ts
function createGlobalCssFile (line 1) | function createGlobalCssFile(): string {
FILE: packages/cli/src/utils/errors.ts
function error (line 3) | function error(msg: string, cause?: unknown) {
class CLIError (line 7) | class CLIError extends Error {
class ConfigError (line 11) | class ConfigError extends Error {
FILE: packages/cli/src/utils/fonts.ts
type Font (line 3) | type Font = RegistryFont & { name: string };
function setupFonts (line 5) | function setupFonts(fonts: Font[]): {
FILE: packages/cli/src/utils/get-env-proxy.ts
function getEnvProxy (line 3) | function getEnvProxy(): string | undefined {
FILE: packages/cli/src/utils/get-package-info.ts
function getCLIPackageInfo (line 7) | function getCLIPackageInfo(): PackageJson {
function getPackageFilePath (line 12) | function getPackageFilePath(filePath: string) {
function readJSONSync (line 18) | function readJSONSync(path: string): unknown {
function getDependencyPackageInfo (line 23) | function getDependencyPackageInfo(cwd: string, depName: string) {
FILE: packages/cli/src/utils/install-deps.ts
type InstallOptions (line 9) | type InstallOptions = {
function installDependencies (line 15) | async function installDependencies({
function parseDependency (line 80) | function parseDependency(dep: string) {
FILE: packages/cli/src/utils/preconditions.ts
type PreconditionOptions (line 12) | type PreconditionOptions<Config extends cliConfig.RawConfig> = {
function checkPreconditions (line 19) | function checkPreconditions<Config extends cliConfig.RawConfig>({
type CheckDependenciesResult (line 46) | type CheckDependenciesResult<Config extends cliConfig.RawConfig> =
function checkDependencies (line 59) | function checkDependencies<Config extends cliConfig.RawConfig>(
FILE: packages/cli/src/utils/project.ts
function getComponents (line 11) | async function getComponents({
function syncSvelteKit (line 48) | async function syncSvelteKit(cwd: string) {
function isUsingSvelteKit (line 75) | function isUsingSvelteKit(cwd: string): boolean {
function getPackageInfo (line 81) | function getPackageInfo(cwd: string) {
FILE: packages/cli/src/utils/prompt-helpers.ts
function intro (line 8) | function intro() {
function cancel (line 22) | function cancel(msg = "Operation cancelled."): never {
function prettifyList (line 31) | function prettifyList(arr: string[], max: number = 9): string {
function getPadding (line 38) | function getPadding(lines: string[]) {
function handleError (line 43) | function handleError(error: unknown) {
function printError (line 67) | function printError(error: Error): string {
FILE: packages/cli/src/utils/registry/index.ts
function getRegistryUrl (line 12) | function getRegistryUrl(config: { registry: string; style?: string }) {
function getSiteUrl (line 22) | function getSiteUrl(config: { registry: string }) {
function getRegistryIndex (line 27) | async function getRegistryIndex(registryUrl: string) {
function getBaseColors (line 38) | function getBaseColors() {
function getRegistryTheme (line 45) | async function getRegistryTheme(baseUrl: string, theme: string) {
function parseStyleCss (line 57) | function parseStyleCss(css: string): Record<string, string> {
type ResolveRegistryItemsProps (line 85) | type ResolveRegistryItemsProps = {
type ResolvedRegistryItem (line 92) | type ResolvedRegistryItem = schemas.RegistryItem | schemas.RegistryIndex...
function resolveRegistryItems (line 93) | async function resolveRegistryItems({
type FetchTreeProps (line 153) | type FetchTreeProps = { baseUrl: string; items: ResolvedRegistryItem[] };
function fetchRegistryItems (line 154) | async function fetchRegistryItems({
function fetchRegistry (line 172) | async function fetchRegistry(urls: Array<URL | string>): Promise<unknown...
function getItemAliasDir (line 200) | function getItemAliasDir(config: ResolvedConfig, type: schemas.RegistryI...
function resolveItemFilePath (line 226) | function resolveItemFilePath(
FILE: packages/cli/src/utils/registry/schema.ts
type RegistryItemType (line 26) | type RegistryItemType = z.infer<typeof registryItemTypeSchema>;
type RegistryItemFileType (line 33) | type RegistryItemFileType = z.infer<typeof registryItemFileTypeSchema>;
type RegistryItemFile (line 38) | type RegistryItemFile = z.infer<typeof registryItemFileSchema>;
type RegistryIndexItem (line 99) | type RegistryIndexItem = z.infer<typeof registryIndexItemSchema>;
type RegistryIndex (line 105) | type RegistryIndex = z.infer<typeof registryIndexSchema>;
type CssVars (line 115) | type CssVars = z.infer<typeof registryItemCssVarsSchema>;
type CssSchema (line 130) | type CssSchema = { [x: string]: string | CssSchema };
type RegistryFont (line 181) | type RegistryFont = z.infer<typeof registryItemFontSchema>;
type RegistryItem (line 183) | type RegistryItem = z.infer<typeof registryItemSchema>;
type Registry (line 200) | type Registry = z.infer<typeof registrySchema>;
function naiveDeepPartialify (line 323) | function naiveDeepPartialify(schema: z.ZodObject): z.ZodObject {
FILE: packages/cli/src/utils/resolve-imports.ts
constant NOOP (line 9) | const NOOP = "/noop.js";
type ResolveImportOpts (line 11) | type ResolveImportOpts = {
function resolveImportAlias (line 20) | function resolveImportAlias(opts: ResolveImportOpts): string | undefined {
function resolveAlias (line 48) | function resolveAlias(pkg: PackageJson, pkgPath: string, aliasedPath: st...
FILE: packages/cli/src/utils/transform-css.ts
type TransformCssOptions (line 5) | type TransformCssOptions = {
function transformCss (line 14) | function transformCss(source: string, options?: TransformCssOptions): st...
FILE: packages/cli/src/utils/transformers/index.ts
type TransformOptions (line 3) | type TransformOptions = {
type TransformerResult (line 9) | type TransformerResult = {
type Transformer (line 16) | type Transformer = (opts: TransformOptions) => Promise<Partial<Transform...
function transform (line 18) | async function transform(
FILE: packages/cli/src/utils/transformers/transform-menu.ts
constant TRANSLUCENT_CLASSES (line 9) | const TRANSLUCENT_CLASSES =
type SvelteNode (line 12) | type SvelteNode = {
function transformClassText (line 27) | function transformClassText(
function walkNodes (line 51) | function walkNodes(nodes: SvelteNode[] | undefined, visit: (node: Svelte...
FILE: packages/cli/src/utils/transformers/transform-strip-types.ts
constant CONSECUTIVE_NEWLINE_REGEX (line 5) | const CONSECUTIVE_NEWLINE_REGEX = new RegExp(/^\s\s*\n+/gm);
FILE: packages/cli/src/utils/updaters/update-css-vars.ts
constant DARK_SELECTOR (line 4) | const DARK_SELECTOR = ".dark";
constant LIGHT_SELECTOR (line 5) | const LIGHT_SELECTOR = ":root";
constant DARK_VARIANT_PARAMS (line 6) | const DARK_VARIANT_PARAMS = "dark (&:is(.dark *))";
type UpdateCssVarsOptions (line 8) | type UpdateCssVarsOptions = {
function updateCssVars (line 13) | function updateCssVars(
function addCustomVariant (line 71) | function addCustomVariant(ast: Root): void {
function applyVarsToRule (line 100) | function applyVarsToRule(
function ensureRootRule (line 124) | function ensureRootRule(
function updateThemeVars (line 139) | function updateThemeVars(ast: Root, vars: Record<string, string>, overwr...
function updateThemePlugin (line 158) | function updateThemePlugin(ast: Root, cssVars: CssVars): void {
function upsertThemeNode (line 240) | function upsertThemeNode(ast: Root): AtRule {
function isLocalHSLValue (line 261) | function isLocalHSLValue(value: string): boolean {
function isColorValue (line 275) | function isColorValue(value: string): boolean {
function updateTailwindPlugins (line 285) | function updateTailwindPlugins(ast: Root, plugins: string[]): void {
FILE: packages/cli/src/utils/updaters/update-css.ts
constant TAB (line 5) | const TAB = "\t";
function inferBefore (line 12) | function inferBefore(parentBefore: string | undefined): string {
function updateCss (line 16) | function updateCss(root: Root, css: CssSchema): void {
function processAtRule (line 344) | function processAtRule(
function processRule (line 425) | function processRule(parent: Root | AtRule, selector: string, properties...
FILE: packages/cli/src/utils/utils.ts
function isUrl (line 5) | function isUrl(path: string) {
function normalizeURL (line 11) | function normalizeURL(url: URL | string): URL {
function resolveURL (line 23) | function resolveURL(base: URL | string, path: string): URL {
function toArray (line 29) | function toArray<T>(set: Set<T>): Array<T> | undefined {
function pascalToKebab (line 36) | function pascalToKebab(str: string): string {
function kebabToPascal (line 45) | function kebabToPascal(str: string): string {
function entries (line 55) | function entries<T extends Record<string, unknown>>(obj: T): [keyof T, T...
function keys (line 65) | function keys<T extends Record<string, unknown>>(obj: T): (keyof T)[] {
FILE: packages/cli/test/registry-template.test.ts
function getFile (line 22) | function getFile(name: string) {
FILE: packages/cli/test/utils/add-registry-items.test.ts
type ResolvedRegistryItem (line 45) | type ResolvedRegistryItem = Awaited<ReturnType<typeof registry.resolveRe...
FILE: packages/cli/test/utils/auto-detect.test.ts
function createCssFile (line 8) | function createCssFile(name: string) {
function cleanup (line 12) | function cleanup() {
FILE: packages/cli/test/utils/deps-resolver.test.ts
function mkResolved (line 198) | function mkResolved(input: Record<string, string[]>): ResolvedDependenci...
function mkOpts (line 213) | function mkOpts(
FILE: packages/cli/test/utils/project.test.ts
function createConfig (line 24) | function createConfig(resolvedPaths: {
FILE: packages/cli/test/utils/test-helpers.ts
function toPosixPath (line 4) | function toPosixPath(p: string) {
function getConf (line 10) | async function getConf(fixtureDir: string) {
FILE: packages/cli/test/utils/utils.test.ts
type Aliases (line 124) | type Aliases = NonNullable<Parameters<typeof transformAliases>[0]>;
FILE: packages/registry/src/schemas.ts
type RegistryItemType (line 19) | type RegistryItemType = z.infer<typeof registryItemTypeSchema>;
type RegistryItemFileType (line 26) | type RegistryItemFileType = z.infer<typeof registryItemFileTypeSchema>;
type RegistryItemFile (line 31) | type RegistryItemFile = z.infer<typeof registryItemFileSchema>;
type RegistryIndexItem (line 92) | type RegistryIndexItem = z.infer<typeof registryIndexItemSchema>;
type RegistryIndex (line 98) | type RegistryIndex = z.infer<typeof registryIndexSchema>;
type CssVars (line 111) | type CssVars = z.infer<typeof registryItemCssVarsSchema>;
type CssSchema (line 126) | type CssSchema = { [x: string]: string | CssSchema };
type RegistryItem (line 147) | type RegistryItem = z.infer<typeof registryItemSchema>;
type Registry (line 167) | type Registry = z.infer<typeof registrySchema>;
FILE: registry-template/src/lib/registry/blocks/complex-component/hooks/use-pokemon.svelte.ts
function usePokemonImage (line 3) | function usePokemonImage(number: number) {
FILE: registry-template/src/lib/registry/blocks/complex-component/lib/pokemon.ts
function getPokemonList (line 3) | async function getPokemonList({ limit = 10 }: { limit?: number }) {
function getPokemon (line 17) | async function getPokemon(name: string) {
FILE: registry-template/src/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: repro/src/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
type WithoutChild (line 9) | type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
type WithoutChildren (line 11) | type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "childr...
type WithoutChildrenOrChild (line 12) | type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
type WithElementRef (line 13) | type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?...
Condensed preview — 2754 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (4,765K chars).
[
{
"path": ".changeset/README.md",
"chars": 510,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 331,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@2.3.0/schema.json\",\n \"changelog\": [\"@svitejs/changesets-changelog-"
},
{
"path": ".github/FUNDING.yml",
"chars": 638,
"preview": "# These are supported funding model platforms\n\ngithub: [huntabyte, adriangonz97, ieedan]\npatreon: # Replace with a singl"
},
{
"path": ".github/ISSUE_TEMPLATE/1-documentation_change.yml",
"chars": 570,
"preview": "name: Report Docs Issue\ndescription: Suggest an addition or modification to the documentation\nlabels: [triage]\nbody:\n -"
},
{
"path": ".github/ISSUE_TEMPLATE/2-feature_request.yml",
"chars": 1001,
"preview": "name: Feature request\ndescription: Request a new feature\nlabels: [triage]\nbody:\n - type: checkboxes\n attributes:\n "
},
{
"path": ".github/ISSUE_TEMPLATE/3-bug_report.yml",
"chars": 2613,
"preview": "name: Bug report\ndescription: Report an issue with shadcn-svelte\nlabels: [triage]\nbody:\n - type: markdown\n attribute"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 396,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: Get Help\n url: https://github.com/huntabyte/shadcn-svelte/discus"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 462,
"preview": "<!--\n### Before submitting the PR, please make sure you do the following\n\n- If your PR isn't addressing a small fix (lik"
},
{
"path": ".github/reproduire/needs-reproduction.md",
"chars": 1721,
"preview": "Please provide a [reproduction](https://shadcn-svelte.com/repro).\n\n<details>\n<summary>More info</summary>\n\n### Why do I "
},
{
"path": ".github/workflows/autoformat.yml",
"chars": 5252,
"preview": "name: Auto-format PR on Comment\n\non:\n issue_comment:\n types: [created]\n\njobs:\n format:\n # only run on PR comment"
},
{
"path": ".github/workflows/build-preview.yml",
"chars": 869,
"preview": "name: Build Preview Deployment\n\n# cancel in-progress runs on new commits to same PR (github.event.number)\nconcurrency:\n "
},
{
"path": ".github/workflows/ci.yml",
"chars": 1332,
"preview": "name: CI\n\non:\n pull_request:\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.event.number || github.sha }}\n c"
},
{
"path": ".github/workflows/deploy-preview.yml",
"chars": 1050,
"preview": "name: Upload Preview Deployment\n\non:\n workflow_run:\n workflows: [Build Preview Deployment]\n types:\n - comple"
},
{
"path": ".github/workflows/deploy-prod.yml",
"chars": 886,
"preview": "name: Production Deployment\non:\n push:\n branches:\n - main\n paths:\n - docs/**\n - packages/registry/"
},
{
"path": ".github/workflows/deploy-svelte-4.yml",
"chars": 1070,
"preview": "name: Svelte 4 Deployment\non:\n push:\n branches:\n - svelte-4\n paths:\n - sites/docs/**\n workflow_dispatc"
},
{
"path": ".github/workflows/deploy-tailwind-3.yml",
"chars": 1092,
"preview": "name: Tailwind 3 Deployment\non:\n push:\n branches:\n - next-tailwind-3\n paths:\n - sites/docs/**\n workflo"
},
{
"path": ".github/workflows/pr-guard.yml",
"chars": 228,
"preview": "name: PR guard\non:\n pull_request_target:\n types: [opened, reopened]\n\npermissions:\n pull-requests: write\n "
},
{
"path": ".github/workflows/release.yml",
"chars": 1166,
"preview": "name: Publish\n\non:\n push:\n branches:\n - main\n - next\n\nconcurrency: ${{ github.workflow }}-${{ github.ref }"
},
{
"path": ".github/workflows/reproduire-close.yml",
"chars": 792,
"preview": "name: Close incomplete issues\non:\n workflow_dispatch:\n schedule:\n - cron: \"30 1 * * *\" # run every day\n\npermissions"
},
{
"path": ".github/workflows/reproduire.yml",
"chars": 361,
"preview": "name: Reproduire\non:\n issues:\n types: [labeled]\n\npermissions:\n issues: write\n\njobs:\n reproduire:\n runs-on: maco"
},
{
"path": ".gitignore",
"chars": 1835,
"preview": ".DS_Store\nnode_modules\ndist\n/build\n/.svelte-kit\n/package\n.env\n.env.*\n!.env.example\nvite.config.js.timestamp-*\nvite.confi"
},
{
"path": ".npmrc",
"chars": 184,
"preview": "engine-strict=true # https://pnpm.io/npmrc#engine-strict\nprefer-frozen-lockfile=false\nsupported-archite"
},
{
"path": ".nvmrc",
"chars": 8,
"preview": "v22.15.0"
},
{
"path": ".prettierignore",
"chars": 471,
"preview": ".changeset\n.DS_Store\nnode_modules\n**/build\n**/.svelte-kit\n**/package\n**/dist\n.env\n.env.*\n!.env.example\n\n# Ignore files f"
},
{
"path": ".prettierrc",
"chars": 526,
"preview": "{\n\t\"useTabs\": true,\n\t\"tabWidth\": 4,\n\t\"singleQuote\": false,\n\t\"trailingComma\": \"es5\",\n\t\"printWidth\": 100,\n\t\"plugins\": [\"pr"
},
{
"path": ".vscode/settings.json",
"chars": 520,
"preview": "{\n\t// Enable the ESlint flat config support\n\t\"eslint.useFlatConfig\": true,\n\n\t// Auto fix\n\t\"editor.codeActionsOnSave\": {\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 2290,
"preview": "# Contributing to shadcn-svelte\n\nWe appreciate your interest in contributing. This guide will help you get started with "
},
{
"path": "LICENSE.md",
"chars": 1192,
"preview": "MIT License\n\nCopyright (c) 2023 Hunter Johnston <https://github.com/huntabyte>\nCopyright (c) 2023 CokaKoala <https://git"
},
{
"path": "README.md",
"chars": 2169,
"preview": "<p align=\"center\">\n <img align=\"center\" src=\"https://raw.githubusercontent.com/huntabyte/shadcn-svelte/main/docs/static/"
},
{
"path": "docs/.gitignore",
"chars": 210,
"preview": "node_modules\n\n# Output\n.output\n.vercel\n.netlify\n.wrangler\n/.svelte-kit\n/build\n\n# OS\n.DS_Store\nThumbs.db\n\n# Env\n.env\n.env"
},
{
"path": "docs/.npmrc",
"chars": 19,
"preview": "engine-strict=true\n"
},
{
"path": "docs/README.md",
"chars": 21,
"preview": "# shadcn-svelte docs\n"
},
{
"path": "docs/_headers",
"chars": 140,
"preview": "/*\n Access-Control-Allow-Origin: *\n Access-Control-Allow-Methods: GET, OPTIONS\n Access-Control-Allow-Headers: Content"
},
{
"path": "docs/content/about.md",
"chars": 1363,
"preview": "---\ntitle: About\ndescription: Powered by amazing open source projects.\n---\n\n## About\n\n[shadcn-svelte](https://github.com"
},
{
"path": "docs/content/changelog.md",
"chars": 8820,
"preview": "---\ntitle: Changelog\ndescription: Latest updates and announcements.\n---\n\n<script>\n\timport Steps from '$lib/components/st"
},
{
"path": "docs/content/cli.md",
"chars": 3874,
"preview": "---\ntitle: shadcn-svelte\ndescription: Use the shadcn-svelte CLI to add components to your project.\n---\n\n<script>\n\timport"
},
{
"path": "docs/content/components/accordion.md",
"chars": 1901,
"preview": "---\ntitle: Accordion\ndescription: A vertically stacked set of interactive headings that each reveal a section of content"
},
{
"path": "docs/content/components/alert-dialog.md",
"chars": 2115,
"preview": "---\ntitle: Alert Dialog\ndescription: A modal dialog that interrupts the user with important content and expects a respon"
},
{
"path": "docs/content/components/alert.md",
"chars": 1379,
"preview": "---\ntitle: Alert\ndescription: Displays a callout for user attention.\ncomponent: true\nlinks:\n source: https://github.com"
},
{
"path": "docs/content/components/aspect-ratio.md",
"chars": 1615,
"preview": "---\ntitle: Aspect Ratio\ndescription: Displays content within a desired ratio.\ncomponent: true\nlinks:\n source: https://g"
},
{
"path": "docs/content/components/avatar.md",
"chars": 1566,
"preview": "---\ntitle: Avatar\ndescription: An image element with a fallback for representing the user.\ncomponent: true\nlinks:\n sour"
},
{
"path": "docs/content/components/badge.md",
"chars": 1505,
"preview": "---\ntitle: Badge\ndescription: Displays a badge or a component that looks like a badge.\nlinks:\n source: https://github.c"
},
{
"path": "docs/content/components/breadcrumb.md",
"chars": 4861,
"preview": "---\ntitle: Breadcrumb\ndescription: Displays the path to the current resource using a hierarchy of links.\ncomponent: true"
},
{
"path": "docs/content/components/button-group.md",
"chars": 3720,
"preview": "---\ntitle: Button Group\ndescription: A container that groups related buttons together with consistent styling.\ncomponent"
},
{
"path": "docs/content/components/button.md",
"chars": 8688,
"preview": "---\ntitle: Button\ndescription: Displays a button or a component that looks like a button.\ncomponent: true\nlinks:\n sourc"
},
{
"path": "docs/content/components/calendar.md",
"chars": 3319,
"preview": "---\ntitle: Calendar\ndescription: A calendar component that allows users to select dates.\ncomponent: true\nlinks:\n source"
},
{
"path": "docs/content/components/card.md",
"chars": 1574,
"preview": "---\ntitle: Card\ndescription: Displays a card with header, content, and footer.\ncomponent: true\nlinks:\n source: https://"
},
{
"path": "docs/content/components/carousel.md",
"chars": 6674,
"preview": "---\ntitle: Carousel\ndescription: A carousel with motion and swipe built using Embla.\ncomponent: true\nlinks:\n source: ht"
},
{
"path": "docs/content/components/chart.md",
"chars": 14508,
"preview": "---\ntitle: Chart\ndescription: Beautiful charts. Built using LayerChart. Copy and paste into your apps.\ncomponent: true\nl"
},
{
"path": "docs/content/components/checkbox.md",
"chars": 1438,
"preview": "---\ntitle: Checkbox\ndescription: A control that allows the user to toggle between checked and not checked.\ncomponent: tr"
},
{
"path": "docs/content/components/collapsible.md",
"chars": 1717,
"preview": "---\ntitle: Collapsible\ndescription: An interactive component which expands/collapses a panel.\ncomponent: true\nlinks:\n s"
},
{
"path": "docs/content/components/combobox.md",
"chars": 3806,
"preview": "---\ntitle: Combobox\ndescription: Autocomplete input and command palette with a list of suggestions.\ncomponent: true\n---\n"
},
{
"path": "docs/content/components/command.md",
"chars": 3611,
"preview": "---\ntitle: Command\ndescription: Fast, composable, unstyled command menu for Svelte.\ncomponent: true\nlinks:\n source: htt"
},
{
"path": "docs/content/components/context-menu.md",
"chars": 1854,
"preview": "---\ntitle: Context Menu\ndescription: Displays a menu to the user — such as a set of actions or functions — triggered by "
},
{
"path": "docs/content/components/data-table.md",
"chars": 27381,
"preview": "---\ntitle: Data Table\ndescription: Powerful table and datagrids built using TanStack Table.\ncomponent: true\nlinks:\n sou"
},
{
"path": "docs/content/components/date-picker.md",
"chars": 2751,
"preview": "---\ntitle: Date Picker\ndescription: A date picker component with range and presets.\ncomponent: true\nlinks:\n source: htt"
},
{
"path": "docs/content/components/dialog.md",
"chars": 3158,
"preview": "---\ntitle: Dialog\ndescription: A window overlaid on either the primary window or another dialog window, rendering the co"
},
{
"path": "docs/content/components/drawer.md",
"chars": 2200,
"preview": "---\ntitle: Drawer\ndescription: A drawer component for Svelte.\ncomponent: true\nlinks:\n source: https://github.com/huntab"
},
{
"path": "docs/content/components/dropdown-menu.md",
"chars": 2958,
"preview": "---\ntitle: Dropdown Menu\ndescription: Displays a menu to the user — such as a set of actions or functions — triggered by"
},
{
"path": "docs/content/components/empty.md",
"chars": 2440,
"preview": "---\ntitle: Empty\ndescription: Use the Empty component to display a empty state.\ncomponent: true\nlinks:\n source: https:/"
},
{
"path": "docs/content/components/field.md",
"chars": 5343,
"preview": "---\ntitle: Field\ndescription: Combine labels, controls, and help text to compose accessible form fields and grouped inpu"
},
{
"path": "docs/content/components/form.md",
"chars": 7134,
"preview": "---\ntitle: Formsnap\ndescription: Building forms with Formsnap, Superforms, & Zod.\nlinks:\n doc: https://formsnap.dev\n s"
},
{
"path": "docs/content/components/hover-card.md",
"chars": 1639,
"preview": "---\ntitle: Hover Card\ndescription: For sighted users to preview content available behind a link.\ncomponent: true\nlinks:\n"
},
{
"path": "docs/content/components/index.md",
"chars": 254,
"preview": "---\ntitle: Components\ndescription: Here you can find all the components available in the library. We are working on addi"
},
{
"path": "docs/content/components/input-group.md",
"chars": 3403,
"preview": "---\ntitle: Input Group\ndescription: Display additional information or actions to an input or textarea.\ncomponent: true\nl"
},
{
"path": "docs/content/components/input-otp.md",
"chars": 3408,
"preview": "---\ntitle: Input OTP\ndescription: Accessible one-time password component with copy paste functionality.\ncomponent: true\n"
},
{
"path": "docs/content/components/input.md",
"chars": 1687,
"preview": "---\ntitle: Input\ndescription: Displays a form input field or a component that looks like an input field.\ncomponent: true"
},
{
"path": "docs/content/components/item.md",
"chars": 3215,
"preview": "---\ntitle: Item\ndescription: A versatile component that you can use to display any content.\ncomponent: true\nlinks:\n sou"
},
{
"path": "docs/content/components/kbd.md",
"chars": 1982,
"preview": "---\ntitle: Kbd\ndescription: Used to display textual user input from keyboard.\ncomponent: true\nlinks:\n source: https://g"
},
{
"path": "docs/content/components/label.md",
"chars": 1427,
"preview": "---\ntitle: Label\ndescription: Renders an accessible label associated with controls.\ncomponent: true\nlinks:\n source: htt"
},
{
"path": "docs/content/components/menubar.md",
"chars": 1927,
"preview": "---\ntitle: Menubar\ndescription: A visually persistent menu common in desktop applications that provides quick access to "
},
{
"path": "docs/content/components/native-select.md",
"chars": 6061,
"preview": "---\ntitle: Native Select\ndescription: A styled native HTML select element with consistent design system integration.\ncom"
},
{
"path": "docs/content/components/navigation-menu.md",
"chars": 1814,
"preview": "---\ntitle: Navigation Menu\ndescription: A collection of links for navigating websites.\ncomponent: true\nlinks:\n source: "
},
{
"path": "docs/content/components/pagination.md",
"chars": 2194,
"preview": "---\ntitle: Pagination\ndescription: Pagination with page navigation, next and previous links.\ncomponent: true\nlinks:\n so"
},
{
"path": "docs/content/components/popover.md",
"chars": 1580,
"preview": "---\ntitle: Popover\ndescription: Displays rich content in a portal, triggered by a button.\ncomponent: true\nlinks:\n sourc"
},
{
"path": "docs/content/components/progress.md",
"chars": 1511,
"preview": "---\ntitle: Progress\ndescription: Displays an indicator showing the completion progress of a task, typically displayed as"
},
{
"path": "docs/content/components/radio-group.md",
"chars": 1956,
"preview": "---\ntitle: Radio Group\ndescription: A set of checkable buttons—known as radio buttons—where no more than one of the butt"
},
{
"path": "docs/content/components/range-calendar.md",
"chars": 1787,
"preview": "---\ntitle: Range Calendar\ndescription: A calendar component that allows users to select a range of dates.\ncomponent: tru"
},
{
"path": "docs/content/components/resizable.md",
"chars": 2882,
"preview": "---\ntitle: Resizable\ndescription: Accessible resizable panel groups and layouts with keyboard support.\ncomponent: true\nl"
},
{
"path": "docs/content/components/scroll-area.md",
"chars": 2187,
"preview": "---\ntitle: Scroll Area\ndescription: Augments native scroll functionality for custom, cross-browser styling.\ncomponent: t"
},
{
"path": "docs/content/components/select.md",
"chars": 1841,
"preview": "---\ntitle: Select\ndescription: Displays a list of options for the user to pick from—triggered by a button.\ncomponent: tr"
},
{
"path": "docs/content/components/separator.md",
"chars": 1449,
"preview": "---\ntitle: Separator\ndescription: Visually or semantically separates content.\ncomponent: true\nlinks:\n source: https://g"
},
{
"path": "docs/content/components/sheet.md",
"chars": 2549,
"preview": "---\ntitle: Sheet\ndescription: Extends the Dialog component to display content that complements the main content of the s"
},
{
"path": "docs/content/components/sidebar.md",
"chars": 30352,
"preview": "---\ntitle: Sidebar\ndescription: A composable, themeable and customizable sidebar component.\ncomponent: true\nlinks:\n sou"
},
{
"path": "docs/content/components/skeleton.md",
"chars": 1362,
"preview": "---\ntitle: Skeleton\ndescription: Use to show a placeholder while content is loading.\ncomponent: true\nlinks:\n source: ht"
},
{
"path": "docs/content/components/slider.md",
"chars": 1483,
"preview": "---\ntitle: Slider\ndescription: An input where the user selects a value from within a given range.\ncomponent: true\nlinks:"
},
{
"path": "docs/content/components/sonner.md",
"chars": 4373,
"preview": "---\ntitle: Sonner\ndescription: An opinionated toast component for Svelte.\ncomponent: true\nlinks:\n source: https://githu"
},
{
"path": "docs/content/components/spinner.md",
"chars": 2603,
"preview": "---\ntitle: Spinner\ndescription: An indicator that can be used to show a loading state.\ncomponent: true\nlinks:\n source: "
},
{
"path": "docs/content/components/switch.md",
"chars": 1420,
"preview": "---\ntitle: Switch\ndescription: A control that allows the user to toggle between checked and not checked.\ncomponent: true"
},
{
"path": "docs/content/components/table.md",
"chars": 2188,
"preview": "---\ntitle: Table\ndescription: A responsive table component.\ncomponent: true\nlinks:\n source: https://github.com/huntabyt"
},
{
"path": "docs/content/components/tabs.md",
"chars": 1812,
"preview": "---\ntitle: Tabs\ndescription: A set of layered sections of content—known as tab panels—that are displayed one at a time.\n"
},
{
"path": "docs/content/components/textarea.md",
"chars": 1726,
"preview": "---\ntitle: Textarea\ndescription: Displays a form textarea or a component that looks like a textarea.\ncomponent: true\nlin"
},
{
"path": "docs/content/components/toggle-group.md",
"chars": 2281,
"preview": "---\ntitle: Toggle Group\ndescription: A set of two-state buttons that can be toggled on or off.\ncomponent: true\nlinks:\n "
},
{
"path": "docs/content/components/toggle.md",
"chars": 1944,
"preview": "---\ntitle: Toggle\ndescription: A two-state button that can be either on or off.\ncomponent: true\nlinks:\n source: https:/"
},
{
"path": "docs/content/components/tooltip.md",
"chars": 2731,
"preview": "---\ntitle: Tooltip\ndescription: A popup that displays information related to an element when the element receives keyboa"
},
{
"path": "docs/content/components/typography.md",
"chars": 1559,
"preview": "---\ntitle: Typography\ndescription: Styles for headings, paragraphs, lists...etc\ncomponent: true\n---\n\n<script>\n\timport Co"
},
{
"path": "docs/content/components-json.md",
"chars": 3532,
"preview": "---\ntitle: components.json\ndescription: Configuration for your project.\n---\n\n<script>\n\timport Callout from \"$lib/compone"
},
{
"path": "docs/content/dark-mode/astro.md",
"chars": 3263,
"preview": "---\ntitle: Astro\ndescription: Adding dark mode to your Astro site.\n---\n\n<script>\n\timport ComponentPreview from \"$lib/com"
},
{
"path": "docs/content/dark-mode/index.md",
"chars": 1758,
"preview": "---\ntitle: Dark Mode\ndescription: Adding dark mode to your site.\n---\n\n<script>\n\timport LinkedCard from \"$lib/components/"
},
{
"path": "docs/content/dark-mode/svelte.md",
"chars": 1128,
"preview": "---\ntitle: Svelte\ndescription: Adding dark mode to your Svelte site.\n---\n\n<script>\n\timport ComponentPreview from \"$lib/c"
},
{
"path": "docs/content/figma.md",
"chars": 715,
"preview": "---\ntitle: Figma\ndescription: Every component recreated in Figma. With customizable props, typography and icons.\n---\n\n<s"
},
{
"path": "docs/content/index.md",
"chars": 4692,
"preview": "---\ntitle: Introduction\ndescription: Re-usable components built with Bits UI and Tailwind CSS.\n---\n\n<script>\n import * "
},
{
"path": "docs/content/installation/astro.md",
"chars": 3461,
"preview": "---\ntitle: Astro\ndescription: How to setup shadcn-svelte in an Astro project.\n---\n\n<script>\n\timport * as Alert from \"$li"
},
{
"path": "docs/content/installation/index.md",
"chars": 2663,
"preview": "---\ntitle: Installation\ndescription: How to install dependencies and structure your app.\n---\n\n<script>\n\timport InstallCa"
},
{
"path": "docs/content/installation/manual.md",
"chars": 6747,
"preview": "---\ntitle: Manual Installation\ndescription: How to setup shadcn-svelte manually.\n---\n\n<script>\n\timport Steps from \"$lib/"
},
{
"path": "docs/content/installation/sveltekit.md",
"chars": 1905,
"preview": "---\ntitle: SvelteKit\ndescription: How to setup shadcn-svelte in a SvelteKit project.\n---\n\n<script>\n\timport * as Alert fr"
},
{
"path": "docs/content/installation/vite.md",
"chars": 2716,
"preview": "---\ntitle: Vite\ndescription: How to setup shadcn-svelte in a Vite project.\n---\n\n<script>\n\timport * as Alert from \"$lib/r"
},
{
"path": "docs/content/javascript.md",
"chars": 983,
"preview": "---\ntitle: JavaScript\ndescription: How to use shadcn-svelte with JavaScript.\n---\n\nThis project and the components are wr"
},
{
"path": "docs/content/legacy.md",
"chars": 576,
"preview": "---\ntitle: Legacy Docs\ndescription: View the legacy docs for shadcn-svelte and Tailwind v3.\n---\n\n<script>\n\timport {Butto"
},
{
"path": "docs/content/migration/index.md",
"chars": 520,
"preview": "---\ntitle: Migration\ndescription: Learn how to update your project to the latest version of shadcn-svelte.\n---\n\n<script>"
},
{
"path": "docs/content/migration/svelte-5.md",
"chars": 7891,
"preview": "---\ntitle: Svelte 5\ndescription: How to migrate from Svelte 4 and Tailwind 3 to Svelte 5.\n---\n\n<script>\n\timport Steps fr"
},
{
"path": "docs/content/migration/tailwind-v4.md",
"chars": 15819,
"preview": "---\ntitle: Tailwind v4\ndescription: How to use shadcn-svelte with Tailwind v4 and Svelte 5.\n---\n\n<script>\n\timport { Butt"
},
{
"path": "docs/content/registry/examples.md",
"chars": 8701,
"preview": "---\ntitle: Examples\ndescription: \"Examples of registry items: styles, components, css vars, etc.\"\n---\n\n## registry:style"
},
{
"path": "docs/content/registry/faq.md",
"chars": 2629,
"preview": "---\ntitle: FAQ\ndescription: Frequently asked questions about running a registry.\n---\n\n## Frequently asked questions\n\n###"
},
{
"path": "docs/content/registry/getting-started.md",
"chars": 6225,
"preview": "---\ntitle: Getting Started\ndescription: Learn how to get setup and run your own component registry.\n---\n\n<script>\n\timpor"
},
{
"path": "docs/content/registry/index.md",
"chars": 1291,
"preview": "---\ntitle: Registry\ndescription: Run your own component registry.\n---\n\n<script>\n\timport Callout from \"$lib/components/ca"
},
{
"path": "docs/content/registry/registry-item-json.md",
"chars": 8595,
"preview": "---\ntitle: registry-item.json\ndescription: Specification for registry items.\n---\n\nThe `registry-item.json` schema is use"
},
{
"path": "docs/content/registry/registry-json.md",
"chars": 4652,
"preview": "---\ntitle: registry.json\ndescription: Schema for running your own component registry.\n---\n\n<script>\n\timport Callout from"
},
{
"path": "docs/content/theming.md",
"chars": 18342,
"preview": "---\ntitle: Theming\ndescription: Use CSS Variables to customize the look and feel of your application.\n---\n\n<script>\n\timp"
},
{
"path": "docs/mdsx.config.js",
"chars": 8306,
"preview": "// @ts-check\nimport { readFileSync } from \"node:fs\";\nimport process from \"node:process\";\nimport { join, resolve } from \""
},
{
"path": "docs/package.json",
"chars": 4457,
"preview": "{\n\t\"name\": \"docs\",\n\t\"private\": true,\n\t\"version\": \"0.0.0\",\n\t\"type\": \"module\",\n\t\"scripts\": {\n\t\t\"dev\": \"pnpm --reporter app"
},
{
"path": "docs/scripts/build-icons.ts",
"chars": 3946,
"preview": "#!/usr/bin/env tsx\nimport * as fs from \"fs/promises\";\nimport { watch } from \"fs\";\nimport * as path from \"path\";\nimport {"
},
{
"path": "docs/scripts/build-llm-placeholders.ts",
"chars": 1141,
"preview": "/**\n * Creates empty markdown files so that they are loaded into the manifest for\n * the cloudflare build and we can man"
},
{
"path": "docs/scripts/build-llms.ts",
"chars": 15424,
"preview": "import { unified } from \"unified\";\nimport rehypeParse from \"rehype-parse\";\nimport rehypeRemark from \"rehype-remark\";\nimp"
},
{
"path": "docs/scripts/build-registry.ts",
"chars": 11605,
"preview": "import fs from \"node:fs\";\nimport { execSync } from \"node:child_process\";\nimport path from \"node:path\";\nimport postcss fr"
},
{
"path": "docs/scripts/pull-styles.ts",
"chars": 959,
"preview": "import fs from \"node:fs/promises\";\nimport prettier from \"prettier\";\n\nconst styles = [\"vega\", \"nova\", \"maia\", \"lyra\", \"mi"
},
{
"path": "docs/scripts/registry.ts",
"chars": 8718,
"preview": "import fs from \"node:fs\";\nimport path from \"node:path\";\nimport * as acorn from \"acorn\";\nimport { tsPlugin } from \"@svelt"
},
{
"path": "docs/scripts/tsconfig.json",
"chars": 255,
"preview": "{\n\t\"extends\": \"../.svelte-kit/tsconfig.json\",\n\t\"compilerOptions\": {\n\t\t\"verbatimModuleSyntax\": true,\n\t\t\"erasableSyntaxOnl"
},
{
"path": "docs/scripts/velite/velite-update-json.ts",
"chars": 81,
"preview": "import { updateJsonImport } from \"./velite-utils.js\";\n\nawait updateJsonImport();\n"
},
{
"path": "docs/scripts/velite/velite-utils.ts",
"chars": 928,
"preview": "import { readFile, writeFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport { fileURLToPath } from "
},
{
"path": "docs/scripts/velite/velite-watch-output.ts",
"chars": 388,
"preview": "import { watch } from \"node:fs\";\nimport { updateJsonImport, veliteIndexPath } from \"./velite-utils.js\";\n\n// Configuratio"
},
{
"path": "docs/src/app.css",
"chars": 12896,
"preview": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@import \"./lib/registry/styles/style-vega.css\" layer(base);\n@import \"."
},
{
"path": "docs/src/app.d.ts",
"chars": 421,
"preview": "// See https://svelte.dev/docs/kit/types#app.d.ts\n// for information about these interfaces\nimport type { createHighligh"
},
{
"path": "docs/src/app.html",
"chars": 1812,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"%sveltekit.assets%/favicon."
},
{
"path": "docs/src/lib/blocks.ts",
"chars": 492,
"preview": "import { z } from \"zod\";\nimport { blocks } from \"../__registry__/blocks.js\";\n\nexport type BlockName = (typeof blocks)[nu"
},
{
"path": "docs/src/lib/colors.ts",
"chars": 2215,
"preview": "import { z } from \"zod\";\n\nimport { colors } from \"$lib/registry/registry-colors.js\";\n\nconst colorSchema = z.object({\n\tna"
},
{
"path": "docs/src/lib/components/announcement.svelte",
"chars": 437,
"preview": "<script lang=\"ts\">\n\timport { badgeVariants } from \"$lib/registry/ui/badge/index.js\";\n\timport { cn } from \"$lib/utils.js\""
},
{
"path": "docs/src/lib/components/block-viewer-code.svelte",
"chars": 1624,
"preview": "<script lang=\"ts\">\n\timport BlockViewerCopyCodeButton from \"./block-viewer-copy-code-button.svelte\";\n\timport BlockViewerF"
},
{
"path": "docs/src/lib/components/block-viewer-copy-code-button.svelte",
"chars": 942,
"preview": "<svelte:options runes />\n\n<script lang=\"ts\">\n\timport { UseClipboard } from \"$lib/hooks/use-clipboard.svelte.js\";\n\timport"
},
{
"path": "docs/src/lib/components/block-viewer-file-tree.svelte",
"chars": 824,
"preview": "<script lang=\"ts\">\n\timport { BlockViewerContext } from \"./block-viewer.svelte\";\n\timport * as Sidebar from \"$lib/registry"
},
{
"path": "docs/src/lib/components/block-viewer-iframe.svelte",
"chars": 720,
"preview": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils.js\";\n\timport { BlockViewerContext } from \"./block-viewer.svelte\";\n\n\tl"
},
{
"path": "docs/src/lib/components/block-viewer-toolbar.svelte",
"chars": 3763,
"preview": "<script lang=\"ts\">\n\timport { BlockViewerContext } from \"./block-viewer.svelte\";\n\timport { UseClipboard } from \"$lib/hook"
},
{
"path": "docs/src/lib/components/block-viewer-tree.svelte",
"chars": 2320,
"preview": "<script lang=\"ts\">\n\timport type { FileTree } from \"$lib/registry/registry-utils.js\";\n\timport BlockViewerTree from \"./blo"
},
{
"path": "docs/src/lib/components/block-viewer-view-mobile.svelte",
"chars": 1043,
"preview": "<script lang=\"ts\">\n\timport type { Snippet } from \"svelte\";\n\timport { BlockViewerContext } from \"./block-viewer.svelte\";\n"
},
{
"path": "docs/src/lib/components/block-viewer-view.svelte",
"chars": 1548,
"preview": "<script lang=\"ts\">\n\timport { BlockViewerContext } from \"./block-viewer.svelte\";\n\timport * as Resizable from \"$lib/regist"
},
{
"path": "docs/src/lib/components/block-viewer.svelte",
"chars": 2737,
"preview": "<script lang=\"ts\" module>\n\timport type { createFileTreeForRegistryItemFiles } from \"$lib/registry/registry-utils.js\";\n\ti"
},
{
"path": "docs/src/lib/components/blocks-nav.svelte",
"chars": 1167,
"preview": "<script lang=\"ts\">\n\timport { ScrollArea } from \"$lib/registry/ui/scroll-area/index.js\";\n\timport { page } from \"$app/stat"
},
{
"path": "docs/src/lib/components/callout.svelte",
"chars": 650,
"preview": "<script lang=\"ts\">\n\timport * as Alert from \"$lib/registry/ui/alert/index.js\";\n\timport { cn } from \"$lib/utils.js\";\n\timpo"
},
{
"path": "docs/src/lib/components/cards/activity-goal.svelte",
"chars": 3049,
"preview": "<script lang=\"ts\">\n\timport MinusIcon from \"@lucide/svelte/icons/minus\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus"
},
{
"path": "docs/src/lib/components/cards/appearance-settings.svelte",
"chars": 4005,
"preview": "<script lang=\"ts\">\n\timport MinusIcon from \"@lucide/svelte/icons/minus\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus"
},
{
"path": "docs/src/lib/components/cards/calendar.svelte",
"chars": 463,
"preview": "<script lang=\"ts\">\n\timport * as Card from \"$lib/registry/ui/card/index.js\";\n\timport { RangeCalendar } from \"$lib/registr"
},
{
"path": "docs/src/lib/components/cards/cards-demo.svelte",
"chars": 2201,
"preview": "<script lang=\"ts\">\n\timport CardsActivityGoal from \"$lib/components/cards/activity-goal.svelte\";\n\timport CardsCalendar fr"
},
{
"path": "docs/src/lib/components/cards/chat.svelte",
"chars": 5905,
"preview": "<script lang=\"ts\">\n\timport CheckIcon from \"@lucide/svelte/icons/check\";\n\timport PlusIcon from \"@lucide/svelte/icons/plus"
},
{
"path": "docs/src/lib/components/cards/cookie-settings.svelte",
"chars": 933,
"preview": "<script lang=\"ts\">\n\timport { Button } from \"$lib/registry/ui/button/index.js\";\n\timport * as Card from \"$lib/registry/ui/"
},
{
"path": "docs/src/lib/components/cards/create-account.svelte",
"chars": 3987,
"preview": "<script lang=\"ts\">\n\timport { Button } from \"$lib/registry/ui/button/index.js\";\n\timport * as Card from \"$lib/registry/ui/"
},
{
"path": "docs/src/lib/components/cards/demo.svelte",
"chars": 1862,
"preview": "<script lang=\"ts\">\n\timport {\n\t\tFieldSliderDemo,\n\t\tButtonGroupInputGroupDemo,\n\t\tSpinnerBadgeDemo,\n\t\tInputGroupDemo,\n\t\tEmp"
},
{
"path": "docs/src/lib/components/cards/exercise-minutes.svelte",
"chars": 2101,
"preview": "<script lang=\"ts\">\n\timport { LineChart } from \"layerchart\";\n\timport * as Card from \"$lib/registry/ui/card/index.js\";\n\tim"
},
{
"path": "docs/src/lib/components/cards/field-checkbox.svelte",
"chars": 413,
"preview": "<script lang=\"ts\">\n\timport { Checkbox } from \"$lib/registry/ui/checkbox/index.js\";\n\timport * as Field from \"$lib/registr"
},
{
"path": "docs/src/lib/components/cards/field-hear.svelte",
"chars": 1688,
"preview": "<script lang=\"ts\">\n\timport { Card, CardContent } from \"$lib/registry/ui/card/index.js\";\n\timport { Checkbox } from \"$lib/"
},
{
"path": "docs/src/lib/components/cards/forms.svelte",
"chars": 3617,
"preview": "<script lang=\"ts\">\n\timport * as Card from \"$lib/registry/ui/card/index.js\";\n\timport { Button } from \"$lib/registry/ui/bu"
},
{
"path": "docs/src/lib/components/cards/input-demo.svelte",
"chars": 1054,
"preview": "<script lang=\"ts\">\n\timport BadgeCheckIcon from \"@lucide/svelte/icons/badge-check\";\n\timport ChevronRightIcon from \"@lucid"
},
{
"path": "docs/src/lib/components/cards/input-group-button-demo.svelte",
"chars": 1658,
"preview": "<script lang=\"ts\">\n\timport * as InputGroup from \"$lib/registry/ui/input-group/index.js\";\n\timport { Label } from \"$lib/re"
},
{
"path": "docs/src/lib/components/cards/item-demo.svelte",
"chars": 1054,
"preview": "<script lang=\"ts\">\n\timport BadgeCheckIcon from \"@lucide/svelte/icons/badge-check\";\n\timport ChevronRightIcon from \"@lucid"
},
{
"path": "docs/src/lib/components/cards/nested.svelte",
"chars": 735,
"preview": "<script lang=\"ts\">\n\timport { Button } from \"$lib/registry/ui/button/index.js\";\n\timport * as ButtonGroup from \"$lib/regis"
},
{
"path": "docs/src/lib/components/cards/notion-prompt-form.svelte",
"chars": 11281,
"preview": "<script lang=\"ts\">\n\timport AtIcon from \"@lucide/svelte/icons/at-sign\";\n\timport ArrowUpIcon from \"@lucide/svelte/icons/ar"
},
{
"path": "docs/src/lib/components/cards/payments-actions-cell.svelte",
"chars": 1143,
"preview": "<script lang=\"ts\">\n\timport { Button } from \"$lib/registry/ui/button/index.js\";\n\timport * as DropdownMenu from \"$lib/regi"
},
{
"path": "docs/src/lib/components/cards/payments-email-header.svelte",
"chars": 531,
"preview": "<script lang=\"ts\">\n\timport { Button } from \"$lib/registry/ui/button/index.js\";\n\timport type { Column } from \"@tanstack/t"
},
{
"path": "docs/src/lib/components/cards/payments.svelte",
"chars": 8032,
"preview": "<script lang=\"ts\" module>\n\texport type Payment = {\n\t\tid: string;\n\t\tamount: number;\n\t\tstatus: \"pending\" | \"processing\" | "
},
{
"path": "docs/src/lib/components/cards/report-issue.svelte",
"chars": 3068,
"preview": "<script lang=\"ts\">\n\timport { Button } from \"$lib/registry/ui/button/index.js\";\n\timport * as Card from \"$lib/registry/ui/"
},
{
"path": "docs/src/lib/components/cards/root-components.svelte",
"chars": 1737,
"preview": "<script lang=\"ts\">\n\timport {\n\t\tFieldSliderDemo,\n\t\tButtonGroupInputGroupDemo,\n\t\tSpinnerBadgeDemo,\n\t\tInputGroupDemo,\n\t\tEmp"
},
{
"path": "docs/src/lib/components/cards/share.svelte",
"chars": 2832,
"preview": "<script lang=\"ts\">\n\timport * as Avatar from \"$lib/registry/ui/avatar/index.js\";\n\timport { Button } from \"$lib/registry/u"
},
{
"path": "docs/src/lib/components/cards/stats.svelte",
"chars": 2779,
"preview": "<script lang=\"ts\">\n\timport { AreaChart, LineChart } from \"layerchart\";\n\timport { Button } from \"$lib/registry/ui/button/"
},
{
"path": "docs/src/lib/components/cards/team-members.svelte",
"chars": 2934,
"preview": "<script lang=\"ts\">\n\timport ChevronDownIcon from \"@lucide/svelte/icons/chevron-down\";\n\timport * as Card from \"$lib/regist"
},
{
"path": "docs/src/lib/components/chart-code-viewer.svelte",
"chars": 3276,
"preview": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils.js\";\n\timport { MediaQuery } from \"svelte/reactivity\";\n\timport ChartCo"
},
{
"path": "docs/src/lib/components/chart-copy-button.svelte",
"chars": 1161,
"preview": "<script lang=\"ts\">\n\timport CopyIcon from \"@tabler/icons-svelte/icons/copy\";\n\timport CheckIcon from \"@tabler/icons-svelte"
},
{
"path": "docs/src/lib/components/chart-display.svelte",
"chars": 983,
"preview": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils.js\";\n\timport type { HighlightedBlock } from \"../../routes/api/block/["
},
{
"path": "docs/src/lib/components/chart-toolbar.svelte",
"chars": 2472,
"preview": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils.js\";\n\timport ChartCodeViewer from \"./chart-code-viewer.svelte\";\n\timpo"
},
{
"path": "docs/src/lib/components/chart-tooltip-demo-item.svelte",
"chars": 2712,
"preview": "<script lang=\"ts\">\n\timport type { TooltipPayload } from \"$lib/registry/ui/chart/chart-utils.js\";\n\timport { cn, type With"
},
{
"path": "docs/src/lib/components/charts-nav.svelte",
"chars": 1408,
"preview": "<script lang=\"ts\">\n\timport { page } from \"$app/state\";\n\timport { cn } from \"$lib/utils.js\";\n\timport { ScrollArea } from "
},
{
"path": "docs/src/lib/components/code-collapsible-wrapper.svelte",
"chars": 1453,
"preview": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils.js\";\n\timport { Button } from \"$lib/registry/ui/button/index.js\";\n\timp"
},
{
"path": "docs/src/lib/components/code-tabs.svelte",
"chars": 594,
"preview": "<script lang=\"ts\">\n\timport { type InstallationType } from \"$lib/user-config.svelte.js\";\n\timport * as Tabs from \"$lib/reg"
},
{
"path": "docs/src/lib/components/color-format-selector.svelte",
"chars": 1408,
"preview": "<script lang=\"ts\">\n\timport { getColorFormat, type Color } from \"$lib/colors.js\";\n\timport * as Select from \"$lib/registry"
},
{
"path": "docs/src/lib/components/color-indicator.svelte",
"chars": 204,
"preview": "<script lang=\"ts\">\n\tinterface Props {\n\t\tcolor: string;\n\t}\n\n\tlet { color }: Props = $props();\n</script>\n\n<span class=\"bor"
},
{
"path": "docs/src/lib/components/color-palette.svelte",
"chars": 818,
"preview": "<script lang=\"ts\">\n\timport type { ColorPalette } from \"$lib/colors.js\";\n\timport { UseClipboard } from \"$lib/hooks/use-cl"
},
{
"path": "docs/src/lib/components/color.svelte",
"chars": 1895,
"preview": "<script lang=\"ts\">\n\timport CheckIcon from \"@lucide/svelte/icons/check\";\n\timport ClipboardIcon from \"@lucide/svelte/icons"
},
{
"path": "docs/src/lib/components/colors/color-card.svelte",
"chars": 3808,
"preview": "<script lang=\"ts\">\n\timport { toast } from \"svelte-sonner\";\n\timport { PersistedState } from \"runed\";\n\timport * as Select "
},
{
"path": "docs/src/lib/components/colors/colors.ts",
"chars": 3849,
"preview": "import { z } from \"zod\";\n\nimport { colorMapping, colors, type BaseColor } from \"../../registry/registry-colors.js\";\nimpo"
},
{
"path": "docs/src/lib/components/colors-nav.svelte",
"chars": 1091,
"preview": "<script lang=\"ts\">\n\timport { ScrollArea } from \"$lib/registry/ui/scroll-area/index.js\";\n\timport { page } from \"$app/stat"
},
{
"path": "docs/src/lib/components/command-menu/command-menu-item.svelte",
"chars": 1063,
"preview": "<script lang=\"ts\">\n\timport { useMutationObserver } from \"$lib/hooks/use-mutation-observer.svelte.js\";\n\timport * as Comma"
},
{
"path": "docs/src/lib/components/command-menu/command-menu.svelte",
"chars": 8771,
"preview": "<script lang=\"ts\">\n\timport type { Color, ColorPalette } from \"$lib/colors.js\";\n\timport { UseClipboard } from \"$lib/hooks"
},
{
"path": "docs/src/lib/components/component-code-viewer/component-code-viewer-code-title.svelte",
"chars": 3202,
"preview": "<script lang=\"ts\">\n\timport { ComponentCodeViewerContext } from \"./component-code-viewer.svelte\";\n\timport * as Select fro"
},
{
"path": "docs/src/lib/components/component-code-viewer/component-code-viewer-code.svelte",
"chars": 1742,
"preview": "<script lang=\"ts\">\n\timport ComponentCodeViewerCodeTitle from \"./component-code-viewer-code-title.svelte\";\n\timport Compon"
},
{
"path": "docs/src/lib/components/component-code-viewer/component-code-viewer-copy-code-button.svelte",
"chars": 1123,
"preview": "<script lang=\"ts\">\n\timport { UseClipboard } from \"$lib/hooks/use-clipboard.svelte.js\";\n\timport { ComponentCodeViewerCont"
},
{
"path": "docs/src/lib/components/component-code-viewer/component-code-viewer-file-tree.svelte",
"chars": 904,
"preview": "<script lang=\"ts\">\n\timport { ComponentCodeViewerContext } from \"./component-code-viewer.svelte\";\n\timport * as Sidebar fr"
},
{
"path": "docs/src/lib/components/component-code-viewer/component-code-viewer-tree.svelte",
"chars": 2391,
"preview": "<script lang=\"ts\">\n\timport type { FileTree } from \"$lib/registry/registry-utils.js\";\n\timport ComponentCodeViewerTree fro"
},
{
"path": "docs/src/lib/components/component-code-viewer/component-code-viewer.svelte",
"chars": 3708,
"preview": "<script lang=\"ts\" module>\n\timport { createFileTreeForRegistryItemFiles } from \"$lib/registry/registry-utils.js\";\n\timport"
},
{
"path": "docs/src/lib/components/component-preview-tabs.svelte",
"chars": 1656,
"preview": "<script lang=\"ts\">\n\timport type { Component, Snippet } from \"svelte\";\n\timport type { HTMLAttributes } from \"svelte/eleme"
},
{
"path": "docs/src/lib/components/component-preview.svelte",
"chars": 1410,
"preview": "<script lang=\"ts\">\n\timport type { Component } from \"svelte\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\tim"
},
{
"path": "docs/src/lib/components/component-source.svelte",
"chars": 3198,
"preview": "<script lang=\"ts\" module>\n\timport { createFileTreeForRegistryItemFiles } from \"$lib/registry/registry-utils.js\";\n\timport"
},
{
"path": "docs/src/lib/components/components-list.svelte",
"chars": 726,
"preview": "<script lang=\"ts\">\n\timport { components } from \"$content/index.js\";\n\timport { NEW_COMPONENTS } from \"$lib/navigation.js\""
}
]
// ... and 2554 more files (download for full content)
About this extraction
This page contains the full source code of the huntabyte/shadcn-svelte GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 2754 files (3.8 MB), approximately 1.2M tokens, and a symbol index with 554 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.