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 ================================================ ================================================ FILE: .github/reproduire/needs-reproduction.md ================================================ Please provide a [reproduction](https://shadcn-svelte.com/repro).
More info ### 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)
================================================ 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 Copyright (c) 2023 CokaKoala 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 ================================================

shadcn-svelte

[![](https://dcbadge.vercel.app/api/server/fdXy3Sk8Gq?style=flat)](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**
**We are not affiliated with shadcn, but we did get his blessing prior to creating this project**
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**. ![hero](docs/static/opengraph-image.png) ## Documentation Visit https://shadcn-svelte.com/docs to view the documentation. ## Sponsors This project is supported by the following beautiful people/organizations:

Logos from Sponsors

## License 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) 💛

## Community Join the Discord server to ask questions, find collaborators, or just say hi! Svecosystem Discord community ================================================ 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. --- ## 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).
### 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.
### 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.
### 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 `` 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 `` & `` 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 `` 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} ``` ### Form.Control Formsnap introduced a new component `` 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. --- ## 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. 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 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 the base color for the components (choices: "slate", "gray", "zinc", "neutral", "stone") --css path to the global CSS file --components-alias import alias for components --lib-alias import alias for lib --utils-alias import alias for utils --hooks-alias import alias for hooks --ui-alias import alias for ui --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. **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 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 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. 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 the working directory (default: the current directory) -o, --output 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="" 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 ---
## Installation {#snippet cli()} {/snippet} {#snippet manual()} Install `bits-ui` Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte showLineNumbers ``` ```svelte showLineNumbers Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. ``` ================================================ 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 ---
## Installation {#snippet cli()} {/snippet} {#snippet manual()} Install `bits-ui`: Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte showLineNumbersw ``` ```svelte showLineNumbers Open Are you absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. Cancel Continue ``` ================================================ 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 ---
## Installation {#snippet cli()} {/snippet} {#snippet manual()} Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte showLineNumbers ``` ```svelte showLineNumbers Heads up! You can add components to your app using the cli. ``` ================================================ 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 ---
## Installation {#snippet cli()} {/snippet} {#snippet manual()} Install `bits-ui`: Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte showLineNumbers ``` ```svelte showLineNumbers
...
``` ================================================ 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 ---
## Installation {#snippet cli()} {/snippet} {#snippet manual()} Install `bits-ui`: Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte showLineNumbers ``` ```svelte showLineNumbers CN ``` ================================================ 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 ---
## Installation {#snippet cli()} {/snippet} {#snippet manual()} Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte ``` ```svelte Badge ``` ### Link You can use the `badgeVariants` helper to create a link that looks like a badge. ```svelte Badge ``` ================================================ 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 ---
## Installation {#snippet cli()} {/snippet} {#snippet manual()} Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte showLineNumbers ``` ```svelte showLineNumbers Home Components Breadcrumb ``` ## Examples ### Custom separator Use a custom component in the `` of `` to create a custom separator.
```svelte showLineNumbers {2,11-13} Home Components ``` --- ### Dropdown You can compose `` with a `` to create a dropdown in the breadcrumb.
```svelte showLineNumbers {2-5,11-22} Components Documentation Themes GitHub ``` --- ### Collapsed We provide a `` component to show a collapsed state when the breadcrumb is too long.
```svelte showLineNumbers {2,9} {/* ... */} {/* ... */} ``` --- ### Link component To use a link just add the `href` prop to ``.
```svelte showLineNumbers {2,7-9} Home {/* ... */} ``` --- ### Responsive Here's an example of a responsive breadcrumb that composes `` with ``, ``, and ``. It displays a dropdown on desktop and a drawer on mobile.
================================================ 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 ---
## Installation {#snippet cli()} {/snippet} {#snippet manual()} Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte ``` ```svelte ``` ## 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 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.
### Size Control the size of buttons using the `size` prop on individual buttons.
### Nested Nest `ButtonGroup` components to create button groups with spacing.
### 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.
### Split Create a split button group by adding two buttons separated by a `ButtonGroupSeparator`.
### Input Wrap an `Input` component with buttons.
### Input Group Wrap an `InputGroup` component to create complex input layouts.
### Dropdown Menu Create a split button group with a `DropdownMenu` component.
### Select Pair with a `Select` component.
### Popover Use with a `Popover` component.
================================================ 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 --- **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.
```svelte showLineNumbers ``` ## Installation {#snippet cli()} {/snippet} {#snippet manual()} Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte ``` ## Examples ### Size
```svelte ``` ### Default
```svelte ``` ### Outline
```svelte ``` ### Secondary
```svelte ``` ### Ghost
```svelte ``` ### Destructive
```svelte ``` ### Link
```svelte ``` ### Icon
```svelte ``` ### 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.
```svelte ``` ### Rounded Use the `rounded-full` class to make the button rounded.
```svelte ``` ### Spinner
```svelte showLineNumbers ``` ### Button Group To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) documentation for more details.
```svelte showLineNumbers {#snippet child({ props })} {/snippet} Mark as Read Archive Snooze Add to Calendar Add to List Label As... Personal Work Other Trash ``` ### Link You can convert the ` ``` Alternatively, you can use the `buttonVariants` helper to create a link that looks like a button. ```svelte Dashboard ``` ## 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 ---
## 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 {#snippet cli()} {/snippet} {#snippet manual()} Install `bits-ui` and `@internationalized/date`: Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## About The `` 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 `` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information. ## Examples ### Range Calendar
### Month and Year Selector
### Date of Birth Picker
### Date and Time Picker
### Natural Language Picker This component uses the `chrono-node` library to parse natural language dates.
## Upgrade Guide You can upgrade to the latest version of the `` component by running the following command: 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: 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 ---
## Installation {#snippet cli()} {/snippet} {#snippet manual()} Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte showLineNumbers ``` ```svelte showLineNumbers Card Title Card Description

Card Content

Card Footer

 ``` ## Examples
================================================ 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 ---
## About The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/get-started/svelte/) library. ## Installation {#snippet cli()} {/snippet} {#snippet manual()} Install `embla-carousel-svelte`: Copy and paste the following code into your project. {#if viewerData} {/if} {/snippet} ## Usage ```svelte showLineNumbers ``` ```svelte showLineNumbers ... ... ... ``` ## Examples ### Sizes To set the size of the items, you can use the `basis` utility class on the ``.
```svelte showLineNumbers {4-6} ... ... ... ``` ```svelte showLineNumbers {4-6} ... ... ... ``` ### Spacing To set the spacing between the items, we use a `ps-[VALUE]` utility on the `` and a negative `-ms-[VALUE]` on the ``.
```svelte showLineNumbers /-ms-4/ /ps-4/ ... ... ... ``` ```svelte showLineNumbers /-ms-2/ /ps-2/ /md:-ms-4/ /md:ps-4/ ... ... ... ``` ### Orientation Use the `orientation` prop to set the orientation of the carousel.
```svelte showLineNumbers /vertical | horizontal/ ... ... ... ``` ## 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} ... ... ... ``` ## API Use reactive state and the `setApi` callback to get an instance of the carousel API.
```svelte showLineNumbers {2,5,19} (api = emblaApi)}> ... ... ... ``` ## Events You can listen to events using the api instance from `bind:api`. ```svelte showLineNumbers {2,5,7-13,16} (api = emblaApi)}> ... ... ... ``` ## Plugins You can use the `plugins` prop to add plugins to the carousel. ```svelte showLineNumbers {2,7-11} ```
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 --- **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).
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/ {#snippet tooltip()} {/snippet} ``` 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 {#snippet cli()} {/snippet} {#snippet manual()} Install `layerchart`: Add the following colors to your CSS file ```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); } ``` Copy and paste the following code into your project. {/snippet} ## Your First Chart Let's build your first chart. We'll build a bar chart with an axis, grid, tooltip, and legend. ### Start by defining your data The following data represents the number of desktop and mobile users for each month. **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. ```svelte title="lib/components/example-chart.svelte" showLineNumbers ``` ### 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 ``` ### 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} {/if}
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. ### 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} d.slice(0, 3), }, }} /> ```
### 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`. ### 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} d.slice(0, 3), }, }} > {#snippet tooltip()} {/snippet} ```
### Add Legend ### 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} d.slice(0, 3), }, }} > {#snippet tooltip()} {/snippet} ```
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 ``` ## 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 ### 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 ``` ### hex, hsl or oklch You can also define your colors directly in the chart config. Use the color format you prefer. ```svelte showLineNumbers ``` ### Using Colors To use the theme colors in your chart, reference the colors using the format `var(--color-KEY)`. #### Components ```svelte ``` #### Chart Data ```ts showLineNumbers const chartData = [ { browser: "chrome", visitors: 275, color: "var(--color-chrome)" }, { browser: "safari", visitors: 200, color: "var(--color-safari)" }, ]; ``` #### Tailwind ```svelte