Copy disabled (too large)
Download .txt
Showing preview only (35,795K chars total). Download the full file to get everything.
Repository: shadcn-ui/ui
Branch: main
Commit: 5b40b9de5ad5
Files: 6754
Total size: 32.8 MB
Directory structure:
gitextract_4oo2mby8/
├── .changeset/
│ ├── README.md
│ └── config.json
├── .claude/
│ └── settings.local.json
├── .commitlintrc.json
├── .cursor/
│ └── rules/
│ └── registry-bases-parity.mdc
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .github/
│ ├── DISCUSSION_TEMPLATE/
│ │ └── blocks-request.yml
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.yml
│ │ ├── config.yml
│ │ └── feature_request.yml
│ ├── changeset-version.js
│ ├── dependabot.yml
│ ├── version-script-beta.js
│ ├── version-script-next.js
│ └── workflows/
│ ├── code-check.yml
│ ├── issue-stale.yml
│ ├── prerelease-comment.yml
│ ├── prerelease.yml
│ ├── release.yml
│ ├── test.yml
│ └── validate-registries.yml
├── .gitignore
├── .kodiak.toml
├── .npmrc
├── .nvmrc
├── .prettierignore
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── SECURITY.md
├── apps/
│ └── v4/
│ ├── .env.example
│ ├── .gitignore
│ ├── .prettierignore
│ ├── README.md
│ ├── app/
│ │ ├── (app)/
│ │ │ ├── (root)/
│ │ │ │ ├── components/
│ │ │ │ │ ├── appearance-settings.tsx
│ │ │ │ │ ├── button-group-demo.tsx
│ │ │ │ │ ├── button-group-input-group.tsx
│ │ │ │ │ ├── button-group-nested.tsx
│ │ │ │ │ ├── button-group-popover.tsx
│ │ │ │ │ ├── empty-avatar-group.tsx
│ │ │ │ │ ├── empty-input-group.tsx
│ │ │ │ │ ├── field-checkbox.tsx
│ │ │ │ │ ├── field-choice-card.tsx
│ │ │ │ │ ├── field-demo.tsx
│ │ │ │ │ ├── field-hear.tsx
│ │ │ │ │ ├── field-slider.tsx
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ ├── input-group-button.tsx
│ │ │ │ │ ├── input-group-demo.tsx
│ │ │ │ │ ├── input-group-textarea.tsx
│ │ │ │ │ ├── item-avatar.tsx
│ │ │ │ │ ├── item-demo.tsx
│ │ │ │ │ ├── notion-prompt-form.tsx
│ │ │ │ │ ├── spinner-badge.tsx
│ │ │ │ │ └── spinner-empty.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── blocks/
│ │ │ │ ├── [...categories]/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── charts/
│ │ │ │ ├── [type]/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── charts.tsx
│ │ │ │ └── layout.tsx
│ │ │ ├── colors/
│ │ │ │ ├── layout.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── docs/
│ │ │ │ ├── [[...slug]]/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── changelog/
│ │ │ │ │ └── page.tsx
│ │ │ │ └── layout.tsx
│ │ │ ├── examples/
│ │ │ │ ├── authentication/
│ │ │ │ │ ├── components/
│ │ │ │ │ │ └── user-auth-form.tsx
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── dashboard/
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── app-sidebar.tsx
│ │ │ │ │ │ ├── chart-area-interactive.tsx
│ │ │ │ │ │ ├── data-table.tsx
│ │ │ │ │ │ ├── nav-documents.tsx
│ │ │ │ │ │ ├── nav-main.tsx
│ │ │ │ │ │ ├── nav-secondary.tsx
│ │ │ │ │ │ ├── nav-user.tsx
│ │ │ │ │ │ ├── section-cards.tsx
│ │ │ │ │ │ └── site-header.tsx
│ │ │ │ │ ├── data.json
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ ├── playground/
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── code-viewer.tsx
│ │ │ │ │ │ ├── maxlength-selector.tsx
│ │ │ │ │ │ ├── model-selector.tsx
│ │ │ │ │ │ ├── preset-actions.tsx
│ │ │ │ │ │ ├── preset-save.tsx
│ │ │ │ │ │ ├── preset-selector.tsx
│ │ │ │ │ │ ├── preset-share.tsx
│ │ │ │ │ │ ├── temperature-selector.tsx
│ │ │ │ │ │ └── top-p-selector.tsx
│ │ │ │ │ ├── data/
│ │ │ │ │ │ ├── models.ts
│ │ │ │ │ │ └── presets.ts
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── rtl/
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── appearance-settings.tsx
│ │ │ │ │ │ ├── button-group-demo.tsx
│ │ │ │ │ │ ├── button-group-input-group.tsx
│ │ │ │ │ │ ├── button-group-nested.tsx
│ │ │ │ │ │ ├── button-group-popover.tsx
│ │ │ │ │ │ ├── empty-avatar-group.tsx
│ │ │ │ │ │ ├── field-checkbox.tsx
│ │ │ │ │ │ ├── field-demo.tsx
│ │ │ │ │ │ ├── field-hear.tsx
│ │ │ │ │ │ ├── field-slider.tsx
│ │ │ │ │ │ ├── index.tsx
│ │ │ │ │ │ ├── input-group-button.tsx
│ │ │ │ │ │ ├── input-group-demo.tsx
│ │ │ │ │ │ ├── item-demo.tsx
│ │ │ │ │ │ ├── notion-prompt-form.tsx
│ │ │ │ │ │ ├── spinner-badge.tsx
│ │ │ │ │ │ └── spinner-empty.tsx
│ │ │ │ │ └── page.tsx
│ │ │ │ └── tasks/
│ │ │ │ ├── components/
│ │ │ │ │ ├── columns.tsx
│ │ │ │ │ ├── data-table-column-header.tsx
│ │ │ │ │ ├── data-table-faceted-filter.tsx
│ │ │ │ │ ├── data-table-pagination.tsx
│ │ │ │ │ ├── data-table-row-actions.tsx
│ │ │ │ │ ├── data-table-toolbar.tsx
│ │ │ │ │ ├── data-table-view-options.tsx
│ │ │ │ │ ├── data-table.tsx
│ │ │ │ │ └── user-nav.tsx
│ │ │ │ ├── data/
│ │ │ │ │ ├── data.tsx
│ │ │ │ │ ├── schema.ts
│ │ │ │ │ ├── seed.ts
│ │ │ │ │ └── tasks.json
│ │ │ │ └── page.tsx
│ │ │ ├── layout.tsx
│ │ │ ├── llm/
│ │ │ │ └── [[...slug]]/
│ │ │ │ └── route.ts
│ │ │ └── themes/
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── (create)/
│ │ │ ├── components/
│ │ │ │ ├── accent-picker.tsx
│ │ │ │ ├── action-menu.tsx
│ │ │ │ ├── base-color-picker.tsx
│ │ │ │ ├── base-picker.tsx
│ │ │ │ ├── chart-color-picker.tsx
│ │ │ │ ├── copy-preset.tsx
│ │ │ │ ├── customizer.tsx
│ │ │ │ ├── design-system-provider.tsx
│ │ │ │ ├── font-picker.tsx
│ │ │ │ ├── history-buttons.tsx
│ │ │ │ ├── icon-library-picker.tsx
│ │ │ │ ├── icon-placeholder.tsx
│ │ │ │ ├── item-explorer.tsx
│ │ │ │ ├── lock-button.tsx
│ │ │ │ ├── main-menu.tsx
│ │ │ │ ├── menu-picker.tsx
│ │ │ │ ├── mode-switcher.tsx
│ │ │ │ ├── picker.tsx
│ │ │ │ ├── preset-handler.tsx
│ │ │ │ ├── preset-picker.tsx
│ │ │ │ ├── preview-style.tsx
│ │ │ │ ├── preview.tsx
│ │ │ │ ├── project-form.tsx
│ │ │ │ ├── radius-picker.tsx
│ │ │ │ ├── random-button.tsx
│ │ │ │ ├── reset-button.tsx
│ │ │ │ ├── share-button.tsx
│ │ │ │ ├── style-picker.tsx
│ │ │ │ ├── theme-picker.tsx
│ │ │ │ ├── v0-button.tsx
│ │ │ │ └── welcome-dialog.tsx
│ │ │ ├── create/
│ │ │ │ ├── layout.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── hooks/
│ │ │ │ ├── use-action-menu.ts
│ │ │ │ ├── use-design-system.ts
│ │ │ │ ├── use-history.tsx
│ │ │ │ ├── use-iframe-sync.tsx
│ │ │ │ ├── use-locks.tsx
│ │ │ │ ├── use-random.tsx
│ │ │ │ ├── use-reset.tsx
│ │ │ │ └── use-theme-toggle.tsx
│ │ │ ├── init/
│ │ │ │ ├── md/
│ │ │ │ │ ├── build-instructions.ts
│ │ │ │ │ └── route.ts
│ │ │ │ ├── parse-config.test.ts
│ │ │ │ ├── parse-config.ts
│ │ │ │ ├── route.ts
│ │ │ │ └── v0/
│ │ │ │ └── route.ts
│ │ │ ├── lib/
│ │ │ │ ├── api.ts
│ │ │ │ ├── constants.ts
│ │ │ │ ├── fonts.ts
│ │ │ │ ├── merge-theme.ts
│ │ │ │ ├── preset-code.ts
│ │ │ │ ├── preset-query.test.ts
│ │ │ │ ├── preset-query.ts
│ │ │ │ ├── randomize-biases.ts
│ │ │ │ ├── search-params.ts
│ │ │ │ ├── templates.ts
│ │ │ │ ├── utils.ts
│ │ │ │ ├── v0.test.ts
│ │ │ │ └── v0.ts
│ │ │ └── preview/
│ │ │ └── [base]/
│ │ │ └── [name]/
│ │ │ └── page.tsx
│ │ ├── (examples)/
│ │ │ ├── dashboard/
│ │ │ │ ├── components/
│ │ │ │ │ ├── app-sidebar.tsx
│ │ │ │ │ ├── chart-area-interactive.tsx
│ │ │ │ │ ├── data-table.tsx
│ │ │ │ │ ├── mode-toggle.tsx
│ │ │ │ │ ├── nav-documents.tsx
│ │ │ │ │ ├── nav-main.tsx
│ │ │ │ │ ├── nav-secondary.tsx
│ │ │ │ │ ├── nav-user.tsx
│ │ │ │ │ ├── section-cards.tsx
│ │ │ │ │ ├── site-header.tsx
│ │ │ │ │ └── theme-selector.tsx
│ │ │ │ ├── data.json
│ │ │ │ ├── layout.tsx
│ │ │ │ ├── page.tsx
│ │ │ │ └── theme.css
│ │ │ └── dashboard-03/
│ │ │ ├── components/
│ │ │ │ ├── analytics-date-picker.tsx
│ │ │ │ ├── app-sidebar.tsx
│ │ │ │ ├── chart-revenue.tsx
│ │ │ │ ├── chart-visitors.tsx
│ │ │ │ ├── mode-toggle.tsx
│ │ │ │ ├── nav-main.tsx
│ │ │ │ ├── nav-secondary.tsx
│ │ │ │ ├── nav-user.tsx
│ │ │ │ ├── products-table.tsx
│ │ │ │ ├── search-form.tsx
│ │ │ │ └── site-header.tsx
│ │ │ ├── customers/
│ │ │ │ └── page.tsx
│ │ │ ├── layout.tsx
│ │ │ ├── page.tsx
│ │ │ └── settings/
│ │ │ └── page.tsx
│ │ ├── (internal)/
│ │ │ └── sink/
│ │ │ ├── (pages)/
│ │ │ │ ├── forms/
│ │ │ │ │ ├── appearance-settings.tsx
│ │ │ │ │ ├── chat-settings.tsx
│ │ │ │ │ ├── display-settings.tsx
│ │ │ │ │ ├── notion-prompt-form.tsx
│ │ │ │ │ ├── page.tsx
│ │ │ │ │ ├── ship-registration-form.tsx
│ │ │ │ │ └── shipping-form.tsx
│ │ │ │ ├── next-form/
│ │ │ │ │ ├── actions.ts
│ │ │ │ │ ├── example-form.tsx
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── react-hook-form/
│ │ │ │ │ ├── example-form.tsx
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── schema.ts
│ │ │ │ └── tanstack-form/
│ │ │ │ ├── example-form.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── [name]/
│ │ │ │ └── page.tsx
│ │ │ ├── component-registry.ts
│ │ │ ├── components/
│ │ │ │ ├── accordion-demo.tsx
│ │ │ │ ├── alert-demo.tsx
│ │ │ │ ├── alert-dialog-demo.tsx
│ │ │ │ ├── app-breadcrumbs.tsx
│ │ │ │ ├── app-sidebar.tsx
│ │ │ │ ├── aspect-ratio-demo.tsx
│ │ │ │ ├── avatar-demo.tsx
│ │ │ │ ├── badge-demo.tsx
│ │ │ │ ├── breadcrumb-demo.tsx
│ │ │ │ ├── button-demo.tsx
│ │ │ │ ├── button-group-demo.tsx
│ │ │ │ ├── calendar-demo.tsx
│ │ │ │ ├── card-demo.tsx
│ │ │ │ ├── carousel-demo.tsx
│ │ │ │ ├── chart-area-demo.tsx
│ │ │ │ ├── chart-bar-demo.tsx
│ │ │ │ ├── chart-bar-mixed.tsx
│ │ │ │ ├── chart-demo.tsx
│ │ │ │ ├── chart-line-demo.tsx
│ │ │ │ ├── checkbox-demo.tsx
│ │ │ │ ├── collapsible-demo.tsx
│ │ │ │ ├── combobox-demo.tsx
│ │ │ │ ├── command-demo.tsx
│ │ │ │ ├── component-wrapper.tsx
│ │ │ │ ├── context-menu-demo.tsx
│ │ │ │ ├── date-picker-demo.tsx
│ │ │ │ ├── dialog-demo.tsx
│ │ │ │ ├── drawer-demo.tsx
│ │ │ │ ├── dropdown-menu-demo.tsx
│ │ │ │ ├── empty-demo.tsx
│ │ │ │ ├── field-demo.tsx
│ │ │ │ ├── form-demo.tsx
│ │ │ │ ├── hover-card-demo.tsx
│ │ │ │ ├── input-demo.tsx
│ │ │ │ ├── input-group-demo.tsx
│ │ │ │ ├── input-otp-demo.tsx
│ │ │ │ ├── item-demo.tsx
│ │ │ │ ├── kbd-demo.tsx
│ │ │ │ ├── label-demo.tsx
│ │ │ │ ├── menubar-demo.tsx
│ │ │ │ ├── native-select-demo.tsx
│ │ │ │ ├── navigation-menu-demo.tsx
│ │ │ │ ├── pagination-demo.tsx
│ │ │ │ ├── popover-demo.tsx
│ │ │ │ ├── progress-demo.tsx
│ │ │ │ ├── radio-group-demo.tsx
│ │ │ │ ├── resizable-demo.tsx
│ │ │ │ ├── scroll-area-demo.tsx
│ │ │ │ ├── select-demo.tsx
│ │ │ │ ├── separator-demo.tsx
│ │ │ │ ├── sheet-demo.tsx
│ │ │ │ ├── skeleton-demo.tsx
│ │ │ │ ├── slider-demo.tsx
│ │ │ │ ├── sonner-demo.tsx
│ │ │ │ ├── spinner-demo.tsx
│ │ │ │ ├── switch-demo.tsx
│ │ │ │ ├── table-demo.tsx
│ │ │ │ ├── tabs-demo.tsx
│ │ │ │ ├── textarea-demo.tsx
│ │ │ │ ├── theme-selector.tsx
│ │ │ │ ├── toggle-demo.tsx
│ │ │ │ ├── toggle-group-demo.tsx
│ │ │ │ └── tooltip-demo.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── (view)/
│ │ │ └── view/
│ │ │ └── [style]/
│ │ │ └── [name]/
│ │ │ ├── component-preview.tsx
│ │ │ └── page.tsx
│ │ ├── api/
│ │ │ └── search/
│ │ │ └── route.ts
│ │ ├── layout.tsx
│ │ ├── og/
│ │ │ ├── geist-regular-otf.json
│ │ │ ├── geist-semibold-otf.json
│ │ │ ├── geistmono-regular-otf.json
│ │ │ └── route.tsx
│ │ └── rss.xml/
│ │ └── route.ts
│ ├── components/
│ │ ├── active-theme.tsx
│ │ ├── analytics.tsx
│ │ ├── announcement.tsx
│ │ ├── block-display.tsx
│ │ ├── block-image.tsx
│ │ ├── block-viewer.tsx
│ │ ├── blocks-nav.tsx
│ │ ├── callout.tsx
│ │ ├── cards/
│ │ │ ├── activity-goal.tsx
│ │ │ ├── calendar.tsx
│ │ │ ├── chat.tsx
│ │ │ ├── cookie-settings.tsx
│ │ │ ├── create-account.tsx
│ │ │ ├── exercise-minutes.tsx
│ │ │ ├── forms.tsx
│ │ │ ├── index.tsx
│ │ │ ├── payment-method.tsx
│ │ │ ├── payments.tsx
│ │ │ ├── report-issue.tsx
│ │ │ ├── share.tsx
│ │ │ ├── stats.tsx
│ │ │ └── team-members.tsx
│ │ ├── chart-code-viewer.tsx
│ │ ├── chart-copy-button.tsx
│ │ ├── chart-display.tsx
│ │ ├── chart-iframe.tsx
│ │ ├── chart-toolbar.tsx
│ │ ├── charts-nav.tsx
│ │ ├── code-block-command.tsx
│ │ ├── code-collapsible-wrapper.tsx
│ │ ├── code-tabs.tsx
│ │ ├── color-format-selector.tsx
│ │ ├── color-palette.tsx
│ │ ├── color.tsx
│ │ ├── colors-nav.tsx
│ │ ├── command-menu.tsx
│ │ ├── component-preview-tabs.tsx
│ │ ├── component-preview.tsx
│ │ ├── component-source.tsx
│ │ ├── component-wrapper.tsx
│ │ ├── components-list.tsx
│ │ ├── copy-button.tsx
│ │ ├── directory-add-button.tsx
│ │ ├── directory-list.tsx
│ │ ├── docs-base-switcher.tsx
│ │ ├── docs-breadcrumb.tsx
│ │ ├── docs-copy-page.tsx
│ │ ├── docs-page-links.tsx
│ │ ├── docs-sidebar.tsx
│ │ ├── docs-toc.tsx
│ │ ├── examples-nav.tsx
│ │ ├── github-link.tsx
│ │ ├── icons.tsx
│ │ ├── language-selector.tsx
│ │ ├── lo-fi/
│ │ │ ├── accordion.tsx
│ │ │ ├── alert.tsx
│ │ │ ├── atom.tsx
│ │ │ ├── component.tsx
│ │ │ └── index.tsx
│ │ ├── main-nav.tsx
│ │ ├── mobile-nav.tsx
│ │ ├── mode-switcher.tsx
│ │ ├── nav-header.tsx
│ │ ├── nav-user.tsx
│ │ ├── open-in-v0-button.tsx
│ │ ├── open-in-v0-cta.tsx
│ │ ├── page-header.tsx
│ │ ├── page-nav.tsx
│ │ ├── search-directory.tsx
│ │ ├── site-config.tsx
│ │ ├── site-footer.tsx
│ │ ├── site-header.tsx
│ │ ├── tailwind-indicator.tsx
│ │ ├── theme-customizer.tsx
│ │ ├── theme-provider.tsx
│ │ └── theme-selector.tsx
│ ├── components.json
│ ├── content/
│ │ └── docs/
│ │ ├── (root)/
│ │ │ ├── _blocks.mdx
│ │ │ ├── cli.mdx
│ │ │ ├── components-json.mdx
│ │ │ ├── directory.mdx
│ │ │ ├── figma.mdx
│ │ │ ├── index.mdx
│ │ │ ├── javascript.mdx
│ │ │ ├── legacy.mdx
│ │ │ ├── mcp.mdx
│ │ │ ├── meta.json
│ │ │ ├── monorepo.mdx
│ │ │ ├── new.mdx
│ │ │ ├── react-19.mdx
│ │ │ ├── skills.mdx
│ │ │ ├── tailwind-v4.mdx
│ │ │ ├── theming.mdx
│ │ │ └── v0.mdx
│ │ ├── changelog/
│ │ │ ├── 2023-06-new-cli.mdx
│ │ │ ├── 2023-07-javascript.mdx
│ │ │ ├── 2023-12-new-components.mdx
│ │ │ ├── 2024-03-blocks.mdx
│ │ │ ├── 2024-03-breadcrumb-otp.mdx
│ │ │ ├── 2024-04-lift-mode.mdx
│ │ │ ├── 2024-08-npx-shadcn-init.mdx
│ │ │ ├── 2024-10-react-19.mdx
│ │ │ ├── 2024-10-sidebar.mdx
│ │ │ ├── 2024-11-icons.mdx
│ │ │ ├── 2024-12-monorepo.mdx
│ │ │ ├── 2025-01-blocks.mdx
│ │ │ ├── 2025-02-registry-schema.mdx
│ │ │ ├── 2025-02-tailwind-v4.mdx
│ │ │ ├── 2025-04-cross-framework.mdx
│ │ │ ├── 2025-04-mcp.mdx
│ │ │ ├── 2025-04-shadcn-2-5.mdx
│ │ │ ├── 2025-05-new-site.mdx
│ │ │ ├── 2025-06-calendar.mdx
│ │ │ ├── 2025-06-radix-ui.mdx
│ │ │ ├── 2025-07-local-file-support.mdx
│ │ │ ├── 2025-07-universal-registry.mdx
│ │ │ ├── 2025-08-cli-3-mcp.mdx
│ │ │ ├── 2025-09-registry-index.mdx
│ │ │ ├── 2025-10-new-components.mdx
│ │ │ ├── 2025-10-registry-directory.mdx
│ │ │ ├── 2025-12-shadcn-create.mdx
│ │ │ ├── 2026-01-base-ui.mdx
│ │ │ ├── 2026-01-inline-side-styles.mdx
│ │ │ ├── 2026-01-rtl.mdx
│ │ │ ├── 2026-02-blocks.mdx
│ │ │ ├── 2026-02-radix-ui.mdx
│ │ │ ├── 2026-03-cli-v4.mdx
│ │ │ ├── index.mdx
│ │ │ └── meta.json
│ │ ├── components/
│ │ │ ├── base/
│ │ │ │ ├── accordion.mdx
│ │ │ │ ├── alert-dialog.mdx
│ │ │ │ ├── alert.mdx
│ │ │ │ ├── aspect-ratio.mdx
│ │ │ │ ├── avatar.mdx
│ │ │ │ ├── badge.mdx
│ │ │ │ ├── breadcrumb.mdx
│ │ │ │ ├── button-group.mdx
│ │ │ │ ├── button.mdx
│ │ │ │ ├── calendar.mdx
│ │ │ │ ├── card.mdx
│ │ │ │ ├── carousel.mdx
│ │ │ │ ├── chart.mdx
│ │ │ │ ├── checkbox.mdx
│ │ │ │ ├── collapsible.mdx
│ │ │ │ ├── combobox.mdx
│ │ │ │ ├── command.mdx
│ │ │ │ ├── context-menu.mdx
│ │ │ │ ├── data-table.mdx
│ │ │ │ ├── date-picker.mdx
│ │ │ │ ├── dialog.mdx
│ │ │ │ ├── direction.mdx
│ │ │ │ ├── drawer.mdx
│ │ │ │ ├── dropdown-menu.mdx
│ │ │ │ ├── empty.mdx
│ │ │ │ ├── field.mdx
│ │ │ │ ├── hover-card.mdx
│ │ │ │ ├── input-group.mdx
│ │ │ │ ├── input-otp.mdx
│ │ │ │ ├── input.mdx
│ │ │ │ ├── item.mdx
│ │ │ │ ├── kbd.mdx
│ │ │ │ ├── label.mdx
│ │ │ │ ├── menubar.mdx
│ │ │ │ ├── meta.json
│ │ │ │ ├── native-select.mdx
│ │ │ │ ├── navigation-menu.mdx
│ │ │ │ ├── pagination.mdx
│ │ │ │ ├── popover.mdx
│ │ │ │ ├── progress.mdx
│ │ │ │ ├── radio-group.mdx
│ │ │ │ ├── resizable.mdx
│ │ │ │ ├── scroll-area.mdx
│ │ │ │ ├── select.mdx
│ │ │ │ ├── separator.mdx
│ │ │ │ ├── sheet.mdx
│ │ │ │ ├── sidebar.mdx
│ │ │ │ ├── skeleton.mdx
│ │ │ │ ├── slider.mdx
│ │ │ │ ├── sonner.mdx
│ │ │ │ ├── spinner.mdx
│ │ │ │ ├── switch.mdx
│ │ │ │ ├── table.mdx
│ │ │ │ ├── tabs.mdx
│ │ │ │ ├── textarea.mdx
│ │ │ │ ├── toast.mdx
│ │ │ │ ├── toggle-group.mdx
│ │ │ │ ├── toggle.mdx
│ │ │ │ ├── tooltip.mdx
│ │ │ │ └── typography.mdx
│ │ │ ├── index.mdx
│ │ │ ├── meta.json
│ │ │ └── radix/
│ │ │ ├── accordion.mdx
│ │ │ ├── alert-dialog.mdx
│ │ │ ├── alert.mdx
│ │ │ ├── aspect-ratio.mdx
│ │ │ ├── avatar.mdx
│ │ │ ├── badge.mdx
│ │ │ ├── breadcrumb.mdx
│ │ │ ├── button-group.mdx
│ │ │ ├── button.mdx
│ │ │ ├── calendar.mdx
│ │ │ ├── card.mdx
│ │ │ ├── carousel.mdx
│ │ │ ├── chart.mdx
│ │ │ ├── checkbox.mdx
│ │ │ ├── collapsible.mdx
│ │ │ ├── combobox.mdx
│ │ │ ├── command.mdx
│ │ │ ├── context-menu.mdx
│ │ │ ├── data-table.mdx
│ │ │ ├── date-picker.mdx
│ │ │ ├── dialog.mdx
│ │ │ ├── direction.mdx
│ │ │ ├── drawer.mdx
│ │ │ ├── dropdown-menu.mdx
│ │ │ ├── empty.mdx
│ │ │ ├── field.mdx
│ │ │ ├── hover-card.mdx
│ │ │ ├── input-group.mdx
│ │ │ ├── input-otp.mdx
│ │ │ ├── input.mdx
│ │ │ ├── item.mdx
│ │ │ ├── kbd.mdx
│ │ │ ├── label.mdx
│ │ │ ├── menubar.mdx
│ │ │ ├── meta.json
│ │ │ ├── native-select.mdx
│ │ │ ├── navigation-menu.mdx
│ │ │ ├── pagination.mdx
│ │ │ ├── popover.mdx
│ │ │ ├── progress.mdx
│ │ │ ├── radio-group.mdx
│ │ │ ├── resizable.mdx
│ │ │ ├── scroll-area.mdx
│ │ │ ├── select.mdx
│ │ │ ├── separator.mdx
│ │ │ ├── sheet.mdx
│ │ │ ├── sidebar.mdx
│ │ │ ├── skeleton.mdx
│ │ │ ├── slider.mdx
│ │ │ ├── sonner.mdx
│ │ │ ├── spinner.mdx
│ │ │ ├── switch.mdx
│ │ │ ├── table.mdx
│ │ │ ├── tabs.mdx
│ │ │ ├── textarea.mdx
│ │ │ ├── toast.mdx
│ │ │ ├── toggle-group.mdx
│ │ │ ├── toggle.mdx
│ │ │ ├── tooltip.mdx
│ │ │ └── typography.mdx
│ │ ├── dark-mode/
│ │ │ ├── astro.mdx
│ │ │ ├── index.mdx
│ │ │ ├── meta.json
│ │ │ ├── next.mdx
│ │ │ ├── remix.mdx
│ │ │ └── vite.mdx
│ │ ├── forms/
│ │ │ ├── index.mdx
│ │ │ ├── meta.json
│ │ │ ├── next.mdx
│ │ │ ├── react-hook-form.mdx
│ │ │ └── tanstack-form.mdx
│ │ ├── installation/
│ │ │ ├── astro.mdx
│ │ │ ├── gatsby.mdx
│ │ │ ├── index.mdx
│ │ │ ├── laravel.mdx
│ │ │ ├── manual.mdx
│ │ │ ├── meta.json
│ │ │ ├── next.mdx
│ │ │ ├── react-router.mdx
│ │ │ ├── remix.mdx
│ │ │ ├── tanstack-router.mdx
│ │ │ ├── tanstack.mdx
│ │ │ └── vite.mdx
│ │ ├── meta.json
│ │ ├── registry/
│ │ │ ├── authentication.mdx
│ │ │ ├── examples.mdx
│ │ │ ├── faq.mdx
│ │ │ ├── getting-started.mdx
│ │ │ ├── index.mdx
│ │ │ ├── mcp.mdx
│ │ │ ├── meta.json
│ │ │ ├── namespace.mdx
│ │ │ ├── open-in-v0.mdx
│ │ │ ├── registry-index.mdx
│ │ │ ├── registry-item-json.mdx
│ │ │ └── registry-json.mdx
│ │ └── rtl/
│ │ ├── index.mdx
│ │ ├── meta.json
│ │ ├── next.mdx
│ │ ├── start.mdx
│ │ └── vite.mdx
│ ├── eslint.config.mjs
│ ├── examples/
│ │ ├── README.md
│ │ ├── __index__.tsx
│ │ ├── base/
│ │ │ ├── accordion-basic.tsx
│ │ │ ├── accordion-borders.tsx
│ │ │ ├── accordion-card.tsx
│ │ │ ├── accordion-demo.tsx
│ │ │ ├── accordion-disabled.tsx
│ │ │ ├── accordion-multiple.tsx
│ │ │ ├── accordion-rtl.tsx
│ │ │ ├── alert-action.tsx
│ │ │ ├── alert-basic.tsx
│ │ │ ├── alert-colors.tsx
│ │ │ ├── alert-demo.tsx
│ │ │ ├── alert-destructive.tsx
│ │ │ ├── alert-dialog-basic.tsx
│ │ │ ├── alert-dialog-demo.tsx
│ │ │ ├── alert-dialog-destructive.tsx
│ │ │ ├── alert-dialog-media.tsx
│ │ │ ├── alert-dialog-rtl.tsx
│ │ │ ├── alert-dialog-small-media.tsx
│ │ │ ├── alert-dialog-small.tsx
│ │ │ ├── alert-rtl.tsx
│ │ │ ├── aspect-ratio-demo.tsx
│ │ │ ├── aspect-ratio-portrait.tsx
│ │ │ ├── aspect-ratio-rtl.tsx
│ │ │ ├── aspect-ratio-square.tsx
│ │ │ ├── avatar-badge-icon.tsx
│ │ │ ├── avatar-badge.tsx
│ │ │ ├── avatar-basic.tsx
│ │ │ ├── avatar-demo.tsx
│ │ │ ├── avatar-dropdown.tsx
│ │ │ ├── avatar-group-count-icon.tsx
│ │ │ ├── avatar-group-count.tsx
│ │ │ ├── avatar-group.tsx
│ │ │ ├── avatar-rtl.tsx
│ │ │ ├── avatar-size.tsx
│ │ │ ├── badge-colors.tsx
│ │ │ ├── badge-demo.tsx
│ │ │ ├── badge-icon.tsx
│ │ │ ├── badge-link.tsx
│ │ │ ├── badge-rtl.tsx
│ │ │ ├── badge-spinner.tsx
│ │ │ ├── badge-variants.tsx
│ │ │ ├── breadcrumb-basic.tsx
│ │ │ ├── breadcrumb-demo.tsx
│ │ │ ├── breadcrumb-dropdown.tsx
│ │ │ ├── breadcrumb-ellipsis.tsx
│ │ │ ├── breadcrumb-link.tsx
│ │ │ ├── breadcrumb-rtl.tsx
│ │ │ ├── breadcrumb-separator.tsx
│ │ │ ├── button-default.tsx
│ │ │ ├── button-demo.tsx
│ │ │ ├── button-destructive.tsx
│ │ │ ├── button-ghost.tsx
│ │ │ ├── button-group-demo.tsx
│ │ │ ├── button-group-dropdown.tsx
│ │ │ ├── button-group-input-group.tsx
│ │ │ ├── button-group-input.tsx
│ │ │ ├── button-group-nested.tsx
│ │ │ ├── button-group-orientation.tsx
│ │ │ ├── button-group-popover.tsx
│ │ │ ├── button-group-rtl.tsx
│ │ │ ├── button-group-select.tsx
│ │ │ ├── button-group-separator.tsx
│ │ │ ├── button-group-size.tsx
│ │ │ ├── button-group-split.tsx
│ │ │ ├── button-icon.tsx
│ │ │ ├── button-link.tsx
│ │ │ ├── button-outline.tsx
│ │ │ ├── button-render.tsx
│ │ │ ├── button-rounded.tsx
│ │ │ ├── button-rtl.tsx
│ │ │ ├── button-secondary.tsx
│ │ │ ├── button-size.tsx
│ │ │ ├── button-spinner.tsx
│ │ │ ├── button-with-icon.tsx
│ │ │ ├── calendar-basic.tsx
│ │ │ ├── calendar-booked-dates.tsx
│ │ │ ├── calendar-caption.tsx
│ │ │ ├── calendar-custom-days.tsx
│ │ │ ├── calendar-demo.tsx
│ │ │ ├── calendar-hijri.tsx
│ │ │ ├── calendar-multiple.tsx
│ │ │ ├── calendar-presets.tsx
│ │ │ ├── calendar-range.tsx
│ │ │ ├── calendar-rtl.tsx
│ │ │ ├── calendar-time.tsx
│ │ │ ├── calendar-week-numbers.tsx
│ │ │ ├── card-demo.tsx
│ │ │ ├── card-image.tsx
│ │ │ ├── card-rtl.tsx
│ │ │ ├── card-small.tsx
│ │ │ ├── carousel-api.tsx
│ │ │ ├── carousel-demo.tsx
│ │ │ ├── carousel-multiple.tsx
│ │ │ ├── carousel-orientation.tsx
│ │ │ ├── carousel-plugin.tsx
│ │ │ ├── carousel-rtl.tsx
│ │ │ ├── carousel-size.tsx
│ │ │ ├── carousel-spacing.tsx
│ │ │ ├── chart-demo.tsx
│ │ │ ├── chart-example-axis.tsx
│ │ │ ├── chart-example-grid.tsx
│ │ │ ├── chart-example-legend.tsx
│ │ │ ├── chart-example-tooltip.tsx
│ │ │ ├── chart-example.tsx
│ │ │ ├── chart-rtl.tsx
│ │ │ ├── chart-tooltip.tsx
│ │ │ ├── checkbox-basic.tsx
│ │ │ ├── checkbox-demo.tsx
│ │ │ ├── checkbox-description.tsx
│ │ │ ├── checkbox-disabled.tsx
│ │ │ ├── checkbox-group.tsx
│ │ │ ├── checkbox-invalid.tsx
│ │ │ ├── checkbox-rtl.tsx
│ │ │ ├── checkbox-table.tsx
│ │ │ ├── collapsible-basic.tsx
│ │ │ ├── collapsible-demo.tsx
│ │ │ ├── collapsible-file-tree.tsx
│ │ │ ├── collapsible-rtl.tsx
│ │ │ ├── collapsible-settings.tsx
│ │ │ ├── combobox-auto-highlight.tsx
│ │ │ ├── combobox-basic.tsx
│ │ │ ├── combobox-clear.tsx
│ │ │ ├── combobox-custom.tsx
│ │ │ ├── combobox-demo.tsx
│ │ │ ├── combobox-disabled.tsx
│ │ │ ├── combobox-groups.tsx
│ │ │ ├── combobox-input-group.tsx
│ │ │ ├── combobox-invalid.tsx
│ │ │ ├── combobox-multiple.tsx
│ │ │ ├── combobox-popup.tsx
│ │ │ ├── combobox-rtl.tsx
│ │ │ ├── command-basic.tsx
│ │ │ ├── command-demo.tsx
│ │ │ ├── command-dialog.tsx
│ │ │ ├── command-groups.tsx
│ │ │ ├── command-rtl.tsx
│ │ │ ├── command-scrollable.tsx
│ │ │ ├── command-shortcuts.tsx
│ │ │ ├── context-menu-basic.tsx
│ │ │ ├── context-menu-checkboxes.tsx
│ │ │ ├── context-menu-demo.tsx
│ │ │ ├── context-menu-destructive.tsx
│ │ │ ├── context-menu-groups.tsx
│ │ │ ├── context-menu-icons.tsx
│ │ │ ├── context-menu-radio.tsx
│ │ │ ├── context-menu-rtl.tsx
│ │ │ ├── context-menu-shortcuts.tsx
│ │ │ ├── context-menu-sides.tsx
│ │ │ ├── context-menu-submenu.tsx
│ │ │ ├── data-picker-with-dropdowns.tsx
│ │ │ ├── data-table-demo.tsx
│ │ │ ├── data-table-rtl.tsx
│ │ │ ├── date-picker-basic.tsx
│ │ │ ├── date-picker-demo.tsx
│ │ │ ├── date-picker-dob.tsx
│ │ │ ├── date-picker-input.tsx
│ │ │ ├── date-picker-natural-language.tsx
│ │ │ ├── date-picker-range.tsx
│ │ │ ├── date-picker-rtl.tsx
│ │ │ ├── date-picker-time.tsx
│ │ │ ├── dialog-close-button.tsx
│ │ │ ├── dialog-demo.tsx
│ │ │ ├── dialog-no-close-button.tsx
│ │ │ ├── dialog-rtl.tsx
│ │ │ ├── dialog-scrollable-content.tsx
│ │ │ ├── dialog-sticky-footer.tsx
│ │ │ ├── drawer-demo.tsx
│ │ │ ├── drawer-dialog.tsx
│ │ │ ├── drawer-rtl.tsx
│ │ │ ├── drawer-scrollable-content.tsx
│ │ │ ├── drawer-sides.tsx
│ │ │ ├── dropdown-menu-avatar.tsx
│ │ │ ├── dropdown-menu-basic.tsx
│ │ │ ├── dropdown-menu-checkboxes-icons.tsx
│ │ │ ├── dropdown-menu-checkboxes.tsx
│ │ │ ├── dropdown-menu-complex.tsx
│ │ │ ├── dropdown-menu-demo.tsx
│ │ │ ├── dropdown-menu-destructive.tsx
│ │ │ ├── dropdown-menu-icons.tsx
│ │ │ ├── dropdown-menu-radio-group.tsx
│ │ │ ├── dropdown-menu-radio-icons.tsx
│ │ │ ├── dropdown-menu-rtl.tsx
│ │ │ ├── dropdown-menu-shortcuts.tsx
│ │ │ ├── dropdown-menu-submenu.tsx
│ │ │ ├── empty-avatar-group.tsx
│ │ │ ├── empty-avatar.tsx
│ │ │ ├── empty-background.tsx
│ │ │ ├── empty-card.tsx
│ │ │ ├── empty-demo.tsx
│ │ │ ├── empty-input-group.tsx
│ │ │ ├── empty-outline.tsx
│ │ │ ├── empty-rtl.tsx
│ │ │ ├── field-checkbox.tsx
│ │ │ ├── field-choice-card.tsx
│ │ │ ├── field-demo.tsx
│ │ │ ├── field-fieldset.tsx
│ │ │ ├── field-group.tsx
│ │ │ ├── field-input.tsx
│ │ │ ├── field-radio.tsx
│ │ │ ├── field-responsive.tsx
│ │ │ ├── field-rtl.tsx
│ │ │ ├── field-select.tsx
│ │ │ ├── field-slider.tsx
│ │ │ ├── field-switch.tsx
│ │ │ ├── field-textarea.tsx
│ │ │ ├── file-upload-list.tsx
│ │ │ ├── hooks/
│ │ │ │ └── use-mobile.ts
│ │ │ ├── hover-card-demo.tsx
│ │ │ ├── hover-card-rtl.tsx
│ │ │ ├── hover-card-sides.tsx
│ │ │ ├── input-badge.tsx
│ │ │ ├── input-basic.tsx
│ │ │ ├── input-button-group.tsx
│ │ │ ├── input-demo.tsx
│ │ │ ├── input-disabled.tsx
│ │ │ ├── input-field.tsx
│ │ │ ├── input-fieldgroup.tsx
│ │ │ ├── input-file.tsx
│ │ │ ├── input-form.tsx
│ │ │ ├── input-grid.tsx
│ │ │ ├── input-group-basic.tsx
│ │ │ ├── input-group-block-end.tsx
│ │ │ ├── input-group-block-start.tsx
│ │ │ ├── input-group-button-group.tsx
│ │ │ ├── input-group-button.tsx
│ │ │ ├── input-group-custom.tsx
│ │ │ ├── input-group-demo.tsx
│ │ │ ├── input-group-dropdown.tsx
│ │ │ ├── input-group-icon.tsx
│ │ │ ├── input-group-in-card.tsx
│ │ │ ├── input-group-inline-end.tsx
│ │ │ ├── input-group-inline-start.tsx
│ │ │ ├── input-group-kbd.tsx
│ │ │ ├── input-group-label.tsx
│ │ │ ├── input-group-rtl.tsx
│ │ │ ├── input-group-spinner.tsx
│ │ │ ├── input-group-text.tsx
│ │ │ ├── input-group-textarea-examples.tsx
│ │ │ ├── input-group-textarea.tsx
│ │ │ ├── input-group-tooltip.tsx
│ │ │ ├── input-group-with-addons.tsx
│ │ │ ├── input-group-with-buttons.tsx
│ │ │ ├── input-group-with-kbd.tsx
│ │ │ ├── input-group-with-tooltip.tsx
│ │ │ ├── input-inline.tsx
│ │ │ ├── input-input-group.tsx
│ │ │ ├── input-invalid.tsx
│ │ │ ├── input-otp-alphanumeric.tsx
│ │ │ ├── input-otp-controlled.tsx
│ │ │ ├── input-otp-demo.tsx
│ │ │ ├── input-otp-disabled.tsx
│ │ │ ├── input-otp-form.tsx
│ │ │ ├── input-otp-four-digits.tsx
│ │ │ ├── input-otp-invalid.tsx
│ │ │ ├── input-otp-pattern.tsx
│ │ │ ├── input-otp-rtl.tsx
│ │ │ ├── input-otp-separator.tsx
│ │ │ ├── input-required.tsx
│ │ │ ├── input-rtl.tsx
│ │ │ ├── item-avatar.tsx
│ │ │ ├── item-demo.tsx
│ │ │ ├── item-dropdown.tsx
│ │ │ ├── item-group.tsx
│ │ │ ├── item-header.tsx
│ │ │ ├── item-icon.tsx
│ │ │ ├── item-image.tsx
│ │ │ ├── item-link.tsx
│ │ │ ├── item-rtl.tsx
│ │ │ ├── item-size.tsx
│ │ │ ├── item-variant.tsx
│ │ │ ├── kbd-button.tsx
│ │ │ ├── kbd-demo.tsx
│ │ │ ├── kbd-group.tsx
│ │ │ ├── kbd-input-group.tsx
│ │ │ ├── kbd-rtl.tsx
│ │ │ ├── kbd-tooltip.tsx
│ │ │ ├── label-demo.tsx
│ │ │ ├── label-rtl.tsx
│ │ │ ├── lib/
│ │ │ │ └── utils.ts
│ │ │ ├── menubar-checkbox.tsx
│ │ │ ├── menubar-demo.tsx
│ │ │ ├── menubar-icons.tsx
│ │ │ ├── menubar-radio.tsx
│ │ │ ├── menubar-rtl.tsx
│ │ │ ├── menubar-submenu.tsx
│ │ │ ├── muted-item-group.tsx
│ │ │ ├── native-select-demo.tsx
│ │ │ ├── native-select-disabled.tsx
│ │ │ ├── native-select-groups.tsx
│ │ │ ├── native-select-invalid.tsx
│ │ │ ├── native-select-rtl.tsx
│ │ │ ├── navigation-menu-demo.tsx
│ │ │ ├── navigation-menu-rtl.tsx
│ │ │ ├── outline-item-group.tsx
│ │ │ ├── pagination-demo.tsx
│ │ │ ├── pagination-icons-only.tsx
│ │ │ ├── pagination-rtl.tsx
│ │ │ ├── pagination-simple.tsx
│ │ │ ├── popover-alignments.tsx
│ │ │ ├── popover-basic.tsx
│ │ │ ├── popover-demo.tsx
│ │ │ ├── popover-form.tsx
│ │ │ ├── popover-rtl.tsx
│ │ │ ├── progress-controlled.tsx
│ │ │ ├── progress-demo.tsx
│ │ │ ├── progress-label.tsx
│ │ │ ├── progress-rtl.tsx
│ │ │ ├── radio-fields.tsx
│ │ │ ├── radio-group-choice-card.tsx
│ │ │ ├── radio-group-demo.tsx
│ │ │ ├── radio-group-description.tsx
│ │ │ ├── radio-group-disabled.tsx
│ │ │ ├── radio-group-fieldset.tsx
│ │ │ ├── radio-group-invalid.tsx
│ │ │ ├── radio-group-rtl.tsx
│ │ │ ├── resizable-demo.tsx
│ │ │ ├── resizable-handle.tsx
│ │ │ ├── resizable-rtl.tsx
│ │ │ ├── resizable-vertical.tsx
│ │ │ ├── scroll-area-demo.tsx
│ │ │ ├── scroll-area-horizontal-demo.tsx
│ │ │ ├── scroll-area-rtl.tsx
│ │ │ ├── select-align-item.tsx
│ │ │ ├── select-demo.tsx
│ │ │ ├── select-disabled.tsx
│ │ │ ├── select-groups.tsx
│ │ │ ├── select-invalid.tsx
│ │ │ ├── select-rtl.tsx
│ │ │ ├── select-scrollable.tsx
│ │ │ ├── separator-demo.tsx
│ │ │ ├── separator-list.tsx
│ │ │ ├── separator-menu.tsx
│ │ │ ├── separator-rtl.tsx
│ │ │ ├── separator-vertical.tsx
│ │ │ ├── sheet-demo.tsx
│ │ │ ├── sheet-no-close-button.tsx
│ │ │ ├── sheet-rtl.tsx
│ │ │ ├── sheet-side.tsx
│ │ │ ├── sidebar-controlled.tsx
│ │ │ ├── sidebar-demo.tsx
│ │ │ ├── sidebar-footer.tsx
│ │ │ ├── sidebar-group-action.tsx
│ │ │ ├── sidebar-group-collapsible.tsx
│ │ │ ├── sidebar-group.tsx
│ │ │ ├── sidebar-header.tsx
│ │ │ ├── sidebar-menu-action.tsx
│ │ │ ├── sidebar-menu-badge.tsx
│ │ │ ├── sidebar-menu-collapsible.tsx
│ │ │ ├── sidebar-menu-sub.tsx
│ │ │ ├── sidebar-menu.tsx
│ │ │ ├── sidebar-rsc.tsx
│ │ │ ├── sidebar-rtl.tsx
│ │ │ ├── skeleton-avatar.tsx
│ │ │ ├── skeleton-card.tsx
│ │ │ ├── skeleton-demo.tsx
│ │ │ ├── skeleton-form.tsx
│ │ │ ├── skeleton-rtl.tsx
│ │ │ ├── skeleton-table.tsx
│ │ │ ├── skeleton-text.tsx
│ │ │ ├── slider-controlled.tsx
│ │ │ ├── slider-demo.tsx
│ │ │ ├── slider-disabled.tsx
│ │ │ ├── slider-multiple.tsx
│ │ │ ├── slider-range.tsx
│ │ │ ├── slider-rtl.tsx
│ │ │ ├── slider-vertical.tsx
│ │ │ ├── sonner-demo.tsx
│ │ │ ├── sonner-description.tsx
│ │ │ ├── sonner-position.tsx
│ │ │ ├── sonner-types.tsx
│ │ │ ├── spinner-badge.tsx
│ │ │ ├── spinner-button.tsx
│ │ │ ├── spinner-custom.tsx
│ │ │ ├── spinner-demo.tsx
│ │ │ ├── spinner-empty.tsx
│ │ │ ├── spinner-input-group.tsx
│ │ │ ├── spinner-rtl.tsx
│ │ │ ├── spinner-size.tsx
│ │ │ ├── switch-choice-card.tsx
│ │ │ ├── switch-demo.tsx
│ │ │ ├── switch-description.tsx
│ │ │ ├── switch-disabled.tsx
│ │ │ ├── switch-invalid.tsx
│ │ │ ├── switch-rtl.tsx
│ │ │ ├── switch-sizes.tsx
│ │ │ ├── table-actions.tsx
│ │ │ ├── table-demo.tsx
│ │ │ ├── table-footer.tsx
│ │ │ ├── table-rtl.tsx
│ │ │ ├── tabs-demo.tsx
│ │ │ ├── tabs-disabled.tsx
│ │ │ ├── tabs-icons.tsx
│ │ │ ├── tabs-line.tsx
│ │ │ ├── tabs-rtl.tsx
│ │ │ ├── tabs-vertical.tsx
│ │ │ ├── textarea-button.tsx
│ │ │ ├── textarea-demo.tsx
│ │ │ ├── textarea-disabled.tsx
│ │ │ ├── textarea-field.tsx
│ │ │ ├── textarea-invalid.tsx
│ │ │ ├── textarea-rtl.tsx
│ │ │ ├── toggle-demo.tsx
│ │ │ ├── toggle-disabled.tsx
│ │ │ ├── toggle-group-demo.tsx
│ │ │ ├── toggle-group-disabled.tsx
│ │ │ ├── toggle-group-font-weight-selector.tsx
│ │ │ ├── toggle-group-outline.tsx
│ │ │ ├── toggle-group-rtl.tsx
│ │ │ ├── toggle-group-sizes.tsx
│ │ │ ├── toggle-group-spacing.tsx
│ │ │ ├── toggle-group-vertical.tsx
│ │ │ ├── toggle-outline.tsx
│ │ │ ├── toggle-rtl.tsx
│ │ │ ├── toggle-sizes.tsx
│ │ │ ├── toggle-text.tsx
│ │ │ ├── tooltip-demo.tsx
│ │ │ ├── tooltip-disabled.tsx
│ │ │ ├── tooltip-keyboard.tsx
│ │ │ ├── tooltip-rtl.tsx
│ │ │ ├── tooltip-sides.tsx
│ │ │ ├── typography-blockquote.tsx
│ │ │ ├── typography-demo.tsx
│ │ │ ├── typography-h1.tsx
│ │ │ ├── typography-h2.tsx
│ │ │ ├── typography-h3.tsx
│ │ │ ├── typography-h4.tsx
│ │ │ ├── typography-inline-code.tsx
│ │ │ ├── typography-large.tsx
│ │ │ ├── typography-lead.tsx
│ │ │ ├── typography-list.tsx
│ │ │ ├── typography-muted.tsx
│ │ │ ├── typography-p.tsx
│ │ │ ├── typography-rtl.tsx
│ │ │ ├── typography-small.tsx
│ │ │ ├── typography-table.tsx
│ │ │ ├── ui/
│ │ │ │ ├── accordion.tsx
│ │ │ │ ├── alert-dialog.tsx
│ │ │ │ ├── alert.tsx
│ │ │ │ ├── aspect-ratio.tsx
│ │ │ │ ├── avatar.tsx
│ │ │ │ ├── badge.tsx
│ │ │ │ ├── breadcrumb.tsx
│ │ │ │ ├── button-group.tsx
│ │ │ │ ├── button.tsx
│ │ │ │ ├── calendar.tsx
│ │ │ │ ├── card.tsx
│ │ │ │ ├── carousel.tsx
│ │ │ │ ├── chart.tsx
│ │ │ │ ├── checkbox.tsx
│ │ │ │ ├── collapsible.tsx
│ │ │ │ ├── combobox.tsx
│ │ │ │ ├── command.tsx
│ │ │ │ ├── context-menu.tsx
│ │ │ │ ├── dialog.tsx
│ │ │ │ ├── direction.tsx
│ │ │ │ ├── drawer.tsx
│ │ │ │ ├── dropdown-menu.tsx
│ │ │ │ ├── empty.tsx
│ │ │ │ ├── field.tsx
│ │ │ │ ├── hover-card.tsx
│ │ │ │ ├── input-group.tsx
│ │ │ │ ├── input-otp.tsx
│ │ │ │ ├── input.tsx
│ │ │ │ ├── item.tsx
│ │ │ │ ├── kbd.tsx
│ │ │ │ ├── label.tsx
│ │ │ │ ├── menubar.tsx
│ │ │ │ ├── native-select.tsx
│ │ │ │ ├── navigation-menu.tsx
│ │ │ │ ├── pagination.tsx
│ │ │ │ ├── popover.tsx
│ │ │ │ ├── progress.tsx
│ │ │ │ ├── radio-group.tsx
│ │ │ │ ├── resizable.tsx
│ │ │ │ ├── scroll-area.tsx
│ │ │ │ ├── select.tsx
│ │ │ │ ├── separator.tsx
│ │ │ │ ├── sheet.tsx
│ │ │ │ ├── sidebar.tsx
│ │ │ │ ├── skeleton.tsx
│ │ │ │ ├── slider.tsx
│ │ │ │ ├── sonner.tsx
│ │ │ │ ├── spinner.tsx
│ │ │ │ ├── switch.tsx
│ │ │ │ ├── table.tsx
│ │ │ │ ├── tabs.tsx
│ │ │ │ ├── textarea.tsx
│ │ │ │ ├── toggle-group.tsx
│ │ │ │ ├── toggle.tsx
│ │ │ │ └── tooltip.tsx
│ │ │ └── ui-rtl/
│ │ │ ├── accordion.tsx
│ │ │ ├── alert-dialog.tsx
│ │ │ ├── alert.tsx
│ │ │ ├── aspect-ratio.tsx
│ │ │ ├── avatar.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── breadcrumb.tsx
│ │ │ ├── button-group.tsx
│ │ │ ├── button.tsx
│ │ │ ├── calendar.tsx
│ │ │ ├── card.tsx
│ │ │ ├── carousel.tsx
│ │ │ ├── chart.tsx
│ │ │ ├── checkbox.tsx
│ │ │ ├── collapsible.tsx
│ │ │ ├── combobox.tsx
│ │ │ ├── command.tsx
│ │ │ ├── context-menu.tsx
│ │ │ ├── dialog.tsx
│ │ │ ├── direction.tsx
│ │ │ ├── drawer.tsx
│ │ │ ├── dropdown-menu.tsx
│ │ │ ├── empty.tsx
│ │ │ ├── field.tsx
│ │ │ ├── hover-card.tsx
│ │ │ ├── input-group.tsx
│ │ │ ├── input-otp.tsx
│ │ │ ├── input.tsx
│ │ │ ├── item.tsx
│ │ │ ├── kbd.tsx
│ │ │ ├── label.tsx
│ │ │ ├── menubar.tsx
│ │ │ ├── native-select.tsx
│ │ │ ├── navigation-menu.tsx
│ │ │ ├── pagination.tsx
│ │ │ ├── popover.tsx
│ │ │ ├── progress.tsx
│ │ │ ├── radio-group.tsx
│ │ │ ├── resizable.tsx
│ │ │ ├── scroll-area.tsx
│ │ │ ├── select.tsx
│ │ │ ├── separator.tsx
│ │ │ ├── sheet.tsx
│ │ │ ├── sidebar.tsx
│ │ │ ├── skeleton.tsx
│ │ │ ├── slider.tsx
│ │ │ ├── sonner.tsx
│ │ │ ├── spinner.tsx
│ │ │ ├── switch.tsx
│ │ │ ├── table.tsx
│ │ │ ├── tabs.tsx
│ │ │ ├── textarea.tsx
│ │ │ ├── toggle-group.tsx
│ │ │ ├── toggle.tsx
│ │ │ └── tooltip.tsx
│ │ └── radix/
│ │ ├── accordion-basic.tsx
│ │ ├── accordion-borders.tsx
│ │ ├── accordion-card.tsx
│ │ ├── accordion-demo.tsx
│ │ ├── accordion-disabled.tsx
│ │ ├── accordion-multiple.tsx
│ │ ├── accordion-rtl.tsx
│ │ ├── alert-action.tsx
│ │ ├── alert-basic.tsx
│ │ ├── alert-colors.tsx
│ │ ├── alert-demo.tsx
│ │ ├── alert-destructive.tsx
│ │ ├── alert-dialog-basic.tsx
│ │ ├── alert-dialog-demo.tsx
│ │ ├── alert-dialog-destructive.tsx
│ │ ├── alert-dialog-media.tsx
│ │ ├── alert-dialog-rtl.tsx
│ │ ├── alert-dialog-small-media.tsx
│ │ ├── alert-dialog-small.tsx
│ │ ├── alert-rtl.tsx
│ │ ├── aspect-ratio-demo.tsx
│ │ ├── aspect-ratio-portrait.tsx
│ │ ├── aspect-ratio-rtl.tsx
│ │ ├── aspect-ratio-square.tsx
│ │ ├── avatar-badge-icon.tsx
│ │ ├── avatar-badge.tsx
│ │ ├── avatar-basic.tsx
│ │ ├── avatar-demo.tsx
│ │ ├── avatar-dropdown.tsx
│ │ ├── avatar-group-count-icon.tsx
│ │ ├── avatar-group-count.tsx
│ │ ├── avatar-group.tsx
│ │ ├── avatar-rtl.tsx
│ │ ├── avatar-size.tsx
│ │ ├── badge-colors.tsx
│ │ ├── badge-demo.tsx
│ │ ├── badge-icon.tsx
│ │ ├── badge-link.tsx
│ │ ├── badge-rtl.tsx
│ │ ├── badge-spinner.tsx
│ │ ├── badge-variants.tsx
│ │ ├── breadcrumb-basic.tsx
│ │ ├── breadcrumb-demo.tsx
│ │ ├── breadcrumb-dropdown.tsx
│ │ ├── breadcrumb-ellipsis.tsx
│ │ ├── breadcrumb-link.tsx
│ │ ├── breadcrumb-rtl.tsx
│ │ ├── breadcrumb-separator.tsx
│ │ ├── button-aschild.tsx
│ │ ├── button-default.tsx
│ │ ├── button-demo.tsx
│ │ ├── button-destructive.tsx
│ │ ├── button-ghost.tsx
│ │ ├── button-group-demo.tsx
│ │ ├── button-group-dropdown.tsx
│ │ ├── button-group-input-group.tsx
│ │ ├── button-group-input.tsx
│ │ ├── button-group-nested.tsx
│ │ ├── button-group-orientation.tsx
│ │ ├── button-group-popover.tsx
│ │ ├── button-group-rtl.tsx
│ │ ├── button-group-select.tsx
│ │ ├── button-group-separator.tsx
│ │ ├── button-group-size.tsx
│ │ ├── button-group-split.tsx
│ │ ├── button-icon.tsx
│ │ ├── button-link.tsx
│ │ ├── button-outline.tsx
│ │ ├── button-rounded.tsx
│ │ ├── button-rtl.tsx
│ │ ├── button-secondary.tsx
│ │ ├── button-size.tsx
│ │ ├── button-spinner.tsx
│ │ ├── button-with-icon.tsx
│ │ ├── calendar-basic.tsx
│ │ ├── calendar-booked-dates.tsx
│ │ ├── calendar-caption.tsx
│ │ ├── calendar-custom-days.tsx
│ │ ├── calendar-demo.tsx
│ │ ├── calendar-hijri.tsx
│ │ ├── calendar-multiple.tsx
│ │ ├── calendar-presets.tsx
│ │ ├── calendar-range.tsx
│ │ ├── calendar-rtl.tsx
│ │ ├── calendar-time.tsx
│ │ ├── calendar-week-numbers.tsx
│ │ ├── card-demo.tsx
│ │ ├── card-image.tsx
│ │ ├── card-rtl.tsx
│ │ ├── card-small.tsx
│ │ ├── carousel-api.tsx
│ │ ├── carousel-demo.tsx
│ │ ├── carousel-multiple.tsx
│ │ ├── carousel-orientation.tsx
│ │ ├── carousel-plugin.tsx
│ │ ├── carousel-rtl.tsx
│ │ ├── carousel-size.tsx
│ │ ├── carousel-spacing.tsx
│ │ ├── chart-demo.tsx
│ │ ├── chart-example-axis.tsx
│ │ ├── chart-example-grid.tsx
│ │ ├── chart-example-legend.tsx
│ │ ├── chart-example-tooltip.tsx
│ │ ├── chart-example.tsx
│ │ ├── chart-rtl.tsx
│ │ ├── chart-tooltip.tsx
│ │ ├── checkbox-basic.tsx
│ │ ├── checkbox-demo.tsx
│ │ ├── checkbox-description.tsx
│ │ ├── checkbox-disabled.tsx
│ │ ├── checkbox-group.tsx
│ │ ├── checkbox-invalid.tsx
│ │ ├── checkbox-rtl.tsx
│ │ ├── checkbox-table.tsx
│ │ ├── collapsible-basic.tsx
│ │ ├── collapsible-demo.tsx
│ │ ├── collapsible-file-tree.tsx
│ │ ├── collapsible-rtl.tsx
│ │ ├── collapsible-settings.tsx
│ │ ├── combobox-auto-highlight.tsx
│ │ ├── combobox-basic.tsx
│ │ ├── combobox-clear.tsx
│ │ ├── combobox-custom.tsx
│ │ ├── combobox-demo.tsx
│ │ ├── combobox-disabled.tsx
│ │ ├── combobox-groups.tsx
│ │ ├── combobox-input-group.tsx
│ │ ├── combobox-invalid.tsx
│ │ ├── combobox-multiple.tsx
│ │ ├── combobox-popup.tsx
│ │ ├── combobox-rtl.tsx
│ │ ├── command-basic.tsx
│ │ ├── command-demo.tsx
│ │ ├── command-dialog.tsx
│ │ ├── command-groups.tsx
│ │ ├── command-rtl.tsx
│ │ ├── command-scrollable.tsx
│ │ ├── command-shortcuts.tsx
│ │ ├── context-menu-basic.tsx
│ │ ├── context-menu-checkboxes.tsx
│ │ ├── context-menu-demo.tsx
│ │ ├── context-menu-destructive.tsx
│ │ ├── context-menu-groups.tsx
│ │ ├── context-menu-icons.tsx
│ │ ├── context-menu-radio.tsx
│ │ ├── context-menu-rtl.tsx
│ │ ├── context-menu-shortcuts.tsx
│ │ ├── context-menu-sides.tsx
│ │ ├── context-menu-submenu.tsx
│ │ ├── data-picker-with-dropdowns.tsx
│ │ ├── data-table-demo.tsx
│ │ ├── data-table-rtl.tsx
│ │ ├── date-picker-basic.tsx
│ │ ├── date-picker-demo.tsx
│ │ ├── date-picker-dob.tsx
│ │ ├── date-picker-input.tsx
│ │ ├── date-picker-natural-language.tsx
│ │ ├── date-picker-range.tsx
│ │ ├── date-picker-rtl.tsx
│ │ ├── date-picker-time.tsx
│ │ ├── dialog-close-button.tsx
│ │ ├── dialog-demo.tsx
│ │ ├── dialog-no-close-button.tsx
│ │ ├── dialog-rtl.tsx
│ │ ├── dialog-scrollable-content.tsx
│ │ ├── dialog-sticky-footer.tsx
│ │ ├── drawer-demo.tsx
│ │ ├── drawer-dialog.tsx
│ │ ├── drawer-rtl.tsx
│ │ ├── drawer-scrollable-content.tsx
│ │ ├── drawer-sides.tsx
│ │ ├── dropdown-menu-avatar.tsx
│ │ ├── dropdown-menu-basic.tsx
│ │ ├── dropdown-menu-checkboxes-icons.tsx
│ │ ├── dropdown-menu-checkboxes.tsx
│ │ ├── dropdown-menu-complex.tsx
│ │ ├── dropdown-menu-demo.tsx
│ │ ├── dropdown-menu-destructive.tsx
│ │ ├── dropdown-menu-icons.tsx
│ │ ├── dropdown-menu-radio-group.tsx
│ │ ├── dropdown-menu-radio-icons.tsx
│ │ ├── dropdown-menu-rtl.tsx
│ │ ├── dropdown-menu-shortcuts.tsx
│ │ ├── dropdown-menu-submenu.tsx
│ │ ├── empty-avatar-group.tsx
│ │ ├── empty-avatar.tsx
│ │ ├── empty-background.tsx
│ │ ├── empty-card.tsx
│ │ ├── empty-demo.tsx
│ │ ├── empty-input-group.tsx
│ │ ├── empty-outline.tsx
│ │ ├── empty-rtl.tsx
│ │ ├── field-checkbox.tsx
│ │ ├── field-choice-card.tsx
│ │ ├── field-demo.tsx
│ │ ├── field-fieldset.tsx
│ │ ├── field-group.tsx
│ │ ├── field-input.tsx
│ │ ├── field-radio.tsx
│ │ ├── field-responsive.tsx
│ │ ├── field-rtl.tsx
│ │ ├── field-select.tsx
│ │ ├── field-slider.tsx
│ │ ├── field-switch.tsx
│ │ ├── field-textarea.tsx
│ │ ├── file-upload-list.tsx
│ │ ├── hooks/
│ │ │ └── use-mobile.ts
│ │ ├── hover-card-demo.tsx
│ │ ├── hover-card-rtl.tsx
│ │ ├── hover-card-sides.tsx
│ │ ├── input-badge.tsx
│ │ ├── input-basic.tsx
│ │ ├── input-button-group.tsx
│ │ ├── input-demo.tsx
│ │ ├── input-disabled.tsx
│ │ ├── input-field.tsx
│ │ ├── input-fieldgroup.tsx
│ │ ├── input-file.tsx
│ │ ├── input-form.tsx
│ │ ├── input-grid.tsx
│ │ ├── input-group-basic.tsx
│ │ ├── input-group-block-end.tsx
│ │ ├── input-group-block-start.tsx
│ │ ├── input-group-button-group.tsx
│ │ ├── input-group-button.tsx
│ │ ├── input-group-custom.tsx
│ │ ├── input-group-demo.tsx
│ │ ├── input-group-dropdown.tsx
│ │ ├── input-group-icon.tsx
│ │ ├── input-group-in-card.tsx
│ │ ├── input-group-inline-end.tsx
│ │ ├── input-group-inline-start.tsx
│ │ ├── input-group-kbd.tsx
│ │ ├── input-group-label.tsx
│ │ ├── input-group-rtl.tsx
│ │ ├── input-group-spinner.tsx
│ │ ├── input-group-text.tsx
│ │ ├── input-group-textarea-examples.tsx
│ │ ├── input-group-textarea.tsx
│ │ ├── input-group-tooltip.tsx
│ │ ├── input-group-with-addons.tsx
│ │ ├── input-group-with-buttons.tsx
│ │ ├── input-group-with-kbd.tsx
│ │ ├── input-group-with-tooltip.tsx
│ │ ├── input-inline.tsx
│ │ ├── input-input-group.tsx
│ │ ├── input-invalid.tsx
│ │ ├── input-otp-alphanumeric.tsx
│ │ ├── input-otp-controlled.tsx
│ │ ├── input-otp-demo.tsx
│ │ ├── input-otp-disabled.tsx
│ │ ├── input-otp-form.tsx
│ │ ├── input-otp-four-digits.tsx
│ │ ├── input-otp-invalid.tsx
│ │ ├── input-otp-pattern.tsx
│ │ ├── input-otp-rtl.tsx
│ │ ├── input-otp-separator.tsx
│ │ ├── input-required.tsx
│ │ ├── input-rtl.tsx
│ │ ├── item-avatar.tsx
│ │ ├── item-demo.tsx
│ │ ├── item-dropdown.tsx
│ │ ├── item-group.tsx
│ │ ├── item-header.tsx
│ │ ├── item-icon.tsx
│ │ ├── item-image.tsx
│ │ ├── item-link.tsx
│ │ ├── item-rtl.tsx
│ │ ├── item-size.tsx
│ │ ├── item-variant.tsx
│ │ ├── kbd-button.tsx
│ │ ├── kbd-demo.tsx
│ │ ├── kbd-group.tsx
│ │ ├── kbd-input-group.tsx
│ │ ├── kbd-rtl.tsx
│ │ ├── kbd-tooltip.tsx
│ │ ├── label-demo.tsx
│ │ ├── label-rtl.tsx
│ │ ├── lib/
│ │ │ └── utils.ts
│ │ ├── menubar-checkbox.tsx
│ │ ├── menubar-demo.tsx
│ │ ├── menubar-icons.tsx
│ │ ├── menubar-radio.tsx
│ │ ├── menubar-rtl.tsx
│ │ ├── menubar-submenu.tsx
│ │ ├── muted-item-group.tsx
│ │ ├── native-select-demo.tsx
│ │ ├── native-select-disabled.tsx
│ │ ├── native-select-groups.tsx
│ │ ├── native-select-invalid.tsx
│ │ ├── native-select-rtl.tsx
│ │ ├── navigation-menu-demo.tsx
│ │ ├── navigation-menu-rtl.tsx
│ │ ├── outline-item-group.tsx
│ │ ├── pagination-demo.tsx
│ │ ├── pagination-icons-only.tsx
│ │ ├── pagination-rtl.tsx
│ │ ├── pagination-simple.tsx
│ │ ├── popover-alignments.tsx
│ │ ├── popover-basic.tsx
│ │ ├── popover-demo.tsx
│ │ ├── popover-form.tsx
│ │ ├── popover-rtl.tsx
│ │ ├── progress-controlled.tsx
│ │ ├── progress-demo.tsx
│ │ ├── progress-label.tsx
│ │ ├── progress-rtl.tsx
│ │ ├── radio-fields.tsx
│ │ ├── radio-group-choice-card.tsx
│ │ ├── radio-group-demo.tsx
│ │ ├── radio-group-description.tsx
│ │ ├── radio-group-disabled.tsx
│ │ ├── radio-group-fieldset.tsx
│ │ ├── radio-group-invalid.tsx
│ │ ├── radio-group-rtl.tsx
│ │ ├── resizable-demo.tsx
│ │ ├── resizable-handle.tsx
│ │ ├── resizable-rtl.tsx
│ │ ├── resizable-vertical.tsx
│ │ ├── scroll-area-demo.tsx
│ │ ├── scroll-area-horizontal-demo.tsx
│ │ ├── scroll-area-rtl.tsx
│ │ ├── select-align-item.tsx
│ │ ├── select-demo.tsx
│ │ ├── select-disabled.tsx
│ │ ├── select-groups.tsx
│ │ ├── select-invalid.tsx
│ │ ├── select-rtl.tsx
│ │ ├── select-scrollable.tsx
│ │ ├── separator-demo.tsx
│ │ ├── separator-list.tsx
│ │ ├── separator-menu.tsx
│ │ ├── separator-rtl.tsx
│ │ ├── separator-vertical.tsx
│ │ ├── sheet-demo.tsx
│ │ ├── sheet-no-close-button.tsx
│ │ ├── sheet-rtl.tsx
│ │ ├── sheet-side.tsx
│ │ ├── sidebar-controlled.tsx
│ │ ├── sidebar-demo.tsx
│ │ ├── sidebar-footer.tsx
│ │ ├── sidebar-group-action.tsx
│ │ ├── sidebar-group-collapsible.tsx
│ │ ├── sidebar-group.tsx
│ │ ├── sidebar-header.tsx
│ │ ├── sidebar-menu-action.tsx
│ │ ├── sidebar-menu-badge.tsx
│ │ ├── sidebar-menu-collapsible.tsx
│ │ ├── sidebar-menu-sub.tsx
│ │ ├── sidebar-menu.tsx
│ │ ├── sidebar-rsc.tsx
│ │ ├── sidebar-rtl.tsx
│ │ ├── skeleton-avatar.tsx
│ │ ├── skeleton-card.tsx
│ │ ├── skeleton-demo.tsx
│ │ ├── skeleton-form.tsx
│ │ ├── skeleton-rtl.tsx
│ │ ├── skeleton-table.tsx
│ │ ├── skeleton-text.tsx
│ │ ├── slider-controlled.tsx
│ │ ├── slider-demo.tsx
│ │ ├── slider-disabled.tsx
│ │ ├── slider-multiple.tsx
│ │ ├── slider-range.tsx
│ │ ├── slider-rtl.tsx
│ │ ├── slider-vertical.tsx
│ │ ├── sonner-demo.tsx
│ │ ├── sonner-description.tsx
│ │ ├── sonner-position.tsx
│ │ ├── sonner-types.tsx
│ │ ├── spinner-badge.tsx
│ │ ├── spinner-button.tsx
│ │ ├── spinner-custom.tsx
│ │ ├── spinner-demo.tsx
│ │ ├── spinner-empty.tsx
│ │ ├── spinner-input-group.tsx
│ │ ├── spinner-rtl.tsx
│ │ ├── spinner-size.tsx
│ │ ├── switch-choice-card.tsx
│ │ ├── switch-demo.tsx
│ │ ├── switch-description.tsx
│ │ ├── switch-disabled.tsx
│ │ ├── switch-invalid.tsx
│ │ ├── switch-rtl.tsx
│ │ ├── switch-sizes.tsx
│ │ ├── table-actions.tsx
│ │ ├── table-demo.tsx
│ │ ├── table-footer.tsx
│ │ ├── table-rtl.tsx
│ │ ├── tabs-demo.tsx
│ │ ├── tabs-disabled.tsx
│ │ ├── tabs-icons.tsx
│ │ ├── tabs-line.tsx
│ │ ├── tabs-rtl.tsx
│ │ ├── tabs-vertical.tsx
│ │ ├── textarea-button.tsx
│ │ ├── textarea-demo.tsx
│ │ ├── textarea-disabled.tsx
│ │ ├── textarea-field.tsx
│ │ ├── textarea-invalid.tsx
│ │ ├── textarea-rtl.tsx
│ │ ├── toggle-demo.tsx
│ │ ├── toggle-disabled.tsx
│ │ ├── toggle-group-demo.tsx
│ │ ├── toggle-group-disabled.tsx
│ │ ├── toggle-group-font-weight-selector.tsx
│ │ ├── toggle-group-outline.tsx
│ │ ├── toggle-group-rtl.tsx
│ │ ├── toggle-group-sizes.tsx
│ │ ├── toggle-group-spacing.tsx
│ │ ├── toggle-group-vertical.tsx
│ │ ├── toggle-outline.tsx
│ │ ├── toggle-rtl.tsx
│ │ ├── toggle-sizes.tsx
│ │ ├── toggle-text.tsx
│ │ ├── tooltip-demo.tsx
│ │ ├── tooltip-disabled.tsx
│ │ ├── tooltip-keyboard.tsx
│ │ ├── tooltip-rtl.tsx
│ │ ├── tooltip-sides.tsx
│ │ ├── typography-blockquote.tsx
│ │ ├── typography-demo.tsx
│ │ ├── typography-h1.tsx
│ │ ├── typography-h2.tsx
│ │ ├── typography-h3.tsx
│ │ ├── typography-h4.tsx
│ │ ├── typography-inline-code.tsx
│ │ ├── typography-large.tsx
│ │ ├── typography-lead.tsx
│ │ ├── typography-list.tsx
│ │ ├── typography-muted.tsx
│ │ ├── typography-p.tsx
│ │ ├── typography-rtl.tsx
│ │ ├── typography-small.tsx
│ │ ├── typography-table.tsx
│ │ ├── ui/
│ │ │ ├── accordion.tsx
│ │ │ ├── alert-dialog.tsx
│ │ │ ├── alert.tsx
│ │ │ ├── aspect-ratio.tsx
│ │ │ ├── avatar.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── breadcrumb.tsx
│ │ │ ├── button-group.tsx
│ │ │ ├── button.tsx
│ │ │ ├── calendar.tsx
│ │ │ ├── card.tsx
│ │ │ ├── carousel.tsx
│ │ │ ├── chart.tsx
│ │ │ ├── checkbox.tsx
│ │ │ ├── collapsible.tsx
│ │ │ ├── combobox.tsx
│ │ │ ├── command.tsx
│ │ │ ├── context-menu.tsx
│ │ │ ├── dialog.tsx
│ │ │ ├── direction.tsx
│ │ │ ├── drawer.tsx
│ │ │ ├── dropdown-menu.tsx
│ │ │ ├── empty.tsx
│ │ │ ├── field.tsx
│ │ │ ├── hover-card.tsx
│ │ │ ├── input-group.tsx
│ │ │ ├── input-otp.tsx
│ │ │ ├── input.tsx
│ │ │ ├── item.tsx
│ │ │ ├── kbd.tsx
│ │ │ ├── label.tsx
│ │ │ ├── menubar.tsx
│ │ │ ├── native-select.tsx
│ │ │ ├── navigation-menu.tsx
│ │ │ ├── pagination.tsx
│ │ │ ├── popover.tsx
│ │ │ ├── progress.tsx
│ │ │ ├── radio-group.tsx
│ │ │ ├── resizable.tsx
│ │ │ ├── scroll-area.tsx
│ │ │ ├── select.tsx
│ │ │ ├── separator.tsx
│ │ │ ├── sheet.tsx
│ │ │ ├── sidebar.tsx
│ │ │ ├── skeleton.tsx
│ │ │ ├── slider.tsx
│ │ │ ├── sonner.tsx
│ │ │ ├── spinner.tsx
│ │ │ ├── switch.tsx
│ │ │ ├── table.tsx
│ │ │ ├── tabs.tsx
│ │ │ ├── textarea.tsx
│ │ │ ├── toggle-group.tsx
│ │ │ ├── toggle.tsx
│ │ │ └── tooltip.tsx
│ │ └── ui-rtl/
│ │ ├── accordion.tsx
│ │ ├── alert-dialog.tsx
│ │ ├── alert.tsx
│ │ ├── aspect-ratio.tsx
│ │ ├── avatar.tsx
│ │ ├── badge.tsx
│ │ ├── breadcrumb.tsx
│ │ ├── button-group.tsx
│ │ ├── button.tsx
│ │ ├── calendar.tsx
│ │ ├── card.tsx
│ │ ├── carousel.tsx
│ │ ├── chart.tsx
│ │ ├── checkbox.tsx
│ │ ├── collapsible.tsx
│ │ ├── combobox.tsx
│ │ ├── command.tsx
│ │ ├── context-menu.tsx
│ │ ├── dialog.tsx
│ │ ├── direction.tsx
│ │ ├── drawer.tsx
│ │ ├── dropdown-menu.tsx
│ │ ├── empty.tsx
│ │ ├── field.tsx
│ │ ├── hover-card.tsx
│ │ ├── input-group.tsx
│ │ ├── input-otp.tsx
│ │ ├── input.tsx
│ │ ├── item.tsx
│ │ ├── kbd.tsx
│ │ ├── label.tsx
│ │ ├── menubar.tsx
│ │ ├── native-select.tsx
│ │ ├── navigation-menu.tsx
│ │ ├── pagination.tsx
│ │ ├── popover.tsx
│ │ ├── progress.tsx
│ │ ├── radio-group.tsx
│ │ ├── resizable.tsx
│ │ ├── scroll-area.tsx
│ │ ├── select.tsx
│ │ ├── separator.tsx
│ │ ├── sheet.tsx
│ │ ├── sidebar.tsx
│ │ ├── skeleton.tsx
│ │ ├── slider.tsx
│ │ ├── sonner.tsx
│ │ ├── spinner.tsx
│ │ ├── switch.tsx
│ │ ├── table.tsx
│ │ ├── tabs.tsx
│ │ ├── textarea.tsx
│ │ ├── toggle-group.tsx
│ │ ├── toggle.tsx
│ │ └── tooltip.tsx
│ ├── hooks/
│ │ ├── use-colors.ts
│ │ ├── use-config.ts
│ │ ├── use-copy-to-clipboard.ts
│ │ ├── use-layout.tsx
│ │ ├── use-media-query.tsx
│ │ ├── use-meta-color.ts
│ │ ├── use-mobile.ts
│ │ ├── use-mounted.ts
│ │ ├── use-mutation-observer.ts
│ │ └── use-search-registry.ts
│ ├── lib/
│ │ ├── blocks.ts
│ │ ├── categories.ts
│ │ ├── changelog.ts
│ │ ├── colors.ts
│ │ ├── components.ts
│ │ ├── config.ts
│ │ ├── docs.ts
│ │ ├── events.ts
│ │ ├── explore.ts
│ │ ├── flags.ts
│ │ ├── font-definitions.ts
│ │ ├── fonts.ts
│ │ ├── format-code.ts
│ │ ├── highlight-code.ts
│ │ ├── llm.ts
│ │ ├── page-tree.ts
│ │ ├── read-file.ts
│ │ ├── registry.ts
│ │ ├── rehype.ts
│ │ ├── source.ts
│ │ ├── themes.ts
│ │ └── utils.ts
│ ├── mdx-components.tsx
│ ├── next.config.mjs
│ ├── package.json
│ ├── postcss.config.mjs
│ ├── public/
│ │ ├── llms.txt
│ │ ├── r/
│ │ │ ├── colors/
│ │ │ │ ├── gray.json
│ │ │ │ ├── index.json
│ │ │ │ ├── mauve.json
│ │ │ │ ├── mist.json
│ │ │ │ ├── neutral.json
│ │ │ │ ├── olive.json
│ │ │ │ ├── slate.json
│ │ │ │ ├── stone.json
│ │ │ │ ├── taupe.json
│ │ │ │ └── zinc.json
│ │ │ ├── config.json
│ │ │ ├── icons/
│ │ │ │ └── index.json
│ │ │ ├── index.json
│ │ │ ├── registries-legacy.json
│ │ │ ├── registries.json
│ │ │ ├── styles/
│ │ │ │ ├── base-lyra/
│ │ │ │ │ ├── accordion-example.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-dialog-example.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert-example.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-example.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-example.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-example.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-example.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-example.json
│ │ │ │ │ ├── button-group-example.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-example.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-example.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── carousel-example.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-example.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-example.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-example.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-example.json
│ │ │ │ │ ├── combobox.json
│ │ │ │ │ ├── command-example.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── component-example.json
│ │ │ │ │ ├── context-menu-example.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── demo.json
│ │ │ │ │ ├── dialog-example.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── direction.json
│ │ │ │ │ ├── drawer-example.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-example.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty-example.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── example.json
│ │ │ │ │ ├── field-example.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── font-dm-sans.json
│ │ │ │ │ ├── font-figtree.json
│ │ │ │ │ ├── font-geist-mono.json
│ │ │ │ │ ├── font-geist.json
│ │ │ │ │ ├── font-heading-dm-sans.json
│ │ │ │ │ ├── font-heading-figtree.json
│ │ │ │ │ ├── font-heading-geist-mono.json
│ │ │ │ │ ├── font-heading-geist.json
│ │ │ │ │ ├── font-heading-ibm-plex-sans.json
│ │ │ │ │ ├── font-heading-instrument-sans.json
│ │ │ │ │ ├── font-heading-inter.json
│ │ │ │ │ ├── font-heading-jetbrains-mono.json
│ │ │ │ │ ├── font-heading-lora.json
│ │ │ │ │ ├── font-heading-manrope.json
│ │ │ │ │ ├── font-heading-merriweather.json
│ │ │ │ │ ├── font-heading-montserrat.json
│ │ │ │ │ ├── font-heading-noto-sans.json
│ │ │ │ │ ├── font-heading-noto-serif.json
│ │ │ │ │ ├── font-heading-nunito-sans.json
│ │ │ │ │ ├── font-heading-outfit.json
│ │ │ │ │ ├── font-heading-oxanium.json
│ │ │ │ │ ├── font-heading-playfair-display.json
│ │ │ │ │ ├── font-heading-public-sans.json
│ │ │ │ │ ├── font-heading-raleway.json
│ │ │ │ │ ├── font-heading-roboto-slab.json
│ │ │ │ │ ├── font-heading-roboto.json
│ │ │ │ │ ├── font-heading-source-sans-3.json
│ │ │ │ │ ├── font-heading-space-grotesk.json
│ │ │ │ │ ├── font-heading-tomorrow.json
│ │ │ │ │ ├── font-ibm-plex-sans.json
│ │ │ │ │ ├── font-instrument-sans.json
│ │ │ │ │ ├── font-inter.json
│ │ │ │ │ ├── font-jetbrains-mono.json
│ │ │ │ │ ├── font-lora.json
│ │ │ │ │ ├── font-manrope.json
│ │ │ │ │ ├── font-merriweather.json
│ │ │ │ │ ├── font-montserrat.json
│ │ │ │ │ ├── font-noto-sans.json
│ │ │ │ │ ├── font-noto-serif.json
│ │ │ │ │ ├── font-nunito-sans.json
│ │ │ │ │ ├── font-outfit.json
│ │ │ │ │ ├── font-oxanium.json
│ │ │ │ │ ├── font-playfair-display.json
│ │ │ │ │ ├── font-public-sans.json
│ │ │ │ │ ├── font-raleway.json
│ │ │ │ │ ├── font-roboto-slab.json
│ │ │ │ │ ├── font-roboto.json
│ │ │ │ │ ├── font-source-sans-3.json
│ │ │ │ │ ├── font-space-grotesk.json
│ │ │ │ │ ├── font-tomorrow.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-example.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-example.json
│ │ │ │ │ ├── input-group-example.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-example.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item-example.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd-example.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-example.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-example.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── native-select-example.json
│ │ │ │ │ ├── native-select.json
│ │ │ │ │ ├── navigation-menu-example.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── pagination-example.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-example.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── preview.json
│ │ │ │ │ ├── progress-example.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-example.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-example.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-example.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-example.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-example.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-example.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-example.json
│ │ │ │ │ ├── sidebar-floating-example.json
│ │ │ │ │ ├── sidebar-icon-example.json
│ │ │ │ │ ├── sidebar-inset-example.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── signup-01.json
│ │ │ │ │ ├── signup-02.json
│ │ │ │ │ ├── signup-03.json
│ │ │ │ │ ├── signup-04.json
│ │ │ │ │ ├── signup-05.json
│ │ │ │ │ ├── skeleton-example.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-example.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-example.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner-example.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-example.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-example.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-example.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-example.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── toggle-example.json
│ │ │ │ │ ├── toggle-group-example.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-example.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ └── utils.json
│ │ │ │ ├── base-maia/
│ │ │ │ │ ├── accordion-example.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-dialog-example.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert-example.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-example.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-example.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-example.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-example.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-example.json
│ │ │ │ │ ├── button-group-example.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-example.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-example.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── carousel-example.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-example.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-example.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-example.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-example.json
│ │ │ │ │ ├── combobox.json
│ │ │ │ │ ├── command-example.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── component-example.json
│ │ │ │ │ ├── context-menu-example.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── demo.json
│ │ │ │ │ ├── dialog-example.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── direction.json
│ │ │ │ │ ├── drawer-example.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-example.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty-example.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── example.json
│ │ │ │ │ ├── field-example.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── font-dm-sans.json
│ │ │ │ │ ├── font-figtree.json
│ │ │ │ │ ├── font-geist-mono.json
│ │ │ │ │ ├── font-geist.json
│ │ │ │ │ ├── font-heading-dm-sans.json
│ │ │ │ │ ├── font-heading-figtree.json
│ │ │ │ │ ├── font-heading-geist-mono.json
│ │ │ │ │ ├── font-heading-geist.json
│ │ │ │ │ ├── font-heading-ibm-plex-sans.json
│ │ │ │ │ ├── font-heading-instrument-sans.json
│ │ │ │ │ ├── font-heading-inter.json
│ │ │ │ │ ├── font-heading-jetbrains-mono.json
│ │ │ │ │ ├── font-heading-lora.json
│ │ │ │ │ ├── font-heading-manrope.json
│ │ │ │ │ ├── font-heading-merriweather.json
│ │ │ │ │ ├── font-heading-montserrat.json
│ │ │ │ │ ├── font-heading-noto-sans.json
│ │ │ │ │ ├── font-heading-noto-serif.json
│ │ │ │ │ ├── font-heading-nunito-sans.json
│ │ │ │ │ ├── font-heading-outfit.json
│ │ │ │ │ ├── font-heading-oxanium.json
│ │ │ │ │ ├── font-heading-playfair-display.json
│ │ │ │ │ ├── font-heading-public-sans.json
│ │ │ │ │ ├── font-heading-raleway.json
│ │ │ │ │ ├── font-heading-roboto-slab.json
│ │ │ │ │ ├── font-heading-roboto.json
│ │ │ │ │ ├── font-heading-source-sans-3.json
│ │ │ │ │ ├── font-heading-space-grotesk.json
│ │ │ │ │ ├── font-heading-tomorrow.json
│ │ │ │ │ ├── font-ibm-plex-sans.json
│ │ │ │ │ ├── font-instrument-sans.json
│ │ │ │ │ ├── font-inter.json
│ │ │ │ │ ├── font-jetbrains-mono.json
│ │ │ │ │ ├── font-lora.json
│ │ │ │ │ ├── font-manrope.json
│ │ │ │ │ ├── font-merriweather.json
│ │ │ │ │ ├── font-montserrat.json
│ │ │ │ │ ├── font-noto-sans.json
│ │ │ │ │ ├── font-noto-serif.json
│ │ │ │ │ ├── font-nunito-sans.json
│ │ │ │ │ ├── font-outfit.json
│ │ │ │ │ ├── font-oxanium.json
│ │ │ │ │ ├── font-playfair-display.json
│ │ │ │ │ ├── font-public-sans.json
│ │ │ │ │ ├── font-raleway.json
│ │ │ │ │ ├── font-roboto-slab.json
│ │ │ │ │ ├── font-roboto.json
│ │ │ │ │ ├── font-source-sans-3.json
│ │ │ │ │ ├── font-space-grotesk.json
│ │ │ │ │ ├── font-tomorrow.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-example.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-example.json
│ │ │ │ │ ├── input-group-example.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-example.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item-example.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd-example.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-example.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-example.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── native-select-example.json
│ │ │ │ │ ├── native-select.json
│ │ │ │ │ ├── navigation-menu-example.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── pagination-example.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-example.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── preview.json
│ │ │ │ │ ├── progress-example.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-example.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-example.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-example.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-example.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-example.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-example.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-example.json
│ │ │ │ │ ├── sidebar-floating-example.json
│ │ │ │ │ ├── sidebar-icon-example.json
│ │ │ │ │ ├── sidebar-inset-example.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── signup-01.json
│ │ │ │ │ ├── signup-02.json
│ │ │ │ │ ├── signup-03.json
│ │ │ │ │ ├── signup-04.json
│ │ │ │ │ ├── signup-05.json
│ │ │ │ │ ├── skeleton-example.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-example.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-example.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner-example.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-example.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-example.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-example.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-example.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── toggle-example.json
│ │ │ │ │ ├── toggle-group-example.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-example.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ └── utils.json
│ │ │ │ ├── base-mira/
│ │ │ │ │ ├── accordion-example.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-dialog-example.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert-example.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-example.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-example.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-example.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-example.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-example.json
│ │ │ │ │ ├── button-group-example.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-example.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-example.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── carousel-example.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-example.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-example.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-example.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-example.json
│ │ │ │ │ ├── combobox.json
│ │ │ │ │ ├── command-example.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── component-example.json
│ │ │ │ │ ├── context-menu-example.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── demo.json
│ │ │ │ │ ├── dialog-example.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── direction.json
│ │ │ │ │ ├── drawer-example.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-example.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty-example.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── example.json
│ │ │ │ │ ├── field-example.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── font-dm-sans.json
│ │ │ │ │ ├── font-figtree.json
│ │ │ │ │ ├── font-geist-mono.json
│ │ │ │ │ ├── font-geist.json
│ │ │ │ │ ├── font-heading-dm-sans.json
│ │ │ │ │ ├── font-heading-figtree.json
│ │ │ │ │ ├── font-heading-geist-mono.json
│ │ │ │ │ ├── font-heading-geist.json
│ │ │ │ │ ├── font-heading-ibm-plex-sans.json
│ │ │ │ │ ├── font-heading-instrument-sans.json
│ │ │ │ │ ├── font-heading-inter.json
│ │ │ │ │ ├── font-heading-jetbrains-mono.json
│ │ │ │ │ ├── font-heading-lora.json
│ │ │ │ │ ├── font-heading-manrope.json
│ │ │ │ │ ├── font-heading-merriweather.json
│ │ │ │ │ ├── font-heading-montserrat.json
│ │ │ │ │ ├── font-heading-noto-sans.json
│ │ │ │ │ ├── font-heading-noto-serif.json
│ │ │ │ │ ├── font-heading-nunito-sans.json
│ │ │ │ │ ├── font-heading-outfit.json
│ │ │ │ │ ├── font-heading-oxanium.json
│ │ │ │ │ ├── font-heading-playfair-display.json
│ │ │ │ │ ├── font-heading-public-sans.json
│ │ │ │ │ ├── font-heading-raleway.json
│ │ │ │ │ ├── font-heading-roboto-slab.json
│ │ │ │ │ ├── font-heading-roboto.json
│ │ │ │ │ ├── font-heading-source-sans-3.json
│ │ │ │ │ ├── font-heading-space-grotesk.json
│ │ │ │ │ ├── font-heading-tomorrow.json
│ │ │ │ │ ├── font-ibm-plex-sans.json
│ │ │ │ │ ├── font-instrument-sans.json
│ │ │ │ │ ├── font-inter.json
│ │ │ │ │ ├── font-jetbrains-mono.json
│ │ │ │ │ ├── font-lora.json
│ │ │ │ │ ├── font-manrope.json
│ │ │ │ │ ├── font-merriweather.json
│ │ │ │ │ ├── font-montserrat.json
│ │ │ │ │ ├── font-noto-sans.json
│ │ │ │ │ ├── font-noto-serif.json
│ │ │ │ │ ├── font-nunito-sans.json
│ │ │ │ │ ├── font-outfit.json
│ │ │ │ │ ├── font-oxanium.json
│ │ │ │ │ ├── font-playfair-display.json
│ │ │ │ │ ├── font-public-sans.json
│ │ │ │ │ ├── font-raleway.json
│ │ │ │ │ ├── font-roboto-slab.json
│ │ │ │ │ ├── font-roboto.json
│ │ │ │ │ ├── font-source-sans-3.json
│ │ │ │ │ ├── font-space-grotesk.json
│ │ │ │ │ ├── font-tomorrow.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-example.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-example.json
│ │ │ │ │ ├── input-group-example.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-example.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item-example.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd-example.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-example.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-example.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── native-select-example.json
│ │ │ │ │ ├── native-select.json
│ │ │ │ │ ├── navigation-menu-example.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── pagination-example.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-example.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── preview.json
│ │ │ │ │ ├── progress-example.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-example.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-example.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-example.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-example.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-example.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-example.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-example.json
│ │ │ │ │ ├── sidebar-floating-example.json
│ │ │ │ │ ├── sidebar-icon-example.json
│ │ │ │ │ ├── sidebar-inset-example.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── signup-01.json
│ │ │ │ │ ├── signup-02.json
│ │ │ │ │ ├── signup-03.json
│ │ │ │ │ ├── signup-04.json
│ │ │ │ │ ├── signup-05.json
│ │ │ │ │ ├── skeleton-example.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-example.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-example.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner-example.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-example.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-example.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-example.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-example.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── toggle-example.json
│ │ │ │ │ ├── toggle-group-example.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-example.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ └── utils.json
│ │ │ │ ├── base-nova/
│ │ │ │ │ ├── accordion-example.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-dialog-example.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert-example.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-example.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-example.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-example.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-example.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-example.json
│ │ │ │ │ ├── button-group-example.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-example.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-example.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── carousel-example.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-example.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-example.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-example.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-example.json
│ │ │ │ │ ├── combobox.json
│ │ │ │ │ ├── command-example.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── component-example.json
│ │ │ │ │ ├── context-menu-example.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── demo.json
│ │ │ │ │ ├── dialog-example.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── direction.json
│ │ │ │ │ ├── drawer-example.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-example.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty-example.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── example.json
│ │ │ │ │ ├── field-example.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── font-dm-sans.json
│ │ │ │ │ ├── font-figtree.json
│ │ │ │ │ ├── font-geist-mono.json
│ │ │ │ │ ├── font-geist.json
│ │ │ │ │ ├── font-heading-dm-sans.json
│ │ │ │ │ ├── font-heading-figtree.json
│ │ │ │ │ ├── font-heading-geist-mono.json
│ │ │ │ │ ├── font-heading-geist.json
│ │ │ │ │ ├── font-heading-ibm-plex-sans.json
│ │ │ │ │ ├── font-heading-instrument-sans.json
│ │ │ │ │ ├── font-heading-inter.json
│ │ │ │ │ ├── font-heading-jetbrains-mono.json
│ │ │ │ │ ├── font-heading-lora.json
│ │ │ │ │ ├── font-heading-manrope.json
│ │ │ │ │ ├── font-heading-merriweather.json
│ │ │ │ │ ├── font-heading-montserrat.json
│ │ │ │ │ ├── font-heading-noto-sans.json
│ │ │ │ │ ├── font-heading-noto-serif.json
│ │ │ │ │ ├── font-heading-nunito-sans.json
│ │ │ │ │ ├── font-heading-outfit.json
│ │ │ │ │ ├── font-heading-oxanium.json
│ │ │ │ │ ├── font-heading-playfair-display.json
│ │ │ │ │ ├── font-heading-public-sans.json
│ │ │ │ │ ├── font-heading-raleway.json
│ │ │ │ │ ├── font-heading-roboto-slab.json
│ │ │ │ │ ├── font-heading-roboto.json
│ │ │ │ │ ├── font-heading-source-sans-3.json
│ │ │ │ │ ├── font-heading-space-grotesk.json
│ │ │ │ │ ├── font-heading-tomorrow.json
│ │ │ │ │ ├── font-ibm-plex-sans.json
│ │ │ │ │ ├── font-instrument-sans.json
│ │ │ │ │ ├── font-inter.json
│ │ │ │ │ ├── font-jetbrains-mono.json
│ │ │ │ │ ├── font-lora.json
│ │ │ │ │ ├── font-manrope.json
│ │ │ │ │ ├── font-merriweather.json
│ │ │ │ │ ├── font-montserrat.json
│ │ │ │ │ ├── font-noto-sans.json
│ │ │ │ │ ├── font-noto-serif.json
│ │ │ │ │ ├── font-nunito-sans.json
│ │ │ │ │ ├── font-outfit.json
│ │ │ │ │ ├── font-oxanium.json
│ │ │ │ │ ├── font-playfair-display.json
│ │ │ │ │ ├── font-public-sans.json
│ │ │ │ │ ├── font-raleway.json
│ │ │ │ │ ├── font-roboto-slab.json
│ │ │ │ │ ├── font-roboto.json
│ │ │ │ │ ├── font-source-sans-3.json
│ │ │ │ │ ├── font-space-grotesk.json
│ │ │ │ │ ├── font-tomorrow.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-example.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-example.json
│ │ │ │ │ ├── input-group-example.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-example.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item-example.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd-example.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-example.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-example.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── native-select-example.json
│ │ │ │ │ ├── native-select.json
│ │ │ │ │ ├── navigation-menu-example.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── pagination-example.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-example.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── preview.json
│ │ │ │ │ ├── progress-example.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-example.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-example.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-example.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-example.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-example.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-example.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-example.json
│ │ │ │ │ ├── sidebar-floating-example.json
│ │ │ │ │ ├── sidebar-icon-example.json
│ │ │ │ │ ├── sidebar-inset-example.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── signup-01.json
│ │ │ │ │ ├── signup-02.json
│ │ │ │ │ ├── signup-03.json
│ │ │ │ │ ├── signup-04.json
│ │ │ │ │ ├── signup-05.json
│ │ │ │ │ ├── skeleton-example.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-example.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-example.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner-example.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-example.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-example.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-example.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-example.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── toggle-example.json
│ │ │ │ │ ├── toggle-group-example.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-example.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ └── utils.json
│ │ │ │ ├── base-vega/
│ │ │ │ │ ├── accordion-example.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-dialog-example.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert-example.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-example.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-example.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-example.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-example.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-example.json
│ │ │ │ │ ├── button-group-example.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-example.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-example.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── carousel-example.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-example.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-example.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-example.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-example.json
│ │ │ │ │ ├── combobox.json
│ │ │ │ │ ├── command-example.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── component-example.json
│ │ │ │ │ ├── context-menu-example.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── demo.json
│ │ │ │ │ ├── dialog-example.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── direction.json
│ │ │ │ │ ├── drawer-example.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-example.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty-example.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── example.json
│ │ │ │ │ ├── field-example.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── font-dm-sans.json
│ │ │ │ │ ├── font-figtree.json
│ │ │ │ │ ├── font-geist-mono.json
│ │ │ │ │ ├── font-geist.json
│ │ │ │ │ ├── font-heading-dm-sans.json
│ │ │ │ │ ├── font-heading-figtree.json
│ │ │ │ │ ├── font-heading-geist-mono.json
│ │ │ │ │ ├── font-heading-geist.json
│ │ │ │ │ ├── font-heading-ibm-plex-sans.json
│ │ │ │ │ ├── font-heading-instrument-sans.json
│ │ │ │ │ ├── font-heading-inter.json
│ │ │ │ │ ├── font-heading-jetbrains-mono.json
│ │ │ │ │ ├── font-heading-lora.json
│ │ │ │ │ ├── font-heading-manrope.json
│ │ │ │ │ ├── font-heading-merriweather.json
│ │ │ │ │ ├── font-heading-montserrat.json
│ │ │ │ │ ├── font-heading-noto-sans.json
│ │ │ │ │ ├── font-heading-noto-serif.json
│ │ │ │ │ ├── font-heading-nunito-sans.json
│ │ │ │ │ ├── font-heading-outfit.json
│ │ │ │ │ ├── font-heading-oxanium.json
│ │ │ │ │ ├── font-heading-playfair-display.json
│ │ │ │ │ ├── font-heading-public-sans.json
│ │ │ │ │ ├── font-heading-raleway.json
│ │ │ │ │ ├── font-heading-roboto-slab.json
│ │ │ │ │ ├── font-heading-roboto.json
│ │ │ │ │ ├── font-heading-source-sans-3.json
│ │ │ │ │ ├── font-heading-space-grotesk.json
│ │ │ │ │ ├── font-heading-tomorrow.json
│ │ │ │ │ ├── font-ibm-plex-sans.json
│ │ │ │ │ ├── font-instrument-sans.json
│ │ │ │ │ ├── font-inter.json
│ │ │ │ │ ├── font-jetbrains-mono.json
│ │ │ │ │ ├── font-lora.json
│ │ │ │ │ ├── font-manrope.json
│ │ │ │ │ ├── font-merriweather.json
│ │ │ │ │ ├── font-montserrat.json
│ │ │ │ │ ├── font-noto-sans.json
│ │ │ │ │ ├── font-noto-serif.json
│ │ │ │ │ ├── font-nunito-sans.json
│ │ │ │ │ ├── font-outfit.json
│ │ │ │ │ ├── font-oxanium.json
│ │ │ │ │ ├── font-playfair-display.json
│ │ │ │ │ ├── font-public-sans.json
│ │ │ │ │ ├── font-raleway.json
│ │ │ │ │ ├── font-roboto-slab.json
│ │ │ │ │ ├── font-roboto.json
│ │ │ │ │ ├── font-source-sans-3.json
│ │ │ │ │ ├── font-space-grotesk.json
│ │ │ │ │ ├── font-tomorrow.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-example.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-example.json
│ │ │ │ │ ├── input-group-example.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-example.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item-example.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd-example.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-example.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-example.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── native-select-example.json
│ │ │ │ │ ├── native-select.json
│ │ │ │ │ ├── navigation-menu-example.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── pagination-example.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-example.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── preview.json
│ │ │ │ │ ├── progress-example.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-example.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-example.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-example.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-example.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-example.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-example.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-example.json
│ │ │ │ │ ├── sidebar-floating-example.json
│ │ │ │ │ ├── sidebar-icon-example.json
│ │ │ │ │ ├── sidebar-inset-example.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── signup-01.json
│ │ │ │ │ ├── signup-02.json
│ │ │ │ │ ├── signup-03.json
│ │ │ │ │ ├── signup-04.json
│ │ │ │ │ ├── signup-05.json
│ │ │ │ │ ├── skeleton-example.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-example.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-example.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner-example.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-example.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-example.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-example.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-example.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── toggle-example.json
│ │ │ │ │ ├── toggle-group-example.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-example.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ └── utils.json
│ │ │ │ ├── default/
│ │ │ │ │ ├── accordion-demo.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-demo.json
│ │ │ │ │ ├── alert-destructive.json
│ │ │ │ │ ├── alert-dialog-demo.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-demo.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-demo.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-demo.json
│ │ │ │ │ ├── badge-destructive.json
│ │ │ │ │ ├── badge-outline.json
│ │ │ │ │ ├── badge-secondary.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-demo.json
│ │ │ │ │ ├── breadcrumb-dropdown.json
│ │ │ │ │ ├── breadcrumb-ellipsis.json
│ │ │ │ │ ├── breadcrumb-link.json
│ │ │ │ │ ├── breadcrumb-responsive.json
│ │ │ │ │ ├── breadcrumb-separator.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-as-child.json
│ │ │ │ │ ├── button-demo.json
│ │ │ │ │ ├── button-destructive.json
│ │ │ │ │ ├── button-ghost.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button-icon.json
│ │ │ │ │ ├── button-link.json
│ │ │ │ │ ├── button-loading.json
│ │ │ │ │ ├── button-outline.json
│ │ │ │ │ ├── button-secondary.json
│ │ │ │ │ ├── button-with-icon.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-01.json
│ │ │ │ │ ├── calendar-02.json
│ │ │ │ │ ├── calendar-03.json
│ │ │ │ │ ├── calendar-04.json
│ │ │ │ │ ├── calendar-05.json
│ │ │ │ │ ├── calendar-06.json
│ │ │ │ │ ├── calendar-07.json
│ │ │ │ │ ├── calendar-08.json
│ │ │ │ │ ├── calendar-09.json
│ │ │ │ │ ├── calendar-10.json
│ │ │ │ │ ├── calendar-11.json
│ │ │ │ │ ├── calendar-12.json
│ │ │ │ │ ├── calendar-13.json
│ │ │ │ │ ├── calendar-14.json
│ │ │ │ │ ├── calendar-15.json
│ │ │ │ │ ├── calendar-16.json
│ │ │ │ │ ├── calendar-17.json
│ │ │ │ │ ├── calendar-18.json
│ │ │ │ │ ├── calendar-19.json
│ │ │ │ │ ├── calendar-20.json
│ │ │ │ │ ├── calendar-21.json
│ │ │ │ │ ├── calendar-22.json
│ │ │ │ │ ├── calendar-23.json
│ │ │ │ │ ├── calendar-24.json
│ │ │ │ │ ├── calendar-25.json
│ │ │ │ │ ├── calendar-26.json
│ │ │ │ │ ├── calendar-27.json
│ │ │ │ │ ├── calendar-28.json
│ │ │ │ │ ├── calendar-29.json
│ │ │ │ │ ├── calendar-30.json
│ │ │ │ │ ├── calendar-31.json
│ │ │ │ │ ├── calendar-32.json
│ │ │ │ │ ├── calendar-demo.json
│ │ │ │ │ ├── calendar-form.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-demo.json
│ │ │ │ │ ├── card-with-form.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── carousel-api.json
│ │ │ │ │ ├── carousel-demo.json
│ │ │ │ │ ├── carousel-orientation.json
│ │ │ │ │ ├── carousel-plugin.json
│ │ │ │ │ ├── carousel-size.json
│ │ │ │ │ ├── carousel-spacing.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-area-axes.json
│ │ │ │ │ ├── chart-area-default.json
│ │ │ │ │ ├── chart-area-gradient.json
│ │ │ │ │ ├── chart-area-icons.json
│ │ │ │ │ ├── chart-area-interactive.json
│ │ │ │ │ ├── chart-area-legend.json
│ │ │ │ │ ├── chart-area-linear.json
│ │ │ │ │ ├── chart-area-stacked-expand.json
│ │ │ │ │ ├── chart-area-stacked.json
│ │ │ │ │ ├── chart-area-step.json
│ │ │ │ │ ├── chart-bar-active.json
│ │ │ │ │ ├── chart-bar-default.json
│ │ │ │ │ ├── chart-bar-demo-axis.json
│ │ │ │ │ ├── chart-bar-demo-grid.json
│ │ │ │ │ ├── chart-bar-demo-legend.json
│ │ │ │ │ ├── chart-bar-demo-tooltip.json
│ │ │ │ │ ├── chart-bar-demo.json
│ │ │ │ │ ├── chart-bar-horizontal.json
│ │ │ │ │ ├── chart-bar-interactive.json
│ │ │ │ │ ├── chart-bar-label-custom.json
│ │ │ │ │ ├── chart-bar-label.json
│ │ │ │ │ ├── chart-bar-mixed.json
│ │ │ │ │ ├── chart-bar-multiple.json
│ │ │ │ │ ├── chart-bar-negative.json
│ │ │ │ │ ├── chart-bar-stacked.json
│ │ │ │ │ ├── chart-line-default.json
│ │ │ │ │ ├── chart-line-dots-colors.json
│ │ │ │ │ ├── chart-line-dots-custom.json
│ │ │ │ │ ├── chart-line-dots.json
│ │ │ │ │ ├── chart-line-interactive.json
│ │ │ │ │ ├── chart-line-label-custom.json
│ │ │ │ │ ├── chart-line-label.json
│ │ │ │ │ ├── chart-line-linear.json
│ │ │ │ │ ├── chart-line-multiple.json
│ │ │ │ │ ├── chart-line-step.json
│ │ │ │ │ ├── chart-pie-donut-active.json
│ │ │ │ │ ├── chart-pie-donut-text.json
│ │ │ │ │ ├── chart-pie-donut.json
│ │ │ │ │ ├── chart-pie-interactive.json
│ │ │ │ │ ├── chart-pie-label-custom.json
│ │ │ │ │ ├── chart-pie-label-list.json
│ │ │ │ │ ├── chart-pie-label.json
│ │ │ │ │ ├── chart-pie-legend.json
│ │ │ │ │ ├── chart-pie-separator-none.json
│ │ │ │ │ ├── chart-pie-simple.json
│ │ │ │ │ ├── chart-pie-stacked.json
│ │ │ │ │ ├── chart-radar-default.json
│ │ │ │ │ ├── chart-radar-dots.json
│ │ │ │ │ ├── chart-radar-grid-circle-fill.json
│ │ │ │ │ ├── chart-radar-grid-circle-no-lines.json
│ │ │ │ │ ├── chart-radar-grid-circle.json
│ │ │ │ │ ├── chart-radar-grid-custom.json
│ │ │ │ │ ├── chart-radar-grid-fill.json
│ │ │ │ │ ├── chart-radar-grid-none.json
│ │ │ │ │ ├── chart-radar-icons.json
│ │ │ │ │ ├── chart-radar-label-custom.json
│ │ │ │ │ ├── chart-radar-legend.json
│ │ │ │ │ ├── chart-radar-lines-only.json
│ │ │ │ │ ├── chart-radar-multiple.json
│ │ │ │ │ ├── chart-radar-radius.json
│ │ │ │ │ ├── chart-radial-grid.json
│ │ │ │ │ ├── chart-radial-label.json
│ │ │ │ │ ├── chart-radial-shape.json
│ │ │ │ │ ├── chart-radial-simple.json
│ │ │ │ │ ├── chart-radial-stacked.json
│ │ │ │ │ ├── chart-radial-text.json
│ │ │ │ │ ├── chart-tooltip-advanced.json
│ │ │ │ │ ├── chart-tooltip-default.json
│ │ │ │ │ ├── chart-tooltip-demo.json
│ │ │ │ │ ├── chart-tooltip-formatter.json
│ │ │ │ │ ├── chart-tooltip-icons.json
│ │ │ │ │ ├── chart-tooltip-indicator-line.json
│ │ │ │ │ ├── chart-tooltip-indicator-none.json
│ │ │ │ │ ├── chart-tooltip-label-custom.json
│ │ │ │ │ ├── chart-tooltip-label-formatter.json
│ │ │ │ │ ├── chart-tooltip-label-none.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-demo.json
│ │ │ │ │ ├── checkbox-disabled.json
│ │ │ │ │ ├── checkbox-form-multiple.json
│ │ │ │ │ ├── checkbox-form-single.json
│ │ │ │ │ ├── checkbox-with-text.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-demo.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-demo.json
│ │ │ │ │ ├── combobox-dropdown-menu.json
│ │ │ │ │ ├── combobox-form.json
│ │ │ │ │ ├── combobox-popover.json
│ │ │ │ │ ├── combobox-responsive.json
│ │ │ │ │ ├── command-demo.json
│ │ │ │ │ ├── command-dialog.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── context-menu-demo.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── data-table-demo.json
│ │ │ │ │ ├── date-picker-demo.json
│ │ │ │ │ ├── date-picker-form.json
│ │ │ │ │ ├── date-picker-with-presets.json
│ │ │ │ │ ├── date-picker-with-range.json
│ │ │ │ │ ├── dialog-close-button.json
│ │ │ │ │ ├── dialog-demo.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── drawer-demo.json
│ │ │ │ │ ├── drawer-dialog.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-checkboxes.json
│ │ │ │ │ ├── dropdown-menu-demo.json
│ │ │ │ │ ├── dropdown-menu-radio-group.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-demo.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-demo.json
│ │ │ │ │ ├── input-disabled.json
│ │ │ │ │ ├── input-file.json
│ │ │ │ │ ├── input-form.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-controlled.json
│ │ │ │ │ ├── input-otp-demo.json
│ │ │ │ │ ├── input-otp-form.json
│ │ │ │ │ ├── input-otp-pattern.json
│ │ │ │ │ ├── input-otp-separator.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input-with-button.json
│ │ │ │ │ ├── input-with-label.json
│ │ │ │ │ ├── input-with-text.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-demo.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-demo.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── mode-toggle.json
│ │ │ │ │ ├── navigation-menu-demo.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── pagination-demo.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-demo.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── progress-demo.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-demo.json
│ │ │ │ │ ├── radio-group-form.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-demo-with-handle.json
│ │ │ │ │ ├── resizable-demo.json
│ │ │ │ │ ├── resizable-handle.json
│ │ │ │ │ ├── resizable-vertical.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-demo.json
│ │ │ │ │ ├── scroll-area-horizontal-demo.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-demo.json
│ │ │ │ │ ├── select-form.json
│ │ │ │ │ ├── select-scrollable.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-demo.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-demo.json
│ │ │ │ │ ├── sheet-side.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-controlled.json
│ │ │ │ │ ├── sidebar-demo.json
│ │ │ │ │ ├── sidebar-footer.json
│ │ │ │ │ ├── sidebar-group-action.json
│ │ │ │ │ ├── sidebar-group-collapsible.json
│ │ │ │ │ ├── sidebar-group.json
│ │ │ │ │ ├── sidebar-header.json
│ │ │ │ │ ├── sidebar-menu-action.json
│ │ │ │ │ ├── sidebar-menu-badge.json
│ │ │ │ │ ├── sidebar-menu-collapsible.json
│ │ │ │ │ ├── sidebar-menu-sub.json
│ │ │ │ │ ├── sidebar-menu.json
│ │ │ │ │ ├── sidebar-rsc.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── sink.json
│ │ │ │ │ ├── skeleton-card.json
│ │ │ │ │ ├── skeleton-demo.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-demo.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-demo.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-demo.json
│ │ │ │ │ ├── switch-form.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-demo.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-demo.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-demo.json
│ │ │ │ │ ├── textarea-disabled.json
│ │ │ │ │ ├── textarea-form.json
│ │ │ │ │ ├── textarea-with-button.json
│ │ │ │ │ ├── textarea-with-label.json
│ │ │ │ │ ├── textarea-with-text.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── theme-daylight.json
│ │ │ │ │ ├── theme-emerald.json
│ │ │ │ │ ├── theme-midnight.json
│ │ │ │ │ ├── toast-demo.json
│ │ │ │ │ ├── toast-destructive.json
│ │ │ │ │ ├── toast-simple.json
│ │ │ │ │ ├── toast-with-action.json
│ │ │ │ │ ├── toast-with-title.json
│ │ │ │ │ ├── toast.json
│ │ │ │ │ ├── toggle-demo.json
│ │ │ │ │ ├── toggle-disabled.json
│ │ │ │ │ ├── toggle-group-demo.json
│ │ │ │ │ ├── toggle-group-disabled.json
│ │ │ │ │ ├── toggle-group-lg.json
│ │ │ │ │ ├── toggle-group-outline.json
│ │ │ │ │ ├── toggle-group-single.json
│ │ │ │ │ ├── toggle-group-sm.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle-lg.json
│ │ │ │ │ ├── toggle-outline.json
│ │ │ │ │ ├── toggle-sm.json
│ │ │ │ │ ├── toggle-with-text.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-demo.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── typography-blockquote.json
│ │ │ │ │ ├── typography-demo.json
│ │ │ │ │ ├── typography-h1.json
│ │ │ │ │ ├── typography-h2.json
│ │ │ │ │ ├── typography-h3.json
│ │ │ │ │ ├── typography-h4.json
│ │ │ │ │ ├── typography-inline-code.json
│ │ │ │ │ ├── typography-large.json
│ │ │ │ │ ├── typography-lead.json
│ │ │ │ │ ├── typography-list.json
│ │ │ │ │ ├── typography-muted.json
│ │ │ │ │ ├── typography-p.json
│ │ │ │ │ ├── typography-small.json
│ │ │ │ │ ├── typography-table.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ ├── use-toast.json
│ │ │ │ │ ├── utils.json
│ │ │ │ │ ├── v0-login-01.json
│ │ │ │ │ ├── v0-sidebar-01.json
│ │ │ │ │ ├── v0-sidebar-02.json
│ │ │ │ │ ├── v0-sidebar-03.json
│ │ │ │ │ ├── v0-sidebar-04.json
│ │ │ │ │ ├── v0-sidebar-05.json
│ │ │ │ │ ├── v0-sidebar-06.json
│ │ │ │ │ ├── v0-sidebar-07.json
│ │ │ │ │ ├── v0-sidebar-08.json
│ │ │ │ │ ├── v0-sidebar-09.json
│ │ │ │ │ ├── v0-sidebar-10.json
│ │ │ │ │ ├── v0-sidebar-11.json
│ │ │ │ │ ├── v0-sidebar-12.json
│ │ │ │ │ ├── v0-sidebar-13.json
│ │ │ │ │ ├── v0-sidebar-14.json
│ │ │ │ │ ├── v0-sidebar-15.json
│ │ │ │ │ └── v0-sidebar-16.json
│ │ │ │ ├── index.json
│ │ │ │ ├── new-york/
│ │ │ │ │ ├── accordion-demo.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-demo.json
│ │ │ │ │ ├── alert-destructive.json
│ │ │ │ │ ├── alert-dialog-demo.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── app-01.json
│ │ │ │ │ ├── aspect-ratio-demo.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-demo.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-demo.json
│ │ │ │ │ ├── badge-destructive.json
│ │ │ │ │ ├── badge-outline.json
│ │ │ │ │ ├── badge-secondary.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-demo.json
│ │ │ │ │ ├── breadcrumb-dropdown.json
│ │ │ │ │ ├── breadcrumb-ellipsis.json
│ │ │ │ │ ├── breadcrumb-link.json
│ │ │ │ │ ├── breadcrumb-responsive.json
│ │ │ │ │ ├── breadcrumb-separator.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-01.json
│ │ │ │ │ ├── button-as-child.json
│ │ │ │ │ ├── button-demo.json
│ │ │ │ │ ├── button-destructive.json
│ │ │ │ │ ├── button-ghost.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button-icon.json
│ │ │ │ │ ├── button-link.json
│ │ │ │ │ ├── button-loading.json
│ │ │ │ │ ├── button-outline.json
│ │ │ │ │ ├── button-secondary.json
│ │ │ │ │ ├── button-with-icon.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-01.json
│ │ │ │ │ ├── calendar-02.json
│ │ │ │ │ ├── calendar-03.json
│ │ │ │ │ ├── calendar-04.json
│ │ │ │ │ ├── calendar-05.json
│ │ │ │ │ ├── calendar-06.json
│ │ │ │ │ ├── calendar-07.json
│ │ │ │ │ ├── calendar-08.json
│ │ │ │ │ ├── calendar-09.json
│ │ │ │ │ ├── calendar-10.json
│ │ │ │ │ ├── calendar-11.json
│ │ │ │ │ ├── calendar-12.json
│ │ │ │ │ ├── calendar-13.json
│ │ │ │ │ ├── calendar-14.json
│ │ │ │ │ ├── calendar-15.json
│ │ │ │ │ ├── calendar-16.json
│ │ │ │ │ ├── calendar-17.json
│ │ │ │ │ ├── calendar-18.json
│ │ │ │ │ ├── calendar-19.json
│ │ │ │ │ ├── calendar-20.json
│ │ │ │ │ ├── calendar-21.json
│ │ │ │ │ ├── calendar-22.json
│ │ │ │ │ ├── calendar-23.json
│ │ │ │ │ ├── calendar-24.json
│ │ │ │ │ ├── calendar-25.json
│ │ │ │ │ ├── calendar-26.json
│ │ │ │ │ ├── calendar-27.json
│ │ │ │ │ ├── calendar-28.json
│ │ │ │ │ ├── calendar-29.json
│ │ │ │ │ ├── calendar-30.json
│ │ │ │ │ ├── calendar-31.json
│ │ │ │ │ ├── calendar-32.json
│ │ │ │ │ ├── calendar-demo.json
│ │ │ │ │ ├── calendar-form.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-demo.json
│ │ │ │ │ ├── card-with-form.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── carousel-api.json
│ │ │ │ │ ├── carousel-demo.json
│ │ │ │ │ ├── carousel-orientation.json
│ │ │ │ │ ├── carousel-plugin.json
│ │ │ │ │ ├── carousel-size.json
│ │ │ │ │ ├── carousel-spacing.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-area-axes.json
│ │ │ │ │ ├── chart-area-default.json
│ │ │ │ │ ├── chart-area-gradient.json
│ │ │ │ │ ├── chart-area-icons.json
│ │ │ │ │ ├── chart-area-interactive.json
│ │ │ │ │ ├── chart-area-legend.json
│ │ │ │ │ ├── chart-area-linear.json
│ │ │ │ │ ├── chart-area-stacked-expand.json
│ │ │ │ │ ├── chart-area-stacked.json
│ │ │ │ │ ├── chart-area-step.json
│ │ │ │ │ ├── chart-bar-active.json
│ │ │ │ │ ├── chart-bar-default.json
│ │ │ │ │ ├── chart-bar-demo-axis.json
│ │ │ │ │ ├── chart-bar-demo-grid.json
│ │ │ │ │ ├── chart-bar-demo-legend.json
│ │ │ │ │ ├── chart-bar-demo-tooltip.json
│ │ │ │ │ ├── chart-bar-demo.json
│ │ │ │ │ ├── chart-bar-horizontal.json
│ │ │ │ │ ├── chart-bar-interactive.json
│ │ │ │ │ ├── chart-bar-label-custom.json
│ │ │ │ │ ├── chart-bar-label.json
│ │ │ │ │ ├── chart-bar-mixed.json
│ │ │ │ │ ├── chart-bar-multiple.json
│ │ │ │ │ ├── chart-bar-negative.json
│ │ │ │ │ ├── chart-bar-stacked.json
│ │ │ │ │ ├── chart-line-default.json
│ │ │ │ │ ├── chart-line-dots-colors.json
│ │ │ │ │ ├── chart-line-dots-custom.json
│ │ │ │ │ ├── chart-line-dots.json
│ │ │ │ │ ├── chart-line-interactive.json
│ │ │ │ │ ├── chart-line-label-custom.json
│ │ │ │ │ ├── chart-line-label.json
│ │ │ │ │ ├── chart-line-linear.json
│ │ │ │ │ ├── chart-line-multiple.json
│ │ │ │ │ ├── chart-line-step.json
│ │ │ │ │ ├── chart-pie-donut-active.json
│ │ │ │ │ ├── chart-pie-donut-text.json
│ │ │ │ │ ├── chart-pie-donut.json
│ │ │ │ │ ├── chart-pie-interactive.json
│ │ │ │ │ ├── chart-pie-label-custom.json
│ │ │ │ │ ├── chart-pie-label-list.json
│ │ │ │ │ ├── chart-pie-label.json
│ │ │ │ │ ├── chart-pie-legend.json
│ │ │ │ │ ├── chart-pie-separator-none.json
│ │ │ │ │ ├── chart-pie-simple.json
│ │ │ │ │ ├── chart-pie-stacked.json
│ │ │ │ │ ├── chart-radar-default.json
│ │ │ │ │ ├── chart-radar-dots.json
│ │ │ │ │ ├── chart-radar-grid-circle-fill.json
│ │ │ │ │ ├── chart-radar-grid-circle-no-lines.json
│ │ │ │ │ ├── chart-radar-grid-circle.json
│ │ │ │ │ ├── chart-radar-grid-custom.json
│ │ │ │ │ ├── chart-radar-grid-fill.json
│ │ │ │ │ ├── chart-radar-grid-none.json
│ │ │ │ │ ├── chart-radar-icons.json
│ │ │ │ │ ├── chart-radar-label-custom.json
│ │ │ │ │ ├── chart-radar-legend.json
│ │ │ │ │ ├── chart-radar-lines-only.json
│ │ │ │ │ ├── chart-radar-multiple.json
│ │ │ │ │ ├── chart-radar-radius.json
│ │ │ │ │ ├── chart-radial-grid.json
│ │ │ │ │ ├── chart-radial-label.json
│ │ │ │ │ ├── chart-radial-shape.json
│ │ │ │ │ ├── chart-radial-simple.json
│ │ │ │ │ ├── chart-radial-stacked.json
│ │ │ │ │ ├── chart-radial-text.json
│ │ │ │ │ ├── chart-tooltip-advanced.json
│ │ │ │ │ ├── chart-tooltip-default.json
│ │ │ │ │ ├── chart-tooltip-demo.json
│ │ │ │ │ ├── chart-tooltip-formatter.json
│ │ │ │ │ ├── chart-tooltip-icons.json
│ │ │ │ │ ├── chart-tooltip-indicator-line.json
│ │ │ │ │ ├── chart-tooltip-indicator-none.json
│ │ │ │ │ ├── chart-tooltip-label-custom.json
│ │ │ │ │ ├── chart-tooltip-label-formatter.json
│ │ │ │ │ ├── chart-tooltip-label-none.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-demo.json
│ │ │ │ │ ├── checkbox-disabled.json
│ │ │ │ │ ├── checkbox-form-multiple.json
│ │ │ │ │ ├── checkbox-form-single.json
│ │ │ │ │ ├── checkbox-with-text.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-demo.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-demo.json
│ │ │ │ │ ├── combobox-dropdown-menu.json
│ │ │ │ │ ├── combobox-form.json
│ │ │ │ │ ├── combobox-popover.json
│ │ │ │ │ ├── combobox-responsive.json
│ │ │ │ │ ├── command-demo.json
│ │ │ │ │ ├── command-dialog.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── context-menu-demo.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── data-table-demo.json
│ │ │ │ │ ├── date-picker-demo.json
│ │ │ │ │ ├── date-picker-form.json
│ │ │ │ │ ├── date-picker-with-presets.json
│ │ │ │ │ ├── date-picker-with-range.json
│ │ │ │ │ ├── dialog-close-button.json
│ │ │ │ │ ├── dialog-demo.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── drawer-demo.json
│ │ │ │ │ ├── drawer-dialog.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-checkboxes.json
│ │ │ │ │ ├── dropdown-menu-demo.json
│ │ │ │ │ ├── dropdown-menu-radio-group.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-demo.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-demo.json
│ │ │ │ │ ├── input-disabled.json
│ │ │ │ │ ├── input-file.json
│ │ │ │ │ ├── input-form.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-controlled.json
│ │ │ │ │ ├── input-otp-demo.json
│ │ │ │ │ ├── input-otp-form.json
│ │ │ │ │ ├── input-otp-pattern.json
│ │ │ │ │ ├── input-otp-separator.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input-with-button.json
│ │ │ │ │ ├── input-with-label.json
│ │ │ │ │ ├── input-with-text.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-demo.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-demo.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── mode-toggle.json
│ │ │ │ │ ├── navigation-menu-demo.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── pagination-demo.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-demo.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── progress-demo.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-demo.json
│ │ │ │ │ ├── radio-group-form.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-demo-with-handle.json
│ │ │ │ │ ├── resizable-demo.json
│ │ │ │ │ ├── resizable-handle.json
│ │ │ │ │ ├── resizable-vertical.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-demo.json
│ │ │ │ │ ├── scroll-area-horizontal-demo.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-demo.json
│ │ │ │ │ ├── select-form.json
│ │ │ │ │ ├── select-scrollable.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-demo.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-demo.json
│ │ │ │ │ ├── sheet-side.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-controlled.json
│ │ │ │ │ ├── sidebar-demo.json
│ │ │ │ │ ├── sidebar-footer.json
│ │ │ │ │ ├── sidebar-group-action.json
│ │ │ │ │ ├── sidebar-group-collapsible.json
│ │ │ │ │ ├── sidebar-group.json
│ │ │ │ │ ├── sidebar-header.json
│ │ │ │ │ ├── sidebar-menu-action.json
│ │ │ │ │ ├── sidebar-menu-badge.json
│ │ │ │ │ ├── sidebar-menu-collapsible.json
│ │ │ │ │ ├── sidebar-menu-sub.json
│ │ │ │ │ ├── sidebar-menu.json
│ │ │ │ │ ├── sidebar-rsc.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── sink.json
│ │ │ │ │ ├── skeleton-card.json
│ │ │ │ │ ├── skeleton-demo.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-demo.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-demo.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-demo.json
│ │ │ │ │ ├── switch-form.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-demo.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-demo.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-demo.json
│ │ │ │ │ ├── textarea-disabled.json
│ │ │ │ │ ├── textarea-form.json
│ │ │ │ │ ├── textarea-with-button.json
│ │ │ │ │ ├── textarea-with-label.json
│ │ │ │ │ ├── textarea-with-text.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── theme-daylight.json
│ │ │ │ │ ├── theme-emerald.json
│ │ │ │ │ ├── theme-midnight.json
│ │ │ │ │ ├── toast-demo.json
│ │ │ │ │ ├── toast-destructive.json
│ │ │ │ │ ├── toast-simple.json
│ │ │ │ │ ├── toast-with-action.json
│ │ │ │ │ ├── toast-with-title.json
│ │ │ │ │ ├── toast.json
│ │ │ │ │ ├── toggle-demo.json
│ │ │ │ │ ├── toggle-disabled.json
│ │ │ │ │ ├── toggle-group-demo.json
│ │ │ │ │ ├── toggle-group-disabled.json
│ │ │ │ │ ├── toggle-group-lg.json
│ │ │ │ │ ├── toggle-group-outline.json
│ │ │ │ │ ├── toggle-group-single.json
│ │ │ │ │ ├── toggle-group-sm.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle-lg.json
│ │ │ │ │ ├── toggle-outline.json
│ │ │ │ │ ├── toggle-sm.json
│ │ │ │ │ ├── toggle-with-text.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-demo.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── typography-blockquote.json
│ │ │ │ │ ├── typography-demo.json
│ │ │ │ │ ├── typography-h1.json
│ │ │ │ │ ├── typography-h2.json
│ │ │ │ │ ├── typography-h3.json
│ │ │ │ │ ├── typography-h4.json
│ │ │ │ │ ├── typography-inline-code.json
│ │ │ │ │ ├── typography-large.json
│ │ │ │ │ ├── typography-lead.json
│ │ │ │ │ ├── typography-list.json
│ │ │ │ │ ├── typography-muted.json
│ │ │ │ │ ├── typography-p.json
│ │ │ │ │ ├── typography-small.json
│ │ │ │ │ ├── typography-table.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ ├── use-toast.json
│ │ │ │ │ ├── utils.json
│ │ │ │ │ ├── v0-login-01.json
│ │ │ │ │ ├── v0-sidebar-01.json
│ │ │ │ │ ├── v0-sidebar-02.json
│ │ │ │ │ ├── v0-sidebar-03.json
│ │ │ │ │ ├── v0-sidebar-04.json
│ │ │ │ │ ├── v0-sidebar-05.json
│ │ │ │ │ ├── v0-sidebar-06.json
│ │ │ │ │ ├── v0-sidebar-07.json
│ │ │ │ │ ├── v0-sidebar-08.json
│ │ │ │ │ ├── v0-sidebar-09.json
│ │ │ │ │ ├── v0-sidebar-10.json
│ │ │ │ │ ├── v0-sidebar-11.json
│ │ │ │ │ ├── v0-sidebar-12.json
│ │ │ │ │ ├── v0-sidebar-13.json
│ │ │ │ │ ├── v0-sidebar-14.json
│ │ │ │ │ ├── v0-sidebar-15.json
│ │ │ │ │ └── v0-sidebar-16.json
│ │ │ │ ├── new-york-v4/
│ │ │ │ │ ├── accordion-demo.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-demo.json
│ │ │ │ │ ├── alert-destructive.json
│ │ │ │ │ ├── alert-dialog-demo.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-demo.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-demo.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-demo.json
│ │ │ │ │ ├── badge-destructive.json
│ │ │ │ │ ├── badge-outline.json
│ │ │ │ │ ├── badge-secondary.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-demo.json
│ │ │ │ │ ├── breadcrumb-dropdown.json
│ │ │ │ │ ├── breadcrumb-ellipsis.json
│ │ │ │ │ ├── breadcrumb-link.json
│ │ │ │ │ ├── breadcrumb-responsive.json
│ │ │ │ │ ├── breadcrumb-separator.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-as-child.json
│ │ │ │ │ ├── button-default.json
│ │ │ │ │ ├── button-demo.json
│ │ │ │ │ ├── button-destructive.json
│ │ │ │ │ ├── button-ghost.json
│ │ │ │ │ ├── button-group-demo.json
│ │ │ │ │ ├── button-group-dropdown.json
│ │ │ │ │ ├── button-group-input-group.json
│ │ │ │ │ ├── button-group-input.json
│ │ │ │ │ ├── button-group-nested.json
│ │ │ │ │ ├── button-group-orientation.json
│ │ │ │ │ ├── button-group-popover.json
│ │ │ │ │ ├── button-group-select.json
│ │ │ │ │ ├── button-group-separator.json
│ │ │ │ │ ├── button-group-size.json
│ │ │ │ │ ├── button-group-split.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button-icon.json
│ │ │ │ │ ├── button-link.json
│ │ │ │ │ ├── button-loading.json
│ │ │ │ │ ├── button-outline.json
│ │ │ │ │ ├── button-rounded.json
│ │ │ │ │ ├── button-secondary.json
│ │ │ │ │ ├── button-size.json
│ │ │ │ │ ├── button-with-icon.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-01.json
│ │ │ │ │ ├── calendar-02.json
│ │ │ │ │ ├── calendar-03.json
│ │ │ │ │ ├── calendar-04.json
│ │ │ │ │ ├── calendar-05.json
│ │ │ │ │ ├── calendar-06.json
│ │ │ │ │ ├── calendar-07.json
│ │ │ │ │ ├── calendar-08.json
│ │ │ │ │ ├── calendar-09.json
│ │ │ │ │ ├── calendar-10.json
│ │ │ │ │ ├── calendar-11.json
│ │ │ │ │ ├── calendar-12.json
│ │ │ │ │ ├── calendar-13.json
│ │ │ │ │ ├── calendar-14.json
│ │ │ │ │ ├── calendar-15.json
│ │ │ │ │ ├── calendar-16.json
│ │ │ │ │ ├── calendar-17.json
│ │ │ │ │ ├── calendar-18.json
│ │ │ │ │ ├── calendar-19.json
│ │ │ │ │ ├── calendar-20.json
│ │ │ │ │ ├── calendar-21.json
│ │ │ │ │ ├── calendar-22.json
│ │ │ │ │ ├── calendar-23.json
│ │ │ │ │ ├── calendar-24.json
│ │ │ │ │ ├── calendar-25.json
│ │ │ │ │ ├── calendar-26.json
│ │ │ │ │ ├── calendar-27.json
│ │ │ │ │ ├── calendar-28.json
│ │ │ │ │ ├── calendar-29.json
│ │ │ │ │ ├── calendar-30.json
│ │ │ │ │ ├── calendar-31.json
│ │ │ │ │ ├── calendar-32.json
│ │ │ │ │ ├── calendar-demo.json
│ │ │ │ │ ├── calendar-form.json
│ │ │ │ │ ├── calendar-hijri.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-demo.json
│ │ │ │ │ ├── card-with-form.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── carousel-api.json
│ │ │ │ │ ├── carousel-demo.json
│ │ │ │ │ ├── carousel-orientation.json
│ │ │ │ │ ├── carousel-plugin.json
│ │ │ │ │ ├── carousel-size.json
│ │ │ │ │ ├── carousel-spacing.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-area-axes.json
│ │ │ │ │ ├── chart-area-default.json
│ │ │ │ │ ├── chart-area-gradient.json
│ │ │ │ │ ├── chart-area-icons.json
│ │ │ │ │ ├── chart-area-interactive.json
│ │ │ │ │ ├── chart-area-legend.json
│ │ │ │ │ ├── chart-area-linear.json
│ │ │ │ │ ├── chart-area-stacked-expand.json
│ │ │ │ │ ├── chart-area-stacked.json
│ │ │ │ │ ├── chart-area-step.json
│ │ │ │ │ ├── chart-bar-active.json
│ │ │ │ │ ├── chart-bar-default.json
│ │ │ │ │ ├── chart-bar-demo-axis.json
│ │ │ │ │ ├── chart-bar-demo-grid.json
│ │ │ │ │ ├── chart-bar-demo-legend.json
│ │ │ │ │ ├── chart-bar-demo-tooltip.json
│ │ │ │ │ ├── chart-bar-demo.json
│ │ │ │ │ ├── chart-bar-horizontal.json
│ │ │ │ │ ├── chart-bar-interactive.json
│ │ │ │ │ ├── chart-bar-label-custom.json
│ │ │ │ │ ├── chart-bar-label.json
│ │ │ │ │ ├── chart-bar-mixed.json
│ │ │ │ │ ├── chart-bar-multiple.json
│ │ │ │ │ ├── chart-bar-negative.json
│ │ │ │ │ ├── chart-bar-stacked.json
│ │ │ │ │ ├── chart-line-default.json
│ │ │ │ │ ├── chart-line-dots-colors.json
│ │ │ │ │ ├── chart-line-dots-custom.json
│ │ │ │ │ ├── chart-line-dots.json
│ │ │ │ │ ├── chart-line-interactive.json
│ │ │ │ │ ├── chart-line-label-custom.json
│ │ │ │ │ ├── chart-line-label.json
│ │ │ │ │ ├── chart-line-linear.json
│ │ │ │ │ ├── chart-line-multiple.json
│ │ │ │ │ ├── chart-line-step.json
│ │ │ │ │ ├── chart-pie-donut-active.json
│ │ │ │ │ ├── chart-pie-donut-text.json
│ │ │ │ │ ├── chart-pie-donut.json
│ │ │ │ │ ├── chart-pie-interactive.json
│ │ │ │ │ ├── chart-pie-label-custom.json
│ │ │ │ │ ├── chart-pie-label-list.json
│ │ │ │ │ ├── chart-pie-label.json
│ │ │ │ │ ├── chart-pie-legend.json
│ │ │ │ │ ├── chart-pie-separator-none.json
│ │ │ │ │ ├── chart-pie-simple.json
│ │ │ │ │ ├── chart-pie-stacked.json
│ │ │ │ │ ├── chart-radar-default.json
│ │ │ │ │ ├── chart-radar-dots.json
│ │ │ │ │ ├── chart-radar-grid-circle-fill.json
│ │ │ │ │ ├── chart-radar-grid-circle-no-lines.json
│ │ │ │ │ ├── chart-radar-grid-circle.json
│ │ │ │ │ ├── chart-radar-grid-custom.json
│ │ │ │ │ ├── chart-radar-grid-fill.json
│ │ │ │ │ ├── chart-radar-grid-none.json
│ │ │ │ │ ├── chart-radar-icons.json
│ │ │ │ │ ├── chart-radar-label-custom.json
│ │ │ │ │ ├── chart-radar-legend.json
│ │ │ │ │ ├── chart-radar-lines-only.json
│ │ │ │ │ ├── chart-radar-multiple.json
│ │ │ │ │ ├── chart-radar-radius.json
│ │ │ │ │ ├── chart-radial-grid.json
│ │ │ │ │ ├── chart-radial-label.json
│ │ │ │ │ ├── chart-radial-shape.json
│ │ │ │ │ ├── chart-radial-simple.json
│ │ │ │ │ ├── chart-radial-stacked.json
│ │ │ │ │ ├── chart-radial-text.json
│ │ │ │ │ ├── chart-tooltip-advanced.json
│ │ │ │ │ ├── chart-tooltip-default.json
│ │ │ │ │ ├── chart-tooltip-demo.json
│ │ │ │ │ ├── chart-tooltip-formatter.json
│ │ │ │ │ ├── chart-tooltip-icons.json
│ │ │ │ │ ├── chart-tooltip-indicator-line.json
│ │ │ │ │ ├── chart-tooltip-indicator-none.json
│ │ │ │ │ ├── chart-tooltip-label-custom.json
│ │ │ │ │ ├── chart-tooltip-label-formatter.json
│ │ │ │ │ ├── chart-tooltip-label-none.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-demo.json
│ │ │ │ │ ├── checkbox-disabled.json
│ │ │ │ │ ├── checkbox-form-multiple.json
│ │ │ │ │ ├── checkbox-form-single.json
│ │ │ │ │ ├── checkbox-with-text.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-demo.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-demo.json
│ │ │ │ │ ├── combobox-dropdown-menu.json
│ │ │ │ │ ├── combobox-form.json
│ │ │ │ │ ├── combobox-popover.json
│ │ │ │ │ ├── combobox-responsive.json
│ │ │ │ │ ├── combobox.json
│ │ │ │ │ ├── command-demo.json
│ │ │ │ │ ├── command-dialog.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── context-menu-demo.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── data-table-demo.json
│ │ │ │ │ ├── date-picker-demo.json
│ │ │ │ │ ├── date-picker-form.json
│ │ │ │ │ ├── date-picker-with-presets.json
│ │ │ │ │ ├── date-picker-with-range.json
│ │ │ │ │ ├── dialog-close-button.json
│ │ │ │ │ ├── dialog-demo.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── direction.json
│ │ │ │ │ ├── drawer-demo.json
│ │ │ │ │ ├── drawer-dialog.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-checkboxes.json
│ │ │ │ │ ├── dropdown-menu-demo.json
│ │ │ │ │ ├── dropdown-menu-dialog.json
│ │ │ │ │ ├── dropdown-menu-radio-group.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty-avatar-group.json
│ │ │ │ │ ├── empty-avatar.json
│ │ │ │ │ ├── empty-background.json
│ │ │ │ │ ├── empty-demo.json
│ │ │ │ │ ├── empty-icon.json
│ │ │ │ │ ├── empty-image.json
│ │ │ │ │ ├── empty-input-group.json
│ │ │ │ │ ├── empty-muted.json
│ │ │ │ │ ├── empty-outline.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── field-badge.json
│ │ │ │ │ ├── field-checkbox.json
│ │ │ │ │ ├── field-choice-card.json
│ │ │ │ │ ├── field-demo.json
│ │ │ │ │ ├── field-fieldset.json
│ │ │ │ │ ├── field-group.json
│ │ │ │ │ ├── field-input.json
│ │ │ │ │ ├── field-radio.json
│ │ │ │ │ ├── field-responsive.json
│ │ │ │ │ ├── field-select.json
│ │ │ │ │ ├── field-slider.json
│ │ │ │ │ ├── field-switch.json
│ │ │ │ │ ├── field-textarea.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── form-next-complex.json
│ │ │ │ │ ├── form-next-demo.json
│ │ │ │ │ ├── form-rhf-array.json
│ │ │ │ │ ├── form-rhf-checkbox.json
│ │ │ │ │ ├── form-rhf-complex.json
│ │ │ │ │ ├── form-rhf-demo.json
│ │ │ │ │ ├── form-rhf-input.json
│ │ │ │ │ ├── form-rhf-password.json
│ │ │ │ │ ├── form-rhf-radiogroup.json
│ │ │ │ │ ├── form-rhf-select.json
│ │ │ │ │ ├── form-rhf-switch.json
│ │ │ │ │ ├── form-rhf-textarea.json
│ │ │ │ │ ├── form-tanstack-array.json
│ │ │ │ │ ├── form-tanstack-checkbox.json
│ │ │ │ │ ├── form-tanstack-complex.json
│ │ │ │ │ ├── form-tanstack-demo.json
│ │ │ │ │ ├── form-tanstack-input.json
│ │ │ │ │ ├── form-tanstack-radiogroup.json
│ │ │ │ │ ├── form-tanstack-select.json
│ │ │ │ │ ├── form-tanstack-switch.json
│ │ │ │ │ ├── form-tanstack-textarea.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-demo.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-demo.json
│ │ │ │ │ ├── input-disabled.json
│ │ │ │ │ ├── input-file.json
│ │ │ │ │ ├── input-form.json
│ │ │ │ │ ├── input-group-align.json
│ │ │ │ │ ├── input-group-button-group.json
│ │ │ │ │ ├── input-group-button.json
│ │ │ │ │ ├── input-group-custom.json
│ │ │ │ │ ├── input-group-demo.json
│ │ │ │ │ ├── input-group-dropdown.json
│ │ │ │ │ ├── input-group-icon.json
│ │ │ │ │ ├── input-group-label.json
│ │ │ │ │ ├── input-group-select.json
│ │ │ │ │ ├── input-group-spinner.json
│ │ │ │ │ ├── input-group-text.json
│ │ │ │ │ ├── input-group-textarea.json
│ │ │ │ │ ├── input-group-tooltip.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-controlled.json
│ │ │ │ │ ├── input-otp-demo.json
│ │ │ │ │ ├── input-otp-form.json
│ │ │ │ │ ├── input-otp-pattern.json
│ │ │ │ │ ├── input-otp-separator.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input-with-button.json
│ │ │ │ │ ├── input-with-label.json
│ │ │ │ │ ├── input-with-text.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item-avatar.json
│ │ │ │ │ ├── item-demo.json
│ │ │ │ │ ├── item-dropdown.json
│ │ │ │ │ ├── item-group.json
│ │ │ │ │ ├── item-header.json
│ │ │ │ │ ├── item-icon.json
│ │ │ │ │ ├── item-image.json
│ │ │ │ │ ├── item-link.json
│ │ │ │ │ ├── item-select.json
│ │ │ │ │ ├── item-size.json
│ │ │ │ │ ├── item-variant.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd-button.json
│ │ │ │ │ ├── kbd-demo.json
│ │ │ │ │ ├── kbd-group.json
│ │ │ │ │ ├── kbd-input-group.json
│ │ │ │ │ ├── kbd-tooltip.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-demo.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-demo.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── mode-toggle.json
│ │ │ │ │ ├── native-select-demo.json
│ │ │ │ │ ├── native-select-disabled.json
│ │ │ │ │ ├── native-select-groups.json
│ │ │ │ │ ├── native-select-invalid.json
│ │ │ │ │ ├── native-select.json
│ │ │ │ │ ├── navigation-menu-demo.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── otp-01.json
│ │ │ │ │ ├── otp-02.json
│ │ │ │ │ ├── otp-03.json
│ │ │ │ │ ├── otp-04.json
│ │ │ │ │ ├── otp-05.json
│ │ │ │ │ ├── pagination-demo.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-demo.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── products-01.json
│ │ │ │ │ ├── progress-demo.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-demo.json
│ │ │ │ │ ├── radio-group-form.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-demo-with-handle.json
│ │ │ │ │ ├── resizable-demo.json
│ │ │ │ │ ├── resizable-handle.json
│ │ │ │ │ ├── resizable-vertical.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-demo.json
│ │ │ │ │ ├── scroll-area-horizontal-demo.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-demo.json
│ │ │ │ │ ├── select-form.json
│ │ │ │ │ ├── select-scrollable.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-demo.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-demo.json
│ │ │ │ │ ├── sheet-side.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-controlled.json
│ │ │ │ │ ├── sidebar-demo.json
│ │ │ │ │ ├── sidebar-footer.json
│ │ │ │ │ ├── sidebar-group-action.json
│ │ │ │ │ ├── sidebar-group-collapsible.json
│ │ │ │ │ ├── sidebar-group.json
│ │ │ │ │ ├── sidebar-header.json
│ │ │ │ │ ├── sidebar-menu-action.json
│ │ │ │ │ ├── sidebar-menu-badge.json
│ │ │ │ │ ├── sidebar-menu-collapsible.json
│ │ │ │ │ ├── sidebar-menu-sub.json
│ │ │ │ │ ├── sidebar-menu.json
│ │ │ │ │ ├── sidebar-rsc.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── signup-01.json
│ │ │ │ │ ├── signup-02.json
│ │ │ │ │ ├── signup-03.json
│ │ │ │ │ ├── signup-04.json
│ │ │ │ │ ├── signup-05.json
│ │ │ │ │ ├── skeleton-card.json
│ │ │ │ │ ├── skeleton-demo.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-demo.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-demo.json
│ │ │ │ │ ├── sonner-types.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner-badge.json
│ │ │ │ │ ├── spinner-basic.json
│ │ │ │ │ ├── spinner-button.json
│ │ │ │ │ ├── spinner-color.json
│ │ │ │ │ ├── spinner-custom.json
│ │ │ │ │ ├── spinner-demo.json
│ │ │ │ │ ├── spinner-empty.json
│ │ │ │ │ ├── spinner-input-group.json
│ │ │ │ │ ├── spinner-item.json
│ │ │ │ │ ├── spinner-size.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-demo.json
│ │ │ │ │ ├── switch-form.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-demo.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-demo.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-demo.json
│ │ │ │ │ ├── textarea-disabled.json
│ │ │ │ │ ├── textarea-form.json
│ │ │ │ │ ├── textarea-with-button.json
│ │ │ │ │ ├── textarea-with-label.json
│ │ │ │ │ ├── textarea-with-text.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── theme-gray.json
│ │ │ │ │ ├── theme-neutral.json
│ │ │ │ │ ├── theme-slate.json
│ │ │ │ │ ├── theme-stone.json
│ │ │ │ │ ├── theme-zinc.json
│ │ │ │ │ ├── toast-demo.json
│ │ │ │ │ ├── toast-destructive.json
│ │ │ │ │ ├── toast-simple.json
│ │ │ │ │ ├── toast-with-action.json
│ │ │ │ │ ├── toast-with-title.json
│ │ │ │ │ ├── toggle-demo.json
│ │ │ │ │ ├── toggle-disabled.json
│ │ │ │ │ ├── toggle-group-demo.json
│ │ │ │ │ ├── toggle-group-disabled.json
│ │ │ │ │ ├── toggle-group-lg.json
│ │ │ │ │ ├── toggle-group-outline.json
│ │ │ │ │ ├── toggle-group-single.json
│ │ │ │ │ ├── toggle-group-sm.json
│ │ │ │ │ ├── toggle-group-spacing.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle-lg.json
│ │ │ │ │ ├── toggle-outline.json
│ │ │ │ │ ├── toggle-sm.json
│ │ │ │ │ ├── toggle-with-text.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-demo.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── typography-blockquote.json
│ │ │ │ │ ├── typography-demo.json
│ │ │ │ │ ├── typography-h1.json
│ │ │ │ │ ├── typography-h2.json
│ │ │ │ │ ├── typography-h3.json
│ │ │ │ │ ├── typography-h4.json
│ │ │ │ │ ├── typography-inline-code.json
│ │ │ │ │ ├── typography-large.json
│ │ │ │ │ ├── typography-lead.json
│ │ │ │ │ ├── typography-list.json
│ │ │ │ │ ├── typography-muted.json
│ │ │ │ │ ├── typography-p.json
│ │ │ │ │ ├── typography-small.json
│ │ │ │ │ ├── typography-table.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ └── utils.json
│ │ │ │ ├── radix-lyra/
│ │ │ │ │ ├── accordion-example.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-dialog-example.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert-example.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-example.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-example.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-example.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-example.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-example.json
│ │ │ │ │ ├── button-group-example.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-example.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-example.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── cards.json
│ │ │ │ │ ├── carousel-example.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-example.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-example.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-example.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-example.json
│ │ │ │ │ ├── combobox.json
│ │ │ │ │ ├── command-example.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── component-example.json
│ │ │ │ │ ├── context-menu-example.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── demo.json
│ │ │ │ │ ├── dialog-example.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── direction.json
│ │ │ │ │ ├── drawer-example.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-example.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty-example.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── example.json
│ │ │ │ │ ├── field-example.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── font-dm-sans.json
│ │ │ │ │ ├── font-figtree.json
│ │ │ │ │ ├── font-geist-mono.json
│ │ │ │ │ ├── font-geist.json
│ │ │ │ │ ├── font-heading-dm-sans.json
│ │ │ │ │ ├── font-heading-figtree.json
│ │ │ │ │ ├── font-heading-geist-mono.json
│ │ │ │ │ ├── font-heading-geist.json
│ │ │ │ │ ├── font-heading-ibm-plex-sans.json
│ │ │ │ │ ├── font-heading-instrument-sans.json
│ │ │ │ │ ├── font-heading-inter.json
│ │ │ │ │ ├── font-heading-jetbrains-mono.json
│ │ │ │ │ ├── font-heading-lora.json
│ │ │ │ │ ├── font-heading-manrope.json
│ │ │ │ │ ├── font-heading-merriweather.json
│ │ │ │ │ ├── font-heading-montserrat.json
│ │ │ │ │ ├── font-heading-noto-sans.json
│ │ │ │ │ ├── font-heading-noto-serif.json
│ │ │ │ │ ├── font-heading-nunito-sans.json
│ │ │ │ │ ├── font-heading-outfit.json
│ │ │ │ │ ├── font-heading-oxanium.json
│ │ │ │ │ ├── font-heading-playfair-display.json
│ │ │ │ │ ├── font-heading-public-sans.json
│ │ │ │ │ ├── font-heading-raleway.json
│ │ │ │ │ ├── font-heading-roboto-slab.json
│ │ │ │ │ ├── font-heading-roboto.json
│ │ │ │ │ ├── font-heading-source-sans-3.json
│ │ │ │ │ ├── font-heading-space-grotesk.json
│ │ │ │ │ ├── font-heading-tomorrow.json
│ │ │ │ │ ├── font-ibm-plex-sans.json
│ │ │ │ │ ├── font-instrument-sans.json
│ │ │ │ │ ├── font-inter.json
│ │ │ │ │ ├── font-jetbrains-mono.json
│ │ │ │ │ ├── font-lora.json
│ │ │ │ │ ├── font-manrope.json
│ │ │ │ │ ├── font-merriweather.json
│ │ │ │ │ ├── font-montserrat.json
│ │ │ │ │ ├── font-noto-sans.json
│ │ │ │ │ ├── font-noto-serif.json
│ │ │ │ │ ├── font-nunito-sans.json
│ │ │ │ │ ├── font-outfit.json
│ │ │ │ │ ├── font-oxanium.json
│ │ │ │ │ ├── font-playfair-display.json
│ │ │ │ │ ├── font-public-sans.json
│ │ │ │ │ ├── font-raleway.json
│ │ │ │ │ ├── font-roboto-slab.json
│ │ │ │ │ ├── font-roboto.json
│ │ │ │ │ ├── font-source-sans-3.json
│ │ │ │ │ ├── font-space-grotesk.json
│ │ │ │ │ ├── font-tomorrow.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-example.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-example.json
│ │ │ │ │ ├── input-group-example.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-example.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item-example.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd-example.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-example.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-example.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── native-select-example.json
│ │ │ │ │ ├── native-select.json
│ │ │ │ │ ├── navigation-menu-example.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── pagination-example.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-example.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── preview.json
│ │ │ │ │ ├── progress-example.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-example.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-example.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-example.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-example.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-example.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-example.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-example.json
│ │ │ │ │ ├── sidebar-floating-example.json
│ │ │ │ │ ├── sidebar-icon-example.json
│ │ │ │ │ ├── sidebar-inset-example.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── signup-01.json
│ │ │ │ │ ├── signup-02.json
│ │ │ │ │ ├── signup-03.json
│ │ │ │ │ ├── signup-04.json
│ │ │ │ │ ├── signup-05.json
│ │ │ │ │ ├── skeleton-example.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-example.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-example.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner-example.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-example.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-example.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-example.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-example.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── toggle-example.json
│ │ │ │ │ ├── toggle-group-example.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-example.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ └── utils.json
│ │ │ │ ├── radix-maia/
│ │ │ │ │ ├── accordion-example.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-dialog-example.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert-example.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-example.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-example.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-example.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-example.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-example.json
│ │ │ │ │ ├── button-group-example.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-example.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-example.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── cards.json
│ │ │ │ │ ├── carousel-example.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-example.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-example.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-example.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-example.json
│ │ │ │ │ ├── combobox.json
│ │ │ │ │ ├── command-example.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── component-example.json
│ │ │ │ │ ├── context-menu-example.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── demo.json
│ │ │ │ │ ├── dialog-example.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── direction.json
│ │ │ │ │ ├── drawer-example.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-example.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty-example.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── example.json
│ │ │ │ │ ├── field-example.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── font-dm-sans.json
│ │ │ │ │ ├── font-figtree.json
│ │ │ │ │ ├── font-geist-mono.json
│ │ │ │ │ ├── font-geist.json
│ │ │ │ │ ├── font-heading-dm-sans.json
│ │ │ │ │ ├── font-heading-figtree.json
│ │ │ │ │ ├── font-heading-geist-mono.json
│ │ │ │ │ ├── font-heading-geist.json
│ │ │ │ │ ├── font-heading-ibm-plex-sans.json
│ │ │ │ │ ├── font-heading-instrument-sans.json
│ │ │ │ │ ├── font-heading-inter.json
│ │ │ │ │ ├── font-heading-jetbrains-mono.json
│ │ │ │ │ ├── font-heading-lora.json
│ │ │ │ │ ├── font-heading-manrope.json
│ │ │ │ │ ├── font-heading-merriweather.json
│ │ │ │ │ ├── font-heading-montserrat.json
│ │ │ │ │ ├── font-heading-noto-sans.json
│ │ │ │ │ ├── font-heading-noto-serif.json
│ │ │ │ │ ├── font-heading-nunito-sans.json
│ │ │ │ │ ├── font-heading-outfit.json
│ │ │ │ │ ├── font-heading-oxanium.json
│ │ │ │ │ ├── font-heading-playfair-display.json
│ │ │ │ │ ├── font-heading-public-sans.json
│ │ │ │ │ ├── font-heading-raleway.json
│ │ │ │ │ ├── font-heading-roboto-slab.json
│ │ │ │ │ ├── font-heading-roboto.json
│ │ │ │ │ ├── font-heading-source-sans-3.json
│ │ │ │ │ ├── font-heading-space-grotesk.json
│ │ │ │ │ ├── font-heading-tomorrow.json
│ │ │ │ │ ├── font-ibm-plex-sans.json
│ │ │ │ │ ├── font-instrument-sans.json
│ │ │ │ │ ├── font-inter.json
│ │ │ │ │ ├── font-jetbrains-mono.json
│ │ │ │ │ ├── font-lora.json
│ │ │ │ │ ├── font-manrope.json
│ │ │ │ │ ├── font-merriweather.json
│ │ │ │ │ ├── font-montserrat.json
│ │ │ │ │ ├── font-noto-sans.json
│ │ │ │ │ ├── font-noto-serif.json
│ │ │ │ │ ├── font-nunito-sans.json
│ │ │ │ │ ├── font-outfit.json
│ │ │ │ │ ├── font-oxanium.json
│ │ │ │ │ ├── font-playfair-display.json
│ │ │ │ │ ├── font-public-sans.json
│ │ │ │ │ ├── font-raleway.json
│ │ │ │ │ ├── font-roboto-slab.json
│ │ │ │ │ ├── font-roboto.json
│ │ │ │ │ ├── font-source-sans-3.json
│ │ │ │ │ ├── font-space-grotesk.json
│ │ │ │ │ ├── font-tomorrow.json
│ │ │ │ │ ├── form.json
│ │ │ │ │ ├── hover-card-example.json
│ │ │ │ │ ├── hover-card.json
│ │ │ │ │ ├── index.json
│ │ │ │ │ ├── input-example.json
│ │ │ │ │ ├── input-group-example.json
│ │ │ │ │ ├── input-group.json
│ │ │ │ │ ├── input-otp-example.json
│ │ │ │ │ ├── input-otp.json
│ │ │ │ │ ├── input.json
│ │ │ │ │ ├── item-example.json
│ │ │ │ │ ├── item.json
│ │ │ │ │ ├── kbd-example.json
│ │ │ │ │ ├── kbd.json
│ │ │ │ │ ├── label-example.json
│ │ │ │ │ ├── label.json
│ │ │ │ │ ├── login-01.json
│ │ │ │ │ ├── login-02.json
│ │ │ │ │ ├── login-03.json
│ │ │ │ │ ├── login-04.json
│ │ │ │ │ ├── login-05.json
│ │ │ │ │ ├── menubar-example.json
│ │ │ │ │ ├── menubar.json
│ │ │ │ │ ├── native-select-example.json
│ │ │ │ │ ├── native-select.json
│ │ │ │ │ ├── navigation-menu-example.json
│ │ │ │ │ ├── navigation-menu.json
│ │ │ │ │ ├── pagination-example.json
│ │ │ │ │ ├── pagination.json
│ │ │ │ │ ├── popover-example.json
│ │ │ │ │ ├── popover.json
│ │ │ │ │ ├── preview.json
│ │ │ │ │ ├── progress-example.json
│ │ │ │ │ ├── progress.json
│ │ │ │ │ ├── radio-group-example.json
│ │ │ │ │ ├── radio-group.json
│ │ │ │ │ ├── registry.json
│ │ │ │ │ ├── resizable-example.json
│ │ │ │ │ ├── resizable.json
│ │ │ │ │ ├── scroll-area-example.json
│ │ │ │ │ ├── scroll-area.json
│ │ │ │ │ ├── select-example.json
│ │ │ │ │ ├── select.json
│ │ │ │ │ ├── separator-example.json
│ │ │ │ │ ├── separator.json
│ │ │ │ │ ├── sheet-example.json
│ │ │ │ │ ├── sheet.json
│ │ │ │ │ ├── sidebar-01.json
│ │ │ │ │ ├── sidebar-02.json
│ │ │ │ │ ├── sidebar-03.json
│ │ │ │ │ ├── sidebar-04.json
│ │ │ │ │ ├── sidebar-05.json
│ │ │ │ │ ├── sidebar-06.json
│ │ │ │ │ ├── sidebar-07.json
│ │ │ │ │ ├── sidebar-08.json
│ │ │ │ │ ├── sidebar-09.json
│ │ │ │ │ ├── sidebar-10.json
│ │ │ │ │ ├── sidebar-11.json
│ │ │ │ │ ├── sidebar-12.json
│ │ │ │ │ ├── sidebar-13.json
│ │ │ │ │ ├── sidebar-14.json
│ │ │ │ │ ├── sidebar-15.json
│ │ │ │ │ ├── sidebar-16.json
│ │ │ │ │ ├── sidebar-example.json
│ │ │ │ │ ├── sidebar-floating-example.json
│ │ │ │ │ ├── sidebar-icon-example.json
│ │ │ │ │ ├── sidebar-inset-example.json
│ │ │ │ │ ├── sidebar.json
│ │ │ │ │ ├── signup-01.json
│ │ │ │ │ ├── signup-02.json
│ │ │ │ │ ├── signup-03.json
│ │ │ │ │ ├── signup-04.json
│ │ │ │ │ ├── signup-05.json
│ │ │ │ │ ├── skeleton-example.json
│ │ │ │ │ ├── skeleton.json
│ │ │ │ │ ├── slider-example.json
│ │ │ │ │ ├── slider.json
│ │ │ │ │ ├── sonner-example.json
│ │ │ │ │ ├── sonner.json
│ │ │ │ │ ├── spinner-example.json
│ │ │ │ │ ├── spinner.json
│ │ │ │ │ ├── style.json
│ │ │ │ │ ├── switch-example.json
│ │ │ │ │ ├── switch.json
│ │ │ │ │ ├── table-example.json
│ │ │ │ │ ├── table.json
│ │ │ │ │ ├── tabs-example.json
│ │ │ │ │ ├── tabs.json
│ │ │ │ │ ├── textarea-example.json
│ │ │ │ │ ├── textarea.json
│ │ │ │ │ ├── toggle-example.json
│ │ │ │ │ ├── toggle-group-example.json
│ │ │ │ │ ├── toggle-group.json
│ │ │ │ │ ├── toggle.json
│ │ │ │ │ ├── tooltip-example.json
│ │ │ │ │ ├── tooltip.json
│ │ │ │ │ ├── use-mobile.json
│ │ │ │ │ └── utils.json
│ │ │ │ ├── radix-mira/
│ │ │ │ │ ├── accordion-example.json
│ │ │ │ │ ├── accordion.json
│ │ │ │ │ ├── alert-dialog-example.json
│ │ │ │ │ ├── alert-dialog.json
│ │ │ │ │ ├── alert-example.json
│ │ │ │ │ ├── alert.json
│ │ │ │ │ ├── aspect-ratio-example.json
│ │ │ │ │ ├── aspect-ratio.json
│ │ │ │ │ ├── avatar-example.json
│ │ │ │ │ ├── avatar.json
│ │ │ │ │ ├── badge-example.json
│ │ │ │ │ ├── badge.json
│ │ │ │ │ ├── breadcrumb-example.json
│ │ │ │ │ ├── breadcrumb.json
│ │ │ │ │ ├── button-example.json
│ │ │ │ │ ├── button-group-example.json
│ │ │ │ │ ├── button-group.json
│ │ │ │ │ ├── button.json
│ │ │ │ │ ├── calendar-example.json
│ │ │ │ │ ├── calendar.json
│ │ │ │ │ ├── card-example.json
│ │ │ │ │ ├── card.json
│ │ │ │ │ ├── cards.json
│ │ │ │ │ ├── carousel-example.json
│ │ │ │ │ ├── carousel.json
│ │ │ │ │ ├── chart-example.json
│ │ │ │ │ ├── chart.json
│ │ │ │ │ ├── checkbox-example.json
│ │ │ │ │ ├── checkbox.json
│ │ │ │ │ ├── collapsible-example.json
│ │ │ │ │ ├── collapsible.json
│ │ │ │ │ ├── combobox-example.json
│ │ │ │ │ ├── combobox.json
│ │ │ │ │ ├── command-example.json
│ │ │ │ │ ├── command.json
│ │ │ │ │ ├── component-example.json
│ │ │ │ │ ├── context-menu-example.json
│ │ │ │ │ ├── context-menu.json
│ │ │ │ │ ├── dashboard-01.json
│ │ │ │ │ ├── demo.json
│ │ │ │ │ ├── dialog-example.json
│ │ │ │ │ ├── dialog.json
│ │ │ │ │ ├── direction.json
│ │ │ │ │ ├── drawer-example.json
│ │ │ │ │ ├── drawer.json
│ │ │ │ │ ├── dropdown-menu-example.json
│ │ │ │ │ ├── dropdown-menu.json
│ │ │ │ │ ├── empty-example.json
│ │ │ │ │ ├── empty.json
│ │ │ │ │ ├── example.json
│ │ │ │ │ ├── field-example.json
│ │ │ │ │ ├── field.json
│ │ │ │ │ ├── font-dm-sans.json
│ │ │ │ │ ├── font-figtree.json
│ │ │ │ │ ├── font-geist-mono.json
│ │ │ │ │ ├── font-geist.json
│ │ │ │ │ ├── font-heading-dm-sans.json
│ │ │ │ │ ├── font-heading-figtree.json
│ │ │ │ │ ├── font-heading-geist-mono.json
│ │ │ │ │ ├── font-heading-geist.json
│ │ │ │ │ ├── font-heading-ibm-plex-sans.json
│ │ │ │ │ ├── font-heading-instrument-sans.json
│ │ │ │ │ ├── font-heading-inter.json
│ │ │ │ │ ├── font-heading-jetbrains-mono.json
│ │ │ │ │ ├── font-heading-lora.json
│ │ │ │ │ ├── font-heading-manrope.json
│ │ │ │ │ ├── font-heading-merriweather.json
│ │ │ │ │ ├── font-heading-montserrat.json
│ │ │ │ │ ├── font-heading-noto-sans.json
│ │ │ │ │ ├── font-heading-noto-serif.json
│ │ │ │ │ ├── font-heading-nunito-sans.json
│ │ │ │ │ ├── font-heading-outfit.json
│ │ │ │ │ ├── font-heading-oxanium.json
│ │ │ │ │ ├── font-heading-playfair-display.json
│ │ │ │ │ ├── font-heading-public-
================================================
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": ["@changesets/changelog-github", { "repo": "shadcn-ui/ui" }],
"commit": false,
"fixed": [],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": ["v4", "tests"]
}
================================================
FILE: .claude/settings.local.json
================================================
{
"permissions": {
"allow": [
"Bash(npm test:*)",
"Bash(npm run typecheck:*)",
"Bash(ls:*)",
"Bash(cat:*)",
"WebSearch",
"WebFetch(domain:github.com)"
],
"deny": []
}
}
================================================
FILE: .commitlintrc.json
================================================
{
"extends": ["@commitlint/config-conventional"]
}
================================================
FILE: .cursor/rules/registry-bases-parity.mdc
================================================
---
description: Keep registry base and radix trees in sync when editing shared UI
globs: apps/v4/registry/bases/**/*
alwaysApply: false
---
# Registry bases: Base UI ↔ Radix parity
`apps/v4/registry/bases/base` and `apps/v4/registry/bases/radix` are **parallel registries**. Anything that exists in both trees for the same purpose (preview blocks, mirrored examples, shared card layouts, etc.) **must stay in sync**.
## When editing
- If you change a file under **`bases/base/...`**, apply the **same behavioral and visual change** to the matching path under **`bases/radix/...`** (and the reverse).
- Only diverge where APIs differ (e.g. import paths like `@/registry/bases/base/ui/*` vs `@/registry/bases/radix/ui/*`, or Base UI vs Radix component props).
- Do **not** update only one side unless the user explicitly asks for a single-base change.
## Typical mirrored paths
- `blocks/preview/**` — preview cards and blocks
- Parallel `ui/*` components when both exist for the same component
After edits, briefly confirm both trees were updated (or state why one side is intentionally unchanged).
================================================
FILE: .editorconfig
================================================
# editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
================================================
FILE: .eslintignore
================================================
node_modules/
target/
.next/
build/
dist/
/templates/
/fixtures/
================================================
FILE: .eslintrc.json
================================================
{
"$schema": "https://json.schemastore.org/eslintrc",
"root": true,
"extends": [
"next/core-web-vitals",
"turbo",
"prettier",
"plugin:tailwindcss/recommended"
],
"plugins": ["tailwindcss"],
"ignorePatterns": ["**/fixtures/**"],
"rules": {
"@next/next/no-html-link-for-pages": "off",
"tailwindcss/no-custom-classname": "off",
"tailwindcss/classnames-order": "error"
},
"settings": {
"tailwindcss": {
"callees": ["cn", "cva"],
"config": "tailwind.config.cjs"
},
"next": {
"rootDir": ["apps/*/"]
}
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"parser": "@typescript-eslint/parser"
}
]
}
================================================
FILE: .github/DISCUSSION_TEMPLATE/blocks-request.yml
================================================
title: "[blocks]: "
labels: ["Blocks Request"]
body:
- type: markdown
attributes:
value: |
### Thanks for taking the time to create a block request! Please search open/closed requests before submitting, as the block or a similar one may have already been requested.
- type: textarea
id: block-description
attributes:
label: Description
description: Tell us about your block request
placeholder: "A dashboard for an e-commerce website showing sales, orders, and customers..."
validations:
required: true
- type: input
id: block-example-url
attributes:
label: Example
description: Link to an example of the block
placeholder: ex. https://example.com
validations:
required: false
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: [shadcn]
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.yml
================================================
name: "Bug report"
description: Report an issue
title: '[bug]: '
labels: ["bug"]
body:
- type: markdown
attributes:
value: |
### Thanks for taking the time to create a bug report. 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 this is a bug or not, please open a discussion instead:
- [Discussions](https://github.com/shadcn-ui/ui/discussions/new?category=general)
- 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: input
id: components-affected
attributes:
label: Affected component/components
description: Which shadcn/ui components are affected?
placeholder: ex. Button, Checkbox...
validations:
required: true
- type: textarea
id: reproduction
attributes:
label: How to reproduce
description: A step-by-step description of how to reproduce the bug.
placeholder: |
1. Go to '...'
2. Click on '....'
3. See error
validations:
required: true
- type: input
id: codesandbox-stackblitz
attributes:
label: Codesandbox/StackBlitz link
description: |
A link to a CodeSandbox or StackBlitz that includes a minimal reproduction of the problem. In rare cases when not applicable, you can 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.
> [!CAUTION]
> If you skip this step, this issue might be **labeled** with `please add a reproduction` and **closed**.
validations:
required: false
- 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: Information about browsers, system or binaries that's relevant.
render: bash
placeholder: System, Binaries, Browsers
validations:
required: true
- type: checkboxes
id: terms
attributes:
label: Before submitting
description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md).
options:
- label: I've made research efforts and searched the documentation
required: true
- label: I've searched for existing issues
required: true
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: Get Help
url: https://github.com/shadcn-ui/ui/discussions/new?category=general
about: If you can't get something to work the way you expect, open a question in our discussion forums.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.yml
================================================
name: "Feature request"
description: Create a feature request for shadcn/ui
title: '[feat]: '
labels: ['area: request']
body:
- type: markdown
attributes:
value: |
### Thanks for taking the time to create a feature request! 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 this is a bug or not, please open a discussion instead:
- [Discussions](https://github.com/shadcn-ui/ui/discussions/new?category=general)
- type: textarea
id: feature-description
attributes:
label: Feature description
description: Tell us about your feature request
placeholder: 'I think this feature would be great because...'
value: 'Describe your feature request...'
validations:
required: true
- type: input
id: components-affected
attributes:
label: Affected component/components
description: Is this feature request relevant to any of the already existing components?
placeholder: ex. Button, Checkbox...
validations:
required: false
- type: textarea
id: context
attributes:
label: Additional Context
description: Add any other context about the feature here.
placeholder: ex. screenshots, Stack Overflow links, forum links, etc.
value: 'Additional details here...'
validations:
required: false
- type: checkboxes
id: terms
attributes:
label: Before submitting
description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md).
options:
- label: I've made research efforts and searched the documentation
required: true
- label: I've searched for existing issues and PRs
required: true
================================================
FILE: .github/changeset-version.js
================================================
// ORIGINALLY FROM CLOUDFLARE WRANGLER:
// https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js
import { execSync } from "child_process"
// This script is used by the `release.yml` workflow to update the version of the packages being released.
// The standard step is only to run `changeset version` but this does not update the pnpm-lock.yaml file.
// So we also run `pnpm install`, which does this update.
// This is a workaround until this is handled automatically by `changeset version`.
// See https://github.com/changesets/changesets/issues/421.
execSync("npx changeset version", { stdio: "inherit" })
execSync("pnpm install --lockfile-only", { stdio: "inherit" })
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/astro-app"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/astro-monorepo"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/next-app"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/next-monorepo"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/react-router-app"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/react-router-monorepo"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/start-app"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/start-monorepo"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/vite-app"
schedule:
interval: "weekly"
- package-ecosystem: "npm"
directory: "/templates/vite-monorepo"
schedule:
interval: "weekly"
================================================
FILE: .github/version-script-beta.js
================================================
// ORIGINALLY FROM CLOUDFLARE WRANGLER:
// https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js
import { exec } from "child_process"
import fs from "fs"
const pkgJsonPath = "packages/shadcn/package.json"
try {
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
exec("git rev-parse --short HEAD", (err, stdout) => {
if (err) {
console.log(err)
process.exit(1)
}
pkg.version = "0.0.0-beta." + stdout.trim()
fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, "\t") + "\n")
})
} catch (error) {
console.error(error)
process.exit(1)
}
================================================
FILE: .github/version-script-next.js
================================================
// ORIGINALLY FROM CLOUDFLARE WRANGLER:
// https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js
import { exec } from "child_process"
import fs from "fs"
const pkgJsonPath = "packages/shadcn/package.json"
try {
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
exec("git rev-parse --short HEAD", (err, stdout) => {
if (err) {
console.log(err)
process.exit(1)
}
pkg.version = "0.0.0-next." + stdout.trim()
fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, "\t") + "\n")
})
} catch (error) {
console.error(error)
process.exit(1)
}
================================================
FILE: .github/workflows/code-check.yml
================================================
name: Code check
on:
pull_request:
branches: ["*"]
jobs:
lint:
runs-on: ubuntu-latest
name: pnpm lint
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 20
- uses: pnpm/action-setup@v4
name: Install pnpm
id: pnpm-install
with:
version: 9.0.6
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- run: pnpm lint
format:
runs-on: ubuntu-latest
name: pnpm format:check
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 20
- uses: pnpm/action-setup@v4
name: Install pnpm
id: pnpm-install
with:
version: 9.0.6
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Build packages
run: pnpm --filter=shadcn build
- run: pnpm format:check
tsc:
runs-on: ubuntu-latest
name: pnpm typecheck
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 20
- uses: pnpm/action-setup@v4
name: Install pnpm
id: pnpm-install
with:
version: 9.0.6
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Build packages
run: pnpm --filter=shadcn build
- run: pnpm typecheck
================================================
FILE: .github/workflows/issue-stale.yml
================================================
# Adapted from vercel/next.js
name: "Stale issue handler"
on:
workflow_dispatch:
schedule:
# This runs every day 20 minutes before midnight: https://crontab.guru/#40_23_*_*_*
- cron: "40 23 * * *"
jobs:
stale:
runs-on: ubuntu-latest
if: github.repository_owner == 'shadcn-ui'
steps:
- uses: actions/stale@v9
id: issue-stale
name: "Mark stale issues, close stale issues"
with:
repo-token: ${{ secrets.STALE_TOKEN }}
ascending: true
days-before-issue-close: 7
days-before-issue-stale: 365
days-before-pr-stale: -1
days-before-pr-close: -1
remove-issue-stale-when-updated: true
stale-issue-label: "stale?"
exempt-issue-labels: "roadmap,next"
stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)"
operations-per-run: 300
- uses: actions/stale@v9
id: pr-state
name: "Mark stale PRs, close stale PRs"
with:
repo-token: ${{ secrets.STALE_TOKEN }}
ascending: true
days-before-issue-close: -1
days-before-issue-stale: -1
days-before-pr-close: 7
days-before-pr-stale: 365
remove-pr-stale-when-updated: true
exempt-pr-labels: "roadmap,next,bug"
stale-pr-label: "stale?"
stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding! (This is an automated message)"
operations-per-run: 300
================================================
FILE: .github/workflows/prerelease-comment.yml
================================================
# Adapted from create-t3-app.
name: Write Beta Release comment
on:
workflow_run:
workflows: ["Release - Beta"]
types:
- completed
jobs:
comment:
if: |
github.repository_owner == 'shadcn-ui' &&
${{ github.event.workflow_run.conclusion == 'success' }}
runs-on: ubuntu-latest
name: Write comment to the PR
steps:
- name: "Comment on PR"
uses: actions/github-script@v6
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
owner: context.repo.owner,
repo: context.repo.repo,
run_id: context.payload.workflow_run.id,
});
for (const artifact of allArtifacts.data.artifacts) {
// Extract the PR number and package version from the artifact name
const match = /^npm-package-shadcn@(.*?)-pr-(\d+)/.exec(artifact.name);
if (match) {
require("fs").appendFileSync(
process.env.GITHUB_ENV,
`\nBETA_PACKAGE_VERSION=${match[1]}` +
`\nWORKFLOW_RUN_PR=${match[2]}` +
`\nWORKFLOW_RUN_ID=${context.payload.workflow_run.id}`
);
break;
}
}
- name: "Comment on PR with Link"
uses: marocchino/sticky-pull-request-comment@v2
with:
number: ${{ env.WORKFLOW_RUN_PR }}
message: |
A new prerelease is available for testing:
```sh
pnpm dlx shadcn@${{ env.BETA_PACKAGE_VERSION }}
```
- name: "Remove the autorelease label once published"
uses: actions/github-script@v6
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
github.rest.issues.removeLabel({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: '${{ env.WORKFLOW_RUN_PR }}',
name: '🚀 autorelease',
});
================================================
FILE: .github/workflows/prerelease.yml
================================================
# Adapted from create-t3-app.
name: Release - Beta
on:
pull_request:
types: [labeled]
branches:
- main
permissions:
id-token: write
contents: read
jobs:
prerelease:
if: |
github.repository_owner == 'shadcn-ui' &&
contains(github.event.pull_request.labels.*.name, '🚀 autorelease')
name: Build & Publish a beta release to NPM
runs-on: ubuntu-latest
environment: Preview
steps:
- name: Checkout Repo
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Use PNPM
uses: pnpm/action-setup@v4
with:
version: 9.0.6
- name: Use Node.js 20
uses: actions/setup-node@v4
with:
node-version: 20
registry-url: "https://registry.npmjs.org"
cache: "pnpm"
- name: Update npm for OIDC support
run: npm install -g npm@latest
- name: Install NPM Dependencies
run: pnpm install
- name: Modify package.json version
run: node .github/version-script-beta.js
- name: Publish Beta to NPM
run: pnpm pub:beta
- name: get-npm-version
id: package-version
uses: martinbeentjes/npm-get-version-action@main
with:
path: packages/shadcn
- name: Upload packaged artifact
uses: actions/upload-artifact@v4
with:
name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
path: packages/shadcn/dist/index.js
================================================
FILE: .github/workflows/release.yml
================================================
# Adapted from create-t3-app.
name: Release
on:
push:
branches:
- main
permissions:
id-token: write
contents: write
pull-requests: write
jobs:
release:
if: ${{ github.repository_owner == 'shadcn-ui' }}
name: Create a PR for release workflow
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Use PNPM
uses: pnpm/action-setup@v4
with:
version: 9.0.6
- name: Use Node.js 20
uses: actions/setup-node@v4
with:
node-version: 20
registry-url: "https://registry.npmjs.org"
cache: "pnpm"
- name: Update npm for OIDC support
run: npm install -g npm@latest
- name: Install NPM Dependencies
run: pnpm install
# - name: Check for errors
# run: pnpm check
- name: Build the package
run: pnpm shadcn:build
- name: Create Version PR or Publish to NPM
id: changesets
uses: changesets/action@v1
with:
commit: "chore(release): version packages"
title: "chore(release): version packages"
version: node .github/changeset-version.js
publish: npx changeset publish
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NODE_ENV: "production"
================================================
FILE: .github/workflows/test.yml
================================================
name: Test
on:
pull_request:
branches: ["*"]
jobs:
test:
runs-on: ubuntu-latest
name: pnpm test
env:
NEXT_PUBLIC_APP_URL: http://localhost:4000
NEXT_PUBLIC_V0_URL: https://v0.dev
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 22
- uses: pnpm/action-setup@v4
name: Install pnpm
id: pnpm-install
with:
version: 9.0.6
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- run: pnpm test
================================================
FILE: .github/workflows/validate-registries.yml
================================================
name: Validate Registries
on:
pull_request:
paths:
- "apps/v4/public/r/registries.json"
- "apps/v4/registry/directory.json"
push:
branches:
- main
paths:
- "apps/v4/public/r/registries.json"
- "apps/v4/registry/directory.json"
jobs:
check-registry-sync:
if: github.event_name == 'pull_request'
runs-on: ubuntu-latest
name: check-registry-sync
permissions:
contents: read
pull-requests: write
steps:
- name: Check changed files
id: changed
env:
GH_TOKEN: ${{ github.token }}
run: |
CHANGED_FILES=$(gh pr diff ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --name-only)
DIRECTORY_CHANGED=false
REGISTRIES_CHANGED=false
if echo "$CHANGED_FILES" | grep -q "^apps/v4/registry/directory.json$"; then
DIRECTORY_CHANGED=true
fi
if echo "$CHANGED_FILES" | grep -q "^apps/v4/public/r/registries.json$"; then
REGISTRIES_CHANGED=true
fi
echo "directory_changed=$DIRECTORY_CHANGED" >> $GITHUB_OUTPUT
echo "registries_changed=$REGISTRIES_CHANGED" >> $GITHUB_OUTPUT
- name: Flag missing registries.json update
if: steps.changed.outputs.directory_changed == 'true' && steps.changed.outputs.registries_changed == 'false'
env:
GH_TOKEN: ${{ github.token }}
run: |
gh pr edit ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --add-label "registries: invalid"
gh pr comment ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --body "can you run \`pnpm registry:build\` and commit the json files please?"
exit 1
validate:
runs-on: ubuntu-latest
name: pnpm validate:registries
permissions:
contents: read
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 20
- name: Block reserved registry namespaces
env:
RESERVED_NAMESPACES: "@shadcn,@ui,@blocks,@components,@block,@component,@util,@utils,@registry,@lib,@hook,@hooks,@theme,@themes,@chart,@charts"
run: |
node <<'EOF'
const fs = require("node:fs")
const files = [
"apps/v4/public/r/registries.json",
"apps/v4/registry/directory.json",
]
const reservedNamespaces = new Set(
process.env.RESERVED_NAMESPACES.split(",").filter(Boolean)
)
function readNames(filePath) {
return JSON.parse(fs.readFileSync(filePath, "utf8")).map(
(entry) => entry.name
)
}
const violations = files.flatMap((filePath) => {
return readNames(filePath)
.filter((name) => reservedNamespaces.has(name))
.map((name) => `${filePath}: ${name}`)
})
if (violations.length > 0) {
console.error("Reserved registry namespaces are not allowed:")
for (const violation of violations) {
console.error(`- ${violation}`)
}
process.exit(1)
}
EOF
- uses: pnpm/action-setup@v4
name: Install pnpm
id: pnpm-install
with:
version: 9.0.6
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Validate registries
run: pnpm --filter=v4 validate:registries
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
node_modules
.pnp
.pnp.js
# testing
coverage
# next.js
.next/
out/
build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# turbo
.turbo
.contentlayer
tsconfig.tsbuildinfo
# ide
.idea
.fleet
.vscode
.notes
.playwright-mcp
shadcn-workspace
================================================
FILE: .kodiak.toml
================================================
# .kodiak.toml
version = 1
[merge]
automerge_label = "automerge"
require_automerge_label = true
method = "squash"
delete_branch_on_merge = true
optimistic_updates = false
prioritize_ready_to_merge = true
notify_on_conflict = true
[merge.message]
title = "pull_request_title"
body = "pull_request_body"
include_pr_number = true
body_type = "markdown"
strip_html_comments = true
================================================
FILE: .npmrc
================================================
auto-install-peers=true
link-workspace-packages=true
================================================
FILE: .nvmrc
================================================
v20.5.1
================================================
FILE: .prettierignore
================================================
dist
node_modules
.next
build
.contentlayer
**/fixtures
deprecated
apps/v4/registry/styles/**/*.css
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
Thanks for your interest in contributing to ui.shadcn.com. We're happy to have you here.
Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar.
If you need any help, feel free to reach out to [@shadcn](https://twitter.com/shadcn).
## About this repository
This repository is a monorepo.
- We use [pnpm](https://pnpm.io) and [`workspaces`](https://pnpm.io/workspaces) for development.
- We use [Turborepo](https://turbo.build/repo) as our build system.
- We use [changesets](https://github.com/changesets/changesets) for managing releases.
## Structure
This repository is structured as follows:
```
apps
└── v4
├── app
├── components
├── content
└── registry
└── new-york-v4
├── example
└── ui
packages
└── shadcn
```
| Path | Description |
| -------------------- | ---------------------------------------- |
| `apps/v4/app` | The Next.js application for the website. |
| `apps/v4/components` | The React components for the website. |
| `apps/v4/content` | The content for the website. |
| `apps/v4/registry` | The registry for the components. |
| `packages/shadcn` | The `shadcn` package. |
## Development
### Fork this repo
You can fork this repo by clicking the fork button in the top right corner of this page.
### Clone on your local machine
```bash
git clone https://github.com/your-username/ui.git
```
### Navigate to project directory
```bash
cd ui
```
### Create a new Branch
```bash
git checkout -b my-new-branch
```
### Install dependencies
```bash
pnpm install
```
### Run a workspace
You can use the `pnpm --filter=[WORKSPACE]` command to start the development process for a workspace.
#### Examples
1. To run the `ui.shadcn.com` website:
```bash
pnpm --filter=v4 dev
```
2. To run the `shadcn` package:
```bash
pnpm --filter=shadcn dev
```
## Running the CLI Locally
To run the CLI locally, you can follow the workflow:
1. Start by running the dev server:
```bash
pnpm dev
```
2. In another terminal tab, test the CLI by running:
```bash
pnpm shadcn
```
To test the CLI in a specific app, use a command like:
```bash
pnpm shadcn <init | add | ...> -c ~/Desktop/my-app
```
This workflow ensures that you are running the most recent version of the registry and testing the CLI properly in your local environment.
## Documentation
The documentation for this project is located in the `v4` workspace. You can run the documentation locally by running the following command:
```bash
pnpm --filter=v4 dev
```
Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/v4/content/docs` directory.
## Components
We use a registry system for developing components. You can find the source code for the components under `apps/v4/registry`. The components are organized by styles.
```bash
apps
└── v4
└── registry
└── new-york-v4
├── example
└── ui
```
When adding or modifying components, please ensure that:
1. You make the changes for every style.
2. You update the documentation.
3. You run `pnpm registry:build` to update the registry.
## Commit Convention
Before you create a Pull Request, please check whether your commits comply with
the commit conventions used in this repository.
When you create a commit we kindly ask you to follow the convention
`category(scope or module): message` in your commit message while using one of
the following categories:
- `feat / feature`: all changes that introduce completely new code or new
features
- `fix`: changes that fix a bug (ideally you will additionally reference an
issue if present)
- `refactor`: any code related change that is not a fix nor a feature
- `docs`: changing existing or creating new documentation (i.e. README, docs for
usage of a lib or cli usage)
- `build`: all changes regarding the build of the software, changes to
dependencies or the addition of new dependencies
- `test`: all changes regarding tests (adding new tests or changing existing
ones)
- `ci`: all changes regarding the configuration of continuous integration (i.e.
github actions, ci system)
- `chore`: all changes to the repository that do not fit into any of the above
categories
e.g. `feat(components): add new prop to the avatar component`
If you are interested in the detailed specification you can visit
https://www.conventionalcommits.org/ or check out the
[Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).
## Requests for new components
If you have a request for a new component, please open a discussion on GitHub. We'll be happy to help you out.
## CLI
The `shadcn` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli).
Any changes to the CLI should be made in the `packages/shadcn` directory. If you can, it would be great if you could add tests for your changes.
## Testing
Tests are written using [Vitest](https://vitest.dev). You can run all the tests from the root of the repository.
```bash
pnpm test
```
Please ensure that the tests are passing when submitting a pull request. If you're adding new features, please include tests.
================================================
FILE: LICENSE.md
================================================
MIT License
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/ui
A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code. **Use this to build your own component library**.
## Documentation
Visit https://ui.shadcn.com/docs to view the documentation.
## Contributing
Please read the [contributing guide](/CONTRIBUTING.md).
## License
Licensed under the [MIT license](./LICENSE.md).
================================================
FILE: SECURITY.md
================================================
# Security Policy
If you believe you have found a security vulnerability, we encourage you to let us know right away.
We will investigate all legitimate reports and do our best to quickly fix the problem.
Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our Open Source Software.
To do this, please visit the security tab of the repository and click the [Report a vulnerability](https://github.com/shadcn-ui/ui/security/advisories/new) button.
================================================
FILE: apps/v4/.env.example
================================================
NEXT_PUBLIC_V0_URL=https://v0.dev
NEXT_PUBLIC_APP_URL=http://localhost:4000
================================================
FILE: apps/v4/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# env files (can opt-in for committing if needed)
.env*
!.env.example
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# generated content
.contentlayer
.content-collections
.source
================================================
FILE: apps/v4/.prettierignore
================================================
dist
node_modules
.next
build
.contentlayer
registry/__index__.tsx
content/docs/components/calendar.mdx
registry/styles/**/*.css
================================================
FILE: apps/v4/README.md
================================================
This is a wip registry for the `shadcn` canary version. It has React 19 and Tailwind v4 components.
================================================
FILE: apps/v4/app/(app)/(root)/components/appearance-settings.tsx
================================================
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import { ButtonGroup } from "@/examples/radix/ui/button-group"
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
FieldTitle,
} from "@/examples/radix/ui/field"
import { Input } from "@/examples/radix/ui/input"
import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
import { Switch } from "@/examples/radix/ui/switch"
import { IconMinus, IconPlus } from "@tabler/icons-react"
export function AppearanceSettings() {
const [gpuCount, setGpuCount] = React.useState(8)
const handleGpuAdjustment = React.useCallback((adjustment: number) => {
setGpuCount((prevCount) =>
Math.max(1, Math.min(99, prevCount + adjustment))
)
}, [])
const handleGpuInputChange = React.useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
const value = parseInt(e.target.value, 10)
if (!isNaN(value) && value >= 1 && value <= 99) {
setGpuCount(value)
}
},
[]
)
return (
<FieldSet>
<FieldGroup>
<FieldSet>
<FieldLegend>Compute Environment</FieldLegend>
<FieldDescription>
Select the compute environment for your cluster.
</FieldDescription>
<RadioGroup defaultValue="kubernetes">
<FieldLabel htmlFor="kubernetes-r2h">
<Field orientation="horizontal">
<FieldContent>
<FieldTitle>Kubernetes</FieldTitle>
<FieldDescription>
Run GPU workloads on a K8s configured cluster. This is the
default.
</FieldDescription>
</FieldContent>
<RadioGroupItem
value="kubernetes"
id="kubernetes-r2h"
aria-label="Kubernetes"
/>
</Field>
</FieldLabel>
<FieldLabel htmlFor="vm-z4k">
<Field orientation="horizontal">
<FieldContent>
<FieldTitle>Virtual Machine</FieldTitle>
<FieldDescription>
Access a VM configured cluster to run workloads. (Coming
soon)
</FieldDescription>
</FieldContent>
<RadioGroupItem
value="vm"
id="vm-z4k"
aria-label="Virtual Machine"
/>
</Field>
</FieldLabel>
</RadioGroup>
</FieldSet>
<FieldSeparator />
<Field orientation="horizontal">
<FieldContent>
<FieldLabel htmlFor="number-of-gpus-f6l">Number of GPUs</FieldLabel>
<FieldDescription>You can add more later.</FieldDescription>
</FieldContent>
<ButtonGroup>
<Input
id="number-of-gpus-f6l"
value={gpuCount}
onChange={handleGpuInputChange}
size={3}
className="h-7 w-14! font-mono"
maxLength={3}
/>
<Button
variant="outline"
size="icon-sm"
type="button"
aria-label="Decrement"
onClick={() => handleGpuAdjustment(-1)}
disabled={gpuCount <= 1}
>
<IconMinus />
</Button>
<Button
variant="outline"
size="icon-sm"
type="button"
aria-label="Increment"
onClick={() => handleGpuAdjustment(1)}
disabled={gpuCount >= 99}
>
<IconPlus />
</Button>
</ButtonGroup>
</Field>
<FieldSeparator />
<Field orientation="horizontal">
<FieldContent>
<FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
<FieldDescription>
Allow the wallpaper to be tinted.
</FieldDescription>
</FieldContent>
<Switch id="tinting" defaultChecked />
</Field>
</FieldGroup>
</FieldSet>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/button-group-demo.tsx
================================================
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import { ButtonGroup } from "@/examples/radix/ui/button-group"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import {
ArchiveIcon,
ArrowLeftIcon,
CalendarPlusIcon,
ClockIcon,
ListFilterIcon,
MailCheckIcon,
MoreHorizontalIcon,
TagIcon,
Trash2Icon,
} from "lucide-react"
export function ButtonGroupDemo() {
const [label, setLabel] = React.useState("personal")
return (
<ButtonGroup>
<ButtonGroup className="hidden sm:flex">
<Button variant="outline" size="icon-sm" aria-label="Go Back">
<ArrowLeftIcon />
</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="sm">
Archive
</Button>
<Button variant="outline" size="sm">
Report
</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="sm">
Snooze
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon-sm" aria-label="More Options">
<MoreHorizontalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuGroup>
<DropdownMenuItem>
<MailCheckIcon />
Mark as Read
</DropdownMenuItem>
<DropdownMenuItem>
<ArchiveIcon />
Archive
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<ClockIcon />
Snooze
</DropdownMenuItem>
<DropdownMenuItem>
<CalendarPlusIcon />
Add to Calendar
</DropdownMenuItem>
<DropdownMenuItem>
<ListFilterIcon />
Add to List
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<TagIcon />
Label As...
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuRadioGroup
value={label}
onValueChange={setLabel}
>
<DropdownMenuRadioItem value="personal">
Personal
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="work">
Work
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="other">
Other
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem variant="destructive">
<Trash2Icon />
Trash
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</ButtonGroup>
</ButtonGroup>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/button-group-input-group.tsx
================================================
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import { ButtonGroup } from "@/examples/radix/ui/button-group"
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from "@/examples/radix/ui/input-group"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/examples/radix/ui/tooltip"
import { AudioLinesIcon, PlusIcon } from "lucide-react"
export function ButtonGroupInputGroup() {
const [voiceEnabled, setVoiceEnabled] = React.useState(false)
return (
<ButtonGroup className="[--radius:9999rem]">
<ButtonGroup>
<Button variant="outline" size="icon" aria-label="Add">
<PlusIcon />
</Button>
</ButtonGroup>
<ButtonGroup className="flex-1">
<InputGroup>
<InputGroupInput
placeholder={
voiceEnabled ? "Record and send audio..." : "Send a message..."
}
disabled={voiceEnabled}
/>
<InputGroupAddon align="inline-end">
<Tooltip>
<TooltipTrigger asChild>
<InputGroupButton
onClick={() => setVoiceEnabled(!voiceEnabled)}
data-active={voiceEnabled}
className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
aria-pressed={voiceEnabled}
size="icon-xs"
aria-label="Voice Mode"
>
<AudioLinesIcon />
</InputGroupButton>
</TooltipTrigger>
<TooltipContent>Voice Mode</TooltipContent>
</Tooltip>
</InputGroupAddon>
</InputGroup>
</ButtonGroup>
</ButtonGroup>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/button-group-nested.tsx
================================================
"use client"
import { Button } from "@/examples/radix/ui/button"
import { ButtonGroup } from "@/examples/radix/ui/button-group"
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
export function ButtonGroupNested() {
return (
<ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="sm">
1
</Button>
<Button variant="outline" size="sm">
2
</Button>
<Button variant="outline" size="sm">
3
</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="icon-sm" aria-label="Previous">
<ArrowLeftIcon />
</Button>
<Button variant="outline" size="icon-sm" aria-label="Next">
<ArrowRightIcon />
</Button>
</ButtonGroup>
</ButtonGroup>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/button-group-popover.tsx
================================================
import { Button } from "@/examples/radix/ui/button"
import { ButtonGroup } from "@/examples/radix/ui/button-group"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/examples/radix/ui/popover"
import { Separator } from "@/examples/radix/ui/separator"
import { Textarea } from "@/examples/radix/ui/textarea"
import { BotIcon, ChevronDownIcon } from "lucide-react"
export function ButtonGroupPopover() {
return (
<ButtonGroup>
<Button variant="outline" size="sm">
<BotIcon /> Copilot
</Button>
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="icon-sm" aria-label="Open Popover">
<ChevronDownIcon />
</Button>
</PopoverTrigger>
<PopoverContent align="end" className="gap-0 rounded-xl p-0 text-sm">
<div className="px-4 py-3">
<div className="text-sm font-medium">Agent Tasks</div>
</div>
<Separator />
<div className="p-4 text-sm *:[p:not(:last-child)]:mb-2">
<Textarea
placeholder="Describe your task in natural language."
className="mb-4 resize-none"
/>
<p className="font-medium">Start a new task with Copilot</p>
<p className="text-muted-foreground">
Describe your task in natural language. Copilot will work in the
background and open a pull request for your review.
</p>
</div>
</PopoverContent>
</Popover>
</ButtonGroup>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx
================================================
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarImage,
} from "@/examples/radix/ui/avatar"
import { Button } from "@/examples/radix/ui/button"
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/examples/radix/ui/empty"
import { PlusIcon } from "lucide-react"
export function EmptyAvatarGroup() {
return (
<Empty className="flex-none border py-10">
<EmptyHeader>
<EmptyMedia>
<AvatarGroup className="grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://github.com/maxleiter.png"
alt="@maxleiter"
/>
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</AvatarGroup>
</EmptyMedia>
<EmptyTitle>No Team Members</EmptyTitle>
<EmptyDescription>
Invite your team to collaborate on this project.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button size="sm">
<PlusIcon />
Invite Members
</Button>
</EmptyContent>
</Empty>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/empty-input-group.tsx
================================================
import { SearchIcon } from "lucide-react"
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyTitle,
} from "@/registry/new-york-v4/ui/empty"
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/registry/new-york-v4/ui/input-group"
import { Kbd } from "@/registry/new-york-v4/ui/kbd"
export function EmptyInputGroup() {
return (
<Empty>
<EmptyHeader>
<EmptyTitle>404 - Not Found</EmptyTitle>
<EmptyDescription>
The page you're looking for doesn't exist. Try searching for
what you need below.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<InputGroup className="w-3/4">
<InputGroupInput placeholder="Try searching for pages..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<Kbd>/</Kbd>
</InputGroupAddon>
</InputGroup>
<EmptyDescription>
Need help? <a href="#">Contact support</a>
</EmptyDescription>
</EmptyContent>
</Empty>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/field-checkbox.tsx
================================================
import { Checkbox } from "@/examples/radix/ui/checkbox"
import { Field, FieldLabel } from "@/examples/radix/ui/field"
export function FieldCheckbox() {
return (
<FieldLabel htmlFor="checkbox-demo">
<Field orientation="horizontal">
<Checkbox id="checkbox-demo" defaultChecked />
<FieldLabel htmlFor="checkbox-demo" className="line-clamp-1">
I agree to the terms and conditions
</FieldLabel>
</Field>
</FieldLabel>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/field-choice-card.tsx
================================================
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
FieldSet,
FieldTitle,
} from "@/registry/new-york-v4/ui/field"
import {
RadioGroup,
RadioGroupItem,
} from "@/registry/new-york-v4/ui/radio-group"
export function FieldChoiceCard() {
return (
<div className="w-full max-w-md">
<FieldGroup>
<FieldSet>
<FieldLabel htmlFor="compute-environment-p8w">
Compute Environment
</FieldLabel>
<FieldDescription>
Select the compute environment for your cluster.
</FieldDescription>
<RadioGroup defaultValue="kubernetes">
<FieldLabel htmlFor="kubernetes-r2h">
<Field orientation="horizontal">
<RadioGroupItem
value="kubernetes"
id="kubernetes-r2h"
aria-label="Kubernetes"
/>
<FieldContent>
<FieldTitle>Kubernetes</FieldTitle>
<FieldDescription>
Run GPU workloads on a K8s configured cluster.
</FieldDescription>
</FieldContent>
</Field>
</FieldLabel>
<FieldLabel htmlFor="vm-z4k">
<Field orientation="horizontal">
<RadioGroupItem
value="vm"
id="vm-z4k"
aria-label="Virtual Machine"
/>
<FieldContent>
<FieldTitle>Virtual Machine</FieldTitle>
<FieldDescription>
Access a VM configured cluster to run workloads.
</FieldDescription>
</FieldContent>
</Field>
</FieldLabel>
</RadioGroup>
</FieldSet>
</FieldGroup>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/field-demo.tsx
================================================
import { Button } from "@/examples/radix/ui/button"
import { Checkbox } from "@/examples/radix/ui/checkbox"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
} from "@/examples/radix/ui/field"
import { Input } from "@/examples/radix/ui/input"
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/examples/radix/ui/select"
import { Textarea } from "@/examples/radix/ui/textarea"
export function FieldDemo() {
return (
<div className="w-full max-w-md rounded-xl border p-6">
<form>
<FieldGroup>
<FieldSet>
<FieldLegend>Payment Method</FieldLegend>
<FieldDescription>
All transactions are secure and encrypted
</FieldDescription>
<FieldGroup>
<Field>
<FieldLabel htmlFor="checkout-7j9-card-name-43j">
Name on Card
</FieldLabel>
<Input
id="checkout-7j9-card-name-43j"
placeholder="John Doe"
required
/>
</Field>
<div className="grid grid-cols-3 gap-4">
<Field className="col-span-2">
<FieldLabel htmlFor="checkout-7j9-card-number-uw1">
Card Number
</FieldLabel>
<Input
id="checkout-7j9-card-number-uw1"
placeholder="1234 5678 9012 3456"
required
/>
<FieldDescription>
Enter your 16-digit number.
</FieldDescription>
</Field>
<Field className="col-span-1">
<FieldLabel htmlFor="checkout-7j9-cvv">CVV</FieldLabel>
<Input id="checkout-7j9-cvv" placeholder="123" required />
</Field>
</div>
<div className="grid grid-cols-2 gap-4">
<Field>
<FieldLabel htmlFor="checkout-7j9-exp-month-ts6">
Month
</FieldLabel>
<Select defaultValue="">
<SelectTrigger id="checkout-7j9-exp-month-ts6">
<SelectValue placeholder="MM" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="01">01</SelectItem>
<SelectItem value="02">02</SelectItem>
<SelectItem value="03">03</SelectItem>
<SelectItem value="04">04</SelectItem>
<SelectItem value="05">05</SelectItem>
<SelectItem value="06">06</SelectItem>
<SelectItem value="07">07</SelectItem>
<SelectItem value="08">08</SelectItem>
<SelectItem value="09">09</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="11">11</SelectItem>
<SelectItem value="12">12</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</Field>
<Field>
<FieldLabel htmlFor="checkout-7j9-exp-year-f59">
Year
</FieldLabel>
<Select defaultValue="">
<SelectTrigger id="checkout-7j9-exp-year-f59">
<SelectValue placeholder="YYYY" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="2024">2024</SelectItem>
<SelectItem value="2025">2025</SelectItem>
<SelectItem value="2026">2026</SelectItem>
<SelectItem value="2027">2027</SelectItem>
<SelectItem value="2028">2028</SelectItem>
<SelectItem value="2029">2029</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</Field>
</div>
</FieldGroup>
</FieldSet>
<FieldSeparator />
<FieldSet>
<FieldLegend>Billing Address</FieldLegend>
<FieldDescription>
The billing address associated with your payment method
</FieldDescription>
<FieldGroup>
<Field orientation="horizontal">
<Checkbox
id="checkout-7j9-same-as-shipping-wgm"
defaultChecked
/>
<FieldLabel
htmlFor="checkout-7j9-same-as-shipping-wgm"
className="font-normal"
>
Same as shipping address
</FieldLabel>
</Field>
</FieldGroup>
</FieldSet>
<FieldSeparator />
<FieldSet>
<FieldGroup>
<Field>
<FieldLabel htmlFor="checkout-7j9-optional-comments">
Comments
</FieldLabel>
<Textarea
id="checkout-7j9-optional-comments"
placeholder="Add any additional comments"
/>
</Field>
</FieldGroup>
</FieldSet>
<Field orientation="horizontal">
<Button type="submit">Submit</Button>
<Button variant="outline" type="button">
Cancel
</Button>
</Field>
</FieldGroup>
</form>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/field-hear.tsx
================================================
import { Card, CardContent } from "@/examples/radix/ui/card"
import { Checkbox } from "@/examples/radix/ui/checkbox"
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSet,
FieldTitle,
} from "@/examples/radix/ui/field"
const options = [
{
label: "Social Media",
value: "social-media",
},
{
label: "Search Engine",
value: "search-engine",
},
{
label: "Referral",
value: "referral",
},
{
label: "Other",
value: "other",
},
]
export function FieldHear() {
return (
<Card className="py-4 shadow-none">
<CardContent className="px-4">
<form>
<FieldGroup>
<FieldSet className="gap-4">
<FieldLegend>How did you hear about us?</FieldLegend>
<FieldDescription className="line-clamp-1">
Select the option that best describes how you heard about us.
</FieldDescription>
<FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
{options.map((option) => (
<FieldLabel
htmlFor={option.value}
key={option.value}
className="w-fit!"
>
<Field
orientation="horizontal"
className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
>
<Checkbox
value={option.value}
id={option.value}
defaultChecked={option.value === "social-media"}
className="-ml-6 -translate-x-1 rounded-full transition-all duration-100 ease-linear data-[state=checked]:ml-0 data-[state=checked]:translate-x-0"
/>
<FieldTitle>{option.label}</FieldTitle>
</Field>
</FieldLabel>
))}
</FieldGroup>
</FieldSet>
</FieldGroup>
</form>
</CardContent>
</Card>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/field-slider.tsx
================================================
"use client"
import { useState } from "react"
import { Field, FieldDescription, FieldTitle } from "@/examples/radix/ui/field"
import { Slider } from "@/examples/radix/ui/slider"
export function FieldSlider() {
const [value, setValue] = useState([200, 800])
return (
<div className="w-full max-w-md">
<Field>
<FieldTitle>Price Range</FieldTitle>
<FieldDescription>
Set your budget range ($
<span className="font-medium tabular-nums">{value[0]}</span> -{" "}
<span className="font-medium tabular-nums">{value[1]}</span>).
</FieldDescription>
<Slider
value={value}
onValueChange={setValue}
max={1000}
min={0}
step={10}
className="mt-2 w-full"
aria-label="Price Range"
/>
</Field>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/index.tsx
================================================
import { FieldSeparator } from "@/examples/radix/ui/field"
import { AppearanceSettings } from "./appearance-settings"
import { ButtonGroupDemo } from "./button-group-demo"
import { ButtonGroupInputGroup } from "./button-group-input-group"
import { ButtonGroupNested } from "./button-group-nested"
import { ButtonGroupPopover } from "./button-group-popover"
import { EmptyAvatarGroup } from "./empty-avatar-group"
import { FieldCheckbox } from "./field-checkbox"
import { FieldDemo } from "./field-demo"
import { FieldHear } from "./field-hear"
import { FieldSlider } from "./field-slider"
import { InputGroupButtonExample } from "./input-group-button"
import { InputGroupDemo } from "./input-group-demo"
import { ItemDemo } from "./item-demo"
import { NotionPromptForm } from "./notion-prompt-form"
import { SpinnerBadge } from "./spinner-badge"
import { SpinnerEmpty } from "./spinner-empty"
export function RootComponents() {
return (
<div className="mx-auto grid gap-8 py-1 theme-container md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
<div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
<FieldDemo />
</div>
<div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
<EmptyAvatarGroup />
<SpinnerBadge />
<ButtonGroupInputGroup />
<FieldSlider />
<InputGroupDemo />
</div>
<div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
<InputGroupButtonExample />
<ItemDemo />
<FieldSeparator className="my-4">Appearance Settings</FieldSeparator>
<AppearanceSettings />
</div>
<div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
<NotionPromptForm />
<ButtonGroupDemo />
<FieldCheckbox />
<div className="flex justify-between gap-4">
<ButtonGroupNested />
<ButtonGroupPopover />
</div>
<FieldHear />
<SpinnerEmpty />
</div>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/input-group-button.tsx
================================================
"use client"
import * as React from "react"
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from "@/examples/radix/ui/input-group"
import { Label } from "@/examples/radix/ui/label"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/examples/radix/ui/popover"
import { IconInfoCircle, IconStar } from "@tabler/icons-react"
export function InputGroupButtonExample() {
const [isFavorite, setIsFavorite] = React.useState(false)
return (
<div className="grid w-full max-w-sm gap-6">
<Label htmlFor="input-secure-19" className="sr-only">
Input Secure
</Label>
<InputGroup className="[--radius:9999px]">
<InputGroupInput id="input-secure-19" className="pl-0.5!" />
<Popover>
<PopoverTrigger asChild>
<InputGroupAddon>
<InputGroupButton
variant="secondary"
size="icon-xs"
aria-label="Info"
>
<IconInfoCircle />
</InputGroupButton>
</InputGroupAddon>
</PopoverTrigger>
<PopoverContent
align="start"
alignOffset={10}
className="flex flex-col gap-1 rounded-xl text-sm"
>
<p className="font-medium">Your connection is not secure.</p>
<p>You should not enter any sensitive information on this site.</p>
</PopoverContent>
</Popover>
<InputGroupAddon className="pl-1! text-muted-foreground">
https://
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<InputGroupButton
onClick={() => setIsFavorite(!isFavorite)}
size="icon-xs"
aria-label="Favorite"
>
<IconStar
data-favorite={isFavorite}
className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
/>
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/input-group-demo.tsx
================================================
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from "@/examples/radix/ui/input-group"
import { Separator } from "@/examples/radix/ui/separator"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/examples/radix/ui/tooltip"
import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
import { ArrowUpIcon, Search } from "lucide-react"
export function InputGroupDemo() {
return (
<div className="grid w-full max-w-sm gap-6">
<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon>
<Search />
</InputGroupAddon>
<InputGroupAddon align="inline-end">12 results</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupInput placeholder="example.com" className="pl-1!" />
<InputGroupAddon>
<InputGroupText>https://</InputGroupText>
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<Tooltip>
<TooltipTrigger asChild>
<InputGroupButton
className="rounded-full"
size="icon-xs"
aria-label="Info"
>
<IconInfoCircle />
</InputGroupButton>
</TooltipTrigger>
<TooltipContent>This is content in a tooltip.</TooltipContent>
</Tooltip>
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupTextarea placeholder="Ask, Search or Chat..." />
<InputGroupAddon align="block-end">
<InputGroupButton
variant="outline"
className="rounded-full"
size="icon-xs"
aria-label="Add"
>
<IconPlus />
</InputGroupButton>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<InputGroupButton variant="ghost">Auto</InputGroupButton>
</DropdownMenuTrigger>
<DropdownMenuContent side="top" align="start">
<DropdownMenuItem>Auto</DropdownMenuItem>
<DropdownMenuItem>Agent</DropdownMenuItem>
<DropdownMenuItem>Manual</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<InputGroupText className="ml-auto">52% used</InputGroupText>
<Separator orientation="vertical" className="h-4!" />
<InputGroupButton
variant="default"
className="rounded-full"
size="icon-xs"
>
<ArrowUpIcon />
<span className="sr-only">Send</span>
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupInput placeholder="@shadcn" />
<InputGroupAddon align="inline-end">
<div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
<IconCheck className="size-3 text-white" />
</div>
</InputGroupAddon>
</InputGroup>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/input-group-textarea.tsx
================================================
import {
IconBrandJavascript,
IconCopy,
IconCornerDownLeft,
IconRefresh,
} from "@tabler/icons-react"
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupText,
InputGroupTextarea,
} from "@/registry/new-york-v4/ui/input-group"
export function InputGroupTextareaExample() {
return (
<div className="grid w-full max-w-md gap-4">
<InputGroup>
<InputGroupTextarea
id="textarea-code-32"
placeholder="console.log('Hello, world!');"
className="min-h-[180px]"
/>
<InputGroupAddon align="block-end" className="border-t">
<InputGroupText>Line 1, Column 1</InputGroupText>
<InputGroupButton size="sm" className="ml-auto" variant="default">
Run <IconCornerDownLeft />
</InputGroupButton>
</InputGroupAddon>
<InputGroupAddon align="block-start" className="border-b">
<InputGroupText className="font-mono font-medium">
<IconBrandJavascript />
script.js
</InputGroupText>
<InputGroupButton className="ml-auto">
<IconRefresh />
</InputGroupButton>
<InputGroupButton variant="ghost">
<IconCopy />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/item-avatar.tsx
================================================
import { Plus } from "lucide-react"
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/registry/new-york-v4/ui/avatar"
import { Button } from "@/registry/new-york-v4/ui/button"
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/registry/new-york-v4/ui/item"
export function ItemAvatar() {
return (
<div className="flex w-full max-w-lg flex-col gap-6">
<Item variant="outline" className="hidden">
<ItemMedia>
<Avatar className="size-10">
<AvatarImage src="https://github.com/maxleiter.png" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
</ItemMedia>
<ItemContent>
<ItemTitle>Max Leiter</ItemTitle>
<ItemDescription>Last seen 5 months ago</ItemDescription>
</ItemContent>
<ItemActions>
<Button
size="icon-sm"
variant="outline"
className="rounded-full"
aria-label="Invite"
>
<Plus />
</Button>
</ItemActions>
</Item>
<Item variant="outline">
<ItemMedia>
<div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
<Avatar className="hidden sm:flex">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar className="hidden sm:flex">
<AvatarImage
src="https://github.com/maxleiter.png"
alt="@maxleiter"
/>
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</div>
</ItemMedia>
<ItemContent>
<ItemTitle>No Team Members</ItemTitle>
<ItemDescription>Invite your team to collaborate.</ItemDescription>
</ItemContent>
<ItemActions>
<Button size="sm" variant="outline">
Invite
</Button>
</ItemActions>
</Item>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/item-demo.tsx
================================================
import { Button } from "@/examples/radix/ui/button"
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/examples/radix/ui/item"
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
export function ItemDemo() {
return (
<div className="flex w-full max-w-md flex-col gap-6">
<Item variant="outline">
<ItemContent>
<ItemTitle>Two-factor authentication</ItemTitle>
<ItemDescription className="text-pretty xl:hidden 2xl:block">
Verify via email or phone number.
</ItemDescription>
</ItemContent>
<ItemActions>
<Button size="sm">Enable</Button>
</ItemActions>
</Item>
<Item variant="outline" size="sm" asChild>
<a href="#">
<ItemMedia>
<BadgeCheckIcon className="size-5" />
</ItemMedia>
<ItemContent>
<ItemTitle>Your profile has been verified.</ItemTitle>
</ItemContent>
<ItemActions>
<ChevronRightIcon className="size-4" />
</ItemActions>
</a>
</Item>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
================================================
"use client"
import { useMemo, useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
import { Badge } from "@/examples/radix/ui/badge"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/examples/radix/ui/command"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import { Field, FieldLabel } from "@/examples/radix/ui/field"
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupTextarea,
} from "@/examples/radix/ui/input-group"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/examples/radix/ui/popover"
import { Switch } from "@/examples/radix/ui/switch"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/examples/radix/ui/tooltip"
import {
IconApps,
IconArrowUp,
IconAt,
IconBook,
IconCircleDashedPlus,
IconPaperclip,
IconPlus,
IconWorld,
IconX,
} from "@tabler/icons-react"
const SAMPLE_DATA = {
mentionable: [
{
type: "page",
title: "Meeting Notes",
image: "📝",
},
{
type: "page",
title: "Project Dashboard",
image: "📊",
},
{
type: "page",
title: "Ideas & Brainstorming",
image: "💡",
},
{
type: "page",
title: "Calendar & Events",
image: "📅",
},
{
type: "page",
title: "Documentation",
image: "📚",
},
{
type: "page",
title: "Goals & Objectives",
image: "🎯",
},
{
type: "page",
title: "Budget Planning",
image: "💰",
},
{
type: "page",
title: "Team Directory",
image: "👥",
},
{
type: "page",
title: "Technical Specs",
image: "🔧",
},
{
type: "page",
title: "Analytics Report",
image: "📈",
},
{
type: "user",
title: "shadcn",
image: "https://github.com/shadcn.png",
workspace: "Workspace",
},
{
type: "user",
title: "maxleiter",
image: "https://github.com/maxleiter.png",
workspace: "Workspace",
},
{
type: "user",
title: "evilrabbit",
image: "https://github.com/evilrabbit.png",
workspace: "Workspace",
},
],
models: [
{
name: "Auto",
},
{
name: "Agent Mode",
badge: "Beta",
},
{
name: "Plan Mode",
},
],
}
function MentionableIcon({
item,
}: {
item: (typeof SAMPLE_DATA.mentionable)[0]
}) {
return item.type === "page" ? (
<span className="flex size-4 items-center justify-center">
{item.image}
</span>
) : (
<Avatar className="size-4">
<AvatarImage src={item.image} />
<AvatarFallback>{item.title[0]}</AvatarFallback>
</Avatar>
)
}
export function NotionPromptForm() {
const [mentions, setMentions] = useState<string[]>([])
const [mentionPopoverOpen, setMentionPopoverOpen] = useState(false)
const [modelPopoverOpen, setModelPopoverOpen] = useState(false)
const [selectedModel, setSelectedModel] = useState<
(typeof SAMPLE_DATA.models)[0]
>(SAMPLE_DATA.models[0])
const [scopeMenuOpen, setScopeMenuOpen] = useState(false)
const grouped = useMemo(() => {
return SAMPLE_DATA.mentionable.reduce(
(acc, item) => {
const isAvailable = !mentions.includes(item.title)
if (isAvailable) {
if (!acc[item.type]) {
acc[item.type] = []
}
acc[item.type].push(item)
}
return acc
},
{} as Record<string, typeof SAMPLE_DATA.mentionable>
)
}, [mentions])
const hasMentions = mentions.length > 0
return (
<form>
<Field>
<FieldLabel htmlFor="notion-prompt" className="sr-only">
Prompt
</FieldLabel>
<InputGroup className="rounded-xl">
<InputGroupTextarea
id="notion-prompt"
placeholder="Ask, search, or make anything..."
/>
<InputGroupAddon align="block-start" className="pt-3">
<Popover
open={mentionPopoverOpen}
onOpenChange={setMentionPopoverOpen}
>
<Tooltip>
<TooltipTrigger
asChild
onFocusCapture={(e) => e.stopPropagation()}
>
<PopoverTrigger asChild>
<InputGroupButton
variant="outline"
size={!hasMentions ? "sm" : "icon-sm"}
className="transition-transform"
>
<IconAt /> {!hasMentions && "Add context"}
</InputGroupButton>
</PopoverTrigger>
</TooltipTrigger>
<TooltipContent>Mention a person, page, or date</TooltipContent>
</Tooltip>
<PopoverContent className="p-0" align="start">
<Command>
<CommandInput placeholder="Search pages..." />
<CommandList>
<CommandEmpty>No pages found</CommandEmpty>
{Object.entries(grouped).map(([type, items]) => (
<CommandGroup
key={type}
heading={type === "page" ? "Pages" : "Users"}
>
{items.map((item) => (
<CommandItem
key={item.title}
value={item.title}
onSelect={(currentValue) => {
setMentions((prev) => [...prev, currentValue])
setMentionPopoverOpen(false)
}}
className="rounded-lg"
>
<MentionableIcon item={item} />
{item.title}
</CommandItem>
))}
</CommandGroup>
))}
</CommandList>
</Command>
</PopoverContent>
</Popover>
<div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
{mentions.map((mention) => {
const item = SAMPLE_DATA.mentionable.find(
(item) => item.title === mention
)
if (!item) {
return null
}
return (
<InputGroupButton
key={mention}
size="sm"
variant="secondary"
className="rounded-full pl-2!"
onClick={() => {
setMentions((prev) => prev.filter((m) => m !== mention))
}}
>
<MentionableIcon item={item} />
{item.title}
<IconX />
</InputGroupButton>
)
})}
</div>
</InputGroupAddon>
<InputGroupAddon align="block-end" className="gap-1">
<Tooltip>
<TooltipTrigger asChild>
<InputGroupButton
size="icon-sm"
className="rounded-full"
aria-label="Attach file"
>
<IconPaperclip />
</InputGroupButton>
</TooltipTrigger>
<TooltipContent>Attach file</TooltipContent>
</Tooltip>
<DropdownMenu
open={modelPopoverOpen}
onOpenChange={setModelPopoverOpen}
>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<InputGroupButton size="sm" className="rounded-full">
{selectedModel.name}
</InputGroupButton>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent>Select AI model</TooltipContent>
</Tooltip>
<DropdownMenuContent
side="top"
align="start"
className="min-w-48"
>
<DropdownMenuGroup>
<DropdownMenuLabel className="text-xs text-muted-foreground">
Select Agent Mode
</DropdownMenuLabel>
{SAMPLE_DATA.models.map((model) => (
<DropdownMenuCheckboxItem
key={model.name}
checked={model.name === selectedModel.name}
onCheckedChange={(checked) => {
if (checked) {
setSelectedModel(model)
}
}}
className="pl-2 *:[span:first-child]:right-2 *:[span:first-child]:left-auto"
>
{model.name}
{model.badge && (
<Badge
variant="secondary"
className="h-5 rounded-sm bg-blue-100 px-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-100"
>
{model.badge}
</Badge>
)}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu open={scopeMenuOpen} onOpenChange={setScopeMenuOpen}>
<DropdownMenuTrigger asChild>
<InputGroupButton size="sm" className="rounded-full">
<IconWorld /> All Sources
</InputGroupButton>
</DropdownMenuTrigger>
<DropdownMenuContent side="top" align="end" className="w-72">
<DropdownMenuGroup>
<DropdownMenuItem
asChild
onSelect={(e) => e.preventDefault()}
>
<label htmlFor="web-search">
<IconWorld /> Web Search{" "}
<Switch
id="web-search"
className="ml-auto"
defaultChecked
/>
</label>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem
asChild
onSelect={(e) => e.preventDefault()}
>
<label htmlFor="apps">
<IconApps /> Apps and Integrations
<Switch id="apps" className="ml-auto" defaultChecked />
</label>
</DropdownMenuItem>
<DropdownMenuItem>
<IconCircleDashedPlus /> All Sources I can access
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Avatar className="size-4">
<AvatarImage src="https://github.com/shadcn.png" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
shadcn
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="w-72 p-0 [--radius:1rem]">
<Command>
<CommandInput
placeholder="Find or use knowledge in..."
autoFocus
/>
<CommandList>
<CommandEmpty>No knowledge found</CommandEmpty>
<CommandGroup>
{SAMPLE_DATA.mentionable
.filter((item) => item.type === "user")
.map((user) => (
<CommandItem
key={user.title}
value={user.title}
onSelect={() => {
// Handle user selection here
console.log("Selected user:", user.title)
}}
>
<Avatar className="size-4">
<AvatarImage src={user.image} />
<AvatarFallback>
{user.title[0]}
</AvatarFallback>
</Avatar>
{user.title}{" "}
<span className="text-muted-foreground">
- {user.workspace}
</span>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuItem>
<IconBook /> Help Center
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<IconPlus /> Connect Apps
</DropdownMenuItem>
<DropdownMenuLabel className="text-xs text-muted-foreground">
We'll only search in the sources selected here.
</DropdownMenuLabel>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<InputGroupButton
aria-label="Send"
className="ml-auto rounded-full"
variant="default"
size="icon-sm"
>
<IconArrowUp />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
</Field>
</form>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/spinner-badge.tsx
================================================
import { Badge } from "@/examples/radix/ui/badge"
import { Spinner } from "@/examples/radix/ui/spinner"
export function SpinnerBadge() {
return (
<div className="flex items-center gap-2">
<Badge>
<Spinner />
Syncing
</Badge>
<Badge variant="secondary">
<Spinner />
Updating
</Badge>
<Badge variant="outline">
<Spinner />
Loading
</Badge>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/components/spinner-empty.tsx
================================================
import { Button } from "@/examples/radix/ui/button"
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/examples/radix/ui/empty"
import { Spinner } from "@/examples/radix/ui/spinner"
export function SpinnerEmpty() {
return (
<Empty className="w-full border md:p-6">
<EmptyHeader>
<EmptyMedia variant="icon">
<Spinner />
</EmptyMedia>
<EmptyTitle>Processing your request</EmptyTitle>
<EmptyDescription>
Please wait while we process your request. Do not refresh the page.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button variant="outline" size="sm">
Cancel
</Button>
</EmptyContent>
</Empty>
)
}
================================================
FILE: apps/v4/app/(app)/(root)/page.tsx
================================================
import { type Metadata } from "next"
import Image from "next/image"
import Link from "next/link"
import { Announcement } from "@/components/announcement"
import { ExamplesNav } from "@/components/examples-nav"
import {
PageActions,
PageHeader,
PageHeaderDescription,
PageHeaderHeading,
} from "@/components/page-header"
import { PageNav } from "@/components/page-nav"
import { ThemeSelector } from "@/components/theme-selector"
import { Button } from "@/registry/new-york-v4/ui/button"
import { RootComponents } from "./components"
const title = "The Foundation for your Design System"
const description =
"A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
export const dynamic = "force-static"
export const revalidate = false
export const metadata: Metadata = {
title,
description,
openGraph: {
images: [
{
url: `/og?title=${encodeURIComponent(
title
)}&description=${encodeURIComponent(description)}`,
},
],
},
twitter: {
card: "summary_large_image",
images: [
{
url: `/og?title=${encodeURIComponent(
title
)}&description=${encodeURIComponent(description)}`,
},
],
},
}
export default function IndexPage() {
return (
<div className="flex flex-1 flex-col">
<PageHeader>
<Announcement />
<PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
<PageHeaderDescription>{description}</PageHeaderDescription>
<PageActions>
<Button asChild size="sm" className="h-[31px] rounded-lg">
<Link href="/create">New Project</Link>
</Button>
<Button asChild size="sm" variant="ghost" className="rounded-lg">
<Link href="/docs/components">View Components</Link>
</Button>
</PageActions>
</PageHeader>
<PageNav className="hidden md:flex">
<ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
<ThemeSelector className="mr-4 hidden md:flex" />
</PageNav>
<div className="container-wrapper flex-1 section-soft pb-6">
<div className="container overflow-hidden">
<section className="-mx-4 w-[160vw] overflow-hidden rounded-lg border border-border/50 md:hidden md:w-[150vw]">
<Image
src="/r/styles/new-york-v4/dashboard-01-light.png"
width={1400}
height={875}
alt="Dashboard"
className="block dark:hidden"
priority
/>
<Image
src="/r/styles/new-york-v4/dashboard-01-dark.png"
width={1400}
height={875}
alt="Dashboard"
className="hidden dark:block"
priority
/>
</section>
<section className="hidden theme-container md:block">
<RootComponents />
</section>
</div>
</div>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/blocks/[...categories]/page.tsx
================================================
import { getAllBlockIds } from "@/lib/blocks"
import { registryCategories } from "@/lib/categories"
import { BlockDisplay } from "@/components/block-display"
import { getActiveStyle } from "@/registry/_legacy-styles"
export const revalidate = false
export const dynamic = "force-static"
export const dynamicParams = false
export async function generateStaticParams() {
return registryCategories.map((category) => ({
categories: [category.slug],
}))
}
export default async function BlocksPage({
params,
}: {
params: Promise<{ categories?: string[] }>
}) {
const [{ categories = [] }, activeStyle] = await Promise.all([
params,
getActiveStyle(),
])
const blocks = await getAllBlockIds(["registry:block"], categories)
return (
<div className="flex flex-col gap-12 md:gap-24">
{blocks.map((name) => (
<BlockDisplay name={name} key={name} styleName={activeStyle.name} />
))}
</div>
)
}
================================================
FILE: apps/v4/app/(app)/blocks/layout.tsx
================================================
import { type Metadata } from "next"
import Link from "next/link"
import { Announcement } from "@/components/announcement"
import { BlocksNav } from "@/components/blocks-nav"
import {
PageActions,
PageHeader,
PageHeaderDescription,
PageHeaderHeading,
} from "@/components/page-header"
import { PageNav } from "@/components/page-nav"
import { Button } from "@/registry/new-york-v4/ui/button"
const title = "Building Blocks for the Web"
const description =
"Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever."
export const metadata: Metadata = {
title,
description,
openGraph: {
images: [
{
url: `/og?title=${encodeURIComponent(
title
)}&description=${encodeURIComponent(description)}`,
},
],
},
twitter: {
card: "summary_large_image",
images: [
{
url: `/og?title=${encodeURIComponent(
title
)}&description=${encodeURIComponent(description)}`,
},
],
},
}
export default function BlocksLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<PageHeader>
<Announcement />
<PageHeaderHeading>{title}</PageHeaderHeading>
<PageHeaderDescription>{description}</PageHeaderDescription>
<PageActions>
<Button asChild size="sm">
<a href="#blocks">Browse Blocks</a>
</Button>
<Button asChild variant="ghost" size="sm">
<Link href="/docs/blocks">Add a block</Link>
</Button>
</PageActions>
</PageHeader>
<PageNav id="blocks">
<BlocksNav />
<Button
asChild
variant="secondary"
size="sm"
className="mr-7 hidden shadow-none lg:flex"
>
<Link href="/blocks/sidebar">Browse all blocks</Link>
</Button>
</PageNav>
<div className="container-wrapper flex-1 section-soft md:py-12">
<div className="container">{children}</div>
</div>
</>
)
}
================================================
FILE: apps/v4/app/(app)/blocks/page.tsx
================================================
import Link from "next/link"
import { BlockDisplay } from "@/components/block-display"
import { getActiveStyle } from "@/registry/_legacy-styles"
import { Button } from "@/registry/new-york-v4/ui/button"
export const dynamic = "force-static"
export const revalidate = false
const FEATURED_BLOCKS = [
"dashboard-01",
"sidebar-07",
"sidebar-03",
"login-03",
"login-04",
]
export default async function BlocksPage() {
const activeStyle = await getActiveStyle()
return (
<div className="flex flex-col gap-12 md:gap-24">
{FEATURED_BLOCKS.map((name) => (
<BlockDisplay name={name} key={name} styleName={activeStyle.name} />
))}
<div className="container-wrapper">
<div className="container flex justify-center py-6">
<Button asChild variant="outline">
<Link href="/blocks/sidebar">Browse more blocks</Link>
</Button>
</div>
</div>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/charts/[type]/page.tsx
================================================
import * as React from "react"
import { notFound } from "next/navigation"
import { cn } from "@/lib/utils"
import {
ChartDisplay,
getCachedRegistryItem,
getChartHighlightedCode,
} from "@/components/chart-display"
import { getActiveStyle } from "@/registry/_legacy-styles"
import { charts } from "@/app/(app)/charts/charts"
export const revalidate = false
export const dynamic = "force-static"
export const dynamicParams = false
interface ChartPageProps {
params: Promise<{
type: string
}>
}
const chartTypes = [
"area",
"bar",
"line",
"pie",
"radar",
"radial",
"tooltip",
] as const
type ChartType = (typeof chartTypes)[number]
export async function generateStaticParams() {
return chartTypes.map((type) => ({
type,
}))
}
export default async function ChartPage({ params }: ChartPageProps) {
const { type } = await params
if (!chartTypes.includes(type as ChartType)) {
return notFound()
}
const chartType = type as ChartType
const chartList = charts[chartType]
const activeStyle = await getActiveStyle()
// Prefetch all chart data in parallel for better performance.
// Charts are rendered via iframes, so we only need the metadata and highlighted code.
const chartDataPromises = chartList.map(async (chart) => {
const registryItem = await getCachedRegistryItem(chart.id, activeStyle.name)
if (!registryItem) return null
const highlightedCode = await getChartHighlightedCode(
registryItem.files?.[0]?.content ?? ""
)
if (!highlightedCode) return null
return {
...registryItem,
highlightedCode,
fullWidth: chart.fullWidth,
}
})
const prefetchedCharts = await Promise.all(chartDataPromises)
return (
<div className="grid flex-1 gap-12 lg:gap-24">
<h2 className="sr-only">
{type.charAt(0).toUpperCase() + type.slice(1)} Charts
</h2>
<div className="grid flex-1 scroll-mt-20 items-stretch gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10">
{Array.from({ length: 12 }).map((_, index) => {
const chart = prefetchedCharts[index]
return chart ? (
<ChartDisplay
key={chart.name}
chart={chart}
style={activeStyle.name}
className={cn(chart.fullWidth && "md:col-span-2 lg:col-span-3")}
/>
) : (
<div
key={`empty-${index}`}
className="hidden aspect-square w-full rounded-lg border border-dashed xl:block"
/>
)
})}
</div>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/charts/charts.tsx
================================================
import type * as React from "react"
import { ChartAreaAxes } from "@/registry/new-york-v4/charts/chart-area-axes"
import { ChartAreaDefault } from "@/registry/new-york-v4/charts/chart-area-default"
import { ChartAreaGradient } from "@/registry/new-york-v4/charts/chart-area-gradient"
import { ChartAreaIcons } from "@/registry/new-york-v4/charts/chart-area-icons"
import { ChartAreaInteractive } from "@/registry/new-york-v4/charts/chart-area-interactive"
import { ChartAreaLegend } from "@/registry/new-york-v4/charts/chart-area-legend"
import { ChartAreaLinear } from "@/registry/new-york-v4/charts/chart-area-linear"
import { ChartAreaStacked } from "@/registry/new-york-v4/charts/chart-area-stacked"
import { ChartAreaStackedExpand } from "@/registry/new-york-v4/charts/chart-area-stacked-expand"
import { ChartAreaStep } from "@/registry/new-york-v4/charts/chart-area-step"
import { ChartBarActive } from "@/registry/new-york-v4/charts/chart-bar-active"
import { ChartBarDefault } from "@/registry/new-york-v4/charts/chart-bar-default"
import { ChartBarHorizontal } from "@/registry/new-york-v4/charts/chart-bar-horizontal"
import { ChartBarInteractive } from "@/registry/new-york-v4/charts/chart-bar-interactive"
import { ChartBarLabel } from "@/registry/new-york-v4/charts/chart-bar-label"
import { ChartBarLabelCustom } from "@/registry/new-york-v4/charts/chart-bar-label-custom"
import { ChartBarMixed } from "@/registry/new-york-v4/charts/chart-bar-mixed"
import { ChartBarMultiple } from "@/registry/new-york-v4/charts/chart-bar-multiple"
import { ChartBarNegative } from "@/registry/new-york-v4/charts/chart-bar-negative"
import { ChartBarStacked } from "@/registry/new-york-v4/charts/chart-bar-stacked"
import { ChartLineDefault } from "@/registry/new-york-v4/charts/chart-line-default"
import { ChartLineDots } from "@/registry/new-york-v4/charts/chart-line-dots"
import { ChartLineDotsColors } from "@/registry/new-york-v4/charts/chart-line-dots-colors"
import { ChartLineDotsCustom } from "@/registry/new-york-v4/charts/chart-line-dots-custom"
import { ChartLineInteractive } from "@/registry/new-york-v4/charts/chart-line-interactive"
import { ChartLineLabel } from "@/registry/new-york-v4/charts/chart-line-label"
import { ChartLineLabelCustom } from "@/registry/new-york-v4/charts/chart-line-label-custom"
import { ChartLineLinear } from "@/registry/new-york-v4/charts/chart-line-linear"
import { ChartLineMultiple } from "@/registry/new-york-v4/charts/chart-line-multiple"
import { ChartLineStep } from "@/registry/new-york-v4/charts/chart-line-step"
import { ChartPieDonut } from "@/registry/new-york-v4/charts/chart-pie-donut"
import { ChartPieDonutActive } from "@/registry/new-york-v4/charts/chart-pie-donut-active"
import { ChartPieDonutText } from "@/registry/new-york-v4/charts/chart-pie-donut-text"
import { ChartPieInteractive } from "@/registry/new-york-v4/charts/chart-pie-interactive"
import { ChartPieLabel } from "@/registry/new-york-v4/charts/chart-pie-label"
import { ChartPieLabelCustom } from "@/registry/new-york-v4/charts/chart-pie-label-custom"
import { ChartPieLabelList } from "@/registry/new-york-v4/charts/chart-pie-label-list"
import { ChartPieLegend } from "@/registry/new-york-v4/charts/chart-pie-legend"
import { ChartPieSeparatorNone } from "@/registry/new-york-v4/charts/chart-pie-separator-none"
import { ChartPieSimple } from "@/registry/new-york-v4/charts/chart-pie-simple"
import { ChartPieStacked } from "@/registry/new-york-v4/charts/chart-pie-stacked"
import { ChartRadarDefault } from "@/registry/new-york-v4/charts/chart-radar-default"
import { ChartRadarDots } from "@/registry/new-york-v4/charts/chart-radar-dots"
import { ChartRadarGridCircle } from "@/registry/new-york-v4/charts/chart-radar-grid-circle"
import { ChartRadarGridCircleFill } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-fill"
import { ChartRadarGridCircleNoLines } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines"
import { ChartRadarGridCustom } from "@/registry/new-york-v4/charts/chart-radar-grid-custom"
import { ChartRadarGridFill } from "@/registry/new-york-v4/charts/chart-radar-grid-fill"
import { ChartRadarGridNone } from "@/registry/new-york-v4/charts/chart-radar-grid-none"
import { ChartRadarIcons } from "@/registry/new-york-v4/charts/chart-radar-icons"
import { ChartRadarLabelCustom } from "@/registry/new-york-v4/charts/chart-radar-label-custom"
import { ChartRadarLegend } from "@/registry/new-york-v4/charts/chart-radar-legend"
import { ChartRadarLinesOnly } from "@/registry/new-york-v4/charts/chart-radar-lines-only"
import { ChartRadarMultiple } from "@/registry/new-york-v4/charts/chart-radar-multiple"
import { ChartRadarRadius } from "@/registry/new-york-v4/charts/chart-radar-radius"
import { ChartRadialGrid } from "@/registry/new-york-v4/charts/chart-radial-grid"
import { ChartRadialLabel } from "@/registry/new-york-v4/charts/chart-radial-label"
import { ChartRadialShape } from "@/registry/new-york-v4/charts/chart-radial-shape"
import { ChartRadialSimple } from "@/registry/new-york-v4/charts/chart-radial-simple"
import { ChartRadialStacked } from "@/registry/new-york-v4/charts/chart-radial-stacked"
import { ChartRadialText } from "@/registry/new-york-v4/charts/chart-radial-text"
import { ChartTooltipAdvanced } from "@/registry/new-york-v4/charts/chart-tooltip-advanced"
import { ChartTooltipDefault } from "@/registry/new-york-v4/charts/chart-tooltip-default"
import { ChartTooltipFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-formatter"
import { ChartTooltipIcons } from "@/registry/new-york-v4/charts/chart-tooltip-icons"
import { ChartTooltipIndicatorLine } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-line"
import { ChartTooltipIndicatorNone } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-none"
import { ChartTooltipLabelCustom } from "@/registry/new-york-v4/charts/chart-tooltip-label-custom"
import { ChartTooltipLabelFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-label-formatter"
import { ChartTooltipLabelNone } from "@/registry/new-york-v4/charts/chart-tooltip-label-none"
type ChartComponent = React.ComponentType
interface ChartItem {
id: string
component: ChartComponent
fullWidth?: boolean
}
interface ChartGroups {
area: ChartItem[]
bar: ChartItem[]
line: ChartItem[]
pie: ChartItem[]
radar: ChartItem[]
radial: ChartItem[]
tooltip: ChartItem[]
}
export const charts: ChartGroups = {
area: [
{
id: "chart-area-interactive",
component: ChartAreaInteractive,
fullWidth: true,
},
{ id: "chart-area-default", component: ChartAreaDefault },
{ id: "chart-area-linear", component: ChartAreaLinear },
{ id: "chart-area-step", component: ChartAreaStep },
{ id: "chart-area-legend", component: ChartAreaLegend },
{ id: "chart-area-stacked", component: ChartAreaStacked },
{ id: "chart-area-stacked-expand", component: ChartAreaStackedExpand },
{ id: "chart-area-icons", component: ChartAreaIcons },
{ id: "chart-area-gradient", component: ChartAreaGradient },
{ id: "chart-area-axes", component: ChartAreaAxes },
],
bar: [
{
id: "chart-bar-interactive",
component: ChartBarInteractive,
fullWidth: true,
},
{ id: "chart-bar-default", component: ChartBarDefault },
{ id: "chart-bar-horizontal", component: ChartBarHorizontal },
{ id: "chart-bar-multiple", component: ChartBarMultiple },
{ id: "chart-bar-stacked", component: ChartBarStacked },
{ id: "chart-bar-label", component: ChartBarLabel },
{ id: "chart-bar-label-custom", component: ChartBarLabelCustom },
{ id: "chart-bar-mixed", component: ChartBarMixed },
{ id: "chart-bar-active", component: ChartBarActive },
{ id: "chart-bar-negative", component: ChartBarNegative },
],
line: [
{
id: "chart-line-interactive",
component: ChartLineInteractive,
fullWidth: true,
},
{ id: "chart-line-default", component: ChartLineDefault },
{ id: "chart-line-linear", component: ChartLineLinear },
{ id: "chart-line-step", component: ChartLineStep },
{ id: "chart-line-multiple", component: ChartLineMultiple },
{ id: "chart-line-dots", component: ChartLineDots },
{ id: "chart-line-dots-custom", component: ChartLineDotsCustom },
{ id: "chart-line-dots-colors", component: ChartLineDotsColors },
{ id: "chart-line-label", component: ChartLineLabel },
{ id: "chart-line-label-custom", component: ChartLineLabelCustom },
],
pie: [
{ id: "chart-pie-simple", component: ChartPieSimple },
{ id: "chart-pie-separator-none", component: ChartPieSeparatorNone },
{ id: "chart-pie-label", component: ChartPieLabel },
{ id: "chart-pie-label-custom", component: ChartPieLabelCustom },
{ id: "chart-pie-label-list", component: ChartPieLabelList },
{ id: "chart-pie-legend", component: ChartPieLegend },
{ id: "chart-pie-donut", component: ChartPieDonut },
{ id: "chart-pie-donut-active", component: ChartPieDonutActive },
{ id: "chart-pie-donut-text", component: ChartPieDonutText },
{ id: "chart-pie-stacked", component: ChartPieStacked },
{ id: "chart-pie-interactive", component: ChartPieInteractive },
],
radar: [
{ id: "chart-radar-default", component: ChartRadarDefault },
{ id: "chart-radar-dots", component: ChartRadarDots },
{ id: "chart-radar-lines-only", component: ChartRadarLinesOnly },
{ id: "chart-radar-label-custom", component: ChartRadarLabelCustom },
{ id: "chart-radar-grid-custom", component: ChartRadarGridCustom },
{ id: "chart-radar-grid-none", component: ChartRadarGridNone },
{ id: "chart-radar-grid-circle", component: ChartRadarGridCircle },
{
id: "chart-radar-grid-circle-no-lines",
component: ChartRadarGridCircleNoLines,
},
{ id: "chart-radar-grid-circle-fill", component: ChartRadarGridCircleFill },
{ id: "chart-radar-grid-fill", component: ChartRadarGridFill },
{ id: "chart-radar-multiple", component: ChartRadarMultiple },
{ id: "chart-radar-legend", component: ChartRadarLegend },
{ id: "chart-radar-icons", component: ChartRadarIcons },
{ id: "chart-radar-radius", component: ChartRadarRadius },
],
radial: [
{ id: "chart-radial-simple", component: ChartRadialSimple },
{ id: "chart-radial-label", component: ChartRadialLabel },
{ id: "chart-radial-grid", component: ChartRadialGrid },
{ id: "chart-radial-text", component: ChartRadialText },
{ id: "chart-radial-shape", component: ChartRadialShape },
{ id: "chart-radial-stacked", component: ChartRadialStacked },
],
tooltip: [
{ id: "chart-tooltip-default", component: ChartTooltipDefault },
{
id: "chart-tooltip-indicator-line",
component: ChartTooltipIndicatorLine,
},
{
id: "chart-tooltip-indicator-none",
component: ChartTooltipIndicatorNone,
},
{ id: "chart-tooltip-label-custom", component: ChartTooltipLabelCustom },
{
id: "chart-tooltip-label-formatter",
component: ChartTooltipLabelFormatter,
},
{ id: "chart-tooltip-label-none", component: ChartTooltipLabelNone },
{ id: "chart-tooltip-formatter", component: ChartTooltipFormatter },
{ id: "chart-tooltip-icons", component: ChartTooltipIcons },
{ id: "chart-tooltip-advanced", component: ChartTooltipAdvanced },
],
}
// Export individual components for backward compatibility
export {
ChartAreaDefault,
ChartAreaLinear,
ChartAreaStep,
ChartAreaLegend,
ChartAreaStacked,
ChartAreaStackedExpand,
ChartAreaIcons,
ChartAreaGradient,
ChartAreaAxes,
ChartAreaInteractive,
ChartBarDefault,
ChartBarHorizontal,
ChartBarMultiple,
ChartBarStacked,
ChartBarLabel,
ChartBarLabelCustom,
ChartBarMixed,
ChartBarActive,
ChartBarNegative,
ChartBarInteractive,
ChartLineDefault,
ChartLineLinear,
ChartLineStep,
ChartLineMultiple,
ChartLineDots,
ChartLineDotsCustom,
ChartLineDotsColors,
ChartLineLabel,
ChartLineLabelCustom,
ChartLineInteractive,
ChartPieSimple,
ChartPieSeparatorNone,
ChartPieLabel,
ChartPieLabelCustom,
ChartPieLabelList,
ChartPieLegend,
ChartPieDonut,
ChartPieDonutActive,
ChartPieDonutText,
ChartPieStacked,
ChartPieInteractive,
ChartRadarDefault,
ChartRadarDots,
ChartRadarLinesOnly,
ChartRadarLabelCustom,
ChartRadarGridCustom,
ChartRadarGridNone,
ChartRadarGridCircle,
ChartRadarGridCircleNoLines,
ChartRadarGridCircleFill,
ChartRadarGridFill,
ChartRadarMultiple,
ChartRadarLegend,
ChartRadarIcons,
ChartRadarRadius,
ChartRadialSimple,
ChartRadialLabel,
ChartRadialGrid,
ChartRadialText,
ChartRadialShape,
ChartRadialStacked,
ChartTooltipDefault,
ChartTooltipIndicatorLine,
ChartTooltipIndicatorNone,
ChartTooltipLabelCustom,
ChartTooltipLabelFormatter,
ChartTooltipLabelNone,
ChartTooltipFormatter,
ChartTooltipIcons,
ChartTooltipAdvanced,
}
================================================
FILE: apps/v4/app/(app)/charts/layout.tsx
================================================
import { type Metadata } from "next"
import Link from "next/link"
import { Announcement } from "@/components/announcement"
import { ChartsNav } from "@/components/charts-nav"
import {
PageActions,
PageHeader,
PageHeaderDescription,
PageHeaderHeading,
} from "@/components/page-header"
import { PageNav } from "@/components/page-nav"
import { ThemeSelector } from "@/components/theme-selector"
import { Button } from "@/registry/new-york-v4/ui/button"
const title = "Beautiful Charts & Graphs"
const description =
"A collection of ready-to-use chart components built with Recharts. From basic charts to rich data displays, copy and paste into your apps."
export const metadata: Metadata = {
title,
description,
openGraph: {
images: [
{
url: `/og?title=${encodeURIComponent(
title
)}&description=${encodeURIComponent(description)}`,
},
],
},
twitter: {
card: "summary_large_image",
images: [
{
url: `/og?title=${encodeURIComponent(
title
)}&description=${encodeURIComponent(description)}`,
},
],
},
}
export default function ChartsLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<PageHeader>
<Announcement />
<PageHeaderHeading>{title}</PageHeaderHeading>
<PageHeaderDescription>{description}</PageHeaderDescription>
<PageActions>
<Button asChild size="sm">
<a href="#charts">Browse Charts</a>
</Button>
<Button asChild variant="ghost" size="sm">
<Link href="/docs/components/chart">Documentation</Link>
</Button>
</PageActions>
</PageHeader>
<PageNav id="charts">
<ChartsNav />
</PageNav>
<div className="container-wrapper flex-1">
<div className="container pb-6">
<section className="theme-container">{children}</section>
</div>
</div>
</>
)
}
================================================
FILE: apps/v4/app/(app)/colors/layout.tsx
================================================
import { type Metadata } from "next"
import Link from "next/link"
import { Announcement } from "@/components/announcement"
import { ColorsNav } from "@/components/colors-nav"
import {
PageActions,
PageHeader,
PageHeaderDescription,
PageHeaderHeading,
} from "@/components/page-header"
import { Button } from "@/registry/new-york-v4/ui/button"
const title = "Tailwind Colors in Every Format"
const description =
"The complete Tailwind color palette in HEX, RGB, HSL, CSS variables, and classes. Ready to copy and paste into your project."
export const metadata: Metadata = {
title,
description,
openGraph: {
images: [
{
url: `/og?title=${encodeURIComponent(
title
)}&description=${encodeURIComponent(description)}`,
},
],
},
twitter: {
card: "summary_large_image",
images: [
{
url: `/og?title=${encodeURIComponent(
title
)}&description=${encodeURIComponent(description)}`,
},
],
},
}
export default function ColorsLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div>
<PageHeader>
<Announcement />
<PageHeaderHeading>{title}</PageHeaderHeading>
<PageHeaderDescription>{description}</PageHeaderDescription>
<PageActions>
<Button asChild size="sm">
<a href="#colors">Browse Colors</a>
</Button>
<Button asChild variant="ghost" size="sm">
<Link href="/docs/theming">Documentation</Link>
</Button>
</PageActions>
</PageHeader>
<div className="hidden">
<div className="container-wrapper">
<div className="container flex items-center justify-between gap-8 py-4">
<ColorsNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
</div>
</div>
</div>
<div className="container-wrapper">
<div className="container py-6">
<section id="colors" className="scroll-mt-20">
{children}
</section>
</div>
</div>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/colors/page.tsx
================================================
import { getColors } from "@/lib/colors"
import { ColorPalette } from "@/components/color-palette"
export const dynamic = "force-static"
export const revalidate = false
export default function ColorsPage() {
const colors = getColors()
return (
<div className="grid gap-8 lg:gap-16 xl:gap-20">
{colors.map((colorPalette) => (
<ColorPalette key={colorPalette.name} colorPalette={colorPalette} />
))}
</div>
)
}
================================================
FILE: apps/v4/app/(app)/docs/[[...slug]]/page.tsx
================================================
import Link from "next/link"
import { notFound } from "next/navigation"
import { mdxComponents } from "@/mdx-components"
import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
import { findNeighbour } from "fumadocs-core/page-tree"
import { source } from "@/lib/source"
import { absoluteUrl } from "@/lib/utils"
import { DocsBaseSwitcher } from "@/components/docs-base-switcher"
import { DocsCopyPage } from "@/components/docs-copy-page"
import { DocsTableOfContents } from "@/components/docs-toc"
import { OpenInV0Cta } from "@/components/open-in-v0-cta"
import { Button } from "@/registry/new-york-v4/ui/button"
export const revalidate = false
export const dynamic = "force-static"
export const dynamicParams = false
export function generateStaticParams() {
return source.generateParams()
}
export async function generateMetadata(props: {
params: Promise<{ slug: string[] }>
}) {
const params = await props.params
const page = source.getPage(params.slug)
if (!page) {
notFound()
}
const doc = page.data
if (!doc.title || !doc.description) {
notFound()
}
return {
title: doc.title,
description: doc.description,
openGraph: {
title: doc.title,
description: doc.description,
type: "article",
url: absoluteUrl(page.url),
images: [
{
url: `/og?title=${encodeURIComponent(
doc.title
)}&description=${encodeURIComponent(doc.description)}`,
},
],
},
twitter: {
card: "summary_large_image",
title: doc.title,
description: doc.description,
images: [
{
url: `/og?title=${encodeURIComponent(
doc.title
)}&description=${encodeURIComponent(doc.description)}`,
},
],
creator: "@shadcn",
},
}
}
export default async function Page(props: {
params: Promise<{ slug: string[] }>
}) {
const params = await props.params
const page = source.getPage(params.slug)
if (!page) {
notFound()
}
const doc = page.data
const MDX = doc.body
const isChangelog = params.slug?.[0] === "changelog"
const neighbours = isChangelog
? { previous: null, next: null }
: findNeighbour(source.pageTree, page.url)
const raw = await page.data.getText("raw")
return (
<div
data-slot="docs"
className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
>
<div className="flex min-w-0 flex-1 flex-col">
<div className="h-(--top-spacing) shrink-0" />
<div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between md:items-start">
<h1 className="scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl">
{doc.title}
</h1>
<div className="docs-nav flex items-center gap-2">
<div className="hidden sm:block">
<DocsCopyPage page={raw} url={absoluteUrl(page.url)} />
</div>
<div className="ml-auto flex gap-2">
{neighbours.previous && (
<Button
variant="secondary"
size="icon"
className="extend-touch-target size-8 shadow-none md:size-7"
asChild
>
<Link href={neighbours.previous.url}>
<IconArrowLeft />
<span className="sr-only">Previous</span>
</Link>
</Button>
)}
{neighbours.next && (
<Button
variant="secondary"
size="icon"
className="extend-touch-target size-8 shadow-none md:size-7"
asChild
>
<Link href={neighbours.next.url}>
<span className="sr-only">Next</span>
<IconArrowRight />
</Link>
</Button>
)}
</div>
</div>
</div>
{doc.description && (
<p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
{doc.description}
</p>
)}
</div>
</div>
<div className="w-full flex-1 pb-16 *:data-[slot=alert]:first:mt-0 sm:pb-0">
{params.slug &&
params.slug[0] === "components" &&
params.slug[1] &&
params.slug[2] && (
<DocsBaseSwitcher
base={params.slug[1]}
component={params.slug[2]}
className="mb-4"
/>
)}
<MDX components={mdxComponents} />
</div>
<div className="hidden h-16 w-full items-center gap-2 px-4 sm:flex sm:px-0">
{neighbours.previous && (
<Button
variant="secondary"
size="sm"
asChild
className="shadow-none"
>
<Link href={neighbours.previous.url}>
<IconArrowLeft /> {neighbours.previous.name}
</Link>
</Button>
)}
{neighbours.next && (
<Button
variant="secondary"
size="sm"
className="ml-auto shadow-none"
asChild
>
<Link href={neighbours.next.url}>
{neighbours.next.name} <IconArrowRight />
</Link>
</Button>
)}
</div>
</div>
</div>
<div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-(--sidebar-width) flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex">
<div className="h-(--top-spacing) shrink-0"></div>
{doc.toc?.length ? (
<div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
<DocsTableOfContents toc={doc.toc} />
</div>
) : null}
<div className="hidden flex-1 flex-col gap-6 px-6 xl:flex">
<OpenInV0Cta />
</div>
</div>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/docs/changelog/page.tsx
================================================
import Link from "next/link"
import { Button } from "@/examples/radix/ui/button"
import { mdxComponents } from "@/mdx-components"
import { IconRss } from "@tabler/icons-react"
import { getChangelogPages, type ChangelogPageData } from "@/lib/changelog"
import { absoluteUrl } from "@/lib/utils"
import { OpenInV0Cta } from "@/components/open-in-v0-cta"
export const revalidate = false
export const dynamic = "force-static"
export function generateMetadata() {
return {
title: "Changelog",
description: "Latest updates and announcements.",
openGraph: {
title: "Changelog",
description: "Latest updates and announcements.",
type: "article",
url: absoluteUrl("/docs/changelog"),
images: [
{
url: `/og?title=${encodeURIComponent(
"Changelog"
)}&description=${encodeURIComponent(
"Latest updates and announcements."
)}`,
},
],
},
}
}
export default function ChangelogPage() {
const pages = getChangelogPages()
const latestPages = pages.slice(0, 5)
const olderPages = pages.slice(5)
return (
<div
data-slot="docs"
className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
>
<div className="flex min-w-0 flex-1 flex-col">
<div className="h-(--top-spacing) shrink-0" />
<div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<h1 className="scroll-m-24 text-4xl font-semibold tracking-tight sm:text-3xl">
Changelog
</h1>
<Button variant="secondary" size="sm" asChild>
<a href="/rss.xml" target="_blank" rel="noopener noreferrer">
<IconRss />
RSS
</a>
</Button>
</div>
<p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
Latest updates and announcements.
</p>
</div>
<div className="w-full flex-1 pb-16 sm:pb-0">
{latestPages.map((page) => {
const data = page.data as ChangelogPageData
const MDX = page.data.body
return (
<article key={page.url} className="mb-12 border-b pb-12">
<h2 className="font-heading text-xl font-semibold tracking-tight">
{data.title}
</h2>
<div className="prose-changelog mt-6 *:first:mt-0">
<MDX components={mdxComponents} />
</div>
</article>
)
})}
{olderPages.length > 0 && (
<div id="more-updates" className="mb-24 scroll-mt-24">
<h2 className="mb-6 font-heading text-xl font-semibold tracking-tight">
More Updates
</h2>
<div className="grid auto-rows-fr gap-3 sm:grid-cols-2">
{olderPages.map((page) => {
const data = page.data as ChangelogPageData
const [date, ...titleParts] = data.title.split(" - ")
const title = titleParts.join(" - ")
return (
<Link
key={page.url}
href={page.url}
className="flex w-full flex-col rounded-xl bg-surface px-4 py-3 text-surface-foreground transition-colors hover:bg-surface/80"
>
<span className="text-xs text-muted-foreground">
{date}
</span>
<span className="text-sm font-medium">{title}</span>
</Link>
)
})}
</div>
</div>
)}
</div>
</div>
</div>
<div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 lg:flex">
<div className="h-(--top-spacing) shrink-0"></div>
<div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
<div className="flex flex-col gap-2 p-4 pt-0 text-sm">
<p className="sticky top-0 h-6 bg-background text-xs font-medium text-muted-foreground">
On This Page
</p>
{latestPages.map((page) => {
const data = page.data as ChangelogPageData
return (
<Link
key={page.url}
href={page.url}
className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
>
{data.title}
</Link>
)
})}
{olderPages.length > 0 && (
<a
href="#more-updates"
className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
>
More Updates
</a>
)}
</div>
</div>
<div className="hidden flex-1 flex-col gap-6 px-6 xl:flex">
<OpenInV0Cta />
</div>
</div>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/docs/layout.tsx
================================================
import { source } from "@/lib/source"
import { DocsSidebar } from "@/components/docs-sidebar"
import { SidebarProvider } from "@/registry/new-york-v4/ui/sidebar"
export default function DocsLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="container-wrapper flex flex-1 flex-col px-2">
<SidebarProvider
className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)] 3xl:fixed:container 3xl:fixed:px-3"
style={
{
"--sidebar-width": "calc(var(--spacing) * 72)",
} as React.CSSProperties
}
>
<DocsSidebar tree={source.pageTree} />
<div className="h-full w-full">{children}</div>
</SidebarProvider>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx
================================================
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { Icons } from "@/components/icons"
import { Button } from "@/registry/new-york-v4/ui/button"
import {
Field,
FieldGroup,
FieldLabel,
FieldSeparator,
} from "@/registry/new-york-v4/ui/field"
import { Input } from "@/registry/new-york-v4/ui/input"
import { Spinner } from "@/registry/new-york-v4/ui/spinner"
export function UserAuthForm({
className,
...props
}: React.ComponentProps<"div">) {
const [isLoading, setIsLoading] = React.useState<boolean>(false)
async function onSubmit(event: React.SyntheticEvent) {
event.preventDefault()
setIsLoading(true)
setTimeout(() => {
setIsLoading(false)
}, 3000)
}
return (
<div className={cn("grid gap-6", className)} {...props}>
<form onSubmit={onSubmit}>
<FieldGroup>
<Field>
<FieldLabel className="sr-only" htmlFor="email">
Email
</FieldLabel>
<Input
id="email"
placeholder="name@example.com"
type="email"
autoCapitalize="none"
autoComplete="email"
autoCorrect="off"
disabled={isLoading}
/>
</Field>
<Field>
<Button disabled={isLoading}>
{isLoading && <Spinner />}
Sign In with Email
</Button>
</Field>
</FieldGroup>
</form>
<FieldSeparator>Or continue with</FieldSeparator>
<Button variant="outline" type="button" disabled={isLoading}>
{isLoading ? <Spinner /> : <Icons.gitHub className="mr-2 h-4 w-4" />}{" "}
GitHub
</Button>
</div>
)
}
================================================
FILE: apps/v4/app/(app)/examples/authentication/page.tsx
================================================
import { type Metadata } from "next"
import Image from "next/image"
import Link from "next/link"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/registry/new-york-v4/ui/button"
import { FieldDescription } from "@/registry/new-york-v4/ui/field"
import { UserAuthForm } from "@/app/(app)/examples/authentication/components/user-auth-form"
export const metadata: Metadata = {
title: "Authentication",
description: "Authentication forms built using the components.",
}
export default function AuthenticationPage() {
return (
<>
<div className="md:hidden">
<Image
src="/examples/authentication-light.png"
width={1280}
height={843}
alt="Authentication"
className="block dark:hidden"
priority
/>
<Image
src="/examples/authentication-dark.png"
width={1280}
height={843}
alt="Authentication"
className="hidden dark:block"
priority
/>
</div>
<div className="relative container hidden flex-1 shrink-0 items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
<Link
href="/examples/authentication"
className={cn(
buttonVariants({ variant: "ghost" }),
"absolute top-4 right-4 md:top-8 md:right-8"
)}
>
Login
</Link>
<div className="relative hidden h-full flex-col p-10 text-primary lg:flex dark:border-r">
<div className="absolute inset-0 bg-primary/5" />
<div className="relative z-20 flex items-center text-lg font-medium">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-6 w-6"
>
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
</svg>
Acme Inc
</div>
<div className="relative z-20 mt-auto">
<blockquote className="leading-normal text-balance">
“This library has saved me countless hours of work and
helped me deliver stunning designs to my clients faster than ever
before.” - Sofia Davis
</blockquote>
</div>
</div>
<div className="flex items-center justify-center lg:h-[1000px] lg:p-8">
<div className="mx-auto flex w-full flex-col justify-center gap-6 sm:w-[350px]">
<div className="flex flex-col gap-2 text-center">
<h1 className="text-2xl font-semibold tracking-tight">
Create an account
</h1>
<p className="text-sm text-muted-foreground">
Enter your email below to create your account
</p>
</div>
<UserAuthForm />
<FieldDescription className="px-6 text-center">
By clicking continue, you agree to our{" "}
<Link href="/terms">Terms of Service</Link> and{" "}
<Link href="/privacy">Privacy Policy</Link>.
</FieldDescription>
</div>
</div>
</div>
</>
)
}
================================================
FILE: apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
================================================
"use client"
import * as React from "react"
import Link from "next/link"
import {
IconCamera,
IconChartBar,
IconDashboard,
IconDatabase,
IconFileAi,
IconFileDescription,
IconFileWord,
IconFolder,
IconHelp,
IconInnerShadowTop,
IconListDetails,
IconReport,
IconSearch,
IconSettings,
IconUsers,
} from "@tabler/icons-react"
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/registry/new-york-v4/ui/sidebar"
import { NavDocuments } from "@/app/(app)/examples/dashboard/components/nav-documents"
import { NavMain } from "@/app/(app)/examples/dashboard/components/nav-main"
import { NavSecondary } from "@/app/(app)/examples/dashboard/components/nav-secondary"
import { NavUser } from "@/app/(app)/examples/dashboard/components/nav-user"
const data = {
user: {
name: "shadcn",
email: "m@example.com",
avatar: "/avatars/shadcn.jpg",
},
navMain: [
{
title: "Dashboard",
url: "#",
icon: IconDashboard,
},
{
title: "Lifecycle",
url: "#",
icon: IconListDetails,
},
{
title: "Analytics",
url: "#",
icon: IconChartBar,
},
{
title: "Projects",
url: "#",
icon: IconFolder,
},
{
title: "Team",
url: "#",
icon: IconUsers,
},
],
navClouds: [
{
title: "Capture",
icon: IconCamera,
isActive: true,
url: "#",
items: [
{
title: "Active Proposals",
url: "#",
},
{
title: "Archived",
url: "#",
},
],
},
{
title: "Proposal",
icon: IconFileDescription,
url: "#",
items: [
{
title: "Active Proposals",
url: "#",
},
{
title: "Archived",
url: "#",
},
],
},
{
title: "Prompts",
icon: IconFileAi,
url: "#",
items: [
{
title: "Active Proposals",
url: "#",
},
{
title: "Archived",
url: "#",
},
],
},
],
navSecondary: [
{
title: "Settings",
url: "#",
icon: IconSettings,
},
{
title: "Get Help",
url: "#",
icon: IconHelp,
},
{
title: "Search",
url: "#",
icon: IconSearch,
},
],
documents: [
{
name: "Data Library",
url: "#",
icon: IconDatabase,
},
{
name: "Reports",
url: "#",
icon: IconReport,
},
{
name: "Word Assistant",
url: "#",
icon: IconFileWord,
},
],
}
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
return (
<Sidebar collapsible="none" className="h-auto border-r" {...props}>
<SidebarHeader className="border-b">
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton
asChild
className="data-[slot=sidebar-menu-button]:p-1.5!"
>
<Link href="#">
<IconInnerShadowTop className="size-5!" />
<span className="text-base font-semibold">Acme Inc.</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<NavMain items={data.navMain} />
<NavDocuments items={data.documents} />
<NavSecondary items={data.navSecondary} className="mt-auto" />
</SidebarContent>
<SidebarFooter>
<NavUser user={data.user} />
</SidebarFooter>
</Sidebar>
)
}
================================================
FILE: apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
================================================
"use client"
import * as React from "react"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
import {
Card,
CardAction,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/registry/new-york-v4/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/registry/new-york-v4/ui/chart"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/registry/new-york-v4/ui/select"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/registry/new-york-v4/ui/toggle-group"
export const description = "An interactive area chart"
const chartData = [
{ date: "2024-04-01", desktop: 222, mobile: 150 },
{ date: "2024-04-02", desktop: 97, mobile: 180 },
{ date: "2024-04-03", desktop: 167, mobile: 120 },
{ date: "2024-04-04", desktop: 242, mobile: 260 },
{ date: "2024-04-05", desktop: 373, mobile: 290 },
{ date: "2024-04-06", desktop: 301, mobile: 340 },
{ date: "2024-04-07", desktop: 245, mobile: 180 },
{ date: "2024-04-08", desktop: 409, mobile: 320 },
{ date: "2024-04-09", desktop: 59, mobile: 110 },
{ date: "2024-04-10", desktop: 261, mobile: 190 },
{ date: "2024-04-11", desktop: 327, mobile: 350 },
{ date: "2024-04-12", desktop: 292, mobile: 210 },
{ date: "2024-04-13", desktop: 342, mobile: 380 },
{ date: "2024-04-14", desktop: 137, mobile: 220 },
{ date: "2024-04-15", desktop: 120, mobile: 170 },
{ date: "2024-04-16", desktop: 138, mobile: 190 },
{ date: "2024-04-17", desktop: 446, mobile: 360 },
{ date: "2024-04-18", desktop: 364, mobile: 410 },
{ date: "2024-04-19", desktop: 243, mobile: 180 },
{ date: "2024-04-20", desktop: 89, mobile: 150 },
{ date: "2024-04-21", desktop: 137, mobile: 200 },
{ date: "2024-04-22", desktop: 224, mobile: 170 },
{ date: "2024-04-23", desktop: 138, mobile: 230 },
{ date: "2024-04-24", desktop: 387, mobile: 290 },
{ date: "2024-04-25", desktop: 215, mobile: 250 },
{ date: "2024-04-26", desktop: 75, mobile: 130 },
{ date: "2024-04-27", desktop: 383, mobile: 420 },
{ date: "2024-04-28", desktop: 122, mobile: 180 },
{ date: "2024-04-29", desktop: 315, mobile: 240 },
{ date: "2024-04-30", desktop: 454, mobile: 380 },
{ date: "2024-05-01", desktop: 165, mobile: 220 },
{ date: "2024-05-02", desktop: 293, mobile: 310 },
{ date: "2024-05-03", desktop: 247, mobile: 190 },
{ date: "2024-05-04", desktop: 385, mobile: 420 },
{ date: "2024-05-05", desktop: 481, mobile: 390 },
{ date: "2024-05-06", desktop: 498, mobile: 520 },
{ date: "2024-05-07", desktop: 388, mobile: 300 },
{ date: "2024-05-08", desktop: 149, mobile: 210 },
{ date: "2024-05-09", desktop: 227, mobile: 180 },
{ date: "2024-05-10", desktop: 293, mobile: 330 },
{ date: "2024-05-11", desktop: 335, mobile: 270 },
{ date: "2024-05-12", desktop: 197, mobile: 240 },
{ date: "2024-05-13", desktop: 197, mobile: 160 },
{ date: "2024-05-14", desktop: 448, mobile: 490 },
{ date: "2024-05-15", desktop: 473, mobile: 380 },
{ date: "2024-05-16", desktop: 338, mobile: 400 },
{ date: "2024-05-17", desktop: 499, mobile: 420 },
{ date: "2024-05-18", desktop: 315, mobile: 350 },
{ date: "2024-05-19", desktop: 235, mobile: 180 },
{ date: "2024-05-20", desktop: 177, mobile: 230 },
{ date: "2024-05-21", desktop: 82, mobile: 140 },
{ date: "2024-05-22", desktop: 81, mobile: 120 },
{ date: "2024-05-23", desktop: 252, mobile: 290 },
{ date: "2024-05-24", desktop: 294, mobile: 220 },
{ date: "2024-05-25", desktop: 201, mobile: 250 },
{ date: "2024-05-26", desktop: 213, mobile: 170 },
{ date: "2024-05-27", desktop: 420, mobile: 460 },
{ date: "2024-05-28", desktop: 233, mobile: 190 },
{ date: "2024-05-29", desktop: 78, mobile: 130 },
{ date: "2024-05-30", desktop: 340, mobile: 280 },
{ date: "2024-05-31", desktop: 178, mobile: 230 },
{ date: "2024-06-01", desktop: 178, mobile: 200 },
{ date: "2024-06-02", desktop: 470, mobile: 410 },
{ date: "2024-06-03", desktop: 103, mobile: 160 },
{ date: "2024-06-04", desktop: 439, mobile: 380 },
{ date: "2024-06-05", desktop: 88, mobile: 140 },
{ date: "2024-06-06", desktop: 294, mobile: 250 },
{ date: "2024-06-07", desktop: 323, mobile: 370 },
{ date: "2024-06-08", desktop: 385, mobile: 320 },
{ date: "2024-06-09", desktop: 438, mobile: 480 },
{ date: "2024-06-10", desktop: 155, mobile: 200 },
{ date: "2024-06-11", desktop: 92, mobile: 150 },
{ date: "2024-06-12", desktop: 492, mobile: 420 },
{ date: "2024-06-13", desktop: 81, mobile: 130 },
{ date: "2024-06-14", desktop: 426, mobile: 380 },
{ date: "2024-06-15", desktop: 307, mobile: 350 },
{ date: "2024-06-16", desktop: 371, mobile: 310 },
{ date: "2024-06-17", desktop: 475, mobile: 520 },
{ date: "2024-06-18", desktop: 107, mobile: 170 },
{ date: "2024-06-19", desktop: 341, mobile: 290 },
{ date: "2024-06-20", desktop: 408, mobile: 450 },
{ date: "2024-06-21", desktop: 169, mobile: 210 },
{ date: "2024-06-22", desktop: 317, mobile: 270 },
{ date: "2024-06-23", desktop: 480, mobile: 530 },
{ date: "2024-06-24", desktop: 132, mobile: 180 },
{ date: "2024-06-25", desktop: 141, mobile: 190 },
{ date: "2024-06-26", desktop: 434, mobile: 380 },
{ date: "2024-06-27", desktop: 448, mobile: 490 },
{ date: "2024-06-28", desktop: 149, mobile: 200 },
{ date: "2024-06-29", desktop: 103, mobile: 160 },
{ date: "2024-06-30", desktop: 446, mobile: 400 },
]
const chartConfig = {
visitors: {
label: "Visitors",
},
desktop: {
label: "Desktop",
color: "var(--primary)",
},
mobile: {
label: "Mobile",
color: "var(--primary)",
},
} satisfies ChartConfig
export function ChartAreaInteractive() {
const isMobile = useIsMobile()
const [timeRange, setTimeRange] = React.useState("7d")
const filteredData = chartData.filter((item) => {
const date = new Date(item.date)
const referenceDate = new Date("2024-06-30")
let daysToSubtract = 90
if (timeRange === "30d") {
daysToSubtract = 30
} else if (timeRange === "7d") {
daysToSubtract = 7
}
const startDate = new Date(referenceDate)
startDate.setDate(startDate.getDate() - daysToSubtract)
return date >= startDate
})
return (
<Card className="@container/card">
<CardHeader>
<CardTitle>Total Visitors</CardTitle>
<CardDescription>
<span className="hidden @[540px]/card:block">
Total for the last 3 months
</span>
<span className="@[540px]/card:hidden">Last 3 months</span>
</CardDescription>
<CardAction>
<ToggleGroup
type="single"
value={timeRange}
onValueChange={setTimeRange}
variant="outline"
className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
>
<ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
<ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
<ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
</ToggleGroup>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger
className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
size="sm"
aria-label="Select a value"
>
<SelectValue placeholder="Last 3 months" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value="90d" className="rounded-lg">
Last 3 months
</SelectItem>
<SelectItem value="30d" className="rounded-lg">
Last 30 days
</SelectItem>
<SelectItem value="7d" className="rounded-lg">
Last 7 days
</SelectItem>
</SelectContent>
</Select>
</CardAction>
</CardHeader>
<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
<ChartContainer
config={chartConfig}
className="aspect-auto h-[250px] w-full"
>
<AreaChart data={filteredData}>
<defs>
<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="var(--color-desktop)"
stopOpacity={1.0}
/>
<stop
offset="95%"
stopColor="var(--color-desktop)"
stopOpacity={0.1}
/>
</linearGradient>
<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="var(--color-mobile)"
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor="var(--color-mobile)"
stopOpacity={0.1}
/>
</linearGradient>
</defs>
<CartesianGrid vertical={false} />
<XAxis
dataKey="date"
tickLine={false}
axisLine={false}
tickMargin={8}
minTickGap={32}
tickFormatter={(value) => {
const date = new Date(value)
return date.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
})
}}
/>
<ChartTooltip
cursor={false}
defaultIndex={isMobile ? -1 : 10}
content={
<ChartTooltipContent
labelFormatter={(value) => {
return new Date(value).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
})
}}
indicator="dot"
/>
}
/>
<Area
dataKey="mobile"
type="natural"
fill="url(#fillMobile)"
stroke="var(--color-mobile)"
stackId="a"
/>
<Area
dataKey="desktop"
type="natural"
fill="url(#fillDesktop)"
stroke="var(--color-desktop)"
stackId="a"
/>
</AreaChart>
</ChartContainer>
</CardContent>
</Card>
)
}
================================================
FILE: apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
================================================
"use client"
import * as React from "react"
import {
closestCenter,
DndContext,
KeyboardSensor,
MouseSensor,
TouchSensor,
useSensor,
useSensors,
type DragEndEvent,
type UniqueIdentifier,
} from "@dnd-kit/core"
import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
import {
arrayMove,
SortableContext,
useSortable,
verticalListSortingStrategy,
} from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"
import {
IconChevronDown,
IconChevronLeft,
IconChevronRight,
IconChevronsLeft,
IconChevronsRight,
IconCircleCheckFilled,
IconDotsVertical,
IconGripVertical,
IconLayoutColumns,
IconLoader,
IconPlus,
IconTrendingUp,
} from "@tabler/icons-react"
import {
flexRender,
getCoreRowModel,
getFacetedRowModel,
getFacetedUniqueValues,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
type ColumnDef,
type ColumnFiltersState,
type Row,
type SortingState,
type VisibilityState,
} from "@tanstack/react-table"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
import { toast } from "sonner"
import { z } from "zod"
import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
import { Badge } from "@/registry/new-york-v4/ui/badge"
import { Button } from "@/registry/new-york-v4/ui/button"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/registry/new-york-v4/ui/chart"
import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/registry/new-york-v4/ui/drawer"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/registry/new-york-v4/ui/dropdown-menu"
import { Input } from "@/registry/new-york-v4/ui/input"
import { Label } from "@/registry/new-york-v4/ui/label"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/registry/new-york-v4/ui/select"
import { Separator } from "@/registry/new-york-v4/ui/separator"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/registry/new-york-v4/ui/table"
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/registry/new-york-v4/ui/tabs"
export const schema = z.object({
id: z.number(),
header: z.string(),
type: z.string(),
status: z.string(),
target: z.string(),
limit: z.string(),
reviewer: z.string(),
})
// Create a separate component for the drag handle
function DragHandle({ id }: { id: number }) {
const { attributes, listeners } = useSortable({
id,
})
return (
<Button
{...attributes}
{...listeners}
variant="ghost"
size="icon"
className="size-7 text-muted-foreground hover:bg-transparent"
>
<IconGripVertical className="size-3 text-muted-foreground" />
<span className="sr-only">Drag to reorder</span>
</Button>
)
}
const columns: ColumnDef<z.infer<typeof schema>>[] = [
{
id: "drag",
header: () => null,
cell: ({ row }) => <DragHandle id={row.original.id} />,
},
{
id: "select",
header: ({ table }) => (
<div className="flex items-center justify-center">
<Checkbox
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && "indeterminate")
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Select all"
/>
</div>
),
cell: ({ row }) => (
<div className="flex items-center justify-center">
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Select row"
/>
</div>
),
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "header",
header: "Header",
cell: ({ row }) => {
return <TableCellViewer item={row.original} />
},
enableHiding: false,
},
{
accessorKey: "type",
header: "Section Type",
cell: ({ row }) => (
<div className="w-32">
<Badge variant="outline" className="px-1.5 text-muted-foreground">
{row.original.type}
</Badge>
</div>
),
},
{
accessorKey: "status",
header: "Status",
cell: ({ row }) => (
<Badge variant="outline" className="px-1.5 text-muted-foreground">
{row.original.status === "Done" ? (
<IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
) : (
<IconLoader />
)}
{row.original.status}
</Badge>
),
},
{
accessorKey: "target",
header: () => <div className="w-full text-right">Target</div>,
cell: ({ row }) => (
<form
onSubmit={(e) => {
e.preventDefault()
toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
loading: `Saving ${row.original.header}`,
success: "Done",
error: "Error",
})
}}
>
<Label htmlFor={`${row.original.id}-target`} className="sr-only">
Target
</Label>
<Input
className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
defaultValue={row.original.target}
id={`${row.original.id}-target`}
/>
</form>
),
},
{
accessorKey: "limit",
header: () => <div className="w-full text-right">Limit</div>,
cell: ({ row }) => (
<form
onSubmit={(e) => {
e.preventDefault()
toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
loading: `Saving ${row.original.header}`,
success: "Done",
error: "Error",
})
}}
>
<Label htmlFor={`${row.original.id}-limit`} className="sr-only">
Limit
</Label>
<Input
className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
defaultValue={row.original.limit}
id={`${row.original.id}-limit`}
/>
</form>
),
},
{
accessorKey: "reviewer",
header: "Reviewer",
cell: ({ row }) => {
const isAssigned = row.original.reviewer !== "Assign reviewer"
if (isAssigned) {
return row.original.reviewer
}
return (
<>
<Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
Reviewer
</Label>
<Select>
<SelectTrigger
className="w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate"
size="sm"
id={`${row.original.id}-reviewer`}
>
<SelectValue placeholder="Assign reviewer" />
</SelectTrigger>
<SelectContent align="end">
<SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
<SelectItem value="Jamik Tashpulatov">
Jamik Tashpulatov
</SelectItem>
</SelectContent>
</Select>
</>
)
},
},
{
id: "actions",
cell: () => (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
size="icon"
>
<IconDotsVertical />
<span className="sr-only">Open menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-32">
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Make a copy</DropdownMenuItem>
<DropdownMenuItem>Favorite</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
),
},
]
function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
const { transform, transition, setNodeRef, isDragging } = useSortable({
id: row.original.id,
})
return (
<TableRow
data-state={row.getIsSelected() && "selected"}
data-dragging={isDragging}
ref={setNodeRef}
className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
style={{
transform: CSS.Transform.toString(transform),
transition: transition,
}}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
)
}
export function DataTable({
data: initialData,
}: {
data: z.infer<typeof schema>[]
}) {
const [data, setData] = React.useState(() => initialData)
const [rowSelection, setRowSelection] = React.useState({})
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({})
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
)
const [sorting, setSorting] = React.useState<SortingState>([])
const [pagination, setPagination] = React.useState({
pageIndex: 0,
pageSize: 10,
})
const sortableId = React.useId()
const sensors = useSensors(
useSensor(MouseSensor, {}),
useSensor(TouchSensor, {}),
useSensor(KeyboardSensor, {})
)
const dataIds = React.useMemo<UniqueIdentifier[]>(
() => data?.map(({ id }) => id) || [],
[data]
)
const table = useReactTable({
data,
columns,
state: {
sorting,
columnVisibility,
rowSelection,
columnFilters,
pagination,
},
getRowId: (row) => row.id.toString(),
enableRowSelection: true,
onRowSelectionChange: setRowSelection,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
onColumnVisibilityChange: setColumnVisibility,
onPaginationChange: setPagination,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
})
function handleDragEnd(event: DragEndEvent) {
const { active, over } = event
if (active && over && active.id !== over.id) {
setData((data) => {
const oldIndex = dataIds.indexOf(active.id)
const newIndex = dataIds.indexOf(over.id)
return arrayMove(data, oldIndex, newIndex)
})
}
}
return (
<Tabs
defaultValue="outline"
className="w-full flex-col justify-start gap-6"
>
<div className="flex items-center justify-between px-4 lg:px-6">
<Label htmlFor="view-selector" className="sr-only">
View
</Label>
<Select defaultValue="outline">
<SelectTrigger
className="flex w-fit @4xl/main:hidden"
size="sm"
id="view-selector"
>
<SelectValue placeholder="Select a view" />
</SelectTrigger>
<SelectContent>
<SelectItem value="outline">Outline</SelectItem>
<SelectItem value="past-performance">Past Performance</SelectItem>
<SelectItem value="key-personnel">Key Personnel</SelectItem>
<SelectItem value="focus-documents">Focus Documents</SelectItem>
</SelectContent>
</Select>
<TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
<TabsTrigger value="outline">Outline</TabsTrigger>
<TabsTrigger value="past-performance">
Past Performance <Badge variant="secondary">3</Badge>
</TabsTrigger>
<TabsTrigger value="key-personnel">
Key Personnel <Badge variant="secondary">2</Badge>
</TabsTrigger>
<TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
</TabsList>
<div className="flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm">
<IconLayoutColumns />
<span className="hidden lg:inline">Customize Columns</span>
<span className="lg:hidden">Columns</span>
<IconChevronDown />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
{table
.getAllColumns()
.filter(
(column) =>
typeof column.accessorFn !== "undefined" &&
column.getCanHide()
)
.map((column) => {
return (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) =>
column.toggleVisibility(!!value)
}
>
{column.id}
</DropdownMenuCheckboxItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
<Button variant="outline" size="sm">
<IconPlus />
<span className="hidden lg:inline">Add Section</span>
</Button>
</div>
</div>
<TabsContent
value="outline"
className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
>
<div className="overflow-hidden rounded-lg border">
<DndContext
collisionDetection={closestCenter}
modifiers={[restrictToVerticalAxis]}
onDragEnd={handleDragEnd}
sensors={sensors}
id={sortableId}
>
<Table>
<TableHeader className="sticky top-0 z-10 bg-muted">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
)
})}
</TableRow>
))}
</TableHeader>
<TableBody className="**:data-[slot=table-cell]:first:w-8">
{table.getRowModel().rows?.length ? (
<SortableContext
items={dataIds}
strategy={verticalListSortingStrategy}
>
{table.getRowModel().rows.map((row) => (
<DraggableRow key={row.id} row={row} />
))}
</SortableContext>
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</DndContext>
</div>
<div className="flex items-center justify-between px-4">
<div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
{table.getFilteredSelectedRowModel().rows.length} of{" "}
{table.getFilteredRowModel().rows.length} row(s) selected.
</div>
<div className="flex w-full items-center gap-8 lg:w-fit">
<div className="hidden items-center gap-2 lg:flex">
<Label htmlFor="rows-per-page" className="text-sm font-medium">
Rows per page
</Label>
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
table.setPageSize(Number(value))
}}
>
<SelectTrigger size="sm" className="w-20" id="rows-per-page">
<SelectValue
placeholder={table.getState().pagination.pageSize}
/>
</SelectTrigger>
<SelectContent side="top">
{[10, 20, 30, 40, 50].map((pageSize) => (
<SelectItem key={pageSize} value={`${pageSize}`}>
{pageSize}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex w-fit items-center justify-center text-sm font-medium">
Page {table.getState().pagination.pageIndex + 1} of{" "}
{table.getPageCount()}
</div>
<div className="ml-auto flex items-center gap-2 lg:ml-0">
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
<IconChevronsLeft />
</Button>
<Button
variant="outline"
className="size-8"
size="icon"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
<IconChevronLeft />
</Button>
<Button
variant="outline"
className="size-8"
size="icon"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
<IconChevronRight />
</Button>
<Button
variant="outline"
className="hidden size-8 lg:flex"
size="icon"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
<IconChevronsRight />
</Button>
</div>
</div>
</div>
</TabsContent>
<TabsContent
value="past-performance"
className="flex flex-col px-4 lg:px-6"
>
<div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
</TabsContent>
<TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
<div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
</TabsContent>
<TabsContent
value="focus-documents"
className="flex flex-col px-4 lg:px-6"
>
<div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
</TabsContent>
</Tabs>
)
}
const chartData = [
{ month: "January", desktop: 186, mobile: 80 },
{ month: "February", desktop: 305, mobile: 200 },
{ month: "March", desktop: 237, mobile: 120 },
{ month: "April", desktop: 73, mobile: 190 },
{ month: "May", desktop: 209, mobile: 130 },
{ month: "June", desktop: 214, mobile: 140 },
]
const chartConfig = {
desktop: {
label: "Desktop",
color: "var(--primary)",
},
mobile: {
label: "Mobile",
color: "var(--primary)",
},
} satisfies ChartConfig
function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
const isMobile = useIsMobile()
return (
<Drawer direction={isMobile ? "bottom" : "right"}>
<DrawerTrigger asChild>
<Button variant="link" className="w-fit px-0 text-left text-foreground">
{item.header}
</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader className="gap-1">
<DrawerTitle>{item.header}</DrawerTitle>
<DrawerDescription>
Showing total visitors for the last 6 months
</DrawerDescription>
</DrawerHeader>
<div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
{!isMobile && (
<>
<ChartContainer config={chartConfig}>
<AreaChart
accessibilityLayer
data={chartData}
margin={{
left: 0,
right: 10,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => value.slice(0, 3)}
hide
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent indicator="dot" />}
/>
<Area
dataKey="mobile"
type="natural"
fill="var(--color-mobile)"
fillOpacity={0.6}
stroke="var(--color-mobile)"
stackId="a"
/>
<Area
dataKey="desktop"
type="natural"
fill="var(--color-desktop)"
fillOpacity={0.4}
stroke="var(--color-desktop)"
stackId="a"
/>
</AreaChart>
</ChartContainer>
<Separator />
<div className="grid gap-2">
<div className="flex gap-2 leading-none font-medium">
Trending up by 5.2% this month{" "}
<IconTrendingUp className="size-4" />
</div>
<div className="text-muted-foreground">
Showing total visitors for the last 6 months. This is just
some random text to test the layout. It spans multiple lines
and should wrap around.
</div>
</div>
<Separator />
</>
)}
<form className="flex flex-col gap-4">
<div className="flex flex-col gap-3">
<Label htmlFor="header">Header</Label>
<Input id="header" defaultValue={item.header} />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="flex flex-col gap-3">
<Label htmlFor="type">Type</Label>
<Select defaultValue={item.type}>
<SelectTrigger id="type" className="w-full">
<SelectValue placeholder="Select a type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Table of Contents">
Table of Contents
</SelectItem>
<SelectItem value="Executive Summary">
Executive Summary
</SelectItem>
<SelectItem value="Technical Approach">
Technical Approach
</SelectItem>
<SelectItem value="Design">Design</SelectItem>
<SelectItem value="Capabilities">Capabilities</SelectItem>
<SelectItem value="Focus Documents">
Focus Documents
</SelectItem>
<SelectItem value="Narrative">Narrative</SelectItem>
<SelectItem value="Cover Page">Cover Page</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex flex-col gap-3">
<Label htmlFor="status">Status</Label>
<Select defaultValue={item.status}>
<SelectTrigger id="status" className="w-full">
<SelectValue placeholder="Select a status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Done">Done</SelectItem>
<SelectItem value="In Progress">In Progress</SelectItem>
<SelectItem value="Not Started">Not Started</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="flex flex-col gap-3">
<Label htmlFor="target">Target</Label>
<Input id="target" defaultValue={item.target} />
</div>
<div className="flex flex-col gap-3">
<Label htmlFor="limit">Limit</Label>
<Input id="limit" defaultValue={item.limit} />
</div>
</div>
<div className="flex flex-col gap-3">
<Label htmlFor="reviewer">Reviewer</Label>
<Select defaultValue={item.reviewer}>
<SelectTrigger id="reviewer" className="w-full">
<SelectValue placeholder="Select a reviewer" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
<SelectItem value="Jamik Tashpulatov">
Jamik Tashpulatov
</SelectItem>
<SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
</SelectContent>
</Select>
</div>
</form>
</div>
<DrawerFooter>
<Button>Submit</Button>
<DrawerClose asChild>
<Button variant="outline">Done</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
)
}
================================================
FILE: apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
================================================
"use client"
import {
IconDots,
IconFolder,
IconShare3,
IconTrash,
type Icon,
} from "@tabler/icons-react"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/registry/new-york-v4/ui/dropdown-menu"
import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/registry/new-york-v4/ui/sidebar"
export function NavDocuments({
items,
}: {
items: {
name: string
url: string
icon: Icon
}[]
}) {
const { isMobile } = useSidebar()
return (
<SidebarGroup className="group-data-[collapsible=icon]:hidden">
<SidebarGroupLabel>Documents</SidebarGroupLabel>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.name}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.name}</span>
</a>
</SidebarMenuButton>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuAction
showOnHover
className="rounded-sm data-[state=open]:bg-accent"
>
<IconDots />
<span className="sr-only">More</span>
</SidebarMenuAction>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-24 rounded-lg"
side={isMobile ? "bottom" : "right"}
align={isMobile ? "end" : "start"}
>
<DropdownMenuItem>
<IconFolder />
<span>Open</span>
</DropdownMenuItem>
<DropdownMenuItem>
<IconShare3 />
<span>Share</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<IconTrash />
<span>Delete</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
))}
<SidebarMenuItem>
<SidebarMenuButton className="text-sidebar-foreground/70">
<IconDots className="text-sidebar-foreground/70" />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
)
}
================================================
FILE: apps/v4/app/(app)/examples/dashboard/components/nav-main.tsx
================================================
"use client"
import { type Icon } from "@tabler/icons-react"
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/registry/new-york-v4/ui/sidebar"
export function NavMain({
items,
}: {
items: {
title: string
url: string
icon?: Icon
}[]
}) {
return (
<SidebarGroup>
<SidebarGroupContent>
<SidebarGroupLabel>Home</SidebarGroupLabel>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton tooltip={item.title}>
{item.icon && <item.icon />}
<span>{item.title}</span>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
)
}
================================================
FILE: apps/v4/app/(app)/examples/dashboard/components/nav-secondary.tsx
================================================
"use client"
import * as React from "react"
import { type Icon } from "@tabler/icons-react"
import {
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/registry/new-york-v4/ui/sidebar"
export function NavSecondary({
items,
...props
}: {
items: {
title: string
url: string
icon: Icon
}[]
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
return (
<SidebarGroup {...props}>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
)
}
================================================
FILE: apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
================================================
"use client"
import {
IconCreditCard,
IconDotsVertical,
IconLogout,
IconNotification,
IconUserCircle,
} from "@tabler/icons-react"
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/registry/new-york-v4/ui/avatar"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/registry/new-york-v4/ui/dropdown-menu"
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/registry/new-york-v4/ui/sidebar"
export function NavUser({
user,
}: {
user: {
name: string
email: string
avatar: string
}
}) {
const { isMobile } = useSidebar()
return (
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg grayscale">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user.name}</span>
<span className="truncate text-xs text-muted-foreground">
{user.email}
</span>
</div>
<IconDotsVertical className="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
side={isMobile ? "bottom" : "right"}
align="end"
sideOffset={4}
>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage src={user.avatar} alt={user.name} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user.name}</span>
<span className="truncate text-xs text-muted-foreground">
{user.email}
</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<IconUserCircle />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<IconCreditCard />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<IconNotification />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<IconLogout />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
)
}
================================================
FILE: apps/v4/app/(app)/examples/dashboard/components/section-cards.tsx
================================================
import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react"
import { Badge } from "@/registry/new-york-v4/ui/badge"
import {
Card,
CardAction,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/registry/new-york-v4/ui/card"
export function SectionCards() {
return (
<div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
<Card className="@container/card">
<CardHeader>
<CardDescription>Total Revenue</CardDescription>
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
$1,250.00
</CardTitle>
<CardAction>
<Badge variant="outline">
<IconTrendingUp />
+12.5%
</Badge>
</CardAction>
</CardHeader>
<CardFooter className="flex-col items-start gap-1.5 text-sm">
<div className="line-clamp-1 flex gap-2 font-medium">
Trending up this month <IconTrendingUp className="size-4" />
</div>
<div className="text-muted-foreground">
Visitors for the last 6 months
</div>
</CardFooter>
</Card>
<Card className="@container/card">
<CardHeader>
<CardDescription>New Customers</CardDescription>
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
1,234
</CardTitle>
<CardAction>
<Badge variant="outline">
<IconTrendingDown />
-20%
</Badge>
</CardAction>
</CardHeader>
<CardFooter className="flex-col items-start gap-1.5 text-sm">
<div className="line-clamp-1 flex gap-2 font-medium">
Down 20% this period <IconTrendingDown className="size-4" />
</div>
<div className="text-muted-foreground">
Acquisition needs attention
</div>
</CardFooter>
</Card>
<Card className="@container/card">
<CardHeader>
<CardDescription>Active Accounts</CardDescription>
<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
45,678
</CardTitle>
<CardAction>
<Badge variant="outline">
<IconTrendingUp />
+12.5%
</Badge>
</CardAction>
</CardHeader>
<CardFooter className="flex-col items-start gap-1.5 text-sm">
<div className="line-clamp-1 flex gap-2 font-medium">
Strong user retention <IconTrendingUp className="size-4" />
</div>
<div className="text-muted-foreground">Engagement exceed targets</div>
</CardFooter>
</Card>
<Card className="@conta
Showing preview only (314K chars total). Download the full file or copy to clipboard to get everything.
gitextract_4oo2mby8/ ├── .changeset/ │ ├── README.md │ └── config.json ├── .claude/ │ └── settings.local.json ├── .commitlintrc.json ├── .cursor/ │ └── rules/ │ └── registry-bases-parity.mdc ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .github/ │ ├── DISCUSSION_TEMPLATE/ │ │ └── blocks-request.yml │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.yml │ │ ├── config.yml │ │ └── feature_request.yml │ ├── changeset-version.js │ ├── dependabot.yml │ ├── version-script-beta.js │ ├── version-script-next.js │ └── workflows/ │ ├── code-check.yml │ ├── issue-stale.yml │ ├── prerelease-comment.yml │ ├── prerelease.yml │ ├── release.yml │ ├── test.yml │ └── validate-registries.yml ├── .gitignore ├── .kodiak.toml ├── .npmrc ├── .nvmrc ├── .prettierignore ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── SECURITY.md ├── apps/ │ └── v4/ │ ├── .env.example │ ├── .gitignore │ ├── .prettierignore │ ├── README.md │ ├── app/ │ │ ├── (app)/ │ │ │ ├── (root)/ │ │ │ │ ├── components/ │ │ │ │ │ ├── appearance-settings.tsx │ │ │ │ │ ├── button-group-demo.tsx │ │ │ │ │ ├── button-group-input-group.tsx │ │ │ │ │ ├── button-group-nested.tsx │ │ │ │ │ ├── button-group-popover.tsx │ │ │ │ │ ├── empty-avatar-group.tsx │ │ │ │ │ ├── empty-input-group.tsx │ │ │ │ │ ├── field-checkbox.tsx │ │ │ │ │ ├── field-choice-card.tsx │ │ │ │ │ ├── field-demo.tsx │ │ │ │ │ ├── field-hear.tsx │ │ │ │ │ ├── field-slider.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ ├── input-group-button.tsx │ │ │ │ │ ├── input-group-demo.tsx │ │ │ │ │ ├── input-group-textarea.tsx │ │ │ │ │ ├── item-avatar.tsx │ │ │ │ │ ├── item-demo.tsx │ │ │ │ │ ├── notion-prompt-form.tsx │ │ │ │ │ ├── spinner-badge.tsx │ │ │ │ │ └── spinner-empty.tsx │ │ │ │ └── page.tsx │ │ │ ├── blocks/ │ │ │ │ ├── [...categories]/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── layout.tsx │ │ │ │ └── page.tsx │ │ │ ├── charts/ │ │ │ │ ├── [type]/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── charts.tsx │ │ │ │ └── layout.tsx │ │ │ ├── colors/ │ │ │ │ ├── layout.tsx │ │ │ │ └── page.tsx │ │ │ ├── docs/ │ │ │ │ ├── [[...slug]]/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── changelog/ │ │ │ │ │ └── page.tsx │ │ │ │ └── layout.tsx │ │ │ ├── examples/ │ │ │ │ ├── authentication/ │ │ │ │ │ ├── components/ │ │ │ │ │ │ └── user-auth-form.tsx │ │ │ │ │ └── page.tsx │ │ │ │ ├── dashboard/ │ │ │ │ │ ├── components/ │ │ │ │ │ │ ├── app-sidebar.tsx │ │ │ │ │ │ ├── chart-area-interactive.tsx │ │ │ │ │ │ ├── data-table.tsx │ │ │ │ │ │ ├── nav-documents.tsx │ │ │ │ │ │ ├── nav-main.tsx │ │ │ │ │ │ ├── nav-secondary.tsx │ │ │ │ │ │ ├── nav-user.tsx │ │ │ │ │ │ ├── section-cards.tsx │ │ │ │ │ │ └── site-header.tsx │ │ │ │ │ ├── data.json │ │ │ │ │ └── page.tsx │ │ │ │ ├── layout.tsx │ │ │ │ ├── playground/ │ │ │ │ │ ├── components/ │ │ │ │ │ │ ├── code-viewer.tsx │ │ │ │ │ │ ├── maxlength-selector.tsx │ │ │ │ │ │ ├── model-selector.tsx │ │ │ │ │ │ ├── preset-actions.tsx │ │ │ │ │ │ ├── preset-save.tsx │ │ │ │ │ │ ├── preset-selector.tsx │ │ │ │ │ │ ├── preset-share.tsx │ │ │ │ │ │ ├── temperature-selector.tsx │ │ │ │ │ │ └── top-p-selector.tsx │ │ │ │ │ ├── data/ │ │ │ │ │ │ ├── models.ts │ │ │ │ │ │ └── presets.ts │ │ │ │ │ └── page.tsx │ │ │ │ ├── rtl/ │ │ │ │ │ ├── components/ │ │ │ │ │ │ ├── appearance-settings.tsx │ │ │ │ │ │ ├── button-group-demo.tsx │ │ │ │ │ │ ├── button-group-input-group.tsx │ │ │ │ │ │ ├── button-group-nested.tsx │ │ │ │ │ │ ├── button-group-popover.tsx │ │ │ │ │ │ ├── empty-avatar-group.tsx │ │ │ │ │ │ ├── field-checkbox.tsx │ │ │ │ │ │ ├── field-demo.tsx │ │ │ │ │ │ ├── field-hear.tsx │ │ │ │ │ │ ├── field-slider.tsx │ │ │ │ │ │ ├── index.tsx │ │ │ │ │ │ ├── input-group-button.tsx │ │ │ │ │ │ ├── input-group-demo.tsx │ │ │ │ │ │ ├── item-demo.tsx │ │ │ │ │ │ ├── notion-prompt-form.tsx │ │ │ │ │ │ ├── spinner-badge.tsx │ │ │ │ │ │ └── spinner-empty.tsx │ │ │ │ │ └── page.tsx │ │ │ │ └── tasks/ │ │ │ │ ├── components/ │ │ │ │ │ ├── columns.tsx │ │ │ │ │ ├── data-table-column-header.tsx │ │ │ │ │ ├── data-table-faceted-filter.tsx │ │ │ │ │ ├── data-table-pagination.tsx │ │ │ │ │ ├── data-table-row-actions.tsx │ │ │ │ │ ├── data-table-toolbar.tsx │ │ │ │ │ ├── data-table-view-options.tsx │ │ │ │ │ ├── data-table.tsx │ │ │ │ │ └── user-nav.tsx │ │ │ │ ├── data/ │ │ │ │ │ ├── data.tsx │ │ │ │ │ ├── schema.ts │ │ │ │ │ ├── seed.ts │ │ │ │ │ └── tasks.json │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ ├── llm/ │ │ │ │ └── [[...slug]]/ │ │ │ │ └── route.ts │ │ │ └── themes/ │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── (create)/ │ │ │ ├── components/ │ │ │ │ ├── accent-picker.tsx │ │ │ │ ├── action-menu.tsx │ │ │ │ ├── base-color-picker.tsx │ │ │ │ ├── base-picker.tsx │ │ │ │ ├── chart-color-picker.tsx │ │ │ │ ├── copy-preset.tsx │ │ │ │ ├── customizer.tsx │ │ │ │ ├── design-system-provider.tsx │ │ │ │ ├── font-picker.tsx │ │ │ │ ├── history-buttons.tsx │ │ │ │ ├── icon-library-picker.tsx │ │ │ │ ├── icon-placeholder.tsx │ │ │ │ ├── item-explorer.tsx │ │ │ │ ├── lock-button.tsx │ │ │ │ ├── main-menu.tsx │ │ │ │ ├── menu-picker.tsx │ │ │ │ ├── mode-switcher.tsx │ │ │ │ ├── picker.tsx │ │ │ │ ├── preset-handler.tsx │ │ │ │ ├── preset-picker.tsx │ │ │ │ ├── preview-style.tsx │ │ │ │ ├── preview.tsx │ │ │ │ ├── project-form.tsx │ │ │ │ ├── radius-picker.tsx │ │ │ │ ├── random-button.tsx │ │ │ │ ├── reset-button.tsx │ │ │ │ ├── share-button.tsx │ │ │ │ ├── style-picker.tsx │ │ │ │ ├── theme-picker.tsx │ │ │ │ ├── v0-button.tsx │ │ │ │ └── welcome-dialog.tsx │ │ │ ├── create/ │ │ │ │ ├── layout.tsx │ │ │ │ └── page.tsx │ │ │ ├── hooks/ │ │ │ │ ├── use-action-menu.ts │ │ │ │ ├── use-design-system.ts │ │ │ │ ├── use-history.tsx │ │ │ │ ├── use-iframe-sync.tsx │ │ │ │ ├── use-locks.tsx │ │ │ │ ├── use-random.tsx │ │ │ │ ├── use-reset.tsx │ │ │ │ └── use-theme-toggle.tsx │ │ │ ├── init/ │ │ │ │ ├── md/ │ │ │ │ │ ├── build-instructions.ts │ │ │ │ │ └── route.ts │ │ │ │ ├── parse-config.test.ts │ │ │ │ ├── parse-config.ts │ │ │ │ ├── route.ts │ │ │ │ └── v0/ │ │ │ │ └── route.ts │ │ │ ├── lib/ │ │ │ │ ├── api.ts │ │ │ │ ├── constants.ts │ │ │ │ ├── fonts.ts │ │ │ │ ├── merge-theme.ts │ │ │ │ ├── preset-code.ts │ │ │ │ ├── preset-query.test.ts │ │ │ │ ├── preset-query.ts │ │ │ │ ├── randomize-biases.ts │ │ │ │ ├── search-params.ts │ │ │ │ ├── templates.ts │ │ │ │ ├── utils.ts │ │ │ │ ├── v0.test.ts │ │ │ │ └── v0.ts │ │ │ └── preview/ │ │ │ └── [base]/ │ │ │ └── [name]/ │ │ │ └── page.tsx │ │ ├── (examples)/ │ │ │ ├── dashboard/ │ │ │ │ ├── components/ │ │ │ │ │ ├── app-sidebar.tsx │ │ │ │ │ ├── chart-area-interactive.tsx │ │ │ │ │ ├── data-table.tsx │ │ │ │ │ ├── mode-toggle.tsx │ │ │ │ │ ├── nav-documents.tsx │ │ │ │ │ ├── nav-main.tsx │ │ │ │ │ ├── nav-secondary.tsx │ │ │ │ │ ├── nav-user.tsx │ │ │ │ │ ├── section-cards.tsx │ │ │ │ │ ├── site-header.tsx │ │ │ │ │ └── theme-selector.tsx │ │ │ │ ├── data.json │ │ │ │ ├── layout.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── theme.css │ │ │ └── dashboard-03/ │ │ │ ├── components/ │ │ │ │ ├── analytics-date-picker.tsx │ │ │ │ ├── app-sidebar.tsx │ │ │ │ ├── chart-revenue.tsx │ │ │ │ ├── chart-visitors.tsx │ │ │ │ ├── mode-toggle.tsx │ │ │ │ ├── nav-main.tsx │ │ │ │ ├── nav-secondary.tsx │ │ │ │ ├── nav-user.tsx │ │ │ │ ├── products-table.tsx │ │ │ │ ├── search-form.tsx │ │ │ │ └── site-header.tsx │ │ │ ├── customers/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ └── settings/ │ │ │ └── page.tsx │ │ ├── (internal)/ │ │ │ └── sink/ │ │ │ ├── (pages)/ │ │ │ │ ├── forms/ │ │ │ │ │ ├── appearance-settings.tsx │ │ │ │ │ ├── chat-settings.tsx │ │ │ │ │ ├── display-settings.tsx │ │ │ │ │ ├── notion-prompt-form.tsx │ │ │ │ │ ├── page.tsx │ │ │ │ │ ├── ship-registration-form.tsx │ │ │ │ │ └── shipping-form.tsx │ │ │ │ ├── next-form/ │ │ │ │ │ ├── actions.ts │ │ │ │ │ ├── example-form.tsx │ │ │ │ │ └── page.tsx │ │ │ │ ├── react-hook-form/ │ │ │ │ │ ├── example-form.tsx │ │ │ │ │ └── page.tsx │ │ │ │ ├── schema.ts │ │ │ │ └── tanstack-form/ │ │ │ │ ├── example-form.tsx │ │ │ │ └── page.tsx │ │ │ ├── [name]/ │ │ │ │ └── page.tsx │ │ │ ├── component-registry.ts │ │ │ ├── components/ │ │ │ │ ├── accordion-demo.tsx │ │ │ │ ├── alert-demo.tsx │ │ │ │ ├── alert-dialog-demo.tsx │ │ │ │ ├── app-breadcrumbs.tsx │ │ │ │ ├── app-sidebar.tsx │ │ │ │ ├── aspect-ratio-demo.tsx │ │ │ │ ├── avatar-demo.tsx │ │ │ │ ├── badge-demo.tsx │ │ │ │ ├── breadcrumb-demo.tsx │ │ │ │ ├── button-demo.tsx │ │ │ │ ├── button-group-demo.tsx │ │ │ │ ├── calendar-demo.tsx │ │ │ │ ├── card-demo.tsx │ │ │ │ ├── carousel-demo.tsx │ │ │ │ ├── chart-area-demo.tsx │ │ │ │ ├── chart-bar-demo.tsx │ │ │ │ ├── chart-bar-mixed.tsx │ │ │ │ ├── chart-demo.tsx │ │ │ │ ├── chart-line-demo.tsx │ │ │ │ ├── checkbox-demo.tsx │ │ │ │ ├── collapsible-demo.tsx │ │ │ │ ├── combobox-demo.tsx │ │ │ │ ├── command-demo.tsx │ │ │ │ ├── component-wrapper.tsx │ │ │ │ ├── context-menu-demo.tsx │ │ │ │ ├── date-picker-demo.tsx │ │ │ │ ├── dialog-demo.tsx │ │ │ │ ├── drawer-demo.tsx │ │ │ │ ├── dropdown-menu-demo.tsx │ │ │ │ ├── empty-demo.tsx │ │ │ │ ├── field-demo.tsx │ │ │ │ ├── form-demo.tsx │ │ │ │ ├── hover-card-demo.tsx │ │ │ │ ├── input-demo.tsx │ │ │ │ ├── input-group-demo.tsx │ │ │ │ ├── input-otp-demo.tsx │ │ │ │ ├── item-demo.tsx │ │ │ │ ├── kbd-demo.tsx │ │ │ │ ├── label-demo.tsx │ │ │ │ ├── menubar-demo.tsx │ │ │ │ ├── native-select-demo.tsx │ │ │ │ ├── navigation-menu-demo.tsx │ │ │ │ ├── pagination-demo.tsx │ │ │ │ ├── popover-demo.tsx │ │ │ │ ├── progress-demo.tsx │ │ │ │ ├── radio-group-demo.tsx │ │ │ │ ├── resizable-demo.tsx │ │ │ │ ├── scroll-area-demo.tsx │ │ │ │ ├── select-demo.tsx │ │ │ │ ├── separator-demo.tsx │ │ │ │ ├── sheet-demo.tsx │ │ │ │ ├── skeleton-demo.tsx │ │ │ │ ├── slider-demo.tsx │ │ │ │ ├── sonner-demo.tsx │ │ │ │ ├── spinner-demo.tsx │ │ │ │ ├── switch-demo.tsx │ │ │ │ ├── table-demo.tsx │ │ │ │ ├── tabs-demo.tsx │ │ │ │ ├── textarea-demo.tsx │ │ │ │ ├── theme-selector.tsx │ │ │ │ ├── toggle-demo.tsx │ │ │ │ ├── toggle-group-demo.tsx │ │ │ │ └── tooltip-demo.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── (view)/ │ │ │ └── view/ │ │ │ └── [style]/ │ │ │ └── [name]/ │ │ │ ├── component-preview.tsx │ │ │ └── page.tsx │ │ ├── api/ │ │ │ └── search/ │ │ │ └── route.ts │ │ ├── layout.tsx │ │ ├── og/ │ │ │ ├── geist-regular-otf.json │ │ │ ├── geist-semibold-otf.json │ │ │ ├── geistmono-regular-otf.json │ │ │ └── route.tsx │ │ └── rss.xml/ │ │ └── route.ts │ ├── components/ │ │ ├── active-theme.tsx │ │ ├── analytics.tsx │ │ ├── announcement.tsx │ │ ├── block-display.tsx │ │ ├── block-image.tsx │ │ ├── block-viewer.tsx │ │ ├── blocks-nav.tsx │ │ ├── callout.tsx │ │ ├── cards/ │ │ │ ├── activity-goal.tsx │ │ │ ├── calendar.tsx │ │ │ ├── chat.tsx │ │ │ ├── cookie-settings.tsx │ │ │ ├── create-account.tsx │ │ │ ├── exercise-minutes.tsx │ │ │ ├── forms.tsx │ │ │ ├── index.tsx │ │ │ ├── payment-method.tsx │ │ │ ├── payments.tsx │ │ │ ├── report-issue.tsx │ │ │ ├── share.tsx │ │ │ ├── stats.tsx │ │ │ └── team-members.tsx │ │ ├── chart-code-viewer.tsx │ │ ├── chart-copy-button.tsx │ │ ├── chart-display.tsx │ │ ├── chart-iframe.tsx │ │ ├── chart-toolbar.tsx │ │ ├── charts-nav.tsx │ │ ├── code-block-command.tsx │ │ ├── code-collapsible-wrapper.tsx │ │ ├── code-tabs.tsx │ │ ├── color-format-selector.tsx │ │ ├── color-palette.tsx │ │ ├── color.tsx │ │ ├── colors-nav.tsx │ │ ├── command-menu.tsx │ │ ├── component-preview-tabs.tsx │ │ ├── component-preview.tsx │ │ ├── component-source.tsx │ │ ├── component-wrapper.tsx │ │ ├── components-list.tsx │ │ ├── copy-button.tsx │ │ ├── directory-add-button.tsx │ │ ├── directory-list.tsx │ │ ├── docs-base-switcher.tsx │ │ ├── docs-breadcrumb.tsx │ │ ├── docs-copy-page.tsx │ │ ├── docs-page-links.tsx │ │ ├── docs-sidebar.tsx │ │ ├── docs-toc.tsx │ │ ├── examples-nav.tsx │ │ ├── github-link.tsx │ │ ├── icons.tsx │ │ ├── language-selector.tsx │ │ ├── lo-fi/ │ │ │ ├── accordion.tsx │ │ │ ├── alert.tsx │ │ │ ├── atom.tsx │ │ │ ├── component.tsx │ │ │ └── index.tsx │ │ ├── main-nav.tsx │ │ ├── mobile-nav.tsx │ │ ├── mode-switcher.tsx │ │ ├── nav-header.tsx │ │ ├── nav-user.tsx │ │ ├── open-in-v0-button.tsx │ │ ├── open-in-v0-cta.tsx │ │ ├── page-header.tsx │ │ ├── page-nav.tsx │ │ ├── search-directory.tsx │ │ ├── site-config.tsx │ │ ├── site-footer.tsx │ │ ├── site-header.tsx │ │ ├── tailwind-indicator.tsx │ │ ├── theme-customizer.tsx │ │ ├── theme-provider.tsx │ │ └── theme-selector.tsx │ ├── components.json │ ├── content/ │ │ └── docs/ │ │ ├── (root)/ │ │ │ ├── _blocks.mdx │ │ │ ├── cli.mdx │ │ │ ├── components-json.mdx │ │ │ ├── directory.mdx │ │ │ ├── figma.mdx │ │ │ ├── index.mdx │ │ │ ├── javascript.mdx │ │ │ ├── legacy.mdx │ │ │ ├── mcp.mdx │ │ │ ├── meta.json │ │ │ ├── monorepo.mdx │ │ │ ├── new.mdx │ │ │ ├── react-19.mdx │ │ │ ├── skills.mdx │ │ │ ├── tailwind-v4.mdx │ │ │ ├── theming.mdx │ │ │ └── v0.mdx │ │ ├── changelog/ │ │ │ ├── 2023-06-new-cli.mdx │ │ │ ├── 2023-07-javascript.mdx │ │ │ ├── 2023-12-new-components.mdx │ │ │ ├── 2024-03-blocks.mdx │ │ │ ├── 2024-03-breadcrumb-otp.mdx │ │ │ ├── 2024-04-lift-mode.mdx │ │ │ ├── 2024-08-npx-shadcn-init.mdx │ │ │ ├── 2024-10-react-19.mdx │ │ │ ├── 2024-10-sidebar.mdx │ │ │ ├── 2024-11-icons.mdx │ │ │ ├── 2024-12-monorepo.mdx │ │ │ ├── 2025-01-blocks.mdx │ │ │ ├── 2025-02-registry-schema.mdx │ │ │ ├── 2025-02-tailwind-v4.mdx │ │ │ ├── 2025-04-cross-framework.mdx │ │ │ ├── 2025-04-mcp.mdx │ │ │ ├── 2025-04-shadcn-2-5.mdx │ │ │ ├── 2025-05-new-site.mdx │ │ │ ├── 2025-06-calendar.mdx │ │ │ ├── 2025-06-radix-ui.mdx │ │ │ ├── 2025-07-local-file-support.mdx │ │ │ ├── 2025-07-universal-registry.mdx │ │ │ ├── 2025-08-cli-3-mcp.mdx │ │ │ ├── 2025-09-registry-index.mdx │ │ │ ├── 2025-10-new-components.mdx │ │ │ ├── 2025-10-registry-directory.mdx │ │ │ ├── 2025-12-shadcn-create.mdx │ │ │ ├── 2026-01-base-ui.mdx │ │ │ ├── 2026-01-inline-side-styles.mdx │ │ │ ├── 2026-01-rtl.mdx │ │ │ ├── 2026-02-blocks.mdx │ │ │ ├── 2026-02-radix-ui.mdx │ │ │ ├── 2026-03-cli-v4.mdx │ │ │ ├── index.mdx │ │ │ └── meta.json │ │ ├── components/ │ │ │ ├── base/ │ │ │ │ ├── accordion.mdx │ │ │ │ ├── alert-dialog.mdx │ │ │ │ ├── alert.mdx │ │ │ │ ├── aspect-ratio.mdx │ │ │ │ ├── avatar.mdx │ │ │ │ ├── badge.mdx │ │ │ │ ├── breadcrumb.mdx │ │ │ │ ├── button-group.mdx │ │ │ │ ├── button.mdx │ │ │ │ ├── calendar.mdx │ │ │ │ ├── card.mdx │ │ │ │ ├── carousel.mdx │ │ │ │ ├── chart.mdx │ │ │ │ ├── checkbox.mdx │ │ │ │ ├── collapsible.mdx │ │ │ │ ├── combobox.mdx │ │ │ │ ├── command.mdx │ │ │ │ ├── context-menu.mdx │ │ │ │ ├── data-table.mdx │ │ │ │ ├── date-picker.mdx │ │ │ │ ├── dialog.mdx │ │ │ │ ├── direction.mdx │ │ │ │ ├── drawer.mdx │ │ │ │ ├── dropdown-menu.mdx │ │ │ │ ├── empty.mdx │ │ │ │ ├── field.mdx │ │ │ │ ├── hover-card.mdx │ │ │ │ ├── input-group.mdx │ │ │ │ ├── input-otp.mdx │ │ │ │ ├── input.mdx │ │ │ │ ├── item.mdx │ │ │ │ ├── kbd.mdx │ │ │ │ ├── label.mdx │ │ │ │ ├── menubar.mdx │ │ │ │ ├── meta.json │ │ │ │ ├── native-select.mdx │ │ │ │ ├── navigation-menu.mdx │ │ │ │ ├── pagination.mdx │ │ │ │ ├── popover.mdx │ │ │ │ ├── progress.mdx │ │ │ │ ├── radio-group.mdx │ │ │ │ ├── resizable.mdx │ │ │ │ ├── scroll-area.mdx │ │ │ │ ├── select.mdx │ │ │ │ ├── separator.mdx │ │ │ │ ├── sheet.mdx │ │ │ │ ├── sidebar.mdx │ │ │ │ ├── skeleton.mdx │ │ │ │ ├── slider.mdx │ │ │ │ ├── sonner.mdx │ │ │ │ ├── spinner.mdx │ │ │ │ ├── switch.mdx │ │ │ │ ├── table.mdx │ │ │ │ ├── tabs.mdx │ │ │ │ ├── textarea.mdx │ │ │ │ ├── toast.mdx │ │ │ │ ├── toggle-group.mdx │ │ │ │ ├── toggle.mdx │ │ │ │ ├── tooltip.mdx │ │ │ │ └── typography.mdx │ │ │ ├── index.mdx │ │ │ ├── meta.json │ │ │ └── radix/ │ │ │ ├── accordion.mdx │ │ │ ├── alert-dialog.mdx │ │ │ ├── alert.mdx │ │ │ ├── aspect-ratio.mdx │ │ │ ├── avatar.mdx │ │ │ ├── badge.mdx │ │ │ ├── breadcrumb.mdx │ │ │ ├── button-group.mdx │ │ │ ├── button.mdx │ │ │ ├── calendar.mdx │ │ │ ├── card.mdx │ │ │ ├── carousel.mdx │ │ │ ├── chart.mdx │ │ │ ├── checkbox.mdx │ │ │ ├── collapsible.mdx │ │ │ ├── combobox.mdx │ │ │ ├── command.mdx │ │ │ ├── context-menu.mdx │ │ │ ├── data-table.mdx │ │ │ ├── date-picker.mdx │ │ │ ├── dialog.mdx │ │ │ ├── direction.mdx │ │ │ ├── drawer.mdx │ │ │ ├── dropdown-menu.mdx │ │ │ ├── empty.mdx │ │ │ ├── field.mdx │ │ │ ├── hover-card.mdx │ │ │ ├── input-group.mdx │ │ │ ├── input-otp.mdx │ │ │ ├── input.mdx │ │ │ ├── item.mdx │ │ │ ├── kbd.mdx │ │ │ ├── label.mdx │ │ │ ├── menubar.mdx │ │ │ ├── meta.json │ │ │ ├── native-select.mdx │ │ │ ├── navigation-menu.mdx │ │ │ ├── pagination.mdx │ │ │ ├── popover.mdx │ │ │ ├── progress.mdx │ │ │ ├── radio-group.mdx │ │ │ ├── resizable.mdx │ │ │ ├── scroll-area.mdx │ │ │ ├── select.mdx │ │ │ ├── separator.mdx │ │ │ ├── sheet.mdx │ │ │ ├── sidebar.mdx │ │ │ ├── skeleton.mdx │ │ │ ├── slider.mdx │ │ │ ├── sonner.mdx │ │ │ ├── spinner.mdx │ │ │ ├── switch.mdx │ │ │ ├── table.mdx │ │ │ ├── tabs.mdx │ │ │ ├── textarea.mdx │ │ │ ├── toast.mdx │ │ │ ├── toggle-group.mdx │ │ │ ├── toggle.mdx │ │ │ ├── tooltip.mdx │ │ │ └── typography.mdx │ │ ├── dark-mode/ │ │ │ ├── astro.mdx │ │ │ ├── index.mdx │ │ │ ├── meta.json │ │ │ ├── next.mdx │ │ │ ├── remix.mdx │ │ │ └── vite.mdx │ │ ├── forms/ │ │ │ ├── index.mdx │ │ │ ├── meta.json │ │ │ ├── next.mdx │ │ │ ├── react-hook-form.mdx │ │ │ └── tanstack-form.mdx │ │ ├── installation/ │ │ │ ├── astro.mdx │ │ │ ├── gatsby.mdx │ │ │ ├── index.mdx │ │ │ ├── laravel.mdx │ │ │ ├── manual.mdx │ │ │ ├── meta.json │ │ │ ├── next.mdx │ │ │ ├── react-router.mdx │ │ │ ├── remix.mdx │ │ │ ├── tanstack-router.mdx │ │ │ ├── tanstack.mdx │ │ │ └── vite.mdx │ │ ├── meta.json │ │ ├── registry/ │ │ │ ├── authentication.mdx │ │ │ ├── examples.mdx │ │ │ ├── faq.mdx │ │ │ ├── getting-started.mdx │ │ │ ├── index.mdx │ │ │ ├── mcp.mdx │ │ │ ├── meta.json │ │ │ ├── namespace.mdx │ │ │ ├── open-in-v0.mdx │ │ │ ├── registry-index.mdx │ │ │ ├── registry-item-json.mdx │ │ │ └── registry-json.mdx │ │ └── rtl/ │ │ ├── index.mdx │ │ ├── meta.json │ │ ├── next.mdx │ │ ├── start.mdx │ │ └── vite.mdx │ ├── eslint.config.mjs │ ├── examples/ │ │ ├── README.md │ │ ├── __index__.tsx │ │ ├── base/ │ │ │ ├── accordion-basic.tsx │ │ │ ├── accordion-borders.tsx │ │ │ ├── accordion-card.tsx │ │ │ ├── accordion-demo.tsx │ │ │ ├── accordion-disabled.tsx │ │ │ ├── accordion-multiple.tsx │ │ │ ├── accordion-rtl.tsx │ │ │ ├── alert-action.tsx │ │ │ ├── alert-basic.tsx │ │ │ ├── alert-colors.tsx │ │ │ ├── alert-demo.tsx │ │ │ ├── alert-destructive.tsx │ │ │ ├── alert-dialog-basic.tsx │ │ │ ├── alert-dialog-demo.tsx │ │ │ ├── alert-dialog-destructive.tsx │ │ │ ├── alert-dialog-media.tsx │ │ │ ├── alert-dialog-rtl.tsx │ │ │ ├── alert-dialog-small-media.tsx │ │ │ ├── alert-dialog-small.tsx │ │ │ ├── alert-rtl.tsx │ │ │ ├── aspect-ratio-demo.tsx │ │ │ ├── aspect-ratio-portrait.tsx │ │ │ ├── aspect-ratio-rtl.tsx │ │ │ ├── aspect-ratio-square.tsx │ │ │ ├── avatar-badge-icon.tsx │ │ │ ├── avatar-badge.tsx │ │ │ ├── avatar-basic.tsx │ │ │ ├── avatar-demo.tsx │ │ │ ├── avatar-dropdown.tsx │ │ │ ├── avatar-group-count-icon.tsx │ │ │ ├── avatar-group-count.tsx │ │ │ ├── avatar-group.tsx │ │ │ ├── avatar-rtl.tsx │ │ │ ├── avatar-size.tsx │ │ │ ├── badge-colors.tsx │ │ │ ├── badge-demo.tsx │ │ │ ├── badge-icon.tsx │ │ │ ├── badge-link.tsx │ │ │ ├── badge-rtl.tsx │ │ │ ├── badge-spinner.tsx │ │ │ ├── badge-variants.tsx │ │ │ ├── breadcrumb-basic.tsx │ │ │ ├── breadcrumb-demo.tsx │ │ │ ├── breadcrumb-dropdown.tsx │ │ │ ├── breadcrumb-ellipsis.tsx │ │ │ ├── breadcrumb-link.tsx │ │ │ ├── breadcrumb-rtl.tsx │ │ │ ├── breadcrumb-separator.tsx │ │ │ ├── button-default.tsx │ │ │ ├── button-demo.tsx │ │ │ ├── button-destructive.tsx │ │ │ ├── button-ghost.tsx │ │ │ ├── button-group-demo.tsx │ │ │ ├── button-group-dropdown.tsx │ │ │ ├── button-group-input-group.tsx │ │ │ ├── button-group-input.tsx │ │ │ ├── button-group-nested.tsx │ │ │ ├── button-group-orientation.tsx │ │ │ ├── button-group-popover.tsx │ │ │ ├── button-group-rtl.tsx │ │ │ ├── button-group-select.tsx │ │ │ ├── button-group-separator.tsx │ │ │ ├── button-group-size.tsx │ │ │ ├── button-group-split.tsx │ │ │ ├── button-icon.tsx │ │ │ ├── button-link.tsx │ │ │ ├── button-outline.tsx │ │ │ ├── button-render.tsx │ │ │ ├── button-rounded.tsx │ │ │ ├── button-rtl.tsx │ │ │ ├── button-secondary.tsx │ │ │ ├── button-size.tsx │ │ │ ├── button-spinner.tsx │ │ │ ├── button-with-icon.tsx │ │ │ ├── calendar-basic.tsx │ │ │ ├── calendar-booked-dates.tsx │ │ │ ├── calendar-caption.tsx │ │ │ ├── calendar-custom-days.tsx │ │ │ ├── calendar-demo.tsx │ │ │ ├── calendar-hijri.tsx │ │ │ ├── calendar-multiple.tsx │ │ │ ├── calendar-presets.tsx │ │ │ ├── calendar-range.tsx │ │ │ ├── calendar-rtl.tsx │ │ │ ├── calendar-time.tsx │ │ │ ├── calendar-week-numbers.tsx │ │ │ ├── card-demo.tsx │ │ │ ├── card-image.tsx │ │ │ ├── card-rtl.tsx │ │ │ ├── card-small.tsx │ │ │ ├── carousel-api.tsx │ │ │ ├── carousel-demo.tsx │ │ │ ├── carousel-multiple.tsx │ │ │ ├── carousel-orientation.tsx │ │ │ ├── carousel-plugin.tsx │ │ │ ├── carousel-rtl.tsx │ │ │ ├── carousel-size.tsx │ │ │ ├── carousel-spacing.tsx │ │ │ ├── chart-demo.tsx │ │ │ ├── chart-example-axis.tsx │ │ │ ├── chart-example-grid.tsx │ │ │ ├── chart-example-legend.tsx │ │ │ ├── chart-example-tooltip.tsx │ │ │ ├── chart-example.tsx │ │ │ ├── chart-rtl.tsx │ │ │ ├── chart-tooltip.tsx │ │ │ ├── checkbox-basic.tsx │ │ │ ├── checkbox-demo.tsx │ │ │ ├── checkbox-description.tsx │ │ │ ├── checkbox-disabled.tsx │ │ │ ├── checkbox-group.tsx │ │ │ ├── checkbox-invalid.tsx │ │ │ ├── checkbox-rtl.tsx │ │ │ ├── checkbox-table.tsx │ │ │ ├── collapsible-basic.tsx │ │ │ ├── collapsible-demo.tsx │ │ │ ├── collapsible-file-tree.tsx │ │ │ ├── collapsible-rtl.tsx │ │ │ ├── collapsible-settings.tsx │ │ │ ├── combobox-auto-highlight.tsx │ │ │ ├── combobox-basic.tsx │ │ │ ├── combobox-clear.tsx │ │ │ ├── combobox-custom.tsx │ │ │ ├── combobox-demo.tsx │ │ │ ├── combobox-disabled.tsx │ │ │ ├── combobox-groups.tsx │ │ │ ├── combobox-input-group.tsx │ │ │ ├── combobox-invalid.tsx │ │ │ ├── combobox-multiple.tsx │ │ │ ├── combobox-popup.tsx │ │ │ ├── combobox-rtl.tsx │ │ │ ├── command-basic.tsx │ │ │ ├── command-demo.tsx │ │ │ ├── command-dialog.tsx │ │ │ ├── command-groups.tsx │ │ │ ├── command-rtl.tsx │ │ │ ├── command-scrollable.tsx │ │ │ ├── command-shortcuts.tsx │ │ │ ├── context-menu-basic.tsx │ │ │ ├── context-menu-checkboxes.tsx │ │ │ ├── context-menu-demo.tsx │ │ │ ├── context-menu-destructive.tsx │ │ │ ├── context-menu-groups.tsx │ │ │ ├── context-menu-icons.tsx │ │ │ ├── context-menu-radio.tsx │ │ │ ├── context-menu-rtl.tsx │ │ │ ├── context-menu-shortcuts.tsx │ │ │ ├── context-menu-sides.tsx │ │ │ ├── context-menu-submenu.tsx │ │ │ ├── data-picker-with-dropdowns.tsx │ │ │ ├── data-table-demo.tsx │ │ │ ├── data-table-rtl.tsx │ │ │ ├── date-picker-basic.tsx │ │ │ ├── date-picker-demo.tsx │ │ │ ├── date-picker-dob.tsx │ │ │ ├── date-picker-input.tsx │ │ │ ├── date-picker-natural-language.tsx │ │ │ ├── date-picker-range.tsx │ │ │ ├── date-picker-rtl.tsx │ │ │ ├── date-picker-time.tsx │ │ │ ├── dialog-close-button.tsx │ │ │ ├── dialog-demo.tsx │ │ │ ├── dialog-no-close-button.tsx │ │ │ ├── dialog-rtl.tsx │ │ │ ├── dialog-scrollable-content.tsx │ │ │ ├── dialog-sticky-footer.tsx │ │ │ ├── drawer-demo.tsx │ │ │ ├── drawer-dialog.tsx │ │ │ ├── drawer-rtl.tsx │ │ │ ├── drawer-scrollable-content.tsx │ │ │ ├── drawer-sides.tsx │ │ │ ├── dropdown-menu-avatar.tsx │ │ │ ├── dropdown-menu-basic.tsx │ │ │ ├── dropdown-menu-checkboxes-icons.tsx │ │ │ ├── dropdown-menu-checkboxes.tsx │ │ │ ├── dropdown-menu-complex.tsx │ │ │ ├── dropdown-menu-demo.tsx │ │ │ ├── dropdown-menu-destructive.tsx │ │ │ ├── dropdown-menu-icons.tsx │ │ │ ├── dropdown-menu-radio-group.tsx │ │ │ ├── dropdown-menu-radio-icons.tsx │ │ │ ├── dropdown-menu-rtl.tsx │ │ │ ├── dropdown-menu-shortcuts.tsx │ │ │ ├── dropdown-menu-submenu.tsx │ │ │ ├── empty-avatar-group.tsx │ │ │ ├── empty-avatar.tsx │ │ │ ├── empty-background.tsx │ │ │ ├── empty-card.tsx │ │ │ ├── empty-demo.tsx │ │ │ ├── empty-input-group.tsx │ │ │ ├── empty-outline.tsx │ │ │ ├── empty-rtl.tsx │ │ │ ├── field-checkbox.tsx │ │ │ ├── field-choice-card.tsx │ │ │ ├── field-demo.tsx │ │ │ ├── field-fieldset.tsx │ │ │ ├── field-group.tsx │ │ │ ├── field-input.tsx │ │ │ ├── field-radio.tsx │ │ │ ├── field-responsive.tsx │ │ │ ├── field-rtl.tsx │ │ │ ├── field-select.tsx │ │ │ ├── field-slider.tsx │ │ │ ├── field-switch.tsx │ │ │ ├── field-textarea.tsx │ │ │ ├── file-upload-list.tsx │ │ │ ├── hooks/ │ │ │ │ └── use-mobile.ts │ │ │ ├── hover-card-demo.tsx │ │ │ ├── hover-card-rtl.tsx │ │ │ ├── hover-card-sides.tsx │ │ │ ├── input-badge.tsx │ │ │ ├── input-basic.tsx │ │ │ ├── input-button-group.tsx │ │ │ ├── input-demo.tsx │ │ │ ├── input-disabled.tsx │ │ │ ├── input-field.tsx │ │ │ ├── input-fieldgroup.tsx │ │ │ ├── input-file.tsx │ │ │ ├── input-form.tsx │ │ │ ├── input-grid.tsx │ │ │ ├── input-group-basic.tsx │ │ │ ├── input-group-block-end.tsx │ │ │ ├── input-group-block-start.tsx │ │ │ ├── input-group-button-group.tsx │ │ │ ├── input-group-button.tsx │ │ │ ├── input-group-custom.tsx │ │ │ ├── input-group-demo.tsx │ │ │ ├── input-group-dropdown.tsx │ │ │ ├── input-group-icon.tsx │ │ │ ├── input-group-in-card.tsx │ │ │ ├── input-group-inline-end.tsx │ │ │ ├── input-group-inline-start.tsx │ │ │ ├── input-group-kbd.tsx │ │ │ ├── input-group-label.tsx │ │ │ ├── input-group-rtl.tsx │ │ │ ├── input-group-spinner.tsx │ │ │ ├── input-group-text.tsx │ │ │ ├── input-group-textarea-examples.tsx │ │ │ ├── input-group-textarea.tsx │ │ │ ├── input-group-tooltip.tsx │ │ │ ├── input-group-with-addons.tsx │ │ │ ├── input-group-with-buttons.tsx │ │ │ ├── input-group-with-kbd.tsx │ │ │ ├── input-group-with-tooltip.tsx │ │ │ ├── input-inline.tsx │ │ │ ├── input-input-group.tsx │ │ │ ├── input-invalid.tsx │ │ │ ├── input-otp-alphanumeric.tsx │ │ │ ├── input-otp-controlled.tsx │ │ │ ├── input-otp-demo.tsx │ │ │ ├── input-otp-disabled.tsx │ │ │ ├── input-otp-form.tsx │ │ │ ├── input-otp-four-digits.tsx │ │ │ ├── input-otp-invalid.tsx │ │ │ ├── input-otp-pattern.tsx │ │ │ ├── input-otp-rtl.tsx │ │ │ ├── input-otp-separator.tsx │ │ │ ├── input-required.tsx │ │ │ ├── input-rtl.tsx │ │ │ ├── item-avatar.tsx │ │ │ ├── item-demo.tsx │ │ │ ├── item-dropdown.tsx │ │ │ ├── item-group.tsx │ │ │ ├── item-header.tsx │ │ │ ├── item-icon.tsx │ │ │ ├── item-image.tsx │ │ │ ├── item-link.tsx │ │ │ ├── item-rtl.tsx │ │ │ ├── item-size.tsx │ │ │ ├── item-variant.tsx │ │ │ ├── kbd-button.tsx │ │ │ ├── kbd-demo.tsx │ │ │ ├── kbd-group.tsx │ │ │ ├── kbd-input-group.tsx │ │ │ ├── kbd-rtl.tsx │ │ │ ├── kbd-tooltip.tsx │ │ │ ├── label-demo.tsx │ │ │ ├── label-rtl.tsx │ │ │ ├── lib/ │ │ │ │ └── utils.ts │ │ │ ├── menubar-checkbox.tsx │ │ │ ├── menubar-demo.tsx │ │ │ ├── menubar-icons.tsx │ │ │ ├── menubar-radio.tsx │ │ │ ├── menubar-rtl.tsx │ │ │ ├── menubar-submenu.tsx │ │ │ ├── muted-item-group.tsx │ │ │ ├── native-select-demo.tsx │ │ │ ├── native-select-disabled.tsx │ │ │ ├── native-select-groups.tsx │ │ │ ├── native-select-invalid.tsx │ │ │ ├── native-select-rtl.tsx │ │ │ ├── navigation-menu-demo.tsx │ │ │ ├── navigation-menu-rtl.tsx │ │ │ ├── outline-item-group.tsx │ │ │ ├── pagination-demo.tsx │ │ │ ├── pagination-icons-only.tsx │ │ │ ├── pagination-rtl.tsx │ │ │ ├── pagination-simple.tsx │ │ │ ├── popover-alignments.tsx │ │ │ ├── popover-basic.tsx │ │ │ ├── popover-demo.tsx │ │ │ ├── popover-form.tsx │ │ │ ├── popover-rtl.tsx │ │ │ ├── progress-controlled.tsx │ │ │ ├── progress-demo.tsx │ │ │ ├── progress-label.tsx │ │ │ ├── progress-rtl.tsx │ │ │ ├── radio-fields.tsx │ │ │ ├── radio-group-choice-card.tsx │ │ │ ├── radio-group-demo.tsx │ │ │ ├── radio-group-description.tsx │ │ │ ├── radio-group-disabled.tsx │ │ │ ├── radio-group-fieldset.tsx │ │ │ ├── radio-group-invalid.tsx │ │ │ ├── radio-group-rtl.tsx │ │ │ ├── resizable-demo.tsx │ │ │ ├── resizable-handle.tsx │ │ │ ├── resizable-rtl.tsx │ │ │ ├── resizable-vertical.tsx │ │ │ ├── scroll-area-demo.tsx │ │ │ ├── scroll-area-horizontal-demo.tsx │ │ │ ├── scroll-area-rtl.tsx │ │ │ ├── select-align-item.tsx │ │ │ ├── select-demo.tsx │ │ │ ├── select-disabled.tsx │ │ │ ├── select-groups.tsx │ │ │ ├── select-invalid.tsx │ │ │ ├── select-rtl.tsx │ │ │ ├── select-scrollable.tsx │ │ │ ├── separator-demo.tsx │ │ │ ├── separator-list.tsx │ │ │ ├── separator-menu.tsx │ │ │ ├── separator-rtl.tsx │ │ │ ├── separator-vertical.tsx │ │ │ ├── sheet-demo.tsx │ │ │ ├── sheet-no-close-button.tsx │ │ │ ├── sheet-rtl.tsx │ │ │ ├── sheet-side.tsx │ │ │ ├── sidebar-controlled.tsx │ │ │ ├── sidebar-demo.tsx │ │ │ ├── sidebar-footer.tsx │ │ │ ├── sidebar-group-action.tsx │ │ │ ├── sidebar-group-collapsible.tsx │ │ │ ├── sidebar-group.tsx │ │ │ ├── sidebar-header.tsx │ │ │ ├── sidebar-menu-action.tsx │ │ │ ├── sidebar-menu-badge.tsx │ │ │ ├── sidebar-menu-collapsible.tsx │ │ │ ├── sidebar-menu-sub.tsx │ │ │ ├── sidebar-menu.tsx │ │ │ ├── sidebar-rsc.tsx │ │ │ ├── sidebar-rtl.tsx │ │ │ ├── skeleton-avatar.tsx │ │ │ ├── skeleton-card.tsx │ │ │ ├── skeleton-demo.tsx │ │ │ ├── skeleton-form.tsx │ │ │ ├── skeleton-rtl.tsx │ │ │ ├── skeleton-table.tsx │ │ │ ├── skeleton-text.tsx │ │ │ ├── slider-controlled.tsx │ │ │ ├── slider-demo.tsx │ │ │ ├── slider-disabled.tsx │ │ │ ├── slider-multiple.tsx │ │ │ ├── slider-range.tsx │ │ │ ├── slider-rtl.tsx │ │ │ ├── slider-vertical.tsx │ │ │ ├── sonner-demo.tsx │ │ │ ├── sonner-description.tsx │ │ │ ├── sonner-position.tsx │ │ │ ├── sonner-types.tsx │ │ │ ├── spinner-badge.tsx │ │ │ ├── spinner-button.tsx │ │ │ ├── spinner-custom.tsx │ │ │ ├── spinner-demo.tsx │ │ │ ├── spinner-empty.tsx │ │ │ ├── spinner-input-group.tsx │ │ │ ├── spinner-rtl.tsx │ │ │ ├── spinner-size.tsx │ │ │ ├── switch-choice-card.tsx │ │ │ ├── switch-demo.tsx │ │ │ ├── switch-description.tsx │ │ │ ├── switch-disabled.tsx │ │ │ ├── switch-invalid.tsx │ │ │ ├── switch-rtl.tsx │ │ │ ├── switch-sizes.tsx │ │ │ ├── table-actions.tsx │ │ │ ├── table-demo.tsx │ │ │ ├── table-footer.tsx │ │ │ ├── table-rtl.tsx │ │ │ ├── tabs-demo.tsx │ │ │ ├── tabs-disabled.tsx │ │ │ ├── tabs-icons.tsx │ │ │ ├── tabs-line.tsx │ │ │ ├── tabs-rtl.tsx │ │ │ ├── tabs-vertical.tsx │ │ │ ├── textarea-button.tsx │ │ │ ├── textarea-demo.tsx │ │ │ ├── textarea-disabled.tsx │ │ │ ├── textarea-field.tsx │ │ │ ├── textarea-invalid.tsx │ │ │ ├── textarea-rtl.tsx │ │ │ ├── toggle-demo.tsx │ │ │ ├── toggle-disabled.tsx │ │ │ ├── toggle-group-demo.tsx │ │ │ ├── toggle-group-disabled.tsx │ │ │ ├── toggle-group-font-weight-selector.tsx │ │ │ ├── toggle-group-outline.tsx │ │ │ ├── toggle-group-rtl.tsx │ │ │ ├── toggle-group-sizes.tsx │ │ │ ├── toggle-group-spacing.tsx │ │ │ ├── toggle-group-vertical.tsx │ │ │ ├── toggle-outline.tsx │ │ │ ├── toggle-rtl.tsx │ │ │ ├── toggle-sizes.tsx │ │ │ ├── toggle-text.tsx │ │ │ ├── tooltip-demo.tsx │ │ │ ├── tooltip-disabled.tsx │ │ │ ├── tooltip-keyboard.tsx │ │ │ ├── tooltip-rtl.tsx │ │ │ ├── tooltip-sides.tsx │ │ │ ├── typography-blockquote.tsx │ │ │ ├── typography-demo.tsx │ │ │ ├── typography-h1.tsx │ │ │ ├── typography-h2.tsx │ │ │ ├── typography-h3.tsx │ │ │ ├── typography-h4.tsx │ │ │ ├── typography-inline-code.tsx │ │ │ ├── typography-large.tsx │ │ │ ├── typography-lead.tsx │ │ │ ├── typography-list.tsx │ │ │ ├── typography-muted.tsx │ │ │ ├── typography-p.tsx │ │ │ ├── typography-rtl.tsx │ │ │ ├── typography-small.tsx │ │ │ ├── typography-table.tsx │ │ │ ├── ui/ │ │ │ │ ├── accordion.tsx │ │ │ │ ├── alert-dialog.tsx │ │ │ │ ├── alert.tsx │ │ │ │ ├── aspect-ratio.tsx │ │ │ │ ├── avatar.tsx │ │ │ │ ├── badge.tsx │ │ │ │ ├── breadcrumb.tsx │ │ │ │ ├── button-group.tsx │ │ │ │ ├── button.tsx │ │ │ │ ├── calendar.tsx │ │ │ │ ├── card.tsx │ │ │ │ ├── carousel.tsx │ │ │ │ ├── chart.tsx │ │ │ │ ├── checkbox.tsx │ │ │ │ ├── collapsible.tsx │ │ │ │ ├── combobox.tsx │ │ │ │ ├── command.tsx │ │ │ │ ├── context-menu.tsx │ │ │ │ ├── dialog.tsx │ │ │ │ ├── direction.tsx │ │ │ │ ├── drawer.tsx │ │ │ │ ├── dropdown-menu.tsx │ │ │ │ ├── empty.tsx │ │ │ │ ├── field.tsx │ │ │ │ ├── hover-card.tsx │ │ │ │ ├── input-group.tsx │ │ │ │ ├── input-otp.tsx │ │ │ │ ├── input.tsx │ │ │ │ ├── item.tsx │ │ │ │ ├── kbd.tsx │ │ │ │ ├── label.tsx │ │ │ │ ├── menubar.tsx │ │ │ │ ├── native-select.tsx │ │ │ │ ├── navigation-menu.tsx │ │ │ │ ├── pagination.tsx │ │ │ │ ├── popover.tsx │ │ │ │ ├── progress.tsx │ │ │ │ ├── radio-group.tsx │ │ │ │ ├── resizable.tsx │ │ │ │ ├── scroll-area.tsx │ │ │ │ ├── select.tsx │ │ │ │ ├── separator.tsx │ │ │ │ ├── sheet.tsx │ │ │ │ ├── sidebar.tsx │ │ │ │ ├── skeleton.tsx │ │ │ │ ├── slider.tsx │ │ │ │ ├── sonner.tsx │ │ │ │ ├── spinner.tsx │ │ │ │ ├── switch.tsx │ │ │ │ ├── table.tsx │ │ │ │ ├── tabs.tsx │ │ │ │ ├── textarea.tsx │ │ │ │ ├── toggle-group.tsx │ │ │ │ ├── toggle.tsx │ │ │ │ └── tooltip.tsx │ │ │ └── ui-rtl/ │ │ │ ├── accordion.tsx │ │ │ ├── alert-dialog.tsx │ │ │ ├── alert.tsx │ │ │ ├── aspect-ratio.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumb.tsx │ │ │ ├── button-group.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── card.tsx │ │ │ ├── carousel.tsx │ │ │ ├── chart.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── combobox.tsx │ │ │ ├── command.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── dialog.tsx │ │ │ ├── direction.tsx │ │ │ ├── drawer.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── empty.tsx │ │ │ ├── field.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── input-group.tsx │ │ │ ├── input-otp.tsx │ │ │ ├── input.tsx │ │ │ ├── item.tsx │ │ │ ├── kbd.tsx │ │ │ ├── label.tsx │ │ │ ├── menubar.tsx │ │ │ ├── native-select.tsx │ │ │ ├── navigation-menu.tsx │ │ │ ├── pagination.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── resizable.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── sidebar.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── sonner.tsx │ │ │ ├── spinner.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── textarea.tsx │ │ │ ├── toggle-group.tsx │ │ │ ├── toggle.tsx │ │ │ └── tooltip.tsx │ │ └── radix/ │ │ ├── accordion-basic.tsx │ │ ├── accordion-borders.tsx │ │ ├── accordion-card.tsx │ │ ├── accordion-demo.tsx │ │ ├── accordion-disabled.tsx │ │ ├── accordion-multiple.tsx │ │ ├── accordion-rtl.tsx │ │ ├── alert-action.tsx │ │ ├── alert-basic.tsx │ │ ├── alert-colors.tsx │ │ ├── alert-demo.tsx │ │ ├── alert-destructive.tsx │ │ ├── alert-dialog-basic.tsx │ │ ├── alert-dialog-demo.tsx │ │ ├── alert-dialog-destructive.tsx │ │ ├── alert-dialog-media.tsx │ │ ├── alert-dialog-rtl.tsx │ │ ├── alert-dialog-small-media.tsx │ │ ├── alert-dialog-small.tsx │ │ ├── alert-rtl.tsx │ │ ├── aspect-ratio-demo.tsx │ │ ├── aspect-ratio-portrait.tsx │ │ ├── aspect-ratio-rtl.tsx │ │ ├── aspect-ratio-square.tsx │ │ ├── avatar-badge-icon.tsx │ │ ├── avatar-badge.tsx │ │ ├── avatar-basic.tsx │ │ ├── avatar-demo.tsx │ │ ├── avatar-dropdown.tsx │ │ ├── avatar-group-count-icon.tsx │ │ ├── avatar-group-count.tsx │ │ ├── avatar-group.tsx │ │ ├── avatar-rtl.tsx │ │ ├── avatar-size.tsx │ │ ├── badge-colors.tsx │ │ ├── badge-demo.tsx │ │ ├── badge-icon.tsx │ │ ├── badge-link.tsx │ │ ├── badge-rtl.tsx │ │ ├── badge-spinner.tsx │ │ ├── badge-variants.tsx │ │ ├── breadcrumb-basic.tsx │ │ ├── breadcrumb-demo.tsx │ │ ├── breadcrumb-dropdown.tsx │ │ ├── breadcrumb-ellipsis.tsx │ │ ├── breadcrumb-link.tsx │ │ ├── breadcrumb-rtl.tsx │ │ ├── breadcrumb-separator.tsx │ │ ├── button-aschild.tsx │ │ ├── button-default.tsx │ │ ├── button-demo.tsx │ │ ├── button-destructive.tsx │ │ ├── button-ghost.tsx │ │ ├── button-group-demo.tsx │ │ ├── button-group-dropdown.tsx │ │ ├── button-group-input-group.tsx │ │ ├── button-group-input.tsx │ │ ├── button-group-nested.tsx │ │ ├── button-group-orientation.tsx │ │ ├── button-group-popover.tsx │ │ ├── button-group-rtl.tsx │ │ ├── button-group-select.tsx │ │ ├── button-group-separator.tsx │ │ ├── button-group-size.tsx │ │ ├── button-group-split.tsx │ │ ├── button-icon.tsx │ │ ├── button-link.tsx │ │ ├── button-outline.tsx │ │ ├── button-rounded.tsx │ │ ├── button-rtl.tsx │ │ ├── button-secondary.tsx │ │ ├── button-size.tsx │ │ ├── button-spinner.tsx │ │ ├── button-with-icon.tsx │ │ ├── calendar-basic.tsx │ │ ├── calendar-booked-dates.tsx │ │ ├── calendar-caption.tsx │ │ ├── calendar-custom-days.tsx │ │ ├── calendar-demo.tsx │ │ ├── calendar-hijri.tsx │ │ ├── calendar-multiple.tsx │ │ ├── calendar-presets.tsx │ │ ├── calendar-range.tsx │ │ ├── calendar-rtl.tsx │ │ ├── calendar-time.tsx │ │ ├── calendar-week-numbers.tsx │ │ ├── card-demo.tsx │ │ ├── card-image.tsx │ │ ├── card-rtl.tsx │ │ ├── card-small.tsx │ │ ├── carousel-api.tsx │ │ ├── carousel-demo.tsx │ │ ├── carousel-multiple.tsx │ │ ├── carousel-orientation.tsx │ │ ├── carousel-plugin.tsx │ │ ├── carousel-rtl.tsx │ │ ├── carousel-size.tsx │ │ ├── carousel-spacing.tsx │ │ ├── chart-demo.tsx │ │ ├── chart-example-axis.tsx │ │ ├── chart-example-grid.tsx │ │ ├── chart-example-legend.tsx │ │ ├── chart-example-tooltip.tsx │ │ ├── chart-example.tsx │ │ ├── chart-rtl.tsx │ │ ├── chart-tooltip.tsx │ │ ├── checkbox-basic.tsx │ │ ├── checkbox-demo.tsx │ │ ├── checkbox-description.tsx │ │ ├── checkbox-disabled.tsx │ │ ├── checkbox-group.tsx │ │ ├── checkbox-invalid.tsx │ │ ├── checkbox-rtl.tsx │ │ ├── checkbox-table.tsx │ │ ├── collapsible-basic.tsx │ │ ├── collapsible-demo.tsx │ │ ├── collapsible-file-tree.tsx │ │ ├── collapsible-rtl.tsx │ │ ├── collapsible-settings.tsx │ │ ├── combobox-auto-highlight.tsx │ │ ├── combobox-basic.tsx │ │ ├── combobox-clear.tsx │ │ ├── combobox-custom.tsx │ │ ├── combobox-demo.tsx │ │ ├── combobox-disabled.tsx │ │ ├── combobox-groups.tsx │ │ ├── combobox-input-group.tsx │ │ ├── combobox-invalid.tsx │ │ ├── combobox-multiple.tsx │ │ ├── combobox-popup.tsx │ │ ├── combobox-rtl.tsx │ │ ├── command-basic.tsx │ │ ├── command-demo.tsx │ │ ├── command-dialog.tsx │ │ ├── command-groups.tsx │ │ ├── command-rtl.tsx │ │ ├── command-scrollable.tsx │ │ ├── command-shortcuts.tsx │ │ ├── context-menu-basic.tsx │ │ ├── context-menu-checkboxes.tsx │ │ ├── context-menu-demo.tsx │ │ ├── context-menu-destructive.tsx │ │ ├── context-menu-groups.tsx │ │ ├── context-menu-icons.tsx │ │ ├── context-menu-radio.tsx │ │ ├── context-menu-rtl.tsx │ │ ├── context-menu-shortcuts.tsx │ │ ├── context-menu-sides.tsx │ │ ├── context-menu-submenu.tsx │ │ ├── data-picker-with-dropdowns.tsx │ │ ├── data-table-demo.tsx │ │ ├── data-table-rtl.tsx │ │ ├── date-picker-basic.tsx │ │ ├── date-picker-demo.tsx │ │ ├── date-picker-dob.tsx │ │ ├── date-picker-input.tsx │ │ ├── date-picker-natural-language.tsx │ │ ├── date-picker-range.tsx │ │ ├── date-picker-rtl.tsx │ │ ├── date-picker-time.tsx │ │ ├── dialog-close-button.tsx │ │ ├── dialog-demo.tsx │ │ ├── dialog-no-close-button.tsx │ │ ├── dialog-rtl.tsx │ │ ├── dialog-scrollable-content.tsx │ │ ├── dialog-sticky-footer.tsx │ │ ├── drawer-demo.tsx │ │ ├── drawer-dialog.tsx │ │ ├── drawer-rtl.tsx │ │ ├── drawer-scrollable-content.tsx │ │ ├── drawer-sides.tsx │ │ ├── dropdown-menu-avatar.tsx │ │ ├── dropdown-menu-basic.tsx │ │ ├── dropdown-menu-checkboxes-icons.tsx │ │ ├── dropdown-menu-checkboxes.tsx │ │ ├── dropdown-menu-complex.tsx │ │ ├── dropdown-menu-demo.tsx │ │ ├── dropdown-menu-destructive.tsx │ │ ├── dropdown-menu-icons.tsx │ │ ├── dropdown-menu-radio-group.tsx │ │ ├── dropdown-menu-radio-icons.tsx │ │ ├── dropdown-menu-rtl.tsx │ │ ├── dropdown-menu-shortcuts.tsx │ │ ├── dropdown-menu-submenu.tsx │ │ ├── empty-avatar-group.tsx │ │ ├── empty-avatar.tsx │ │ ├── empty-background.tsx │ │ ├── empty-card.tsx │ │ ├── empty-demo.tsx │ │ ├── empty-input-group.tsx │ │ ├── empty-outline.tsx │ │ ├── empty-rtl.tsx │ │ ├── field-checkbox.tsx │ │ ├── field-choice-card.tsx │ │ ├── field-demo.tsx │ │ ├── field-fieldset.tsx │ │ ├── field-group.tsx │ │ ├── field-input.tsx │ │ ├── field-radio.tsx │ │ ├── field-responsive.tsx │ │ ├── field-rtl.tsx │ │ ├── field-select.tsx │ │ ├── field-slider.tsx │ │ ├── field-switch.tsx │ │ ├── field-textarea.tsx │ │ ├── file-upload-list.tsx │ │ ├── hooks/ │ │ │ └── use-mobile.ts │ │ ├── hover-card-demo.tsx │ │ ├── hover-card-rtl.tsx │ │ ├── hover-card-sides.tsx │ │ ├── input-badge.tsx │ │ ├── input-basic.tsx │ │ ├── input-button-group.tsx │ │ ├── input-demo.tsx │ │ ├── input-disabled.tsx │ │ ├── input-field.tsx │ │ ├── input-fieldgroup.tsx │ │ ├── input-file.tsx │ │ ├── input-form.tsx │ │ ├── input-grid.tsx │ │ ├── input-group-basic.tsx │ │ ├── input-group-block-end.tsx │ │ ├── input-group-block-start.tsx │ │ ├── input-group-button-group.tsx │ │ ├── input-group-button.tsx │ │ ├── input-group-custom.tsx │ │ ├── input-group-demo.tsx │ │ ├── input-group-dropdown.tsx │ │ ├── input-group-icon.tsx │ │ ├── input-group-in-card.tsx │ │ ├── input-group-inline-end.tsx │ │ ├── input-group-inline-start.tsx │ │ ├── input-group-kbd.tsx │ │ ├── input-group-label.tsx │ │ ├── input-group-rtl.tsx │ │ ├── input-group-spinner.tsx │ │ ├── input-group-text.tsx │ │ ├── input-group-textarea-examples.tsx │ │ ├── input-group-textarea.tsx │ │ ├── input-group-tooltip.tsx │ │ ├── input-group-with-addons.tsx │ │ ├── input-group-with-buttons.tsx │ │ ├── input-group-with-kbd.tsx │ │ ├── input-group-with-tooltip.tsx │ │ ├── input-inline.tsx │ │ ├── input-input-group.tsx │ │ ├── input-invalid.tsx │ │ ├── input-otp-alphanumeric.tsx │ │ ├── input-otp-controlled.tsx │ │ ├── input-otp-demo.tsx │ │ ├── input-otp-disabled.tsx │ │ ├── input-otp-form.tsx │ │ ├── input-otp-four-digits.tsx │ │ ├── input-otp-invalid.tsx │ │ ├── input-otp-pattern.tsx │ │ ├── input-otp-rtl.tsx │ │ ├── input-otp-separator.tsx │ │ ├── input-required.tsx │ │ ├── input-rtl.tsx │ │ ├── item-avatar.tsx │ │ ├── item-demo.tsx │ │ ├── item-dropdown.tsx │ │ ├── item-group.tsx │ │ ├── item-header.tsx │ │ ├── item-icon.tsx │ │ ├── item-image.tsx │ │ ├── item-link.tsx │ │ ├── item-rtl.tsx │ │ ├── item-size.tsx │ │ ├── item-variant.tsx │ │ ├── kbd-button.tsx │ │ ├── kbd-demo.tsx │ │ ├── kbd-group.tsx │ │ ├── kbd-input-group.tsx │ │ ├── kbd-rtl.tsx │ │ ├── kbd-tooltip.tsx │ │ ├── label-demo.tsx │ │ ├── label-rtl.tsx │ │ ├── lib/ │ │ │ └── utils.ts │ │ ├── menubar-checkbox.tsx │ │ ├── menubar-demo.tsx │ │ ├── menubar-icons.tsx │ │ ├── menubar-radio.tsx │ │ ├── menubar-rtl.tsx │ │ ├── menubar-submenu.tsx │ │ ├── muted-item-group.tsx │ │ ├── native-select-demo.tsx │ │ ├── native-select-disabled.tsx │ │ ├── native-select-groups.tsx │ │ ├── native-select-invalid.tsx │ │ ├── native-select-rtl.tsx │ │ ├── navigation-menu-demo.tsx │ │ ├── navigation-menu-rtl.tsx │ │ ├── outline-item-group.tsx │ │ ├── pagination-demo.tsx │ │ ├── pagination-icons-only.tsx │ │ ├── pagination-rtl.tsx │ │ ├── pagination-simple.tsx │ │ ├── popover-alignments.tsx │ │ ├── popover-basic.tsx │ │ ├── popover-demo.tsx │ │ ├── popover-form.tsx │ │ ├── popover-rtl.tsx │ │ ├── progress-controlled.tsx │ │ ├── progress-demo.tsx │ │ ├── progress-label.tsx │ │ ├── progress-rtl.tsx │ │ ├── radio-fields.tsx │ │ ├── radio-group-choice-card.tsx │ │ ├── radio-group-demo.tsx │ │ ├── radio-group-description.tsx │ │ ├── radio-group-disabled.tsx │ │ ├── radio-group-fieldset.tsx │ │ ├── radio-group-invalid.tsx │ │ ├── radio-group-rtl.tsx │ │ ├── resizable-demo.tsx │ │ ├── resizable-handle.tsx │ │ ├── resizable-rtl.tsx │ │ ├── resizable-vertical.tsx │ │ ├── scroll-area-demo.tsx │ │ ├── scroll-area-horizontal-demo.tsx │ │ ├── scroll-area-rtl.tsx │ │ ├── select-align-item.tsx │ │ ├── select-demo.tsx │ │ ├── select-disabled.tsx │ │ ├── select-groups.tsx │ │ ├── select-invalid.tsx │ │ ├── select-rtl.tsx │ │ ├── select-scrollable.tsx │ │ ├── separator-demo.tsx │ │ ├── separator-list.tsx │ │ ├── separator-menu.tsx │ │ ├── separator-rtl.tsx │ │ ├── separator-vertical.tsx │ │ ├── sheet-demo.tsx │ │ ├── sheet-no-close-button.tsx │ │ ├── sheet-rtl.tsx │ │ ├── sheet-side.tsx │ │ ├── sidebar-controlled.tsx │ │ ├── sidebar-demo.tsx │ │ ├── sidebar-footer.tsx │ │ ├── sidebar-group-action.tsx │ │ ├── sidebar-group-collapsible.tsx │ │ ├── sidebar-group.tsx │ │ ├── sidebar-header.tsx │ │ ├── sidebar-menu-action.tsx │ │ ├── sidebar-menu-badge.tsx │ │ ├── sidebar-menu-collapsible.tsx │ │ ├── sidebar-menu-sub.tsx │ │ ├── sidebar-menu.tsx │ │ ├── sidebar-rsc.tsx │ │ ├── sidebar-rtl.tsx │ │ ├── skeleton-avatar.tsx │ │ ├── skeleton-card.tsx │ │ ├── skeleton-demo.tsx │ │ ├── skeleton-form.tsx │ │ ├── skeleton-rtl.tsx │ │ ├── skeleton-table.tsx │ │ ├── skeleton-text.tsx │ │ ├── slider-controlled.tsx │ │ ├── slider-demo.tsx │ │ ├── slider-disabled.tsx │ │ ├── slider-multiple.tsx │ │ ├── slider-range.tsx │ │ ├── slider-rtl.tsx │ │ ├── slider-vertical.tsx │ │ ├── sonner-demo.tsx │ │ ├── sonner-description.tsx │ │ ├── sonner-position.tsx │ │ ├── sonner-types.tsx │ │ ├── spinner-badge.tsx │ │ ├── spinner-button.tsx │ │ ├── spinner-custom.tsx │ │ ├── spinner-demo.tsx │ │ ├── spinner-empty.tsx │ │ ├── spinner-input-group.tsx │ │ ├── spinner-rtl.tsx │ │ ├── spinner-size.tsx │ │ ├── switch-choice-card.tsx │ │ ├── switch-demo.tsx │ │ ├── switch-description.tsx │ │ ├── switch-disabled.tsx │ │ ├── switch-invalid.tsx │ │ ├── switch-rtl.tsx │ │ ├── switch-sizes.tsx │ │ ├── table-actions.tsx │ │ ├── table-demo.tsx │ │ ├── table-footer.tsx │ │ ├── table-rtl.tsx │ │ ├── tabs-demo.tsx │ │ ├── tabs-disabled.tsx │ │ ├── tabs-icons.tsx │ │ ├── tabs-line.tsx │ │ ├── tabs-rtl.tsx │ │ ├── tabs-vertical.tsx │ │ ├── textarea-button.tsx │ │ ├── textarea-demo.tsx │ │ ├── textarea-disabled.tsx │ │ ├── textarea-field.tsx │ │ ├── textarea-invalid.tsx │ │ ├── textarea-rtl.tsx │ │ ├── toggle-demo.tsx │ │ ├── toggle-disabled.tsx │ │ ├── toggle-group-demo.tsx │ │ ├── toggle-group-disabled.tsx │ │ ├── toggle-group-font-weight-selector.tsx │ │ ├── toggle-group-outline.tsx │ │ ├── toggle-group-rtl.tsx │ │ ├── toggle-group-sizes.tsx │ │ ├── toggle-group-spacing.tsx │ │ ├── toggle-group-vertical.tsx │ │ ├── toggle-outline.tsx │ │ ├── toggle-rtl.tsx │ │ ├── toggle-sizes.tsx │ │ ├── toggle-text.tsx │ │ ├── tooltip-demo.tsx │ │ ├── tooltip-disabled.tsx │ │ ├── tooltip-keyboard.tsx │ │ ├── tooltip-rtl.tsx │ │ ├── tooltip-sides.tsx │ │ ├── typography-blockquote.tsx │ │ ├── typography-demo.tsx │ │ ├── typography-h1.tsx │ │ ├── typography-h2.tsx │ │ ├── typography-h3.tsx │ │ ├── typography-h4.tsx │ │ ├── typography-inline-code.tsx │ │ ├── typography-large.tsx │ │ ├── typography-lead.tsx │ │ ├── typography-list.tsx │ │ ├── typography-muted.tsx │ │ ├── typography-p.tsx │ │ ├── typography-rtl.tsx │ │ ├── typography-small.tsx │ │ ├── typography-table.tsx │ │ ├── ui/ │ │ │ ├── accordion.tsx │ │ │ ├── alert-dialog.tsx │ │ │ ├── alert.tsx │ │ │ ├── aspect-ratio.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumb.tsx │ │ │ ├── button-group.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── card.tsx │ │ │ ├── carousel.tsx │ │ │ ├── chart.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── combobox.tsx │ │ │ ├── command.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── dialog.tsx │ │ │ ├── direction.tsx │ │ │ ├── drawer.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── empty.tsx │ │ │ ├── field.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── input-group.tsx │ │ │ ├── input-otp.tsx │ │ │ ├── input.tsx │ │ │ ├── item.tsx │ │ │ ├── kbd.tsx │ │ │ ├── label.tsx │ │ │ ├── menubar.tsx │ │ │ ├── native-select.tsx │ │ │ ├── navigation-menu.tsx │ │ │ ├── pagination.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── resizable.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── sidebar.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── sonner.tsx │ │ │ ├── spinner.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── textarea.tsx │ │ │ ├── toggle-group.tsx │ │ │ ├── toggle.tsx │ │ │ └── tooltip.tsx │ │ └── ui-rtl/ │ │ ├── accordion.tsx │ │ ├── alert-dialog.tsx │ │ ├── alert.tsx │ │ ├── aspect-ratio.tsx │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── breadcrumb.tsx │ │ ├── button-group.tsx │ │ ├── button.tsx │ │ ├── calendar.tsx │ │ ├── card.tsx │ │ ├── carousel.tsx │ │ ├── chart.tsx │ │ ├── checkbox.tsx │ │ ├── collapsible.tsx │ │ ├── combobox.tsx │ │ ├── command.tsx │ │ ├── context-menu.tsx │ │ ├── dialog.tsx │ │ ├── direction.tsx │ │ ├── drawer.tsx │ │ ├── dropdown-menu.tsx │ │ ├── empty.tsx │ │ ├── field.tsx │ │ ├── hover-card.tsx │ │ ├── input-group.tsx │ │ ├── input-otp.tsx │ │ ├── input.tsx │ │ ├── item.tsx │ │ ├── kbd.tsx │ │ ├── label.tsx │ │ ├── menubar.tsx │ │ ├── native-select.tsx │ │ ├── navigation-menu.tsx │ │ ├── pagination.tsx │ │ ├── popover.tsx │ │ ├── progress.tsx │ │ ├── radio-group.tsx │ │ ├── resizable.tsx │ │ ├── scroll-area.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── sheet.tsx │ │ ├── sidebar.tsx │ │ ├── skeleton.tsx │ │ ├── slider.tsx │ │ ├── sonner.tsx │ │ ├── spinner.tsx │ │ ├── switch.tsx │ │ ├── table.tsx │ │ ├── tabs.tsx │ │ ├── textarea.tsx │ │ ├── toggle-group.tsx │ │ ├── toggle.tsx │ │ └── tooltip.tsx │ ├── hooks/ │ │ ├── use-colors.ts │ │ ├── use-config.ts │ │ ├── use-copy-to-clipboard.ts │ │ ├── use-layout.tsx │ │ ├── use-media-query.tsx │ │ ├── use-meta-color.ts │ │ ├── use-mobile.ts │ │ ├── use-mounted.ts │ │ ├── use-mutation-observer.ts │ │ └── use-search-registry.ts │ ├── lib/ │ │ ├── blocks.ts │ │ ├── categories.ts │ │ ├── changelog.ts │ │ ├── colors.ts │ │ ├── components.ts │ │ ├── config.ts │ │ ├── docs.ts │ │ ├── events.ts │ │ ├── explore.ts │ │ ├── flags.ts │ │ ├── font-definitions.ts │ │ ├── fonts.ts │ │ ├── format-code.ts │ │ ├── highlight-code.ts │ │ ├── llm.ts │ │ ├── page-tree.ts │ │ ├── read-file.ts │ │ ├── registry.ts │ │ ├── rehype.ts │ │ ├── source.ts │ │ ├── themes.ts │ │ └── utils.ts │ ├── mdx-components.tsx │ ├── next.config.mjs │ ├── package.json │ ├── postcss.config.mjs │ ├── public/ │ │ ├── llms.txt │ │ ├── r/ │ │ │ ├── colors/ │ │ │ │ ├── gray.json │ │ │ │ ├── index.json │ │ │ │ ├── mauve.json │ │ │ │ ├── mist.json │ │ │ │ ├── neutral.json │ │ │ │ ├── olive.json │ │ │ │ ├── slate.json │ │ │ │ ├── stone.json │ │ │ │ ├── taupe.json │ │ │ │ └── zinc.json │ │ │ ├── config.json │ │ │ ├── icons/ │ │ │ │ └── index.json │ │ │ ├── index.json │ │ │ ├── registries-legacy.json │ │ │ ├── registries.json │ │ │ ├── styles/ │ │ │ │ ├── base-lyra/ │ │ │ │ │ ├── accordion-example.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-dialog-example.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert-example.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-example.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-example.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-example.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-example.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-example.json │ │ │ │ │ ├── button-group-example.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-example.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-example.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── carousel-example.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-example.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-example.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-example.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-example.json │ │ │ │ │ ├── combobox.json │ │ │ │ │ ├── command-example.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── component-example.json │ │ │ │ │ ├── context-menu-example.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── demo.json │ │ │ │ │ ├── dialog-example.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── direction.json │ │ │ │ │ ├── drawer-example.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-example.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty-example.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── example.json │ │ │ │ │ ├── field-example.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── font-dm-sans.json │ │ │ │ │ ├── font-figtree.json │ │ │ │ │ ├── font-geist-mono.json │ │ │ │ │ ├── font-geist.json │ │ │ │ │ ├── font-heading-dm-sans.json │ │ │ │ │ ├── font-heading-figtree.json │ │ │ │ │ ├── font-heading-geist-mono.json │ │ │ │ │ ├── font-heading-geist.json │ │ │ │ │ ├── font-heading-ibm-plex-sans.json │ │ │ │ │ ├── font-heading-instrument-sans.json │ │ │ │ │ ├── font-heading-inter.json │ │ │ │ │ ├── font-heading-jetbrains-mono.json │ │ │ │ │ ├── font-heading-lora.json │ │ │ │ │ ├── font-heading-manrope.json │ │ │ │ │ ├── font-heading-merriweather.json │ │ │ │ │ ├── font-heading-montserrat.json │ │ │ │ │ ├── font-heading-noto-sans.json │ │ │ │ │ ├── font-heading-noto-serif.json │ │ │ │ │ ├── font-heading-nunito-sans.json │ │ │ │ │ ├── font-heading-outfit.json │ │ │ │ │ ├── font-heading-oxanium.json │ │ │ │ │ ├── font-heading-playfair-display.json │ │ │ │ │ ├── font-heading-public-sans.json │ │ │ │ │ ├── font-heading-raleway.json │ │ │ │ │ ├── font-heading-roboto-slab.json │ │ │ │ │ ├── font-heading-roboto.json │ │ │ │ │ ├── font-heading-source-sans-3.json │ │ │ │ │ ├── font-heading-space-grotesk.json │ │ │ │ │ ├── font-heading-tomorrow.json │ │ │ │ │ ├── font-ibm-plex-sans.json │ │ │ │ │ ├── font-instrument-sans.json │ │ │ │ │ ├── font-inter.json │ │ │ │ │ ├── font-jetbrains-mono.json │ │ │ │ │ ├── font-lora.json │ │ │ │ │ ├── font-manrope.json │ │ │ │ │ ├── font-merriweather.json │ │ │ │ │ ├── font-montserrat.json │ │ │ │ │ ├── font-noto-sans.json │ │ │ │ │ ├── font-noto-serif.json │ │ │ │ │ ├── font-nunito-sans.json │ │ │ │ │ ├── font-outfit.json │ │ │ │ │ ├── font-oxanium.json │ │ │ │ │ ├── font-playfair-display.json │ │ │ │ │ ├── font-public-sans.json │ │ │ │ │ ├── font-raleway.json │ │ │ │ │ ├── font-roboto-slab.json │ │ │ │ │ ├── font-roboto.json │ │ │ │ │ ├── font-source-sans-3.json │ │ │ │ │ ├── font-space-grotesk.json │ │ │ │ │ ├── font-tomorrow.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-example.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-example.json │ │ │ │ │ ├── input-group-example.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-example.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item-example.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd-example.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-example.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-example.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── native-select-example.json │ │ │ │ │ ├── native-select.json │ │ │ │ │ ├── navigation-menu-example.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── pagination-example.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-example.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── preview.json │ │ │ │ │ ├── progress-example.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-example.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-example.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-example.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-example.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-example.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-example.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-example.json │ │ │ │ │ ├── sidebar-floating-example.json │ │ │ │ │ ├── sidebar-icon-example.json │ │ │ │ │ ├── sidebar-inset-example.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── signup-01.json │ │ │ │ │ ├── signup-02.json │ │ │ │ │ ├── signup-03.json │ │ │ │ │ ├── signup-04.json │ │ │ │ │ ├── signup-05.json │ │ │ │ │ ├── skeleton-example.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-example.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-example.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner-example.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-example.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-example.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-example.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-example.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── toggle-example.json │ │ │ │ │ ├── toggle-group-example.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-example.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ └── utils.json │ │ │ │ ├── base-maia/ │ │ │ │ │ ├── accordion-example.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-dialog-example.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert-example.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-example.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-example.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-example.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-example.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-example.json │ │ │ │ │ ├── button-group-example.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-example.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-example.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── carousel-example.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-example.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-example.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-example.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-example.json │ │ │ │ │ ├── combobox.json │ │ │ │ │ ├── command-example.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── component-example.json │ │ │ │ │ ├── context-menu-example.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── demo.json │ │ │ │ │ ├── dialog-example.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── direction.json │ │ │ │ │ ├── drawer-example.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-example.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty-example.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── example.json │ │ │ │ │ ├── field-example.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── font-dm-sans.json │ │ │ │ │ ├── font-figtree.json │ │ │ │ │ ├── font-geist-mono.json │ │ │ │ │ ├── font-geist.json │ │ │ │ │ ├── font-heading-dm-sans.json │ │ │ │ │ ├── font-heading-figtree.json │ │ │ │ │ ├── font-heading-geist-mono.json │ │ │ │ │ ├── font-heading-geist.json │ │ │ │ │ ├── font-heading-ibm-plex-sans.json │ │ │ │ │ ├── font-heading-instrument-sans.json │ │ │ │ │ ├── font-heading-inter.json │ │ │ │ │ ├── font-heading-jetbrains-mono.json │ │ │ │ │ ├── font-heading-lora.json │ │ │ │ │ ├── font-heading-manrope.json │ │ │ │ │ ├── font-heading-merriweather.json │ │ │ │ │ ├── font-heading-montserrat.json │ │ │ │ │ ├── font-heading-noto-sans.json │ │ │ │ │ ├── font-heading-noto-serif.json │ │ │ │ │ ├── font-heading-nunito-sans.json │ │ │ │ │ ├── font-heading-outfit.json │ │ │ │ │ ├── font-heading-oxanium.json │ │ │ │ │ ├── font-heading-playfair-display.json │ │ │ │ │ ├── font-heading-public-sans.json │ │ │ │ │ ├── font-heading-raleway.json │ │ │ │ │ ├── font-heading-roboto-slab.json │ │ │ │ │ ├── font-heading-roboto.json │ │ │ │ │ ├── font-heading-source-sans-3.json │ │ │ │ │ ├── font-heading-space-grotesk.json │ │ │ │ │ ├── font-heading-tomorrow.json │ │ │ │ │ ├── font-ibm-plex-sans.json │ │ │ │ │ ├── font-instrument-sans.json │ │ │ │ │ ├── font-inter.json │ │ │ │ │ ├── font-jetbrains-mono.json │ │ │ │ │ ├── font-lora.json │ │ │ │ │ ├── font-manrope.json │ │ │ │ │ ├── font-merriweather.json │ │ │ │ │ ├── font-montserrat.json │ │ │ │ │ ├── font-noto-sans.json │ │ │ │ │ ├── font-noto-serif.json │ │ │ │ │ ├── font-nunito-sans.json │ │ │ │ │ ├── font-outfit.json │ │ │ │ │ ├── font-oxanium.json │ │ │ │ │ ├── font-playfair-display.json │ │ │ │ │ ├── font-public-sans.json │ │ │ │ │ ├── font-raleway.json │ │ │ │ │ ├── font-roboto-slab.json │ │ │ │ │ ├── font-roboto.json │ │ │ │ │ ├── font-source-sans-3.json │ │ │ │ │ ├── font-space-grotesk.json │ │ │ │ │ ├── font-tomorrow.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-example.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-example.json │ │ │ │ │ ├── input-group-example.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-example.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item-example.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd-example.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-example.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-example.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── native-select-example.json │ │ │ │ │ ├── native-select.json │ │ │ │ │ ├── navigation-menu-example.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── pagination-example.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-example.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── preview.json │ │ │ │ │ ├── progress-example.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-example.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-example.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-example.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-example.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-example.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-example.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-example.json │ │ │ │ │ ├── sidebar-floating-example.json │ │ │ │ │ ├── sidebar-icon-example.json │ │ │ │ │ ├── sidebar-inset-example.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── signup-01.json │ │ │ │ │ ├── signup-02.json │ │ │ │ │ ├── signup-03.json │ │ │ │ │ ├── signup-04.json │ │ │ │ │ ├── signup-05.json │ │ │ │ │ ├── skeleton-example.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-example.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-example.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner-example.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-example.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-example.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-example.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-example.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── toggle-example.json │ │ │ │ │ ├── toggle-group-example.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-example.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ └── utils.json │ │ │ │ ├── base-mira/ │ │ │ │ │ ├── accordion-example.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-dialog-example.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert-example.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-example.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-example.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-example.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-example.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-example.json │ │ │ │ │ ├── button-group-example.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-example.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-example.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── carousel-example.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-example.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-example.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-example.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-example.json │ │ │ │ │ ├── combobox.json │ │ │ │ │ ├── command-example.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── component-example.json │ │ │ │ │ ├── context-menu-example.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── demo.json │ │ │ │ │ ├── dialog-example.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── direction.json │ │ │ │ │ ├── drawer-example.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-example.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty-example.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── example.json │ │ │ │ │ ├── field-example.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── font-dm-sans.json │ │ │ │ │ ├── font-figtree.json │ │ │ │ │ ├── font-geist-mono.json │ │ │ │ │ ├── font-geist.json │ │ │ │ │ ├── font-heading-dm-sans.json │ │ │ │ │ ├── font-heading-figtree.json │ │ │ │ │ ├── font-heading-geist-mono.json │ │ │ │ │ ├── font-heading-geist.json │ │ │ │ │ ├── font-heading-ibm-plex-sans.json │ │ │ │ │ ├── font-heading-instrument-sans.json │ │ │ │ │ ├── font-heading-inter.json │ │ │ │ │ ├── font-heading-jetbrains-mono.json │ │ │ │ │ ├── font-heading-lora.json │ │ │ │ │ ├── font-heading-manrope.json │ │ │ │ │ ├── font-heading-merriweather.json │ │ │ │ │ ├── font-heading-montserrat.json │ │ │ │ │ ├── font-heading-noto-sans.json │ │ │ │ │ ├── font-heading-noto-serif.json │ │ │ │ │ ├── font-heading-nunito-sans.json │ │ │ │ │ ├── font-heading-outfit.json │ │ │ │ │ ├── font-heading-oxanium.json │ │ │ │ │ ├── font-heading-playfair-display.json │ │ │ │ │ ├── font-heading-public-sans.json │ │ │ │ │ ├── font-heading-raleway.json │ │ │ │ │ ├── font-heading-roboto-slab.json │ │ │ │ │ ├── font-heading-roboto.json │ │ │ │ │ ├── font-heading-source-sans-3.json │ │ │ │ │ ├── font-heading-space-grotesk.json │ │ │ │ │ ├── font-heading-tomorrow.json │ │ │ │ │ ├── font-ibm-plex-sans.json │ │ │ │ │ ├── font-instrument-sans.json │ │ │ │ │ ├── font-inter.json │ │ │ │ │ ├── font-jetbrains-mono.json │ │ │ │ │ ├── font-lora.json │ │ │ │ │ ├── font-manrope.json │ │ │ │ │ ├── font-merriweather.json │ │ │ │ │ ├── font-montserrat.json │ │ │ │ │ ├── font-noto-sans.json │ │ │ │ │ ├── font-noto-serif.json │ │ │ │ │ ├── font-nunito-sans.json │ │ │ │ │ ├── font-outfit.json │ │ │ │ │ ├── font-oxanium.json │ │ │ │ │ ├── font-playfair-display.json │ │ │ │ │ ├── font-public-sans.json │ │ │ │ │ ├── font-raleway.json │ │ │ │ │ ├── font-roboto-slab.json │ │ │ │ │ ├── font-roboto.json │ │ │ │ │ ├── font-source-sans-3.json │ │ │ │ │ ├── font-space-grotesk.json │ │ │ │ │ ├── font-tomorrow.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-example.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-example.json │ │ │ │ │ ├── input-group-example.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-example.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item-example.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd-example.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-example.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-example.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── native-select-example.json │ │ │ │ │ ├── native-select.json │ │ │ │ │ ├── navigation-menu-example.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── pagination-example.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-example.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── preview.json │ │ │ │ │ ├── progress-example.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-example.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-example.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-example.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-example.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-example.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-example.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-example.json │ │ │ │ │ ├── sidebar-floating-example.json │ │ │ │ │ ├── sidebar-icon-example.json │ │ │ │ │ ├── sidebar-inset-example.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── signup-01.json │ │ │ │ │ ├── signup-02.json │ │ │ │ │ ├── signup-03.json │ │ │ │ │ ├── signup-04.json │ │ │ │ │ ├── signup-05.json │ │ │ │ │ ├── skeleton-example.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-example.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-example.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner-example.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-example.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-example.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-example.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-example.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── toggle-example.json │ │ │ │ │ ├── toggle-group-example.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-example.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ └── utils.json │ │ │ │ ├── base-nova/ │ │ │ │ │ ├── accordion-example.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-dialog-example.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert-example.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-example.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-example.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-example.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-example.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-example.json │ │ │ │ │ ├── button-group-example.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-example.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-example.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── carousel-example.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-example.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-example.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-example.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-example.json │ │ │ │ │ ├── combobox.json │ │ │ │ │ ├── command-example.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── component-example.json │ │ │ │ │ ├── context-menu-example.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── demo.json │ │ │ │ │ ├── dialog-example.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── direction.json │ │ │ │ │ ├── drawer-example.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-example.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty-example.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── example.json │ │ │ │ │ ├── field-example.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── font-dm-sans.json │ │ │ │ │ ├── font-figtree.json │ │ │ │ │ ├── font-geist-mono.json │ │ │ │ │ ├── font-geist.json │ │ │ │ │ ├── font-heading-dm-sans.json │ │ │ │ │ ├── font-heading-figtree.json │ │ │ │ │ ├── font-heading-geist-mono.json │ │ │ │ │ ├── font-heading-geist.json │ │ │ │ │ ├── font-heading-ibm-plex-sans.json │ │ │ │ │ ├── font-heading-instrument-sans.json │ │ │ │ │ ├── font-heading-inter.json │ │ │ │ │ ├── font-heading-jetbrains-mono.json │ │ │ │ │ ├── font-heading-lora.json │ │ │ │ │ ├── font-heading-manrope.json │ │ │ │ │ ├── font-heading-merriweather.json │ │ │ │ │ ├── font-heading-montserrat.json │ │ │ │ │ ├── font-heading-noto-sans.json │ │ │ │ │ ├── font-heading-noto-serif.json │ │ │ │ │ ├── font-heading-nunito-sans.json │ │ │ │ │ ├── font-heading-outfit.json │ │ │ │ │ ├── font-heading-oxanium.json │ │ │ │ │ ├── font-heading-playfair-display.json │ │ │ │ │ ├── font-heading-public-sans.json │ │ │ │ │ ├── font-heading-raleway.json │ │ │ │ │ ├── font-heading-roboto-slab.json │ │ │ │ │ ├── font-heading-roboto.json │ │ │ │ │ ├── font-heading-source-sans-3.json │ │ │ │ │ ├── font-heading-space-grotesk.json │ │ │ │ │ ├── font-heading-tomorrow.json │ │ │ │ │ ├── font-ibm-plex-sans.json │ │ │ │ │ ├── font-instrument-sans.json │ │ │ │ │ ├── font-inter.json │ │ │ │ │ ├── font-jetbrains-mono.json │ │ │ │ │ ├── font-lora.json │ │ │ │ │ ├── font-manrope.json │ │ │ │ │ ├── font-merriweather.json │ │ │ │ │ ├── font-montserrat.json │ │ │ │ │ ├── font-noto-sans.json │ │ │ │ │ ├── font-noto-serif.json │ │ │ │ │ ├── font-nunito-sans.json │ │ │ │ │ ├── font-outfit.json │ │ │ │ │ ├── font-oxanium.json │ │ │ │ │ ├── font-playfair-display.json │ │ │ │ │ ├── font-public-sans.json │ │ │ │ │ ├── font-raleway.json │ │ │ │ │ ├── font-roboto-slab.json │ │ │ │ │ ├── font-roboto.json │ │ │ │ │ ├── font-source-sans-3.json │ │ │ │ │ ├── font-space-grotesk.json │ │ │ │ │ ├── font-tomorrow.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-example.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-example.json │ │ │ │ │ ├── input-group-example.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-example.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item-example.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd-example.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-example.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-example.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── native-select-example.json │ │ │ │ │ ├── native-select.json │ │ │ │ │ ├── navigation-menu-example.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── pagination-example.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-example.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── preview.json │ │ │ │ │ ├── progress-example.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-example.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-example.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-example.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-example.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-example.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-example.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-example.json │ │ │ │ │ ├── sidebar-floating-example.json │ │ │ │ │ ├── sidebar-icon-example.json │ │ │ │ │ ├── sidebar-inset-example.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── signup-01.json │ │ │ │ │ ├── signup-02.json │ │ │ │ │ ├── signup-03.json │ │ │ │ │ ├── signup-04.json │ │ │ │ │ ├── signup-05.json │ │ │ │ │ ├── skeleton-example.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-example.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-example.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner-example.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-example.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-example.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-example.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-example.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── toggle-example.json │ │ │ │ │ ├── toggle-group-example.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-example.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ └── utils.json │ │ │ │ ├── base-vega/ │ │ │ │ │ ├── accordion-example.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-dialog-example.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert-example.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-example.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-example.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-example.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-example.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-example.json │ │ │ │ │ ├── button-group-example.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-example.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-example.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── carousel-example.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-example.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-example.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-example.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-example.json │ │ │ │ │ ├── combobox.json │ │ │ │ │ ├── command-example.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── component-example.json │ │ │ │ │ ├── context-menu-example.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── demo.json │ │ │ │ │ ├── dialog-example.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── direction.json │ │ │ │ │ ├── drawer-example.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-example.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty-example.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── example.json │ │ │ │ │ ├── field-example.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── font-dm-sans.json │ │ │ │ │ ├── font-figtree.json │ │ │ │ │ ├── font-geist-mono.json │ │ │ │ │ ├── font-geist.json │ │ │ │ │ ├── font-heading-dm-sans.json │ │ │ │ │ ├── font-heading-figtree.json │ │ │ │ │ ├── font-heading-geist-mono.json │ │ │ │ │ ├── font-heading-geist.json │ │ │ │ │ ├── font-heading-ibm-plex-sans.json │ │ │ │ │ ├── font-heading-instrument-sans.json │ │ │ │ │ ├── font-heading-inter.json │ │ │ │ │ ├── font-heading-jetbrains-mono.json │ │ │ │ │ ├── font-heading-lora.json │ │ │ │ │ ├── font-heading-manrope.json │ │ │ │ │ ├── font-heading-merriweather.json │ │ │ │ │ ├── font-heading-montserrat.json │ │ │ │ │ ├── font-heading-noto-sans.json │ │ │ │ │ ├── font-heading-noto-serif.json │ │ │ │ │ ├── font-heading-nunito-sans.json │ │ │ │ │ ├── font-heading-outfit.json │ │ │ │ │ ├── font-heading-oxanium.json │ │ │ │ │ ├── font-heading-playfair-display.json │ │ │ │ │ ├── font-heading-public-sans.json │ │ │ │ │ ├── font-heading-raleway.json │ │ │ │ │ ├── font-heading-roboto-slab.json │ │ │ │ │ ├── font-heading-roboto.json │ │ │ │ │ ├── font-heading-source-sans-3.json │ │ │ │ │ ├── font-heading-space-grotesk.json │ │ │ │ │ ├── font-heading-tomorrow.json │ │ │ │ │ ├── font-ibm-plex-sans.json │ │ │ │ │ ├── font-instrument-sans.json │ │ │ │ │ ├── font-inter.json │ │ │ │ │ ├── font-jetbrains-mono.json │ │ │ │ │ ├── font-lora.json │ │ │ │ │ ├── font-manrope.json │ │ │ │ │ ├── font-merriweather.json │ │ │ │ │ ├── font-montserrat.json │ │ │ │ │ ├── font-noto-sans.json │ │ │ │ │ ├── font-noto-serif.json │ │ │ │ │ ├── font-nunito-sans.json │ │ │ │ │ ├── font-outfit.json │ │ │ │ │ ├── font-oxanium.json │ │ │ │ │ ├── font-playfair-display.json │ │ │ │ │ ├── font-public-sans.json │ │ │ │ │ ├── font-raleway.json │ │ │ │ │ ├── font-roboto-slab.json │ │ │ │ │ ├── font-roboto.json │ │ │ │ │ ├── font-source-sans-3.json │ │ │ │ │ ├── font-space-grotesk.json │ │ │ │ │ ├── font-tomorrow.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-example.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-example.json │ │ │ │ │ ├── input-group-example.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-example.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item-example.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd-example.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-example.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-example.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── native-select-example.json │ │ │ │ │ ├── native-select.json │ │ │ │ │ ├── navigation-menu-example.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── pagination-example.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-example.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── preview.json │ │ │ │ │ ├── progress-example.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-example.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-example.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-example.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-example.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-example.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-example.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-example.json │ │ │ │ │ ├── sidebar-floating-example.json │ │ │ │ │ ├── sidebar-icon-example.json │ │ │ │ │ ├── sidebar-inset-example.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── signup-01.json │ │ │ │ │ ├── signup-02.json │ │ │ │ │ ├── signup-03.json │ │ │ │ │ ├── signup-04.json │ │ │ │ │ ├── signup-05.json │ │ │ │ │ ├── skeleton-example.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-example.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-example.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner-example.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-example.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-example.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-example.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-example.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── toggle-example.json │ │ │ │ │ ├── toggle-group-example.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-example.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ └── utils.json │ │ │ │ ├── default/ │ │ │ │ │ ├── accordion-demo.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-demo.json │ │ │ │ │ ├── alert-destructive.json │ │ │ │ │ ├── alert-dialog-demo.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-demo.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-demo.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-demo.json │ │ │ │ │ ├── badge-destructive.json │ │ │ │ │ ├── badge-outline.json │ │ │ │ │ ├── badge-secondary.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-demo.json │ │ │ │ │ ├── breadcrumb-dropdown.json │ │ │ │ │ ├── breadcrumb-ellipsis.json │ │ │ │ │ ├── breadcrumb-link.json │ │ │ │ │ ├── breadcrumb-responsive.json │ │ │ │ │ ├── breadcrumb-separator.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-as-child.json │ │ │ │ │ ├── button-demo.json │ │ │ │ │ ├── button-destructive.json │ │ │ │ │ ├── button-ghost.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button-icon.json │ │ │ │ │ ├── button-link.json │ │ │ │ │ ├── button-loading.json │ │ │ │ │ ├── button-outline.json │ │ │ │ │ ├── button-secondary.json │ │ │ │ │ ├── button-with-icon.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-01.json │ │ │ │ │ ├── calendar-02.json │ │ │ │ │ ├── calendar-03.json │ │ │ │ │ ├── calendar-04.json │ │ │ │ │ ├── calendar-05.json │ │ │ │ │ ├── calendar-06.json │ │ │ │ │ ├── calendar-07.json │ │ │ │ │ ├── calendar-08.json │ │ │ │ │ ├── calendar-09.json │ │ │ │ │ ├── calendar-10.json │ │ │ │ │ ├── calendar-11.json │ │ │ │ │ ├── calendar-12.json │ │ │ │ │ ├── calendar-13.json │ │ │ │ │ ├── calendar-14.json │ │ │ │ │ ├── calendar-15.json │ │ │ │ │ ├── calendar-16.json │ │ │ │ │ ├── calendar-17.json │ │ │ │ │ ├── calendar-18.json │ │ │ │ │ ├── calendar-19.json │ │ │ │ │ ├── calendar-20.json │ │ │ │ │ ├── calendar-21.json │ │ │ │ │ ├── calendar-22.json │ │ │ │ │ ├── calendar-23.json │ │ │ │ │ ├── calendar-24.json │ │ │ │ │ ├── calendar-25.json │ │ │ │ │ ├── calendar-26.json │ │ │ │ │ ├── calendar-27.json │ │ │ │ │ ├── calendar-28.json │ │ │ │ │ ├── calendar-29.json │ │ │ │ │ ├── calendar-30.json │ │ │ │ │ ├── calendar-31.json │ │ │ │ │ ├── calendar-32.json │ │ │ │ │ ├── calendar-demo.json │ │ │ │ │ ├── calendar-form.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-demo.json │ │ │ │ │ ├── card-with-form.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── carousel-api.json │ │ │ │ │ ├── carousel-demo.json │ │ │ │ │ ├── carousel-orientation.json │ │ │ │ │ ├── carousel-plugin.json │ │ │ │ │ ├── carousel-size.json │ │ │ │ │ ├── carousel-spacing.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-area-axes.json │ │ │ │ │ ├── chart-area-default.json │ │ │ │ │ ├── chart-area-gradient.json │ │ │ │ │ ├── chart-area-icons.json │ │ │ │ │ ├── chart-area-interactive.json │ │ │ │ │ ├── chart-area-legend.json │ │ │ │ │ ├── chart-area-linear.json │ │ │ │ │ ├── chart-area-stacked-expand.json │ │ │ │ │ ├── chart-area-stacked.json │ │ │ │ │ ├── chart-area-step.json │ │ │ │ │ ├── chart-bar-active.json │ │ │ │ │ ├── chart-bar-default.json │ │ │ │ │ ├── chart-bar-demo-axis.json │ │ │ │ │ ├── chart-bar-demo-grid.json │ │ │ │ │ ├── chart-bar-demo-legend.json │ │ │ │ │ ├── chart-bar-demo-tooltip.json │ │ │ │ │ ├── chart-bar-demo.json │ │ │ │ │ ├── chart-bar-horizontal.json │ │ │ │ │ ├── chart-bar-interactive.json │ │ │ │ │ ├── chart-bar-label-custom.json │ │ │ │ │ ├── chart-bar-label.json │ │ │ │ │ ├── chart-bar-mixed.json │ │ │ │ │ ├── chart-bar-multiple.json │ │ │ │ │ ├── chart-bar-negative.json │ │ │ │ │ ├── chart-bar-stacked.json │ │ │ │ │ ├── chart-line-default.json │ │ │ │ │ ├── chart-line-dots-colors.json │ │ │ │ │ ├── chart-line-dots-custom.json │ │ │ │ │ ├── chart-line-dots.json │ │ │ │ │ ├── chart-line-interactive.json │ │ │ │ │ ├── chart-line-label-custom.json │ │ │ │ │ ├── chart-line-label.json │ │ │ │ │ ├── chart-line-linear.json │ │ │ │ │ ├── chart-line-multiple.json │ │ │ │ │ ├── chart-line-step.json │ │ │ │ │ ├── chart-pie-donut-active.json │ │ │ │ │ ├── chart-pie-donut-text.json │ │ │ │ │ ├── chart-pie-donut.json │ │ │ │ │ ├── chart-pie-interactive.json │ │ │ │ │ ├── chart-pie-label-custom.json │ │ │ │ │ ├── chart-pie-label-list.json │ │ │ │ │ ├── chart-pie-label.json │ │ │ │ │ ├── chart-pie-legend.json │ │ │ │ │ ├── chart-pie-separator-none.json │ │ │ │ │ ├── chart-pie-simple.json │ │ │ │ │ ├── chart-pie-stacked.json │ │ │ │ │ ├── chart-radar-default.json │ │ │ │ │ ├── chart-radar-dots.json │ │ │ │ │ ├── chart-radar-grid-circle-fill.json │ │ │ │ │ ├── chart-radar-grid-circle-no-lines.json │ │ │ │ │ ├── chart-radar-grid-circle.json │ │ │ │ │ ├── chart-radar-grid-custom.json │ │ │ │ │ ├── chart-radar-grid-fill.json │ │ │ │ │ ├── chart-radar-grid-none.json │ │ │ │ │ ├── chart-radar-icons.json │ │ │ │ │ ├── chart-radar-label-custom.json │ │ │ │ │ ├── chart-radar-legend.json │ │ │ │ │ ├── chart-radar-lines-only.json │ │ │ │ │ ├── chart-radar-multiple.json │ │ │ │ │ ├── chart-radar-radius.json │ │ │ │ │ ├── chart-radial-grid.json │ │ │ │ │ ├── chart-radial-label.json │ │ │ │ │ ├── chart-radial-shape.json │ │ │ │ │ ├── chart-radial-simple.json │ │ │ │ │ ├── chart-radial-stacked.json │ │ │ │ │ ├── chart-radial-text.json │ │ │ │ │ ├── chart-tooltip-advanced.json │ │ │ │ │ ├── chart-tooltip-default.json │ │ │ │ │ ├── chart-tooltip-demo.json │ │ │ │ │ ├── chart-tooltip-formatter.json │ │ │ │ │ ├── chart-tooltip-icons.json │ │ │ │ │ ├── chart-tooltip-indicator-line.json │ │ │ │ │ ├── chart-tooltip-indicator-none.json │ │ │ │ │ ├── chart-tooltip-label-custom.json │ │ │ │ │ ├── chart-tooltip-label-formatter.json │ │ │ │ │ ├── chart-tooltip-label-none.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-demo.json │ │ │ │ │ ├── checkbox-disabled.json │ │ │ │ │ ├── checkbox-form-multiple.json │ │ │ │ │ ├── checkbox-form-single.json │ │ │ │ │ ├── checkbox-with-text.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-demo.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-demo.json │ │ │ │ │ ├── combobox-dropdown-menu.json │ │ │ │ │ ├── combobox-form.json │ │ │ │ │ ├── combobox-popover.json │ │ │ │ │ ├── combobox-responsive.json │ │ │ │ │ ├── command-demo.json │ │ │ │ │ ├── command-dialog.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── context-menu-demo.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── data-table-demo.json │ │ │ │ │ ├── date-picker-demo.json │ │ │ │ │ ├── date-picker-form.json │ │ │ │ │ ├── date-picker-with-presets.json │ │ │ │ │ ├── date-picker-with-range.json │ │ │ │ │ ├── dialog-close-button.json │ │ │ │ │ ├── dialog-demo.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── drawer-demo.json │ │ │ │ │ ├── drawer-dialog.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-checkboxes.json │ │ │ │ │ ├── dropdown-menu-demo.json │ │ │ │ │ ├── dropdown-menu-radio-group.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-demo.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-demo.json │ │ │ │ │ ├── input-disabled.json │ │ │ │ │ ├── input-file.json │ │ │ │ │ ├── input-form.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-controlled.json │ │ │ │ │ ├── input-otp-demo.json │ │ │ │ │ ├── input-otp-form.json │ │ │ │ │ ├── input-otp-pattern.json │ │ │ │ │ ├── input-otp-separator.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input-with-button.json │ │ │ │ │ ├── input-with-label.json │ │ │ │ │ ├── input-with-text.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-demo.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-demo.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── mode-toggle.json │ │ │ │ │ ├── navigation-menu-demo.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── pagination-demo.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-demo.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── progress-demo.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-demo.json │ │ │ │ │ ├── radio-group-form.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-demo-with-handle.json │ │ │ │ │ ├── resizable-demo.json │ │ │ │ │ ├── resizable-handle.json │ │ │ │ │ ├── resizable-vertical.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-demo.json │ │ │ │ │ ├── scroll-area-horizontal-demo.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-demo.json │ │ │ │ │ ├── select-form.json │ │ │ │ │ ├── select-scrollable.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-demo.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-demo.json │ │ │ │ │ ├── sheet-side.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-controlled.json │ │ │ │ │ ├── sidebar-demo.json │ │ │ │ │ ├── sidebar-footer.json │ │ │ │ │ ├── sidebar-group-action.json │ │ │ │ │ ├── sidebar-group-collapsible.json │ │ │ │ │ ├── sidebar-group.json │ │ │ │ │ ├── sidebar-header.json │ │ │ │ │ ├── sidebar-menu-action.json │ │ │ │ │ ├── sidebar-menu-badge.json │ │ │ │ │ ├── sidebar-menu-collapsible.json │ │ │ │ │ ├── sidebar-menu-sub.json │ │ │ │ │ ├── sidebar-menu.json │ │ │ │ │ ├── sidebar-rsc.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── sink.json │ │ │ │ │ ├── skeleton-card.json │ │ │ │ │ ├── skeleton-demo.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-demo.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-demo.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-demo.json │ │ │ │ │ ├── switch-form.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-demo.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-demo.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-demo.json │ │ │ │ │ ├── textarea-disabled.json │ │ │ │ │ ├── textarea-form.json │ │ │ │ │ ├── textarea-with-button.json │ │ │ │ │ ├── textarea-with-label.json │ │ │ │ │ ├── textarea-with-text.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── theme-daylight.json │ │ │ │ │ ├── theme-emerald.json │ │ │ │ │ ├── theme-midnight.json │ │ │ │ │ ├── toast-demo.json │ │ │ │ │ ├── toast-destructive.json │ │ │ │ │ ├── toast-simple.json │ │ │ │ │ ├── toast-with-action.json │ │ │ │ │ ├── toast-with-title.json │ │ │ │ │ ├── toast.json │ │ │ │ │ ├── toggle-demo.json │ │ │ │ │ ├── toggle-disabled.json │ │ │ │ │ ├── toggle-group-demo.json │ │ │ │ │ ├── toggle-group-disabled.json │ │ │ │ │ ├── toggle-group-lg.json │ │ │ │ │ ├── toggle-group-outline.json │ │ │ │ │ ├── toggle-group-single.json │ │ │ │ │ ├── toggle-group-sm.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle-lg.json │ │ │ │ │ ├── toggle-outline.json │ │ │ │ │ ├── toggle-sm.json │ │ │ │ │ ├── toggle-with-text.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-demo.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── typography-blockquote.json │ │ │ │ │ ├── typography-demo.json │ │ │ │ │ ├── typography-h1.json │ │ │ │ │ ├── typography-h2.json │ │ │ │ │ ├── typography-h3.json │ │ │ │ │ ├── typography-h4.json │ │ │ │ │ ├── typography-inline-code.json │ │ │ │ │ ├── typography-large.json │ │ │ │ │ ├── typography-lead.json │ │ │ │ │ ├── typography-list.json │ │ │ │ │ ├── typography-muted.json │ │ │ │ │ ├── typography-p.json │ │ │ │ │ ├── typography-small.json │ │ │ │ │ ├── typography-table.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ ├── use-toast.json │ │ │ │ │ ├── utils.json │ │ │ │ │ ├── v0-login-01.json │ │ │ │ │ ├── v0-sidebar-01.json │ │ │ │ │ ├── v0-sidebar-02.json │ │ │ │ │ ├── v0-sidebar-03.json │ │ │ │ │ ├── v0-sidebar-04.json │ │ │ │ │ ├── v0-sidebar-05.json │ │ │ │ │ ├── v0-sidebar-06.json │ │ │ │ │ ├── v0-sidebar-07.json │ │ │ │ │ ├── v0-sidebar-08.json │ │ │ │ │ ├── v0-sidebar-09.json │ │ │ │ │ ├── v0-sidebar-10.json │ │ │ │ │ ├── v0-sidebar-11.json │ │ │ │ │ ├── v0-sidebar-12.json │ │ │ │ │ ├── v0-sidebar-13.json │ │ │ │ │ ├── v0-sidebar-14.json │ │ │ │ │ ├── v0-sidebar-15.json │ │ │ │ │ └── v0-sidebar-16.json │ │ │ │ ├── index.json │ │ │ │ ├── new-york/ │ │ │ │ │ ├── accordion-demo.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-demo.json │ │ │ │ │ ├── alert-destructive.json │ │ │ │ │ ├── alert-dialog-demo.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── app-01.json │ │ │ │ │ ├── aspect-ratio-demo.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-demo.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-demo.json │ │ │ │ │ ├── badge-destructive.json │ │ │ │ │ ├── badge-outline.json │ │ │ │ │ ├── badge-secondary.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-demo.json │ │ │ │ │ ├── breadcrumb-dropdown.json │ │ │ │ │ ├── breadcrumb-ellipsis.json │ │ │ │ │ ├── breadcrumb-link.json │ │ │ │ │ ├── breadcrumb-responsive.json │ │ │ │ │ ├── breadcrumb-separator.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-01.json │ │ │ │ │ ├── button-as-child.json │ │ │ │ │ ├── button-demo.json │ │ │ │ │ ├── button-destructive.json │ │ │ │ │ ├── button-ghost.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button-icon.json │ │ │ │ │ ├── button-link.json │ │ │ │ │ ├── button-loading.json │ │ │ │ │ ├── button-outline.json │ │ │ │ │ ├── button-secondary.json │ │ │ │ │ ├── button-with-icon.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-01.json │ │ │ │ │ ├── calendar-02.json │ │ │ │ │ ├── calendar-03.json │ │ │ │ │ ├── calendar-04.json │ │ │ │ │ ├── calendar-05.json │ │ │ │ │ ├── calendar-06.json │ │ │ │ │ ├── calendar-07.json │ │ │ │ │ ├── calendar-08.json │ │ │ │ │ ├── calendar-09.json │ │ │ │ │ ├── calendar-10.json │ │ │ │ │ ├── calendar-11.json │ │ │ │ │ ├── calendar-12.json │ │ │ │ │ ├── calendar-13.json │ │ │ │ │ ├── calendar-14.json │ │ │ │ │ ├── calendar-15.json │ │ │ │ │ ├── calendar-16.json │ │ │ │ │ ├── calendar-17.json │ │ │ │ │ ├── calendar-18.json │ │ │ │ │ ├── calendar-19.json │ │ │ │ │ ├── calendar-20.json │ │ │ │ │ ├── calendar-21.json │ │ │ │ │ ├── calendar-22.json │ │ │ │ │ ├── calendar-23.json │ │ │ │ │ ├── calendar-24.json │ │ │ │ │ ├── calendar-25.json │ │ │ │ │ ├── calendar-26.json │ │ │ │ │ ├── calendar-27.json │ │ │ │ │ ├── calendar-28.json │ │ │ │ │ ├── calendar-29.json │ │ │ │ │ ├── calendar-30.json │ │ │ │ │ ├── calendar-31.json │ │ │ │ │ ├── calendar-32.json │ │ │ │ │ ├── calendar-demo.json │ │ │ │ │ ├── calendar-form.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-demo.json │ │ │ │ │ ├── card-with-form.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── carousel-api.json │ │ │ │ │ ├── carousel-demo.json │ │ │ │ │ ├── carousel-orientation.json │ │ │ │ │ ├── carousel-plugin.json │ │ │ │ │ ├── carousel-size.json │ │ │ │ │ ├── carousel-spacing.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-area-axes.json │ │ │ │ │ ├── chart-area-default.json │ │ │ │ │ ├── chart-area-gradient.json │ │ │ │ │ ├── chart-area-icons.json │ │ │ │ │ ├── chart-area-interactive.json │ │ │ │ │ ├── chart-area-legend.json │ │ │ │ │ ├── chart-area-linear.json │ │ │ │ │ ├── chart-area-stacked-expand.json │ │ │ │ │ ├── chart-area-stacked.json │ │ │ │ │ ├── chart-area-step.json │ │ │ │ │ ├── chart-bar-active.json │ │ │ │ │ ├── chart-bar-default.json │ │ │ │ │ ├── chart-bar-demo-axis.json │ │ │ │ │ ├── chart-bar-demo-grid.json │ │ │ │ │ ├── chart-bar-demo-legend.json │ │ │ │ │ ├── chart-bar-demo-tooltip.json │ │ │ │ │ ├── chart-bar-demo.json │ │ │ │ │ ├── chart-bar-horizontal.json │ │ │ │ │ ├── chart-bar-interactive.json │ │ │ │ │ ├── chart-bar-label-custom.json │ │ │ │ │ ├── chart-bar-label.json │ │ │ │ │ ├── chart-bar-mixed.json │ │ │ │ │ ├── chart-bar-multiple.json │ │ │ │ │ ├── chart-bar-negative.json │ │ │ │ │ ├── chart-bar-stacked.json │ │ │ │ │ ├── chart-line-default.json │ │ │ │ │ ├── chart-line-dots-colors.json │ │ │ │ │ ├── chart-line-dots-custom.json │ │ │ │ │ ├── chart-line-dots.json │ │ │ │ │ ├── chart-line-interactive.json │ │ │ │ │ ├── chart-line-label-custom.json │ │ │ │ │ ├── chart-line-label.json │ │ │ │ │ ├── chart-line-linear.json │ │ │ │ │ ├── chart-line-multiple.json │ │ │ │ │ ├── chart-line-step.json │ │ │ │ │ ├── chart-pie-donut-active.json │ │ │ │ │ ├── chart-pie-donut-text.json │ │ │ │ │ ├── chart-pie-donut.json │ │ │ │ │ ├── chart-pie-interactive.json │ │ │ │ │ ├── chart-pie-label-custom.json │ │ │ │ │ ├── chart-pie-label-list.json │ │ │ │ │ ├── chart-pie-label.json │ │ │ │ │ ├── chart-pie-legend.json │ │ │ │ │ ├── chart-pie-separator-none.json │ │ │ │ │ ├── chart-pie-simple.json │ │ │ │ │ ├── chart-pie-stacked.json │ │ │ │ │ ├── chart-radar-default.json │ │ │ │ │ ├── chart-radar-dots.json │ │ │ │ │ ├── chart-radar-grid-circle-fill.json │ │ │ │ │ ├── chart-radar-grid-circle-no-lines.json │ │ │ │ │ ├── chart-radar-grid-circle.json │ │ │ │ │ ├── chart-radar-grid-custom.json │ │ │ │ │ ├── chart-radar-grid-fill.json │ │ │ │ │ ├── chart-radar-grid-none.json │ │ │ │ │ ├── chart-radar-icons.json │ │ │ │ │ ├── chart-radar-label-custom.json │ │ │ │ │ ├── chart-radar-legend.json │ │ │ │ │ ├── chart-radar-lines-only.json │ │ │ │ │ ├── chart-radar-multiple.json │ │ │ │ │ ├── chart-radar-radius.json │ │ │ │ │ ├── chart-radial-grid.json │ │ │ │ │ ├── chart-radial-label.json │ │ │ │ │ ├── chart-radial-shape.json │ │ │ │ │ ├── chart-radial-simple.json │ │ │ │ │ ├── chart-radial-stacked.json │ │ │ │ │ ├── chart-radial-text.json │ │ │ │ │ ├── chart-tooltip-advanced.json │ │ │ │ │ ├── chart-tooltip-default.json │ │ │ │ │ ├── chart-tooltip-demo.json │ │ │ │ │ ├── chart-tooltip-formatter.json │ │ │ │ │ ├── chart-tooltip-icons.json │ │ │ │ │ ├── chart-tooltip-indicator-line.json │ │ │ │ │ ├── chart-tooltip-indicator-none.json │ │ │ │ │ ├── chart-tooltip-label-custom.json │ │ │ │ │ ├── chart-tooltip-label-formatter.json │ │ │ │ │ ├── chart-tooltip-label-none.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-demo.json │ │ │ │ │ ├── checkbox-disabled.json │ │ │ │ │ ├── checkbox-form-multiple.json │ │ │ │ │ ├── checkbox-form-single.json │ │ │ │ │ ├── checkbox-with-text.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-demo.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-demo.json │ │ │ │ │ ├── combobox-dropdown-menu.json │ │ │ │ │ ├── combobox-form.json │ │ │ │ │ ├── combobox-popover.json │ │ │ │ │ ├── combobox-responsive.json │ │ │ │ │ ├── command-demo.json │ │ │ │ │ ├── command-dialog.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── context-menu-demo.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── data-table-demo.json │ │ │ │ │ ├── date-picker-demo.json │ │ │ │ │ ├── date-picker-form.json │ │ │ │ │ ├── date-picker-with-presets.json │ │ │ │ │ ├── date-picker-with-range.json │ │ │ │ │ ├── dialog-close-button.json │ │ │ │ │ ├── dialog-demo.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── drawer-demo.json │ │ │ │ │ ├── drawer-dialog.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-checkboxes.json │ │ │ │ │ ├── dropdown-menu-demo.json │ │ │ │ │ ├── dropdown-menu-radio-group.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-demo.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-demo.json │ │ │ │ │ ├── input-disabled.json │ │ │ │ │ ├── input-file.json │ │ │ │ │ ├── input-form.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-controlled.json │ │ │ │ │ ├── input-otp-demo.json │ │ │ │ │ ├── input-otp-form.json │ │ │ │ │ ├── input-otp-pattern.json │ │ │ │ │ ├── input-otp-separator.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input-with-button.json │ │ │ │ │ ├── input-with-label.json │ │ │ │ │ ├── input-with-text.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-demo.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-demo.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── mode-toggle.json │ │ │ │ │ ├── navigation-menu-demo.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── pagination-demo.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-demo.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── progress-demo.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-demo.json │ │ │ │ │ ├── radio-group-form.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-demo-with-handle.json │ │ │ │ │ ├── resizable-demo.json │ │ │ │ │ ├── resizable-handle.json │ │ │ │ │ ├── resizable-vertical.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-demo.json │ │ │ │ │ ├── scroll-area-horizontal-demo.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-demo.json │ │ │ │ │ ├── select-form.json │ │ │ │ │ ├── select-scrollable.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-demo.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-demo.json │ │ │ │ │ ├── sheet-side.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-controlled.json │ │ │ │ │ ├── sidebar-demo.json │ │ │ │ │ ├── sidebar-footer.json │ │ │ │ │ ├── sidebar-group-action.json │ │ │ │ │ ├── sidebar-group-collapsible.json │ │ │ │ │ ├── sidebar-group.json │ │ │ │ │ ├── sidebar-header.json │ │ │ │ │ ├── sidebar-menu-action.json │ │ │ │ │ ├── sidebar-menu-badge.json │ │ │ │ │ ├── sidebar-menu-collapsible.json │ │ │ │ │ ├── sidebar-menu-sub.json │ │ │ │ │ ├── sidebar-menu.json │ │ │ │ │ ├── sidebar-rsc.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── sink.json │ │ │ │ │ ├── skeleton-card.json │ │ │ │ │ ├── skeleton-demo.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-demo.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-demo.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-demo.json │ │ │ │ │ ├── switch-form.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-demo.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-demo.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-demo.json │ │ │ │ │ ├── textarea-disabled.json │ │ │ │ │ ├── textarea-form.json │ │ │ │ │ ├── textarea-with-button.json │ │ │ │ │ ├── textarea-with-label.json │ │ │ │ │ ├── textarea-with-text.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── theme-daylight.json │ │ │ │ │ ├── theme-emerald.json │ │ │ │ │ ├── theme-midnight.json │ │ │ │ │ ├── toast-demo.json │ │ │ │ │ ├── toast-destructive.json │ │ │ │ │ ├── toast-simple.json │ │ │ │ │ ├── toast-with-action.json │ │ │ │ │ ├── toast-with-title.json │ │ │ │ │ ├── toast.json │ │ │ │ │ ├── toggle-demo.json │ │ │ │ │ ├── toggle-disabled.json │ │ │ │ │ ├── toggle-group-demo.json │ │ │ │ │ ├── toggle-group-disabled.json │ │ │ │ │ ├── toggle-group-lg.json │ │ │ │ │ ├── toggle-group-outline.json │ │ │ │ │ ├── toggle-group-single.json │ │ │ │ │ ├── toggle-group-sm.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle-lg.json │ │ │ │ │ ├── toggle-outline.json │ │ │ │ │ ├── toggle-sm.json │ │ │ │ │ ├── toggle-with-text.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-demo.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── typography-blockquote.json │ │ │ │ │ ├── typography-demo.json │ │ │ │ │ ├── typography-h1.json │ │ │ │ │ ├── typography-h2.json │ │ │ │ │ ├── typography-h3.json │ │ │ │ │ ├── typography-h4.json │ │ │ │ │ ├── typography-inline-code.json │ │ │ │ │ ├── typography-large.json │ │ │ │ │ ├── typography-lead.json │ │ │ │ │ ├── typography-list.json │ │ │ │ │ ├── typography-muted.json │ │ │ │ │ ├── typography-p.json │ │ │ │ │ ├── typography-small.json │ │ │ │ │ ├── typography-table.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ ├── use-toast.json │ │ │ │ │ ├── utils.json │ │ │ │ │ ├── v0-login-01.json │ │ │ │ │ ├── v0-sidebar-01.json │ │ │ │ │ ├── v0-sidebar-02.json │ │ │ │ │ ├── v0-sidebar-03.json │ │ │ │ │ ├── v0-sidebar-04.json │ │ │ │ │ ├── v0-sidebar-05.json │ │ │ │ │ ├── v0-sidebar-06.json │ │ │ │ │ ├── v0-sidebar-07.json │ │ │ │ │ ├── v0-sidebar-08.json │ │ │ │ │ ├── v0-sidebar-09.json │ │ │ │ │ ├── v0-sidebar-10.json │ │ │ │ │ ├── v0-sidebar-11.json │ │ │ │ │ ├── v0-sidebar-12.json │ │ │ │ │ ├── v0-sidebar-13.json │ │ │ │ │ ├── v0-sidebar-14.json │ │ │ │ │ ├── v0-sidebar-15.json │ │ │ │ │ └── v0-sidebar-16.json │ │ │ │ ├── new-york-v4/ │ │ │ │ │ ├── accordion-demo.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-demo.json │ │ │ │ │ ├── alert-destructive.json │ │ │ │ │ ├── alert-dialog-demo.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-demo.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-demo.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-demo.json │ │ │ │ │ ├── badge-destructive.json │ │ │ │ │ ├── badge-outline.json │ │ │ │ │ ├── badge-secondary.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-demo.json │ │ │ │ │ ├── breadcrumb-dropdown.json │ │ │ │ │ ├── breadcrumb-ellipsis.json │ │ │ │ │ ├── breadcrumb-link.json │ │ │ │ │ ├── breadcrumb-responsive.json │ │ │ │ │ ├── breadcrumb-separator.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-as-child.json │ │ │ │ │ ├── button-default.json │ │ │ │ │ ├── button-demo.json │ │ │ │ │ ├── button-destructive.json │ │ │ │ │ ├── button-ghost.json │ │ │ │ │ ├── button-group-demo.json │ │ │ │ │ ├── button-group-dropdown.json │ │ │ │ │ ├── button-group-input-group.json │ │ │ │ │ ├── button-group-input.json │ │ │ │ │ ├── button-group-nested.json │ │ │ │ │ ├── button-group-orientation.json │ │ │ │ │ ├── button-group-popover.json │ │ │ │ │ ├── button-group-select.json │ │ │ │ │ ├── button-group-separator.json │ │ │ │ │ ├── button-group-size.json │ │ │ │ │ ├── button-group-split.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button-icon.json │ │ │ │ │ ├── button-link.json │ │ │ │ │ ├── button-loading.json │ │ │ │ │ ├── button-outline.json │ │ │ │ │ ├── button-rounded.json │ │ │ │ │ ├── button-secondary.json │ │ │ │ │ ├── button-size.json │ │ │ │ │ ├── button-with-icon.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-01.json │ │ │ │ │ ├── calendar-02.json │ │ │ │ │ ├── calendar-03.json │ │ │ │ │ ├── calendar-04.json │ │ │ │ │ ├── calendar-05.json │ │ │ │ │ ├── calendar-06.json │ │ │ │ │ ├── calendar-07.json │ │ │ │ │ ├── calendar-08.json │ │ │ │ │ ├── calendar-09.json │ │ │ │ │ ├── calendar-10.json │ │ │ │ │ ├── calendar-11.json │ │ │ │ │ ├── calendar-12.json │ │ │ │ │ ├── calendar-13.json │ │ │ │ │ ├── calendar-14.json │ │ │ │ │ ├── calendar-15.json │ │ │ │ │ ├── calendar-16.json │ │ │ │ │ ├── calendar-17.json │ │ │ │ │ ├── calendar-18.json │ │ │ │ │ ├── calendar-19.json │ │ │ │ │ ├── calendar-20.json │ │ │ │ │ ├── calendar-21.json │ │ │ │ │ ├── calendar-22.json │ │ │ │ │ ├── calendar-23.json │ │ │ │ │ ├── calendar-24.json │ │ │ │ │ ├── calendar-25.json │ │ │ │ │ ├── calendar-26.json │ │ │ │ │ ├── calendar-27.json │ │ │ │ │ ├── calendar-28.json │ │ │ │ │ ├── calendar-29.json │ │ │ │ │ ├── calendar-30.json │ │ │ │ │ ├── calendar-31.json │ │ │ │ │ ├── calendar-32.json │ │ │ │ │ ├── calendar-demo.json │ │ │ │ │ ├── calendar-form.json │ │ │ │ │ ├── calendar-hijri.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-demo.json │ │ │ │ │ ├── card-with-form.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── carousel-api.json │ │ │ │ │ ├── carousel-demo.json │ │ │ │ │ ├── carousel-orientation.json │ │ │ │ │ ├── carousel-plugin.json │ │ │ │ │ ├── carousel-size.json │ │ │ │ │ ├── carousel-spacing.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-area-axes.json │ │ │ │ │ ├── chart-area-default.json │ │ │ │ │ ├── chart-area-gradient.json │ │ │ │ │ ├── chart-area-icons.json │ │ │ │ │ ├── chart-area-interactive.json │ │ │ │ │ ├── chart-area-legend.json │ │ │ │ │ ├── chart-area-linear.json │ │ │ │ │ ├── chart-area-stacked-expand.json │ │ │ │ │ ├── chart-area-stacked.json │ │ │ │ │ ├── chart-area-step.json │ │ │ │ │ ├── chart-bar-active.json │ │ │ │ │ ├── chart-bar-default.json │ │ │ │ │ ├── chart-bar-demo-axis.json │ │ │ │ │ ├── chart-bar-demo-grid.json │ │ │ │ │ ├── chart-bar-demo-legend.json │ │ │ │ │ ├── chart-bar-demo-tooltip.json │ │ │ │ │ ├── chart-bar-demo.json │ │ │ │ │ ├── chart-bar-horizontal.json │ │ │ │ │ ├── chart-bar-interactive.json │ │ │ │ │ ├── chart-bar-label-custom.json │ │ │ │ │ ├── chart-bar-label.json │ │ │ │ │ ├── chart-bar-mixed.json │ │ │ │ │ ├── chart-bar-multiple.json │ │ │ │ │ ├── chart-bar-negative.json │ │ │ │ │ ├── chart-bar-stacked.json │ │ │ │ │ ├── chart-line-default.json │ │ │ │ │ ├── chart-line-dots-colors.json │ │ │ │ │ ├── chart-line-dots-custom.json │ │ │ │ │ ├── chart-line-dots.json │ │ │ │ │ ├── chart-line-interactive.json │ │ │ │ │ ├── chart-line-label-custom.json │ │ │ │ │ ├── chart-line-label.json │ │ │ │ │ ├── chart-line-linear.json │ │ │ │ │ ├── chart-line-multiple.json │ │ │ │ │ ├── chart-line-step.json │ │ │ │ │ ├── chart-pie-donut-active.json │ │ │ │ │ ├── chart-pie-donut-text.json │ │ │ │ │ ├── chart-pie-donut.json │ │ │ │ │ ├── chart-pie-interactive.json │ │ │ │ │ ├── chart-pie-label-custom.json │ │ │ │ │ ├── chart-pie-label-list.json │ │ │ │ │ ├── chart-pie-label.json │ │ │ │ │ ├── chart-pie-legend.json │ │ │ │ │ ├── chart-pie-separator-none.json │ │ │ │ │ ├── chart-pie-simple.json │ │ │ │ │ ├── chart-pie-stacked.json │ │ │ │ │ ├── chart-radar-default.json │ │ │ │ │ ├── chart-radar-dots.json │ │ │ │ │ ├── chart-radar-grid-circle-fill.json │ │ │ │ │ ├── chart-radar-grid-circle-no-lines.json │ │ │ │ │ ├── chart-radar-grid-circle.json │ │ │ │ │ ├── chart-radar-grid-custom.json │ │ │ │ │ ├── chart-radar-grid-fill.json │ │ │ │ │ ├── chart-radar-grid-none.json │ │ │ │ │ ├── chart-radar-icons.json │ │ │ │ │ ├── chart-radar-label-custom.json │ │ │ │ │ ├── chart-radar-legend.json │ │ │ │ │ ├── chart-radar-lines-only.json │ │ │ │ │ ├── chart-radar-multiple.json │ │ │ │ │ ├── chart-radar-radius.json │ │ │ │ │ ├── chart-radial-grid.json │ │ │ │ │ ├── chart-radial-label.json │ │ │ │ │ ├── chart-radial-shape.json │ │ │ │ │ ├── chart-radial-simple.json │ │ │ │ │ ├── chart-radial-stacked.json │ │ │ │ │ ├── chart-radial-text.json │ │ │ │ │ ├── chart-tooltip-advanced.json │ │ │ │ │ ├── chart-tooltip-default.json │ │ │ │ │ ├── chart-tooltip-demo.json │ │ │ │ │ ├── chart-tooltip-formatter.json │ │ │ │ │ ├── chart-tooltip-icons.json │ │ │ │ │ ├── chart-tooltip-indicator-line.json │ │ │ │ │ ├── chart-tooltip-indicator-none.json │ │ │ │ │ ├── chart-tooltip-label-custom.json │ │ │ │ │ ├── chart-tooltip-label-formatter.json │ │ │ │ │ ├── chart-tooltip-label-none.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-demo.json │ │ │ │ │ ├── checkbox-disabled.json │ │ │ │ │ ├── checkbox-form-multiple.json │ │ │ │ │ ├── checkbox-form-single.json │ │ │ │ │ ├── checkbox-with-text.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-demo.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-demo.json │ │ │ │ │ ├── combobox-dropdown-menu.json │ │ │ │ │ ├── combobox-form.json │ │ │ │ │ ├── combobox-popover.json │ │ │ │ │ ├── combobox-responsive.json │ │ │ │ │ ├── combobox.json │ │ │ │ │ ├── command-demo.json │ │ │ │ │ ├── command-dialog.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── context-menu-demo.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── data-table-demo.json │ │ │ │ │ ├── date-picker-demo.json │ │ │ │ │ ├── date-picker-form.json │ │ │ │ │ ├── date-picker-with-presets.json │ │ │ │ │ ├── date-picker-with-range.json │ │ │ │ │ ├── dialog-close-button.json │ │ │ │ │ ├── dialog-demo.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── direction.json │ │ │ │ │ ├── drawer-demo.json │ │ │ │ │ ├── drawer-dialog.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-checkboxes.json │ │ │ │ │ ├── dropdown-menu-demo.json │ │ │ │ │ ├── dropdown-menu-dialog.json │ │ │ │ │ ├── dropdown-menu-radio-group.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty-avatar-group.json │ │ │ │ │ ├── empty-avatar.json │ │ │ │ │ ├── empty-background.json │ │ │ │ │ ├── empty-demo.json │ │ │ │ │ ├── empty-icon.json │ │ │ │ │ ├── empty-image.json │ │ │ │ │ ├── empty-input-group.json │ │ │ │ │ ├── empty-muted.json │ │ │ │ │ ├── empty-outline.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── field-badge.json │ │ │ │ │ ├── field-checkbox.json │ │ │ │ │ ├── field-choice-card.json │ │ │ │ │ ├── field-demo.json │ │ │ │ │ ├── field-fieldset.json │ │ │ │ │ ├── field-group.json │ │ │ │ │ ├── field-input.json │ │ │ │ │ ├── field-radio.json │ │ │ │ │ ├── field-responsive.json │ │ │ │ │ ├── field-select.json │ │ │ │ │ ├── field-slider.json │ │ │ │ │ ├── field-switch.json │ │ │ │ │ ├── field-textarea.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── form-next-complex.json │ │ │ │ │ ├── form-next-demo.json │ │ │ │ │ ├── form-rhf-array.json │ │ │ │ │ ├── form-rhf-checkbox.json │ │ │ │ │ ├── form-rhf-complex.json │ │ │ │ │ ├── form-rhf-demo.json │ │ │ │ │ ├── form-rhf-input.json │ │ │ │ │ ├── form-rhf-password.json │ │ │ │ │ ├── form-rhf-radiogroup.json │ │ │ │ │ ├── form-rhf-select.json │ │ │ │ │ ├── form-rhf-switch.json │ │ │ │ │ ├── form-rhf-textarea.json │ │ │ │ │ ├── form-tanstack-array.json │ │ │ │ │ ├── form-tanstack-checkbox.json │ │ │ │ │ ├── form-tanstack-complex.json │ │ │ │ │ ├── form-tanstack-demo.json │ │ │ │ │ ├── form-tanstack-input.json │ │ │ │ │ ├── form-tanstack-radiogroup.json │ │ │ │ │ ├── form-tanstack-select.json │ │ │ │ │ ├── form-tanstack-switch.json │ │ │ │ │ ├── form-tanstack-textarea.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-demo.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-demo.json │ │ │ │ │ ├── input-disabled.json │ │ │ │ │ ├── input-file.json │ │ │ │ │ ├── input-form.json │ │ │ │ │ ├── input-group-align.json │ │ │ │ │ ├── input-group-button-group.json │ │ │ │ │ ├── input-group-button.json │ │ │ │ │ ├── input-group-custom.json │ │ │ │ │ ├── input-group-demo.json │ │ │ │ │ ├── input-group-dropdown.json │ │ │ │ │ ├── input-group-icon.json │ │ │ │ │ ├── input-group-label.json │ │ │ │ │ ├── input-group-select.json │ │ │ │ │ ├── input-group-spinner.json │ │ │ │ │ ├── input-group-text.json │ │ │ │ │ ├── input-group-textarea.json │ │ │ │ │ ├── input-group-tooltip.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-controlled.json │ │ │ │ │ ├── input-otp-demo.json │ │ │ │ │ ├── input-otp-form.json │ │ │ │ │ ├── input-otp-pattern.json │ │ │ │ │ ├── input-otp-separator.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input-with-button.json │ │ │ │ │ ├── input-with-label.json │ │ │ │ │ ├── input-with-text.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item-avatar.json │ │ │ │ │ ├── item-demo.json │ │ │ │ │ ├── item-dropdown.json │ │ │ │ │ ├── item-group.json │ │ │ │ │ ├── item-header.json │ │ │ │ │ ├── item-icon.json │ │ │ │ │ ├── item-image.json │ │ │ │ │ ├── item-link.json │ │ │ │ │ ├── item-select.json │ │ │ │ │ ├── item-size.json │ │ │ │ │ ├── item-variant.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd-button.json │ │ │ │ │ ├── kbd-demo.json │ │ │ │ │ ├── kbd-group.json │ │ │ │ │ ├── kbd-input-group.json │ │ │ │ │ ├── kbd-tooltip.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-demo.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-demo.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── mode-toggle.json │ │ │ │ │ ├── native-select-demo.json │ │ │ │ │ ├── native-select-disabled.json │ │ │ │ │ ├── native-select-groups.json │ │ │ │ │ ├── native-select-invalid.json │ │ │ │ │ ├── native-select.json │ │ │ │ │ ├── navigation-menu-demo.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── otp-01.json │ │ │ │ │ ├── otp-02.json │ │ │ │ │ ├── otp-03.json │ │ │ │ │ ├── otp-04.json │ │ │ │ │ ├── otp-05.json │ │ │ │ │ ├── pagination-demo.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-demo.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── products-01.json │ │ │ │ │ ├── progress-demo.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-demo.json │ │ │ │ │ ├── radio-group-form.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-demo-with-handle.json │ │ │ │ │ ├── resizable-demo.json │ │ │ │ │ ├── resizable-handle.json │ │ │ │ │ ├── resizable-vertical.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-demo.json │ │ │ │ │ ├── scroll-area-horizontal-demo.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-demo.json │ │ │ │ │ ├── select-form.json │ │ │ │ │ ├── select-scrollable.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-demo.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-demo.json │ │ │ │ │ ├── sheet-side.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-controlled.json │ │ │ │ │ ├── sidebar-demo.json │ │ │ │ │ ├── sidebar-footer.json │ │ │ │ │ ├── sidebar-group-action.json │ │ │ │ │ ├── sidebar-group-collapsible.json │ │ │ │ │ ├── sidebar-group.json │ │ │ │ │ ├── sidebar-header.json │ │ │ │ │ ├── sidebar-menu-action.json │ │ │ │ │ ├── sidebar-menu-badge.json │ │ │ │ │ ├── sidebar-menu-collapsible.json │ │ │ │ │ ├── sidebar-menu-sub.json │ │ │ │ │ ├── sidebar-menu.json │ │ │ │ │ ├── sidebar-rsc.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── signup-01.json │ │ │ │ │ ├── signup-02.json │ │ │ │ │ ├── signup-03.json │ │ │ │ │ ├── signup-04.json │ │ │ │ │ ├── signup-05.json │ │ │ │ │ ├── skeleton-card.json │ │ │ │ │ ├── skeleton-demo.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-demo.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-demo.json │ │ │ │ │ ├── sonner-types.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner-badge.json │ │ │ │ │ ├── spinner-basic.json │ │ │ │ │ ├── spinner-button.json │ │ │ │ │ ├── spinner-color.json │ │ │ │ │ ├── spinner-custom.json │ │ │ │ │ ├── spinner-demo.json │ │ │ │ │ ├── spinner-empty.json │ │ │ │ │ ├── spinner-input-group.json │ │ │ │ │ ├── spinner-item.json │ │ │ │ │ ├── spinner-size.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-demo.json │ │ │ │ │ ├── switch-form.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-demo.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-demo.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-demo.json │ │ │ │ │ ├── textarea-disabled.json │ │ │ │ │ ├── textarea-form.json │ │ │ │ │ ├── textarea-with-button.json │ │ │ │ │ ├── textarea-with-label.json │ │ │ │ │ ├── textarea-with-text.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── theme-gray.json │ │ │ │ │ ├── theme-neutral.json │ │ │ │ │ ├── theme-slate.json │ │ │ │ │ ├── theme-stone.json │ │ │ │ │ ├── theme-zinc.json │ │ │ │ │ ├── toast-demo.json │ │ │ │ │ ├── toast-destructive.json │ │ │ │ │ ├── toast-simple.json │ │ │ │ │ ├── toast-with-action.json │ │ │ │ │ ├── toast-with-title.json │ │ │ │ │ ├── toggle-demo.json │ │ │ │ │ ├── toggle-disabled.json │ │ │ │ │ ├── toggle-group-demo.json │ │ │ │ │ ├── toggle-group-disabled.json │ │ │ │ │ ├── toggle-group-lg.json │ │ │ │ │ ├── toggle-group-outline.json │ │ │ │ │ ├── toggle-group-single.json │ │ │ │ │ ├── toggle-group-sm.json │ │ │ │ │ ├── toggle-group-spacing.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle-lg.json │ │ │ │ │ ├── toggle-outline.json │ │ │ │ │ ├── toggle-sm.json │ │ │ │ │ ├── toggle-with-text.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-demo.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── typography-blockquote.json │ │ │ │ │ ├── typography-demo.json │ │ │ │ │ ├── typography-h1.json │ │ │ │ │ ├── typography-h2.json │ │ │ │ │ ├── typography-h3.json │ │ │ │ │ ├── typography-h4.json │ │ │ │ │ ├── typography-inline-code.json │ │ │ │ │ ├── typography-large.json │ │ │ │ │ ├── typography-lead.json │ │ │ │ │ ├── typography-list.json │ │ │ │ │ ├── typography-muted.json │ │ │ │ │ ├── typography-p.json │ │ │ │ │ ├── typography-small.json │ │ │ │ │ ├── typography-table.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ └── utils.json │ │ │ │ ├── radix-lyra/ │ │ │ │ │ ├── accordion-example.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-dialog-example.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert-example.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-example.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-example.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-example.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-example.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-example.json │ │ │ │ │ ├── button-group-example.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-example.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-example.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── cards.json │ │ │ │ │ ├── carousel-example.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-example.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-example.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-example.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-example.json │ │ │ │ │ ├── combobox.json │ │ │ │ │ ├── command-example.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── component-example.json │ │ │ │ │ ├── context-menu-example.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── demo.json │ │ │ │ │ ├── dialog-example.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── direction.json │ │ │ │ │ ├── drawer-example.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-example.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty-example.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── example.json │ │ │ │ │ ├── field-example.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── font-dm-sans.json │ │ │ │ │ ├── font-figtree.json │ │ │ │ │ ├── font-geist-mono.json │ │ │ │ │ ├── font-geist.json │ │ │ │ │ ├── font-heading-dm-sans.json │ │ │ │ │ ├── font-heading-figtree.json │ │ │ │ │ ├── font-heading-geist-mono.json │ │ │ │ │ ├── font-heading-geist.json │ │ │ │ │ ├── font-heading-ibm-plex-sans.json │ │ │ │ │ ├── font-heading-instrument-sans.json │ │ │ │ │ ├── font-heading-inter.json │ │ │ │ │ ├── font-heading-jetbrains-mono.json │ │ │ │ │ ├── font-heading-lora.json │ │ │ │ │ ├── font-heading-manrope.json │ │ │ │ │ ├── font-heading-merriweather.json │ │ │ │ │ ├── font-heading-montserrat.json │ │ │ │ │ ├── font-heading-noto-sans.json │ │ │ │ │ ├── font-heading-noto-serif.json │ │ │ │ │ ├── font-heading-nunito-sans.json │ │ │ │ │ ├── font-heading-outfit.json │ │ │ │ │ ├── font-heading-oxanium.json │ │ │ │ │ ├── font-heading-playfair-display.json │ │ │ │ │ ├── font-heading-public-sans.json │ │ │ │ │ ├── font-heading-raleway.json │ │ │ │ │ ├── font-heading-roboto-slab.json │ │ │ │ │ ├── font-heading-roboto.json │ │ │ │ │ ├── font-heading-source-sans-3.json │ │ │ │ │ ├── font-heading-space-grotesk.json │ │ │ │ │ ├── font-heading-tomorrow.json │ │ │ │ │ ├── font-ibm-plex-sans.json │ │ │ │ │ ├── font-instrument-sans.json │ │ │ │ │ ├── font-inter.json │ │ │ │ │ ├── font-jetbrains-mono.json │ │ │ │ │ ├── font-lora.json │ │ │ │ │ ├── font-manrope.json │ │ │ │ │ ├── font-merriweather.json │ │ │ │ │ ├── font-montserrat.json │ │ │ │ │ ├── font-noto-sans.json │ │ │ │ │ ├── font-noto-serif.json │ │ │ │ │ ├── font-nunito-sans.json │ │ │ │ │ ├── font-outfit.json │ │ │ │ │ ├── font-oxanium.json │ │ │ │ │ ├── font-playfair-display.json │ │ │ │ │ ├── font-public-sans.json │ │ │ │ │ ├── font-raleway.json │ │ │ │ │ ├── font-roboto-slab.json │ │ │ │ │ ├── font-roboto.json │ │ │ │ │ ├── font-source-sans-3.json │ │ │ │ │ ├── font-space-grotesk.json │ │ │ │ │ ├── font-tomorrow.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-example.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-example.json │ │ │ │ │ ├── input-group-example.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-example.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item-example.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd-example.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-example.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-example.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── native-select-example.json │ │ │ │ │ ├── native-select.json │ │ │ │ │ ├── navigation-menu-example.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── pagination-example.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-example.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── preview.json │ │ │ │ │ ├── progress-example.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-example.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-example.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-example.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-example.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-example.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-example.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-example.json │ │ │ │ │ ├── sidebar-floating-example.json │ │ │ │ │ ├── sidebar-icon-example.json │ │ │ │ │ ├── sidebar-inset-example.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── signup-01.json │ │ │ │ │ ├── signup-02.json │ │ │ │ │ ├── signup-03.json │ │ │ │ │ ├── signup-04.json │ │ │ │ │ ├── signup-05.json │ │ │ │ │ ├── skeleton-example.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-example.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-example.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner-example.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-example.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-example.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-example.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-example.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── toggle-example.json │ │ │ │ │ ├── toggle-group-example.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-example.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ └── utils.json │ │ │ │ ├── radix-maia/ │ │ │ │ │ ├── accordion-example.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-dialog-example.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert-example.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-example.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-example.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-example.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-example.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-example.json │ │ │ │ │ ├── button-group-example.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-example.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-example.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── cards.json │ │ │ │ │ ├── carousel-example.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-example.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-example.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-example.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-example.json │ │ │ │ │ ├── combobox.json │ │ │ │ │ ├── command-example.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── component-example.json │ │ │ │ │ ├── context-menu-example.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── demo.json │ │ │ │ │ ├── dialog-example.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── direction.json │ │ │ │ │ ├── drawer-example.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-example.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty-example.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── example.json │ │ │ │ │ ├── field-example.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── font-dm-sans.json │ │ │ │ │ ├── font-figtree.json │ │ │ │ │ ├── font-geist-mono.json │ │ │ │ │ ├── font-geist.json │ │ │ │ │ ├── font-heading-dm-sans.json │ │ │ │ │ ├── font-heading-figtree.json │ │ │ │ │ ├── font-heading-geist-mono.json │ │ │ │ │ ├── font-heading-geist.json │ │ │ │ │ ├── font-heading-ibm-plex-sans.json │ │ │ │ │ ├── font-heading-instrument-sans.json │ │ │ │ │ ├── font-heading-inter.json │ │ │ │ │ ├── font-heading-jetbrains-mono.json │ │ │ │ │ ├── font-heading-lora.json │ │ │ │ │ ├── font-heading-manrope.json │ │ │ │ │ ├── font-heading-merriweather.json │ │ │ │ │ ├── font-heading-montserrat.json │ │ │ │ │ ├── font-heading-noto-sans.json │ │ │ │ │ ├── font-heading-noto-serif.json │ │ │ │ │ ├── font-heading-nunito-sans.json │ │ │ │ │ ├── font-heading-outfit.json │ │ │ │ │ ├── font-heading-oxanium.json │ │ │ │ │ ├── font-heading-playfair-display.json │ │ │ │ │ ├── font-heading-public-sans.json │ │ │ │ │ ├── font-heading-raleway.json │ │ │ │ │ ├── font-heading-roboto-slab.json │ │ │ │ │ ├── font-heading-roboto.json │ │ │ │ │ ├── font-heading-source-sans-3.json │ │ │ │ │ ├── font-heading-space-grotesk.json │ │ │ │ │ ├── font-heading-tomorrow.json │ │ │ │ │ ├── font-ibm-plex-sans.json │ │ │ │ │ ├── font-instrument-sans.json │ │ │ │ │ ├── font-inter.json │ │ │ │ │ ├── font-jetbrains-mono.json │ │ │ │ │ ├── font-lora.json │ │ │ │ │ ├── font-manrope.json │ │ │ │ │ ├── font-merriweather.json │ │ │ │ │ ├── font-montserrat.json │ │ │ │ │ ├── font-noto-sans.json │ │ │ │ │ ├── font-noto-serif.json │ │ │ │ │ ├── font-nunito-sans.json │ │ │ │ │ ├── font-outfit.json │ │ │ │ │ ├── font-oxanium.json │ │ │ │ │ ├── font-playfair-display.json │ │ │ │ │ ├── font-public-sans.json │ │ │ │ │ ├── font-raleway.json │ │ │ │ │ ├── font-roboto-slab.json │ │ │ │ │ ├── font-roboto.json │ │ │ │ │ ├── font-source-sans-3.json │ │ │ │ │ ├── font-space-grotesk.json │ │ │ │ │ ├── font-tomorrow.json │ │ │ │ │ ├── form.json │ │ │ │ │ ├── hover-card-example.json │ │ │ │ │ ├── hover-card.json │ │ │ │ │ ├── index.json │ │ │ │ │ ├── input-example.json │ │ │ │ │ ├── input-group-example.json │ │ │ │ │ ├── input-group.json │ │ │ │ │ ├── input-otp-example.json │ │ │ │ │ ├── input-otp.json │ │ │ │ │ ├── input.json │ │ │ │ │ ├── item-example.json │ │ │ │ │ ├── item.json │ │ │ │ │ ├── kbd-example.json │ │ │ │ │ ├── kbd.json │ │ │ │ │ ├── label-example.json │ │ │ │ │ ├── label.json │ │ │ │ │ ├── login-01.json │ │ │ │ │ ├── login-02.json │ │ │ │ │ ├── login-03.json │ │ │ │ │ ├── login-04.json │ │ │ │ │ ├── login-05.json │ │ │ │ │ ├── menubar-example.json │ │ │ │ │ ├── menubar.json │ │ │ │ │ ├── native-select-example.json │ │ │ │ │ ├── native-select.json │ │ │ │ │ ├── navigation-menu-example.json │ │ │ │ │ ├── navigation-menu.json │ │ │ │ │ ├── pagination-example.json │ │ │ │ │ ├── pagination.json │ │ │ │ │ ├── popover-example.json │ │ │ │ │ ├── popover.json │ │ │ │ │ ├── preview.json │ │ │ │ │ ├── progress-example.json │ │ │ │ │ ├── progress.json │ │ │ │ │ ├── radio-group-example.json │ │ │ │ │ ├── radio-group.json │ │ │ │ │ ├── registry.json │ │ │ │ │ ├── resizable-example.json │ │ │ │ │ ├── resizable.json │ │ │ │ │ ├── scroll-area-example.json │ │ │ │ │ ├── scroll-area.json │ │ │ │ │ ├── select-example.json │ │ │ │ │ ├── select.json │ │ │ │ │ ├── separator-example.json │ │ │ │ │ ├── separator.json │ │ │ │ │ ├── sheet-example.json │ │ │ │ │ ├── sheet.json │ │ │ │ │ ├── sidebar-01.json │ │ │ │ │ ├── sidebar-02.json │ │ │ │ │ ├── sidebar-03.json │ │ │ │ │ ├── sidebar-04.json │ │ │ │ │ ├── sidebar-05.json │ │ │ │ │ ├── sidebar-06.json │ │ │ │ │ ├── sidebar-07.json │ │ │ │ │ ├── sidebar-08.json │ │ │ │ │ ├── sidebar-09.json │ │ │ │ │ ├── sidebar-10.json │ │ │ │ │ ├── sidebar-11.json │ │ │ │ │ ├── sidebar-12.json │ │ │ │ │ ├── sidebar-13.json │ │ │ │ │ ├── sidebar-14.json │ │ │ │ │ ├── sidebar-15.json │ │ │ │ │ ├── sidebar-16.json │ │ │ │ │ ├── sidebar-example.json │ │ │ │ │ ├── sidebar-floating-example.json │ │ │ │ │ ├── sidebar-icon-example.json │ │ │ │ │ ├── sidebar-inset-example.json │ │ │ │ │ ├── sidebar.json │ │ │ │ │ ├── signup-01.json │ │ │ │ │ ├── signup-02.json │ │ │ │ │ ├── signup-03.json │ │ │ │ │ ├── signup-04.json │ │ │ │ │ ├── signup-05.json │ │ │ │ │ ├── skeleton-example.json │ │ │ │ │ ├── skeleton.json │ │ │ │ │ ├── slider-example.json │ │ │ │ │ ├── slider.json │ │ │ │ │ ├── sonner-example.json │ │ │ │ │ ├── sonner.json │ │ │ │ │ ├── spinner-example.json │ │ │ │ │ ├── spinner.json │ │ │ │ │ ├── style.json │ │ │ │ │ ├── switch-example.json │ │ │ │ │ ├── switch.json │ │ │ │ │ ├── table-example.json │ │ │ │ │ ├── table.json │ │ │ │ │ ├── tabs-example.json │ │ │ │ │ ├── tabs.json │ │ │ │ │ ├── textarea-example.json │ │ │ │ │ ├── textarea.json │ │ │ │ │ ├── toggle-example.json │ │ │ │ │ ├── toggle-group-example.json │ │ │ │ │ ├── toggle-group.json │ │ │ │ │ ├── toggle.json │ │ │ │ │ ├── tooltip-example.json │ │ │ │ │ ├── tooltip.json │ │ │ │ │ ├── use-mobile.json │ │ │ │ │ └── utils.json │ │ │ │ ├── radix-mira/ │ │ │ │ │ ├── accordion-example.json │ │ │ │ │ ├── accordion.json │ │ │ │ │ ├── alert-dialog-example.json │ │ │ │ │ ├── alert-dialog.json │ │ │ │ │ ├── alert-example.json │ │ │ │ │ ├── alert.json │ │ │ │ │ ├── aspect-ratio-example.json │ │ │ │ │ ├── aspect-ratio.json │ │ │ │ │ ├── avatar-example.json │ │ │ │ │ ├── avatar.json │ │ │ │ │ ├── badge-example.json │ │ │ │ │ ├── badge.json │ │ │ │ │ ├── breadcrumb-example.json │ │ │ │ │ ├── breadcrumb.json │ │ │ │ │ ├── button-example.json │ │ │ │ │ ├── button-group-example.json │ │ │ │ │ ├── button-group.json │ │ │ │ │ ├── button.json │ │ │ │ │ ├── calendar-example.json │ │ │ │ │ ├── calendar.json │ │ │ │ │ ├── card-example.json │ │ │ │ │ ├── card.json │ │ │ │ │ ├── cards.json │ │ │ │ │ ├── carousel-example.json │ │ │ │ │ ├── carousel.json │ │ │ │ │ ├── chart-example.json │ │ │ │ │ ├── chart.json │ │ │ │ │ ├── checkbox-example.json │ │ │ │ │ ├── checkbox.json │ │ │ │ │ ├── collapsible-example.json │ │ │ │ │ ├── collapsible.json │ │ │ │ │ ├── combobox-example.json │ │ │ │ │ ├── combobox.json │ │ │ │ │ ├── command-example.json │ │ │ │ │ ├── command.json │ │ │ │ │ ├── component-example.json │ │ │ │ │ ├── context-menu-example.json │ │ │ │ │ ├── context-menu.json │ │ │ │ │ ├── dashboard-01.json │ │ │ │ │ ├── demo.json │ │ │ │ │ ├── dialog-example.json │ │ │ │ │ ├── dialog.json │ │ │ │ │ ├── direction.json │ │ │ │ │ ├── drawer-example.json │ │ │ │ │ ├── drawer.json │ │ │ │ │ ├── dropdown-menu-example.json │ │ │ │ │ ├── dropdown-menu.json │ │ │ │ │ ├── empty-example.json │ │ │ │ │ ├── empty.json │ │ │ │ │ ├── example.json │ │ │ │ │ ├── field-example.json │ │ │ │ │ ├── field.json │ │ │ │ │ ├── font-dm-sans.json │ │ │ │ │ ├── font-figtree.json │ │ │ │ │ ├── font-geist-mono.json │ │ │ │ │ ├── font-geist.json │ │ │ │ │ ├── font-heading-dm-sans.json │ │ │ │ │ ├── font-heading-figtree.json │ │ │ │ │ ├── font-heading-geist-mono.json │ │ │ │ │ ├── font-heading-geist.json │ │ │ │ │ ├── font-heading-ibm-plex-sans.json │ │ │ │ │ ├── font-heading-instrument-sans.json │ │ │ │ │ ├── font-heading-inter.json │ │ │ │ │ ├── font-heading-jetbrains-mono.json │ │ │ │ │ ├── font-heading-lora.json │ │ │ │ │ ├── font-heading-manrope.json │ │ │ │ │ ├── font-heading-merriweather.json │ │ │ │ │ ├── font-heading-montserrat.json │ │ │ │ │ ├── font-heading-noto-sans.json │ │ │ │ │ ├── font-heading-noto-serif.json │ │ │ │ │ ├── font-heading-nunito-sans.json │ │ │ │ │ ├── font-heading-outfit.json │ │ │ │ │ ├── font-heading-oxanium.json │ │ │ │ │ ├── font-heading-playfair-display.json │ │ │ │ │ ├── font-heading-public-sans.json │ │ │ │ │ ├── font-heading-raleway.json │ │ │ │ │ ├── font-heading-roboto-s
Showing preview only (622K chars total). Download the full file or copy to clipboard to get everything.
SYMBOL INDEX (6320 symbols across 2617 files)
FILE: apps/v4/app/(app)/(root)/components/appearance-settings.tsx
function AppearanceSettings (line 22) | function AppearanceSettings() {
FILE: apps/v4/app/(app)/(root)/components/button-group-demo.tsx
function ButtonGroupDemo (line 31) | function ButtonGroupDemo() {
FILE: apps/v4/app/(app)/(root)/components/button-group-input-group.tsx
function ButtonGroupInputGroup (line 19) | function ButtonGroupInputGroup() {
FILE: apps/v4/app/(app)/(root)/components/button-group-nested.tsx
function ButtonGroupNested (line 7) | function ButtonGroupNested() {
FILE: apps/v4/app/(app)/(root)/components/button-group-popover.tsx
function ButtonGroupPopover (line 12) | function ButtonGroupPopover() {
FILE: apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx
function EmptyAvatarGroup (line 18) | function EmptyAvatarGroup() {
FILE: apps/v4/app/(app)/(root)/components/empty-input-group.tsx
function EmptyInputGroup (line 17) | function EmptyInputGroup() {
FILE: apps/v4/app/(app)/(root)/components/field-checkbox.tsx
function FieldCheckbox (line 4) | function FieldCheckbox() {
FILE: apps/v4/app/(app)/(root)/components/field-choice-card.tsx
function FieldChoiceCard (line 15) | function FieldChoiceCard() {
FILE: apps/v4/app/(app)/(root)/components/field-demo.tsx
function FieldDemo (line 23) | function FieldDemo() {
FILE: apps/v4/app/(app)/(root)/components/field-hear.tsx
function FieldHear (line 33) | function FieldHear() {
FILE: apps/v4/app/(app)/(root)/components/field-slider.tsx
function FieldSlider (line 7) | function FieldSlider() {
FILE: apps/v4/app/(app)/(root)/components/index.tsx
function RootComponents (line 20) | function RootComponents() {
FILE: apps/v4/app/(app)/(root)/components/input-group-button.tsx
function InputGroupButtonExample (line 18) | function InputGroupButtonExample() {
FILE: apps/v4/app/(app)/(root)/components/input-group-demo.tsx
function InputGroupDemo (line 24) | function InputGroupDemo() {
FILE: apps/v4/app/(app)/(root)/components/input-group-textarea.tsx
function InputGroupTextareaExample (line 16) | function InputGroupTextareaExample() {
FILE: apps/v4/app/(app)/(root)/components/item-avatar.tsx
function ItemAvatar (line 18) | function ItemAvatar() {
FILE: apps/v4/app/(app)/(root)/components/item-demo.tsx
function ItemDemo (line 12) | function ItemDemo() {
FILE: apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
constant SAMPLE_DATA (line 57) | const SAMPLE_DATA = {
function MentionableIcon (line 142) | function MentionableIcon({
function NotionPromptForm (line 159) | function NotionPromptForm() {
FILE: apps/v4/app/(app)/(root)/components/spinner-badge.tsx
function SpinnerBadge (line 4) | function SpinnerBadge() {
FILE: apps/v4/app/(app)/(root)/components/spinner-empty.tsx
function SpinnerEmpty (line 12) | function SpinnerEmpty() {
FILE: apps/v4/app/(app)/(root)/page.tsx
function IndexPage (line 50) | function IndexPage() {
FILE: apps/v4/app/(app)/blocks/[...categories]/page.tsx
function generateStaticParams (line 10) | async function generateStaticParams() {
function BlocksPage (line 16) | async function BlocksPage({
FILE: apps/v4/app/(app)/blocks/layout.tsx
function BlocksLayout (line 43) | function BlocksLayout({
FILE: apps/v4/app/(app)/blocks/page.tsx
constant FEATURED_BLOCKS (line 10) | const FEATURED_BLOCKS = [
function BlocksPage (line 18) | async function BlocksPage() {
FILE: apps/v4/app/(app)/charts/[type]/page.tsx
type ChartPageProps (line 17) | interface ChartPageProps {
type ChartType (line 32) | type ChartType = (typeof chartTypes)[number]
function generateStaticParams (line 34) | async function generateStaticParams() {
function ChartPage (line 40) | async function ChartPage({ params }: ChartPageProps) {
FILE: apps/v4/app/(app)/charts/charts.tsx
type ChartComponent (line 74) | type ChartComponent = React.ComponentType
type ChartItem (line 76) | interface ChartItem {
type ChartGroups (line 82) | interface ChartGroups {
FILE: apps/v4/app/(app)/charts/layout.tsx
function ChartsLayout (line 44) | function ChartsLayout({
FILE: apps/v4/app/(app)/colors/layout.tsx
function ColorsLayout (line 42) | function ColorsLayout({
FILE: apps/v4/app/(app)/colors/page.tsx
function ColorsPage (line 7) | function ColorsPage() {
FILE: apps/v4/app/(app)/docs/[[...slug]]/page.tsx
function generateStaticParams (line 19) | function generateStaticParams() {
function generateMetadata (line 23) | async function generateMetadata(props: {
function Page (line 71) | async function Page(props: {
FILE: apps/v4/app/(app)/docs/changelog/page.tsx
function generateMetadata (line 13) | function generateMetadata() {
function ChangelogPage (line 35) | function ChangelogPage() {
FILE: apps/v4/app/(app)/docs/layout.tsx
function DocsLayout (line 5) | function DocsLayout({
FILE: apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx
function UserAuthForm (line 17) | function UserAuthForm({
FILE: apps/v4/app/(app)/examples/authentication/page.tsx
function AuthenticationPage (line 15) | function AuthenticationPage() {
FILE: apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
function AppSidebar (line 154) | function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
FILE: apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
function ChartAreaInteractive (line 143) | function ChartAreaInteractive() {
FILE: apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
function DragHandle (line 120) | function DragHandle({ id }: { id: number }) {
function DraggableRow (line 314) | function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
function DataTable (line 339) | function DataTable({
function TableCellViewer (line 650) | function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
FILE: apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
function NavDocuments (line 28) | function NavDocuments({
FILE: apps/v4/app/(app)/examples/dashboard/components/nav-main.tsx
function NavMain (line 14) | function NavMain({
FILE: apps/v4/app/(app)/examples/dashboard/components/nav-secondary.tsx
function NavSecondary (line 14) | function NavSecondary({
FILE: apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
function NavUser (line 32) | function NavUser({
FILE: apps/v4/app/(app)/examples/dashboard/components/section-cards.tsx
function SectionCards (line 13) | function SectionCards() {
FILE: apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
function SiteHeader (line 5) | function SiteHeader() {
FILE: apps/v4/app/(app)/examples/dashboard/page.tsx
function Page (line 15) | function Page() {
FILE: apps/v4/app/(app)/examples/layout.tsx
function ExamplesLayout (line 47) | function ExamplesLayout({
FILE: apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
function CodeViewer (line 11) | function CodeViewer() {
FILE: apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
type MaxLengthSelectorProps (line 14) | interface MaxLengthSelectorProps {
function MaxLengthSelector (line 20) | function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
FILE: apps/v4/app/(app)/examples/playground/components/model-selector.tsx
type ModelSelectorProps (line 32) | interface ModelSelectorProps
function ModelSelector (line 38) | function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
type ModelItemProps (line 128) | interface ModelItemProps {
function ModelItem (line 135) | function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemPro...
FILE: apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
function PresetActions (line 36) | function PresetActions() {
FILE: apps/v4/app/(app)/examples/playground/components/preset-save.tsx
function PresetSave (line 15) | function PresetSave() {
FILE: apps/v4/app/(app)/examples/playground/components/preset-selector.tsx
type PresetSelectorProps (line 26) | interface PresetSelectorProps
function PresetSelector (line 31) | function PresetSelector({ presets, ...props }: PresetSelectorProps) {
FILE: apps/v4/app/(app)/examples/playground/components/preset-share.tsx
function PresetShare (line 12) | function PresetShare() {
FILE: apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
type TemperatureSelectorProps (line 14) | interface TemperatureSelectorProps {
function TemperatureSelector (line 20) | function TemperatureSelector({
FILE: apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
type TopPSelectorProps (line 14) | interface TopPSelectorProps {
function TopPSelector (line 20) | function TopPSelector({ defaultValue }: TopPSelectorProps) {
FILE: apps/v4/app/(app)/examples/playground/data/models.ts
type ModelType (line 3) | type ModelType = (typeof types)[number]
type Model (line 5) | interface Model<Type = string> {
FILE: apps/v4/app/(app)/examples/playground/data/presets.ts
type Preset (line 1) | interface Preset {
FILE: apps/v4/app/(app)/examples/playground/page.tsx
function PlaygroundPage (line 38) | function PlaygroundPage() {
FILE: apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx
function AppearanceSettings (line 59) | function AppearanceSettings() {
FILE: apps/v4/app/(app)/examples/rtl/components/button-group-demo.tsx
function ButtonGroupDemo (line 69) | function ButtonGroupDemo() {
FILE: apps/v4/app/(app)/examples/rtl/components/button-group-input-group.tsx
function ButtonGroupInputGroup (line 38) | function ButtonGroupInputGroup() {
FILE: apps/v4/app/(app)/examples/rtl/components/button-group-nested.tsx
function formatNumber (line 24) | function formatNumber(value: number, locale: string) {
function ButtonGroupNested (line 28) | function ButtonGroupNested() {
FILE: apps/v4/app/(app)/examples/rtl/components/button-group-popover.tsx
function ButtonGroupPopover (line 39) | function ButtonGroupPopover() {
FILE: apps/v4/app/(app)/examples/rtl/components/empty-avatar-group.tsx
function EmptyAvatarGroup (line 37) | function EmptyAvatarGroup() {
FILE: apps/v4/app/(app)/examples/rtl/components/field-checkbox.tsx
function FieldCheckbox (line 19) | function FieldCheckbox() {
FILE: apps/v4/app/(app)/examples/rtl/components/field-demo.tsx
function formatCardNumber (line 70) | function formatCardNumber(locale: string) {
function formatCvv (line 75) | function formatCvv(locale: string) {
function getMonths (line 79) | function getMonths(locale: string) {
function getYears (line 90) | function getYears(locale: string) {
function FieldDemo (line 98) | function FieldDemo() {
FILE: apps/v4/app/(app)/examples/rtl/components/field-hear.tsx
function FieldHear (line 38) | function FieldHear() {
FILE: apps/v4/app/(app)/examples/rtl/components/field-slider.tsx
function formatNumber (line 32) | function formatNumber(value: number, locale: string) {
function FieldSlider (line 36) | function FieldSlider() {
FILE: apps/v4/app/(app)/examples/rtl/components/index.tsx
function RtlComponentsContent (line 29) | function RtlComponentsContent() {
function RtlComponents (line 84) | function RtlComponents() {
FILE: apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx
function InputGroupButtonExample (line 41) | function InputGroupButtonExample() {
FILE: apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
function InputGroupDemo (line 64) | function InputGroupDemo() {
FILE: apps/v4/app/(app)/examples/rtl/components/item-demo.tsx
function ItemDemo (line 33) | function ItemDemo() {
FILE: apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx
function MentionableIcon (line 140) | function MentionableIcon({
function NotionPromptForm (line 157) | function NotionPromptForm() {
FILE: apps/v4/app/(app)/examples/rtl/components/spinner-badge.tsx
function SpinnerBadge (line 23) | function SpinnerBadge() {
FILE: apps/v4/app/(app)/examples/rtl/components/spinner-empty.tsx
function SpinnerEmpty (line 31) | function SpinnerEmpty() {
FILE: apps/v4/app/(app)/examples/rtl/page.tsx
function RtlPage (line 10) | function RtlPage() {
FILE: apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
type DataTableColumnHeaderProps (line 14) | interface DataTableColumnHeaderProps<TData, TValue>
function DataTableColumnHeader (line 20) | function DataTableColumnHeader<TData, TValue>({
FILE: apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
type DataTableFacetedFilterProps (line 24) | interface DataTableFacetedFilterProps<TData, TValue> {
function DataTableFacetedFilter (line 34) | function DataTableFacetedFilter<TData, TValue>({
FILE: apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
type DataTablePaginationProps (line 18) | interface DataTablePaginationProps<TData> {
function DataTablePagination (line 22) | function DataTablePagination<TData>({
FILE: apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
type DataTableRowActionsProps (line 24) | interface DataTableRowActionsProps<TData> {
function DataTableRowActions (line 28) | function DataTableRowActions<TData>({
FILE: apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx
type DataTableToolbarProps (line 13) | interface DataTableToolbarProps<TData> {
function DataTableToolbar (line 17) | function DataTableToolbar<TData>({
FILE: apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx
function DataTableViewOptions (line 16) | function DataTableViewOptions<TData>({
FILE: apps/v4/app/(app)/examples/tasks/components/data-table.tsx
type DataTableProps (line 31) | interface DataTableProps<TData, TValue> {
function DataTable (line 36) | function DataTable<TData, TValue>({
FILE: apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
function UserNav (line 18) | function UserNav() {
FILE: apps/v4/app/(app)/examples/tasks/data/schema.ts
type Task (line 13) | type Task = z.infer<typeof taskSchema>
FILE: apps/v4/app/(app)/examples/tasks/page.tsx
function getTasks (line 18) | async function getTasks() {
function TaskPage (line 28) | async function TaskPage() {
FILE: apps/v4/app/(app)/layout.tsx
function AppLayout (line 4) | function AppLayout({ children }: { children: React.ReactNode }) {
FILE: apps/v4/app/(app)/llm/[[...slug]]/route.ts
function getStyleFromSlug (line 10) | function getStyleFromSlug(slug: string[] | undefined, fallbackStyle: str...
function GET (line 23) | async function GET(
function generateStaticParams (line 49) | function generateStaticParams() {
FILE: apps/v4/app/(app)/themes/layout.tsx
function ThemesLayout (line 41) | function ThemesLayout({
FILE: apps/v4/app/(app)/themes/page.tsx
function ThemesPage (line 7) | function ThemesPage() {
FILE: apps/v4/app/(create)/components/accent-picker.tsx
function MenuAccentPicker (line 15) | function MenuAccentPicker({
FILE: apps/v4/app/(create)/components/action-menu.tsx
constant CMD_K_FORWARD_TYPE (line 17) | const CMD_K_FORWARD_TYPE = "cmd-k-forward"
function ActionMenu (line 19) | function ActionMenu({
function ActionMenuScript (line 62) | function ActionMenuScript() {
FILE: apps/v4/app/(create)/components/base-color-picker.tsx
function BaseColorPicker (line 18) | function BaseColorPicker({
FILE: apps/v4/app/(create)/components/base-picker.tsx
function BasePicker (line 16) | function BasePicker({
FILE: apps/v4/app/(create)/components/chart-color-picker.tsx
function ChartColorPicker (line 23) | function ChartColorPicker({
FILE: apps/v4/app/(create)/components/copy-preset.tsx
function CopyPreset (line 10) | function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
FILE: apps/v4/app/(create)/components/customizer.tsx
function Customizer (line 34) | function Customizer({
FILE: apps/v4/app/(create)/components/design-system-provider.tsx
constant THEME_STYLE_ELEMENT_ID (line 17) | const THEME_STYLE_ELEMENT_ID = "design-system-theme-vars"
constant MANAGED_BODY_CLASS_PREFIXES (line 18) | const MANAGED_BODY_CLASS_PREFIXES = ["style-", "base-color-"] as const
type RegistryThemeCssVars (line 20) | type RegistryThemeCssVars = NonNullable<
function removeManagedBodyClasses (line 24) | function removeManagedBodyClasses(body: Element) {
function buildCssRule (line 34) | function buildCssRule(selector: string, cssVars?: Record<string, string>) {
function buildThemeCssText (line 47) | function buildThemeCssText(cssVars: RegistryThemeCssVars) {
function DesignSystemProvider (line 57) | function DesignSystemProvider({
FILE: apps/v4/app/(create)/components/font-picker.tsx
type FontPickerOption (line 22) | type FontPickerOption = {
function FontPicker (line 33) | function FontPicker({
FILE: apps/v4/app/(create)/components/history-buttons.tsx
constant UNDO_FORWARD_TYPE (line 10) | const UNDO_FORWARD_TYPE = "undo-forward"
constant REDO_FORWARD_TYPE (line 11) | const REDO_FORWARD_TYPE = "redo-forward"
function HistoryButtons (line 13) | function HistoryButtons() {
function HistoryScript (line 42) | function HistoryScript() {
FILE: apps/v4/app/(create)/components/icon-library-picker.tsx
function IconLibraryPicker (line 112) | function IconLibraryPicker({
FILE: apps/v4/app/(create)/components/icon-placeholder.tsx
function IconPlaceholder (line 48) | function IconPlaceholder({
FILE: apps/v4/app/(create)/components/item-explorer.tsx
function ItemExplorer (line 33) | function ItemExplorer({
FILE: apps/v4/app/(create)/components/lock-button.tsx
function LockButton (line 12) | function LockButton({
FILE: apps/v4/app/(create)/components/main-menu.tsx
constant APPLE_PLATFORM_REGEX (line 24) | const APPLE_PLATFORM_REGEX = /Mac|iPhone|iPad|iPod/
function MainMenu (line 26) | function MainMenu({ className }: React.ComponentProps<typeof Button>) {
FILE: apps/v4/app/(create)/components/menu-picker.tsx
type ColorChoice (line 26) | type ColorChoice = "default" | "inverted"
type SurfaceChoice (line 27) | type SurfaceChoice = "solid" | "translucent"
function getMenuColorValue (line 29) | function getMenuColorValue(
constant MENU_OPTIONS (line 40) | const MENU_OPTIONS: { value: MenuColorValue; label: string }[] = [
function MenuColorPicker (line 47) | function MenuColorPicker({
FILE: apps/v4/app/(create)/components/mode-switcher.tsx
constant DARK_MODE_FORWARD_TYPE (line 10) | const DARK_MODE_FORWARD_TYPE = "dark-mode-forward"
function ModeSwitcher (line 12) | function ModeSwitcher({
function DarkModeScript (line 53) | function DarkModeScript() {
FILE: apps/v4/app/(create)/components/picker.tsx
function Picker (line 9) | function Picker({ ...props }: MenuPrimitive.Root.Props) {
function PickerPortal (line 13) | function PickerPortal({ ...props }: MenuPrimitive.Portal.Props) {
function PickerTrigger (line 17) | function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Pr...
function PickerContent (line 30) | function PickerContent({
function PickerGroup (line 67) | function PickerGroup({ ...props }: MenuPrimitive.Group.Props) {
function PickerLabel (line 71) | function PickerLabel({
function PickerItem (line 91) | function PickerItem({
function PickerSub (line 114) | function PickerSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
function PickerSubTrigger (line 118) | function PickerSubTrigger({
function PickerSubContent (line 149) | function PickerSubContent({
function PickerCheckboxItem (line 173) | function PickerCheckboxItem({
function PickerRadioGroup (line 205) | function PickerRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
function PickerRadioItem (line 214) | function PickerRadioItem({
function PickerSeparator (line 248) | function PickerSeparator({
function PickerShortcut (line 264) | function PickerShortcut({ className, ...props }: React.ComponentProps<"s...
FILE: apps/v4/app/(create)/components/preset-handler.tsx
function PresetHandler (line 9) | function PresetHandler() {
FILE: apps/v4/app/(create)/components/preset-picker.tsx
function PresetPicker (line 16) | function PresetPicker({
FILE: apps/v4/app/(create)/components/preview-style.tsx
function PreviewStyle (line 3) | function PreviewStyle() {
FILE: apps/v4/app/(create)/components/preview.tsx
constant MAC_REGEX (line 19) | const MAC_REGEX = /Mac|iPhone|iPad|iPod/
function handleMessage (line 22) | function handleMessage(event: MessageEvent) {
function Preview (line 84) | function Preview() {
FILE: apps/v4/app/(create)/components/project-form.tsx
constant TURBOREPO_LOGO (line 51) | const TURBOREPO_LOGO =
constant ORIGIN (line 53) | const ORIGIN = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:4000"
constant IS_LOCAL_DEV (line 54) | const IS_LOCAL_DEV = ORIGIN.includes("localhost")
constant SHADCN_VERSION (line 55) | const SHADCN_VERSION = process.env.NEXT_PUBLIC_RC ? "@rc" : "@latest"
constant PACKAGE_MANAGERS (line 56) | const PACKAGE_MANAGERS = ["pnpm", "npm", "yarn", "bun"] as const
type PackageManager (line 57) | type PackageManager = (typeof PACKAGE_MANAGERS)[number]
function ProjectForm (line 59) | function ProjectForm({
FILE: apps/v4/app/(create)/components/radius-picker.tsx
function RadiusPicker (line 18) | function RadiusPicker({
FILE: apps/v4/app/(create)/components/random-button.tsx
constant RANDOMIZE_FORWARD_TYPE (line 11) | const RANDOMIZE_FORWARD_TYPE = "randomize-forward"
function RandomButton (line 13) | function RandomButton({
function RandomizeScript (line 35) | function RandomizeScript() {
FILE: apps/v4/app/(create)/components/reset-button.tsx
function ResetDialog (line 16) | function ResetDialog() {
FILE: apps/v4/app/(create)/components/share-button.tsx
function ShareButton (line 12) | function ShareButton() {
FILE: apps/v4/app/(create)/components/style-picker.tsx
function StylePicker (line 17) | function StylePicker({
FILE: apps/v4/app/(create)/components/theme-picker.tsx
function ThemePicker (line 19) | function ThemePicker({
FILE: apps/v4/app/(create)/components/v0-button.tsx
function V0Button (line 13) | function V0Button({ className }: { className?: string }) {
FILE: apps/v4/app/(create)/components/welcome-dialog.tsx
constant STORAGE_KEY (line 17) | const STORAGE_KEY = "shadcn-create-welcome-dialog"
function WelcomeDialog (line 19) | function WelcomeDialog() {
FILE: apps/v4/app/(create)/create/layout.tsx
function CreateLayout (line 6) | function CreateLayout({
FILE: apps/v4/app/(create)/create/page.tsx
function CreatePage (line 41) | async function CreatePage() {
FILE: apps/v4/app/(create)/hooks/use-action-menu.ts
constant ACTION_MENU_OPEN_KEY (line 10) | const ACTION_MENU_OPEN_KEY = "create:action-menu-open"
type ActionMenuItem (line 12) | type ActionMenuItem = {
type ActionMenuGroup (line 19) | type ActionMenuGroup = {
type ActionMenuSourceItem (line 25) | type ActionMenuSourceItem = Pick<RegistryItem, "name" | "title" | "type">
constant SEARCH_KEYWORDS (line 27) | const SEARCH_KEYWORDS: Record<string, string> = {
function sortRegistryGroups (line 32) | function sortRegistryGroups(groups: ReturnType<typeof groupItemsByType>) {
function useActionMenu (line 47) | function useActionMenu(
function useActionMenuTrigger (line 127) | function useActionMenuTrigger() {
FILE: apps/v4/app/(create)/hooks/use-design-system.ts
function usePresetCode (line 7) | function usePresetCode() {
FILE: apps/v4/app/(create)/hooks/use-history.tsx
type HistoryContextValue (line 6) | type HistoryContextValue = {
function HistoryProvider (line 15) | function HistoryProvider({ children }: { children: React.ReactNode }) {
function useHistory (line 139) | function useHistory() {
FILE: apps/v4/app/(create)/hooks/use-iframe-sync.tsx
type ParentToIframeMessage (line 7) | type ParentToIframeMessage = {
function useIframeMessageListener (line 19) | function useIframeMessageListener<
function sendToIframe (line 50) | function sendToIframe<
FILE: apps/v4/app/(create)/hooks/use-locks.tsx
type LockableParam (line 5) | type LockableParam =
type LocksContextValue (line 17) | type LocksContextValue = {
function LocksProvider (line 25) | function LocksProvider({ children }: { children: React.ReactNode }) {
function useLocks (line 53) | function useLocks() {
FILE: apps/v4/app/(create)/hooks/use-random.tsx
function randomItem (line 27) | function randomItem<T>(array: readonly T[]): T {
function useRandom (line 31) | function useRandom() {
FILE: apps/v4/app/(create)/hooks/use-reset.tsx
constant RESET_DIALOG_KEY (line 9) | const RESET_DIALOG_KEY = "create:reset-dialog-open"
function useReset (line 11) | function useReset() {
FILE: apps/v4/app/(create)/hooks/use-theme-toggle.tsx
function useThemeToggle (line 8) | function useThemeToggle() {
FILE: apps/v4/app/(create)/init/md/build-instructions.ts
function buildInstructions (line 13) | function buildInstructions(config: DesignSystemConfig) {
function buildDependenciesSection (line 57) | function buildDependenciesSection(dependencies: string[]) {
function buildUtilsSection (line 69) | function buildUtilsSection() {
function buildCssSection (line 84) | function buildCssSection(
function buildFontSection (line 164) | function buildFontSection(
function buildComponentsJsonSection (line 236) | function buildComponentsJsonSection(config: DesignSystemConfig) {
function buildAvailableComponentsSection (line 265) | function buildAvailableComponentsSection(config: DesignSystemConfig) {
function buildRtlSection (line 282) | function buildRtlSection(config: DesignSystemConfig) {
FILE: apps/v4/app/(create)/init/md/route.ts
function GET (line 8) | async function GET(request: NextRequest) {
FILE: apps/v4/app/(create)/init/parse-config.ts
function parseDesignSystemConfig (line 10) | function parseDesignSystemConfig(searchParams: URLSearchParams) {
FILE: apps/v4/app/(create)/init/route.ts
function GET (line 10) | async function GET(request: NextRequest) {
FILE: apps/v4/app/(create)/init/v0/route.ts
function GET (line 9) | async function GET(request: NextRequest) {
FILE: apps/v4/app/(create)/lib/api.ts
function getItemsForBase (line 11) | async function getItemsForBase(base: BaseName) {
function getBaseItem (line 26) | async function getBaseItem(name: string, base: BaseName) {
function getBaseComponent (line 37) | async function getBaseComponent(name: string, base: BaseName) {
function getAllItems (line 48) | async function getAllItems() {
FILE: apps/v4/app/(create)/lib/constants.ts
constant ALLOWED_ITEM_TYPES (line 1) | const ALLOWED_ITEM_TYPES = ["registry:block", "registry:example"]
constant EXCLUDED_ITEMS (line 3) | const EXCLUDED_ITEMS = ["component-example"]
FILE: apps/v4/app/(create)/lib/fonts.ts
type PreviewFont (line 30) | type PreviewFont = ReturnType<typeof Inter>
constant PREVIEW_FONTS (line 152) | const PREVIEW_FONTS = {
function createFontOption (line 179) | function createFontOption(name: FontName) {
constant FONTS (line 194) | const FONTS = [
type Font (line 221) | type Font = (typeof FONTS)[number]
constant FONT_HEADING_OPTIONS (line 223) | const FONT_HEADING_OPTIONS = [
type FontHeadingOption (line 233) | type FontHeadingOption = (typeof FONT_HEADING_OPTIONS)[number]
FILE: apps/v4/app/(create)/lib/merge-theme.ts
function buildTheme (line 5) | function buildTheme(baseColorName: string, themeName: string) {
FILE: apps/v4/app/(create)/lib/preset-code.ts
type PresetCodeConfig (line 5) | type PresetCodeConfig = Pick<
function getPresetCode (line 19) | function getPresetCode(config: PresetCodeConfig) {
FILE: apps/v4/app/(create)/lib/preset-query.ts
type SearchParamsLike (line 5) | type SearchParamsLike = Pick<URLSearchParams, "get" | "has">
function resolvePresetOverrides (line 7) | function resolvePresetOverrides(
FILE: apps/v4/app/(create)/lib/randomize-biases.ts
type RandomizeContext (line 12) | type RandomizeContext = {
type BiasFilter (line 24) | type BiasFilter<T> = (
type RandomizeBiases (line 29) | type RandomizeBiases = {
constant CHART_COLOR_PAIRINGS (line 37) | const CHART_COLOR_PAIRINGS: Record<string, string[]> = {
constant RANDOMIZE_BIASES (line 61) | const RANDOMIZE_BIASES: RandomizeBiases = {
function applyBias (line 98) | function applyBias<T>(
FILE: apps/v4/app/(create)/lib/search-params.ts
constant DESIGN_SYSTEM_KEYS (line 99) | const DESIGN_SYSTEM_KEYS = [
function normalizeFontHeading (line 112) | function normalizeFontHeading(
constant NON_DESIGN_SYSTEM_KEYS (line 123) | const NON_DESIGN_SYSTEM_KEYS = [
type DesignSystemSearchParams (line 141) | type DesignSystemSearchParams = inferParserType<
function isTranslucentMenuColor (line 145) | function isTranslucentMenuColor(
function normalizePartialDesignSystemParams (line 153) | function normalizePartialDesignSystemParams(
function normalizeDesignSystemParams (line 169) | function normalizeDesignSystemParams(
type SearchParamsLike (line 209) | type SearchParamsLike = Pick<URLSearchParams, "get" | "has">
function resolvePresetParams (line 211) | function resolvePresetParams(
function useDesignSystemSearchParams (line 238) | function useDesignSystemSearchParams(options: Options = {}) {
FILE: apps/v4/app/(create)/lib/templates.ts
constant TEMPLATES (line 1) | const TEMPLATES = [
type TemplateValue (line 34) | type TemplateValue = (typeof TEMPLATES)[number]["value"]
function getFramework (line 37) | function getFramework(template: string) {
constant NO_MONOREPO_FRAMEWORKS (line 42) | const NO_MONOREPO_FRAMEWORKS = ["laravel"] as const
function getTemplateValue (line 45) | function getTemplateValue(framework: string, monorepo: boolean) {
FILE: apps/v4/app/(create)/lib/utils.ts
function groupItemsByType (line 8) | function groupItemsByType(
FILE: apps/v4/app/(create)/lib/v0.ts
function buildThemeInline (line 27) | function buildThemeInline(fontHeadingValue: string) {
constant ALIASES (line 153) | const ALIASES = {
type V0Transformer (line 161) | type V0Transformer = (opts: {
function getStyle (line 176) | function getStyle(designSystemConfig: DesignSystemConfig) {
function buildV0Payload (line 180) | async function buildV0Payload(designSystemConfig: DesignSystemConfig) {
function buildGlobalsCss (line 215) | function buildGlobalsCss(
function buildComponentsJson (line 268) | function buildComponentsJson(designSystemConfig: DesignSystemConfig) {
function buildPackageJson (line 297) | function buildPackageJson(dependencies: string[]) {
function buildLayoutFile (line 374) | function buildLayoutFile(
function buildComponentFiles (line 452) | async function buildComponentFiles(designSystemConfig: DesignSystemConfi...
function buildTransformConfig (line 532) | function buildTransformConfig(designSystemConfig: DesignSystemConfig) {
function getRegistryItemFile (line 562) | async function getRegistryItemFile(
function transformFileContent (line 596) | async function transformFileContent(
FILE: apps/v4/app/(create)/preview/[base]/[name]/page.tsx
function PreventScrollOnFocusScript (line 25) | function PreventScrollOnFocusScript() {
function generateMetadata (line 47) | async function generateMetadata({
function generateStaticParams (line 97) | async function generateStaticParams() {
function BlockPage (line 113) | async function BlockPage({
FILE: apps/v4/app/(examples)/dashboard-03/components/analytics-date-picker.tsx
function AnalyticsDatePicker (line 17) | function AnalyticsDatePicker() {
FILE: apps/v4/app/(examples)/dashboard-03/components/app-sidebar.tsx
function AppSidebar (line 72) | function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
FILE: apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
function ChartRevenue (line 47) | function ChartRevenue() {
FILE: apps/v4/app/(examples)/dashboard-03/components/chart-visitors.tsx
function ChartVisitors (line 70) | function ChartVisitors() {
FILE: apps/v4/app/(examples)/dashboard-03/components/mode-toggle.tsx
function ModeToggle (line 9) | function ModeToggle() {
FILE: apps/v4/app/(examples)/dashboard-03/components/nav-main.tsx
function NavMain (line 23) | function NavMain({
FILE: apps/v4/app/(examples)/dashboard-03/components/nav-secondary.tsx
function NavSecondary (line 12) | function NavSecondary({
FILE: apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
function NavUser (line 21) | function NavUser({
FILE: apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
function ProductsTable (line 49) | function ProductsTable({
FILE: apps/v4/app/(examples)/dashboard-03/components/search-form.tsx
function SearchForm (line 6) | function SearchForm({ ...props }: React.ComponentProps<"form">) {
FILE: apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
function SiteHeader (line 23) | function SiteHeader() {
FILE: apps/v4/app/(examples)/dashboard-03/customers/page.tsx
function CustomersPage (line 1) | function CustomersPage() {
FILE: apps/v4/app/(examples)/dashboard-03/layout.tsx
function DashboardLayout (line 10) | async function DashboardLayout({
FILE: apps/v4/app/(examples)/dashboard-03/page.tsx
function DashboardPage (line 118) | function DashboardPage() {
FILE: apps/v4/app/(examples)/dashboard-03/settings/page.tsx
function SettingsPage (line 129) | function SettingsPage() {
function FieldGroup (line 438) | function FieldGroup({ children }: React.ComponentProps<"div">) {
function Field (line 449) | function Field({ children, className, ...props }: React.ComponentProps<"...
function FieldControl (line 464) | function FieldControl({
function FieldDescription (line 483) | function FieldDescription({
FILE: apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
function AppSidebar (line 153) | function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
FILE: apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
function ChartAreaInteractive (line 143) | function ChartAreaInteractive() {
FILE: apps/v4/app/(examples)/dashboard/components/data-table.tsx
function DragHandle (line 120) | function DragHandle({ id }: { id: number }) {
function DraggableRow (line 314) | function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
function DataTable (line 339) | function DataTable({
function TableCellViewer (line 650) | function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
FILE: apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx
function ModeToggle (line 9) | function ModeToggle() {
FILE: apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
function NavDocuments (line 28) | function NavDocuments({
FILE: apps/v4/app/(examples)/dashboard/components/nav-main.tsx
function NavMain (line 14) | function NavMain({
FILE: apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx
function NavSecondary (line 17) | function NavSecondary({
FILE: apps/v4/app/(examples)/dashboard/components/nav-user.tsx
function NavUser (line 32) | function NavUser({
FILE: apps/v4/app/(examples)/dashboard/components/section-cards.tsx
function SectionCards (line 13) | function SectionCards() {
FILE: apps/v4/app/(examples)/dashboard/components/site-header.tsx
function SiteHeader (line 7) | function SiteHeader() {
FILE: apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
constant DEFAULT_THEMES (line 16) | const DEFAULT_THEMES = [
constant SCALED_THEMES (line 35) | const SCALED_THEMES = [
constant MONO_THEMES (line 46) | const MONO_THEMES = [
function ThemeSelector (line 53) | function ThemeSelector() {
FILE: apps/v4/app/(examples)/dashboard/layout.tsx
function DashboardLayout (line 12) | async function DashboardLayout({
FILE: apps/v4/app/(examples)/dashboard/page.tsx
function Page (line 6) | function Page() {
FILE: apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx
function AppearanceSettings (line 66) | function AppearanceSettings() {
FILE: apps/v4/app/(internal)/sink/(pages)/forms/chat-settings.tsx
function ChatSettings (line 126) | function ChatSettings() {
FILE: apps/v4/app/(internal)/sink/(pages)/forms/display-settings.tsx
function DisplaySettings (line 25) | function DisplaySettings() {
FILE: apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx
constant SAMPLE_DATA (line 65) | const SAMPLE_DATA = {
function MentionableIcon (line 154) | function MentionableIcon({
function NotionPromptForm (line 171) | function NotionPromptForm() {
FILE: apps/v4/app/(internal)/sink/(pages)/forms/page.tsx
function FormsPage (line 8) | function FormsPage() {
FILE: apps/v4/app/(internal)/sink/(pages)/forms/ship-registration-form.tsx
function ShipRegistrationForm (line 33) | function ShipRegistrationForm() {
FILE: apps/v4/app/(internal)/sink/(pages)/forms/shipping-form.tsx
function ShippingForm (line 20) | function ShippingForm() {
FILE: apps/v4/app/(internal)/sink/(pages)/next-form/actions.ts
function subscriptionAction (line 6) | async function subscriptionAction(
FILE: apps/v4/app/(internal)/sink/(pages)/next-form/example-form.tsx
type FormState (line 58) | type FormState = {
function ExampleForm (line 66) | function ExampleForm() {
FILE: apps/v4/app/(internal)/sink/(pages)/next-form/page.tsx
function NextFormPage (line 3) | function NextFormPage() {
FILE: apps/v4/app/(internal)/sink/(pages)/react-hook-form/example-form.tsx
function ExampleForm (line 65) | function ExampleForm() {
FILE: apps/v4/app/(internal)/sink/(pages)/react-hook-form/page.tsx
function ReactHookFormPage (line 3) | function ReactHookFormPage() {
FILE: apps/v4/app/(internal)/sink/(pages)/tanstack-form/example-form.tsx
function ExampleForm (line 64) | function ExampleForm() {
FILE: apps/v4/app/(internal)/sink/(pages)/tanstack-form/page.tsx
function TanstackFormPage (line 3) | function TanstackFormPage() {
FILE: apps/v4/app/(internal)/sink/[name]/page.tsx
function generateStaticParams (line 9) | async function generateStaticParams() {
function generateMetadata (line 15) | async function generateMetadata({
function ComponentPage (line 35) | async function ComponentPage({
FILE: apps/v4/app/(internal)/sink/component-registry.ts
type ComponentConfig (line 62) | type ComponentConfig = {
type ComponentKey (line 437) | type ComponentKey = keyof typeof componentRegistry
FILE: apps/v4/app/(internal)/sink/components/accordion-demo.tsx
function AccordionDemo (line 8) | function AccordionDemo() {
FILE: apps/v4/app/(internal)/sink/components/alert-demo.tsx
function AlertDemo (line 17) | function AlertDemo() {
FILE: apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx
function AlertDialogDemo (line 17) | function AlertDialogDemo() {
FILE: apps/v4/app/(internal)/sink/components/app-breadcrumbs.tsx
function AppBreadcrumbs (line 14) | function AppBreadcrumbs() {
FILE: apps/v4/app/(internal)/sink/components/app-sidebar.tsx
function AppSidebar (line 171) | function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
FILE: apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
function AspectRatioDemo (line 5) | function AspectRatioDemo() {
FILE: apps/v4/app/(internal)/sink/components/avatar-demo.tsx
function AvatarDemo (line 12) | function AvatarDemo() {
FILE: apps/v4/app/(internal)/sink/components/badge-demo.tsx
function BadgeDemo (line 5) | function BadgeDemo() {
FILE: apps/v4/app/(internal)/sink/components/breadcrumb-demo.tsx
function BreadcrumbDemo (line 17) | function BreadcrumbDemo() {
FILE: apps/v4/app/(internal)/sink/components/button-demo.tsx
function ButtonDemo (line 5) | function ButtonDemo() {
FILE: apps/v4/app/(internal)/sink/components/button-group-demo.tsx
function ButtonGroupDemo (line 79) | function ButtonGroupDemo() {
function ExportButtonGroup (line 560) | function ExportButtonGroup() {
FILE: apps/v4/app/(internal)/sink/components/calendar-demo.tsx
function CalendarDemo (line 15) | function CalendarDemo() {
function CalendarSingle (line 30) | function CalendarSingle() {
function CalendarMultiple (line 48) | function CalendarMultiple() {
function CalendarRange (line 57) | function CalendarRange() {
function CalendarRangeMultipleMonths (line 79) | function CalendarRangeMultipleMonths() {
function CalendarBookedDates (line 102) | function CalendarBookedDates() {
function CalendarWithTime (line 132) | function CalendarWithTime() {
function CalendarCustomDays (line 182) | function CalendarCustomDays() {
function CalendarWithPresets (line 225) | function CalendarWithPresets() {
FILE: apps/v4/app/(internal)/sink/components/card-demo.tsx
function CardDemo (line 22) | function CardDemo() {
FILE: apps/v4/app/(internal)/sink/components/carousel-demo.tsx
function CarouselDemo (line 12) | function CarouselDemo() {
FILE: apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
function ChartAreaDemo (line 39) | function ChartAreaDemo() {
FILE: apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
function ChartBarDemo (line 43) | function ChartBarDemo() {
FILE: apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
function ChartBarMixed (line 57) | function ChartBarMixed() {
FILE: apps/v4/app/(internal)/sink/components/chart-demo.tsx
function ChartDemo (line 6) | function ChartDemo() {
FILE: apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
function ChartLineDemo (line 43) | function ChartLineDemo() {
FILE: apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
function CheckboxDemo (line 6) | function CheckboxDemo() {
FILE: apps/v4/app/(internal)/sink/components/collapsible-demo.tsx
function CollapsibleDemo (line 13) | function CollapsibleDemo() {
FILE: apps/v4/app/(internal)/sink/components/combobox-demo.tsx
function ComboboxDemo (line 57) | function ComboboxDemo() {
function ComboboxMultiple (line 147) | function ComboboxMultiple() {
FILE: apps/v4/app/(internal)/sink/components/command-demo.tsx
function CommandDemo (line 24) | function CommandDemo() {
FILE: apps/v4/app/(internal)/sink/components/component-wrapper.tsx
function ComponentWrapper (line 7) | function ComponentWrapper({
class ComponentErrorBoundary (line 33) | class ComponentErrorBoundary extends React.Component<
method constructor (line 37) | constructor(props: { children: React.ReactNode; name: string }) {
method getDerivedStateFromError (line 42) | static getDerivedStateFromError() {
method componentDidCatch (line 46) | componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
method render (line 50) | render() {
function getComponentName (line 63) | function getComponentName(name: string) {
FILE: apps/v4/app/(internal)/sink/components/context-menu-demo.tsx
function ContextMenuDemo (line 19) | function ContextMenuDemo() {
FILE: apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
function DatePickerDemo (line 26) | function DatePickerDemo() {
function DatePickerSimple (line 36) | function DatePickerSimple() {
function DatePickerWithRange (line 60) | function DatePickerWithRange() {
function DataPickerWithDropdowns (line 105) | function DataPickerWithDropdowns() {
FILE: apps/v4/app/(internal)/sink/components/dialog-demo.tsx
function DialogDemo (line 15) | function DialogDemo() {
function DialogWithForm (line 25) | function DialogWithForm() {
function DialogScrollableContent (line 62) | function DialogScrollableContent() {
function DialogWithStickyFooter (line 94) | function DialogWithStickyFooter() {
FILE: apps/v4/app/(internal)/sink/components/drawer-demo.tsx
function DrawerDemo (line 61) | function DrawerDemo() {
function DrawerBottom (line 71) | function DrawerBottom() {
function DrawerScrollableContent (line 148) | function DrawerScrollableContent() {
function DrawerDirections (line 186) | function DrawerDirections() {
FILE: apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
function DropdownMenuDemo (line 30) | function DropdownMenuDemo() {
function DropdownMenuSimple (line 43) | function DropdownMenuSimple() {
function DropdownMenuCheckboxes (line 102) | function DropdownMenuCheckboxes() {
function DropdownMenuRadioGroupDemo (line 187) | function DropdownMenuRadioGroupDemo() {
function DropdownMenuWithAvatar (line 211) | function DropdownMenuWithAvatar() {
function DropdownMenuAvatarOnly (line 319) | function DropdownMenuAvatarOnly() {
function DropdownMenuIconColor (line 419) | function DropdownMenuIconColor() {
FILE: apps/v4/app/(internal)/sink/components/empty-demo.tsx
function EmptyDemo (line 34) | function EmptyDemo() {
FILE: apps/v4/app/(internal)/sink/components/field-demo.tsx
function FieldDemo (line 91) | function FieldDemo() {
function BasicFields (line 145) | function BasicFields() {
function SubscriptionPlan (line 431) | function SubscriptionPlan() {
function PrivacySettings (line 575) | function PrivacySettings() {
function HearAboutUs (line 767) | function HearAboutUs() {
function ClusterConfig (line 828) | function ClusterConfig() {
function ShippingMethods (line 968) | function ShippingMethods() {
function SignupForm (line 1136) | function SignupForm() {
function LoginForm (line 1213) | function LoginForm() {
function FinderPreferencesForm (line 1322) | function FinderPreferencesForm() {
function ContactForm (line 1433) | function ContactForm() {
function FeedbackForm (line 1515) | function FeedbackForm() {
function JobApplicationForm (line 1641) | function JobApplicationForm() {
function NewsletterForm (line 1767) | function NewsletterForm() {
function PaymentForm (line 1855) | function PaymentForm() {
function FormInputDemo (line 1960) | function FormInputDemo() {
function FormTextareaDemo (line 2028) | function FormTextareaDemo() {
function FormSelectDemo (line 2076) | function FormSelectDemo() {
function FormRadioDemo (line 2136) | function FormRadioDemo() {
function FormCheckboxDemo (line 2281) | function FormCheckboxDemo() {
function FormSliderDemo (line 2388) | function FormSliderDemo() {
function FormSwitchDemo (line 2442) | function FormSwitchDemo() {
function FormToggleGroupDemo (line 2554) | function FormToggleGroupDemo() {
function FormInputTypesDemo (line 2617) | function FormInputTypesDemo() {
function FormSpecialInputTypesDemo (line 2696) | function FormSpecialInputTypesDemo() {
function FormOTPDemo (line 2755) | function FormOTPDemo() {
function FormDatePickerDemo (line 2891) | function FormDatePickerDemo() {
function FormFieldSetDemo (line 3134) | function FormFieldSetDemo() {
function FormFieldSeparatorDemo (line 3373) | function FormFieldSeparatorDemo() {
function FormFieldGroupOutlineDemo (line 3487) | function FormFieldGroupOutlineDemo() {
function ProfileSettingsForm (line 3635) | function ProfileSettingsForm() {
function SurveyForm (line 3752) | function SurveyForm() {
function ComplexFormDemo (line 3922) | function ComplexFormDemo() {
function ComplexFormInvalidDemo (line 4172) | function ComplexFormInvalidDemo() {
function FormOrientationDemo (line 4493) | function FormOrientationDemo() {
function CheckoutForm (line 4679) | function CheckoutForm() {
FILE: apps/v4/app/(internal)/sink/components/form-demo.tsx
function FormDemo (line 101) | function FormDemo() {
FILE: apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
function HoverCardDemo (line 15) | function HoverCardDemo() {
FILE: apps/v4/app/(internal)/sink/components/input-demo.tsx
function InputDemo (line 3) | function InputDemo() {
FILE: apps/v4/app/(internal)/sink/components/input-group-demo.tsx
function InputGroupDemo (line 70) | function InputGroupDemo() {
FILE: apps/v4/app/(internal)/sink/components/input-otp-demo.tsx
function InputOTPDemo (line 14) | function InputOTPDemo() {
function InputOTPSimple (line 25) | function InputOTPSimple() {
function InputOTPPattern (line 46) | function InputOTPPattern() {
function InputOTPWithSeparator (line 64) | function InputOTPWithSeparator() {
function InputOTPWithSpacing (line 95) | function InputOTPWithSpacing() {
FILE: apps/v4/app/(internal)/sink/components/item-demo.tsx
function ItemDemo (line 149) | function ItemDemo() {
FILE: apps/v4/app/(internal)/sink/components/kbd-demo.tsx
function KbdDemo (line 18) | function KbdDemo() {
FILE: apps/v4/app/(internal)/sink/components/label-demo.tsx
function LabelDemo (line 6) | function LabelDemo() {
FILE: apps/v4/app/(internal)/sink/components/menubar-demo.tsx
function MenubarDemo (line 20) | function MenubarDemo() {
FILE: apps/v4/app/(internal)/sink/components/native-select-demo.tsx
function NativeSelectDemo (line 16) | function NativeSelectDemo() {
FILE: apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
function NavigationMenuDemo (line 53) | function NavigationMenuDemo() {
function ListItem (line 209) | function ListItem({
FILE: apps/v4/app/(internal)/sink/components/pagination-demo.tsx
function PaginationDemo (line 11) | function PaginationDemo() {
FILE: apps/v4/app/(internal)/sink/components/popover-demo.tsx
function PopoverDemo (line 13) | function PopoverDemo() {
FILE: apps/v4/app/(internal)/sink/components/progress-demo.tsx
function ProgressDemo (line 7) | function ProgressDemo() {
FILE: apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
function RadioGroupDemo (line 23) | function RadioGroupDemo() {
FILE: apps/v4/app/(internal)/sink/components/resizable-demo.tsx
function ResizableDemo (line 7) | function ResizableDemo() {
FILE: apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
function ScrollAreaDemo (line 7) | function ScrollAreaDemo() {
function ScrollAreaVertical (line 20) | function ScrollAreaVertical() {
function ScrollAreaHorizontalDemo (line 53) | function ScrollAreaHorizontalDemo() {
FILE: apps/v4/app/(internal)/sink/components/select-demo.tsx
function SelectDemo (line 19) | function SelectDemo() {
FILE: apps/v4/app/(internal)/sink/components/separator-demo.tsx
function SeparatorDemo (line 3) | function SeparatorDemo() {
FILE: apps/v4/app/(internal)/sink/components/sheet-demo.tsx
constant SHEET_SIDES (line 15) | const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
function SheetDemo (line 17) | function SheetDemo() {
FILE: apps/v4/app/(internal)/sink/components/skeleton-demo.tsx
function SkeletonDemo (line 4) | function SkeletonDemo() {
FILE: apps/v4/app/(internal)/sink/components/slider-demo.tsx
function SliderDemo (line 8) | function SliderDemo() {
function SliderControlled (line 23) | function SliderControlled() {
FILE: apps/v4/app/(internal)/sink/components/sonner-demo.tsx
function SonnerDemo (line 96) | function SonnerDemo() {
FILE: apps/v4/app/(internal)/sink/components/spinner-demo.tsx
function SpinnerDemo (line 21) | function SpinnerDemo() {
FILE: apps/v4/app/(internal)/sink/components/switch-demo.tsx
function SwitchDemo (line 4) | function SwitchDemo() {
FILE: apps/v4/app/(internal)/sink/components/table-demo.tsx
function TableDemo (line 57) | function TableDemo() {
FILE: apps/v4/app/(internal)/sink/components/tabs-demo.tsx
function TabsDemo (line 21) | function TabsDemo() {
FILE: apps/v4/app/(internal)/sink/components/textarea-demo.tsx
function TextareaDemo (line 4) | function TextareaDemo() {
FILE: apps/v4/app/(internal)/sink/components/theme-selector.tsx
constant THEMES (line 17) | const THEMES = {
function ThemeSelector (line 104) | function ThemeSelector({ className }: React.ComponentProps<"div">) {
FILE: apps/v4/app/(internal)/sink/components/toggle-demo.tsx
function ToggleDemo (line 5) | function ToggleDemo() {
FILE: apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx
function ToggleGroupDemo (line 15) | function ToggleGroupDemo() {
FILE: apps/v4/app/(internal)/sink/components/tooltip-demo.tsx
function TooltipDemo (line 10) | function TooltipDemo() {
FILE: apps/v4/app/(internal)/sink/layout.tsx
function SinkLayout (line 35) | async function SinkLayout({
FILE: apps/v4/app/(internal)/sink/page.tsx
function SinkPage (line 14) | function SinkPage() {
FILE: apps/v4/app/(view)/view/[style]/[name]/component-preview.tsx
function ComponentPreview (line 3) | function ComponentPreview({ children }: { children: React.ReactNode }) {
FILE: apps/v4/app/(view)/view/[style]/[name]/page.tsx
function generateMetadata (line 34) | async function generateMetadata({
function generateStaticParams (line 85) | async function generateStaticParams() {
function BlockPage (line 161) | async function BlockPage({
FILE: apps/v4/app/layout.tsx
function RootLayout (line 69) | function RootLayout({
FILE: apps/v4/app/og/route.tsx
function loadAssets (line 3) | async function loadAssets(): Promise<
function GET (line 38) | async function GET(request: Request) {
FILE: apps/v4/app/rss.xml/route.ts
function GET (line 8) | async function GET() {
FILE: apps/v4/components/active-theme.tsx
constant DEFAULT_THEME (line 11) | const DEFAULT_THEME = "default"
type ThemeContextType (line 13) | type ThemeContextType = {
function ActiveThemeProvider (line 20) | function ActiveThemeProvider({
function useThemeConfig (line 50) | function useThemeConfig() {
FILE: apps/v4/components/analytics.tsx
function Analytics (line 5) | function Analytics() {
FILE: apps/v4/components/announcement.tsx
function Announcement (line 6) | function Announcement() {
FILE: apps/v4/components/block-display.tsx
function BlockDisplay (line 15) | async function BlockDisplay({
FILE: apps/v4/components/block-image.tsx
function BlockImage (line 5) | function BlockImage({
FILE: apps/v4/components/block-viewer.tsx
type BlockViewerContext (line 65) | type BlockViewerContext = {
function useBlockViewer (line 84) | function useBlockViewer() {
function BlockViewerProvider (line 92) | function BlockViewerProvider({
type BlockViewerProps (line 138) | type BlockViewerProps = Pick<
function BlockViewerToolbar (line 146) | function BlockViewerToolbar({ styleName }: { styleName: Style["name"] }) {
function BlockViewerIframe (line 240) | function BlockViewerIframe({
function BlockViewerView (line 263) | function BlockViewerView({ styleName }: { styleName: Style["name"] }) {
function BlockViewerMobile (line 290) | function BlockViewerMobile({ children }: { children: React.ReactNode }) {
function BlockViewerCode (line 329) | function BlockViewerCode() {
function BlockViewerFileTree (line 371) | function BlockViewerFileTree() {
function Tree (line 398) | function Tree({ item, index }: { item: FileTree; index: number }) {
function BlockCopyCodeButton (line 455) | function BlockCopyCodeButton() {
function BlockViewer (line 490) | function BlockViewer({
FILE: apps/v4/components/blocks-nav.tsx
function BlocksNav (line 9) | function BlocksNav() {
function BlocksNavLink (line 34) | function BlocksNavLink({
FILE: apps/v4/components/callout.tsx
function Callout (line 8) | function Callout({
FILE: apps/v4/components/cards/activity-goal.tsx
function CardsActivityGoal (line 70) | function CardsActivityGoal() {
FILE: apps/v4/components/cards/calendar.tsx
function CardsCalendar (line 10) | function CardsCalendar() {
FILE: apps/v4/components/cards/chat.tsx
type User (line 76) | type User = (typeof users)[number]
function CardsChat (line 78) | function CardsChat() {
FILE: apps/v4/components/cards/cookie-settings.tsx
function CardsCookieSettings (line 19) | function CardsCookieSettings() {
FILE: apps/v4/components/cards/create-account.tsx
function CardsCreateAccount (line 19) | function CardsCreateAccount() {
FILE: apps/v4/components/cards/exercise-minutes.tsx
function CardsExerciseMinutes (line 68) | function CardsExerciseMinutes() {
FILE: apps/v4/components/cards/forms.tsx
function CardsForms (line 44) | function CardsForms() {
FILE: apps/v4/components/cards/index.tsx
function CardsDemo (line 14) | function CardsDemo() {
FILE: apps/v4/components/cards/payment-method.tsx
function CardsPaymentMethod (line 41) | function CardsPaymentMethod() {
FILE: apps/v4/components/cards/payments.tsx
type Payment (line 84) | type Payment = {
function CardsPayments (line 172) | function CardsPayments() {
FILE: apps/v4/components/cards/report-issue.tsx
function CardsReportIssue (line 24) | function CardsReportIssue() {
FILE: apps/v4/components/cards/share.tsx
function CardsShare (line 57) | function CardsShare() {
FILE: apps/v4/components/cards/stats.tsx
function CardsStats (line 65) | function CardsStats() {
FILE: apps/v4/components/cards/team-members.tsx
function CardsTeamMembers (line 80) | function CardsTeamMembers() {
FILE: apps/v4/components/chart-code-viewer.tsx
function ChartCodeViewer (line 27) | function ChartCodeViewer({
FILE: apps/v4/components/chart-copy-button.tsx
function ChartCopyButton (line 15) | function ChartCopyButton({
FILE: apps/v4/components/chart-display.tsx
type Chart (line 12) | type Chart = z.infer<typeof registryItemSchema> & {
function ChartDisplay (line 16) | function ChartDisplay({
FILE: apps/v4/components/chart-iframe.tsx
function ChartIframe (line 7) | function ChartIframe({
FILE: apps/v4/components/chart-toolbar.tsx
function ChartToolbar (line 19) | function ChartToolbar({
function ChartTitle (line 48) | function ChartTitle({ chart }: { chart: Chart }) {
FILE: apps/v4/components/charts-nav.tsx
function ChartsNav (line 40) | function ChartsNav({
FILE: apps/v4/components/code-block-command.tsx
function CodeBlockCommand (line 21) | function CodeBlockCommand({
FILE: apps/v4/components/code-collapsible-wrapper.tsx
function CodeCollapsibleWrapper (line 14) | function CodeCollapsibleWrapper({
FILE: apps/v4/components/code-tabs.tsx
function CodeTabs (line 8) | function CodeTabs({ children }: React.ComponentProps<typeof Tabs>) {
FILE: apps/v4/components/color-format-selector.tsx
function ColorFormatSelector (line 16) | function ColorFormatSelector({
function ColorFormatSelectorSkeleton (line 61) | function ColorFormatSelectorSkeleton({
FILE: apps/v4/components/color-palette.tsx
function ColorPalette (line 5) | function ColorPalette({ colorPalette }: { colorPalette: ColorPalette }) {
FILE: apps/v4/components/color.tsx
function Color (line 11) | function Color({ color }: { color: Color }) {
FILE: apps/v4/components/colors-nav.tsx
function ColorsNav (line 10) | function ColorsNav({
FILE: apps/v4/components/command-menu.tsx
function CommandMenu (line 40) | function CommandMenu({
function CommandMenuItem (line 468) | function CommandMenuItem({
function CommandMenuKbd (line 506) | function CommandMenuKbd({ className, ...props }: React.ComponentProps<"k...
type Query (line 518) | type Query = Awaited<ReturnType<typeof useDocsSearch>>["query"]
function SearchResults (line 520) | function SearchResults({
function DialogContent (line 582) | function DialogContent({
FILE: apps/v4/components/component-preview-tabs.tsx
function ComponentPreviewTabs (line 25) | function ComponentPreviewTabs({
function RtlLanguageSelector (line 194) | function RtlLanguageSelector({ className }: { className?: string }) {
function PreviewWrapper (line 208) | function PreviewWrapper({
function DirectionProviderWrapper (line 246) | function DirectionProviderWrapper({
FILE: apps/v4/components/component-preview.tsx
function ComponentPreview (line 8) | function ComponentPreview({
FILE: apps/v4/components/component-source.tsx
function ComponentSource (line 12) | async function ComponentSource({
function ComponentCode (line 87) | function ComponentCode({
FILE: apps/v4/components/component-wrapper.tsx
function ComponentWrapper (line 7) | function ComponentWrapper({
class ComponentErrorBoundary (line 33) | class ComponentErrorBoundary extends React.Component<
method constructor (line 37) | constructor(props: { children: React.ReactNode; name: string }) {
method getDerivedStateFromError (line 42) | static getDerivedStateFromError() {
method componentDidCatch (line 46) | componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
method render (line 50) | render() {
function getComponentName (line 63) | function getComponentName(name: string) {
FILE: apps/v4/components/components-list.tsx
function ComponentsList (line 6) | function ComponentsList({
FILE: apps/v4/components/copy-button.tsx
function legacyCopyToClipboard (line 10) | function legacyCopyToClipboard(value: string) {
function copyToClipboardWithMeta (line 34) | async function copyToClipboardWithMeta(value: string, event?: Event) {
function CopyButton (line 67) | function CopyButton({
FILE: apps/v4/components/directory-add-button.tsx
function DirectoryAddButton (line 42) | function DirectoryAddButton({
FILE: apps/v4/components/directory-list.tsx
function getHomepageUrl (line 24) | function getHomepageUrl(homepage: string) {
function DirectoryList (line 32) | function DirectoryList() {
FILE: apps/v4/components/docs-base-switcher.tsx
function DocsBaseSwitcher (line 6) | function DocsBaseSwitcher({
FILE: apps/v4/components/docs-breadcrumb.tsx
function DocsBreadcrumb (line 18) | function DocsBreadcrumb({
FILE: apps/v4/components/docs-copy-page.tsx
function getPromptUrl (line 21) | function getPromptUrl(baseURL: string, url: string) {
function DocsCopyPage (line 156) | function DocsCopyPage({ page, url }: { page: string; url: string }) {
FILE: apps/v4/components/docs-page-links.tsx
function getPromptUrl (line 7) | function getPromptUrl(baseURL: string, url: string) {
function DocsPageLinks (line 15) | function DocsPageLinks({ page, url }: { page: string; url: string }) {
FILE: apps/v4/components/docs-sidebar.tsx
constant TOP_LEVEL_SECTIONS (line 21) | const TOP_LEVEL_SECTIONS = [
constant EXCLUDED_SECTIONS (line 64) | const EXCLUDED_SECTIONS = ["installation", "dark-mode", "changelog", "rtl"]
constant EXCLUDED_PAGES (line 65) | const EXCLUDED_PAGES = ["/docs", "/docs/changelog", "/docs/rtl", "/docs/...
function DocsSidebar (line 67) | function DocsSidebar({
FILE: apps/v4/components/docs-toc.tsx
function useActiveItem (line 15) | function useActiveItem(itemIds: string[]) {
function DocsTableOfContents (line 50) | function DocsTableOfContents({
FILE: apps/v4/components/examples-nav.tsx
function ExamplesNav (line 42) | function ExamplesNav({
function ExampleLink (line 70) | function ExampleLink({
FILE: apps/v4/components/github-link.tsx
function GitHubLink (line 9) | function GitHubLink() {
function StarsCount (line 22) | async function StarsCount() {
FILE: apps/v4/components/icons.tsx
type IconProps (line 3) | type IconProps = React.HTMLAttributes<SVGElement>
function getIconForLanguageExtension (line 192) | function getIconForLanguageExtension(language: string) {
FILE: apps/v4/components/language-selector.tsx
type Language (line 15) | type Language = "en" | "ar" | "he"
type Direction (line 17) | type Direction = "ltr" | "rtl"
type Translations (line 19) | type Translations<
type LanguageContextType (line 36) | type LanguageContextType = {
function LanguageProvider (line 45) | function LanguageProvider({
function useLanguageContext (line 61) | function useLanguageContext() {
function useTranslation (line 66) | function useTranslation<T extends Record<string, string>>(
type LanguageSelectorProps (line 81) | interface LanguageSelectorProps {
function LanguageSelector (line 86) | function LanguageSelector({
FILE: apps/v4/components/lo-fi/accordion.tsx
function AccordionLoFi (line 5) | function AccordionLoFi() {
FILE: apps/v4/components/lo-fi/alert.tsx
function AlertLoFi (line 5) | function AlertLoFi() {
FILE: apps/v4/components/lo-fi/atom.tsx
function Atom (line 29) | function Atom({
FILE: apps/v4/components/lo-fi/component.tsx
function Component (line 5) | function Component({ href, ...props }: React.ComponentProps<typeof Link>) {
function ComponentContent (line 9) | function ComponentContent({ ...props }: React.ComponentProps<typeof Atom...
function ComponentName (line 19) | function ComponentName({ ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/components/lo-fi/index.tsx
function LoFi (line 9) | function LoFi() {
FILE: apps/v4/components/main-nav.tsx
function MainNav (line 10) | function MainNav({
FILE: apps/v4/components/mobile-nav.tsx
constant TOP_LEVEL_SECTIONS (line 19) | const TOP_LEVEL_SECTIONS = [
function MobileNav (line 63) | function MobileNav({
function MobileLink (line 194) | function MobileLink({
FILE: apps/v4/components/mode-switcher.tsx
constant DARK_MODE_FORWARD_TYPE (line 11) | const DARK_MODE_FORWARD_TYPE = "dark-mode-forward"
function ModeSwitcher (line 13) | function ModeSwitcher({
function DarkModeScript (line 62) | function DarkModeScript() {
FILE: apps/v4/components/nav-header.tsx
function NavHeader (line 13) | function NavHeader() {
FILE: apps/v4/components/nav-user.tsx
function NavUser (line 33) | function NavUser({
FILE: apps/v4/components/open-in-v0-button.tsx
constant V0_STYLE (line 6) | const V0_STYLE = "new-york-v4"
function OpenInV0Button (line 8) | function OpenInV0Button({
FILE: apps/v4/components/open-in-v0-cta.tsx
function OpenInV0Cta (line 4) | function OpenInV0Cta({ className }: React.ComponentProps<"div">) {
FILE: apps/v4/components/page-header.tsx
function PageHeader (line 3) | function PageHeader({
function PageHeaderHeading (line 19) | function PageHeaderHeading({
function PageHeaderDescription (line 34) | function PageHeaderDescription({
function PageActions (line 49) | function PageActions({ className, ...props }: React.ComponentProps<"div"...
FILE: apps/v4/components/page-nav.tsx
function PageNav (line 3) | function PageNav({
FILE: apps/v4/components/site-config.tsx
function SiteConfig (line 11) | function SiteConfig({ className }: React.ComponentProps<typeof Button>) {
FILE: apps/v4/components/site-footer.tsx
function SiteFooter (line 3) | function SiteFooter() {
FILE: apps/v4/components/site-header.tsx
function SiteHeader (line 20) | function SiteHeader() {
FILE: apps/v4/components/tailwind-indicator.tsx
constant SHOW (line 1) | const SHOW = true
function TailwindIndicator (line 3) | function TailwindIndicator({
FILE: apps/v4/components/theme-customizer.tsx
type BaseColorOKLCH (line 51) | interface BaseColorOKLCH {
function ThemeCustomizer (line 56) | function ThemeCustomizer({ className }: React.ComponentProps<"div">) {
function CopyCodeButton (line 114) | function CopyCodeButton({
function CustomizerCode (line 166) | function CustomizerCode({ themeName }: { themeName: string }) {
function ColorIndicator (line 632) | function ColorIndicator({ color }: { color: string }) {
function getThemeCodeOKLCH (line 641) | function getThemeCodeOKLCH(theme: BaseColorOKLCH | undefined, radius: nu...
function getThemeCode (line 662) | function getThemeCode(theme: BaseColor | undefined, radius: number) {
function getThemeCodeHSLV4 (line 673) | function getThemeCodeHSLV4(theme: BaseColor | undefined, radius: number) {
constant BASE_STYLES_WITH_VARIABLES (line 694) | const BASE_STYLES_WITH_VARIABLES = `
FILE: apps/v4/components/theme-provider.tsx
function ThemeShortcut (line 6) | function ThemeShortcut() {
function ThemeProvider (line 38) | function ThemeProvider({
FILE: apps/v4/components/theme-selector.tsx
function ThemeSelector (line 20) | function ThemeSelector({ className }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/accordion-basic.tsx
function AccordionBasic (line 29) | function AccordionBasic() {
FILE: apps/v4/examples/base/accordion-borders.tsx
function AccordionBorders (line 29) | function AccordionBorders() {
FILE: apps/v4/examples/base/accordion-card.tsx
function AccordionCard (line 36) | function AccordionCard() {
FILE: apps/v4/examples/base/accordion-demo.tsx
function AccordionDemo (line 8) | function AccordionDemo() {
FILE: apps/v4/examples/base/accordion-disabled.tsx
function AccordionDisabled (line 8) | function AccordionDisabled() {
FILE: apps/v4/examples/base/accordion-multiple.tsx
function AccordionMultiple (line 29) | function AccordionMultiple() {
FILE: apps/v4/examples/base/accordion-rtl.tsx
function AccordionRtl (line 78) | function AccordionRtl() {
FILE: apps/v4/examples/base/alert-action.tsx
function AlertActionExample (line 9) | function AlertActionExample() {
FILE: apps/v4/examples/base/alert-basic.tsx
function AlertBasic (line 4) | function AlertBasic() {
FILE: apps/v4/examples/base/alert-colors.tsx
function AlertColors (line 4) | function AlertColors() {
FILE: apps/v4/examples/base/alert-demo.tsx
function AlertDemo (line 4) | function AlertDemo() {
FILE: apps/v4/examples/base/alert-destructive.tsx
function AlertDestructive (line 4) | function AlertDestructive() {
FILE: apps/v4/examples/base/alert-dialog-basic.tsx
function AlertDialogBasic (line 14) | function AlertDialogBasic() {
FILE: apps/v4/examples/base/alert-dialog-demo.tsx
function AlertDialogDemo (line 14) | function AlertDialogDemo() {
FILE: apps/v4/examples/base/alert-dialog-destructive.tsx
function AlertDialogDestructive (line 16) | function AlertDialogDestructive() {
FILE: apps/v4/examples/base/alert-dialog-media.tsx
function AlertDialogWithMedia (line 16) | function AlertDialogWithMedia() {
FILE: apps/v4/examples/base/alert-dialog-rtl.tsx
function AlertDialogRtl (line 75) | function AlertDialogRtl() {
FILE: apps/v4/examples/base/alert-dialog-small-media.tsx
function AlertDialogSmallWithMedia (line 16) | function AlertDialogSmallWithMedia() {
FILE: apps/v4/examples/base/alert-dialog-small.tsx
function AlertDialogSmall (line 14) | function AlertDialogSmall() {
FILE: apps/v4/examples/base/alert-rtl.tsx
function AlertRtl (line 65) | function AlertRtl() {
FILE: apps/v4/examples/base/aspect-ratio-demo.tsx
function AspectRatioDemo (line 4) | function AspectRatioDemo() {
FILE: apps/v4/examples/base/aspect-ratio-portrait.tsx
function AspectRatioPortrait (line 4) | function AspectRatioPortrait() {
FILE: apps/v4/examples/base/aspect-ratio-rtl.tsx
function AspectRatioRtl (line 33) | function AspectRatioRtl() {
FILE: apps/v4/examples/base/aspect-ratio-square.tsx
function AspectRatioSquare (line 4) | function AspectRatioSquare() {
FILE: apps/v4/examples/base/avatar-badge-icon.tsx
function AvatarBadgeIconExample (line 9) | function AvatarBadgeIconExample() {
FILE: apps/v4/examples/base/avatar-badge.tsx
function AvatarWithBadge (line 8) | function AvatarWithBadge() {
FILE: apps/v4/examples/base/avatar-basic.tsx
function AvatarDemo (line 3) | function AvatarDemo() {
FILE: apps/v4/examples/base/avatar-demo.tsx
function AvatarDemo (line 10) | function AvatarDemo() {
FILE: apps/v4/examples/base/avatar-dropdown.tsx
function AvatarDropdown (line 14) | function AvatarDropdown() {
FILE: apps/v4/examples/base/avatar-group-count-icon.tsx
function AvatarGroupCountIconExample (line 10) | function AvatarGroupCountIconExample() {
FILE: apps/v4/examples/base/avatar-group-count.tsx
function AvatarGroupCountExample (line 9) | function AvatarGroupCountExample() {
FILE: apps/v4/examples/base/avatar-group.tsx
function AvatarGroupExample (line 8) | function AvatarGroupExample() {
FILE: apps/v4/examples/base/avatar-rtl.tsx
function AvatarRtl (line 39) | function AvatarRtl() {
FILE: apps/v4/examples/base/avatar-size.tsx
function AvatarSizeExample (line 3) | function AvatarSizeExample() {
FILE: apps/v4/examples/base/badge-colors.tsx
function BadgeCustomColors (line 3) | function BadgeCustomColors() {
FILE: apps/v4/examples/base/badge-demo.tsx
function BadgeDemo (line 3) | function BadgeDemo() {
FILE: apps/v4/examples/base/badge-icon.tsx
function BadgeWithIconLeft (line 4) | function BadgeWithIconLeft() {
FILE: apps/v4/examples/base/badge-link.tsx
function BadgeAsLink (line 4) | function BadgeAsLink() {
FILE: apps/v4/examples/base/badge-rtl.tsx
function BadgeRtl (line 48) | function BadgeRtl() {
FILE: apps/v4/examples/base/badge-spinner.tsx
function BadgeWithSpinner (line 4) | function BadgeWithSpinner() {
FILE: apps/v4/examples/base/badge-variants.tsx
function BadgeVariants (line 3) | function BadgeVariants() {
FILE: apps/v4/examples/base/breadcrumb-basic.tsx
function BreadcrumbBasic (line 10) | function BreadcrumbBasic() {
FILE: apps/v4/examples/base/breadcrumb-demo.tsx
function BreadcrumbDemo (line 20) | function BreadcrumbDemo() {
FILE: apps/v4/examples/base/breadcrumb-dropdown.tsx
function BreadcrumbDropdown (line 19) | function BreadcrumbDropdown() {
FILE: apps/v4/examples/base/breadcrumb-ellipsis.tsx
function BreadcrumbEllipsisDemo (line 12) | function BreadcrumbEllipsisDemo() {
FILE: apps/v4/examples/base/breadcrumb-link.tsx
function BreadcrumbLinkDemo (line 11) | function BreadcrumbLinkDemo() {
FILE: apps/v4/examples/base/breadcrumb-rtl.tsx
function BreadcrumbRtl (line 62) | function BreadcrumbRtl() {
FILE: apps/v4/examples/base/breadcrumb-separator.tsx
function BreadcrumbSeparatorDemo (line 12) | function BreadcrumbSeparatorDemo() {
FILE: apps/v4/examples/base/button-default.tsx
function ButtonDefault (line 3) | function ButtonDefault() {
FILE: apps/v4/examples/base/button-demo.tsx
function ButtonDemo (line 4) | function ButtonDemo() {
FILE: apps/v4/examples/base/button-destructive.tsx
function ButtonDestructive (line 3) | function ButtonDestructive() {
FILE: apps/v4/examples/base/button-ghost.tsx
function ButtonGhost (line 3) | function ButtonGhost() {
FILE: apps/v4/examples/base/button-group-demo.tsx
function ButtonGroupDemo (line 31) | function ButtonGroupDemo() {
FILE: apps/v4/examples/base/button-group-dropdown.tsx
function ButtonGroupDropdown (line 24) | function ButtonGroupDropdown() {
FILE: apps/v4/examples/base/button-group-input-group.tsx
function ButtonGroupInputGroup (line 19) | function ButtonGroupInputGroup() {
FILE: apps/v4/examples/base/button-group-input.tsx
function ButtonGroupInput (line 6) | function ButtonGroupInput() {
FILE: apps/v4/examples/base/button-group-nested.tsx
function ButtonGroupNested (line 16) | function ButtonGroupNested() {
FILE: apps/v4/examples/base/button-group-orientation.tsx
function ButtonGroupOrientation (line 5) | function ButtonGroupOrientation() {
FILE: apps/v4/examples/base/button-group-popover.tsx
function ButtonGroupPopover (line 15) | function ButtonGroupPopover() {
FILE: apps/v4/examples/base/button-group-rtl.tsx
function ButtonGroupRtl (line 87) | function ButtonGroupRtl() {
FILE: apps/v4/examples/base/button-group-select.tsx
constant CURRENCIES (line 16) | const CURRENCIES = [
function ButtonGroupSelect (line 22) | function ButtonGroupSelect() {
FILE: apps/v4/examples/base/button-group-separator.tsx
function ButtonGroupSeparatorDemo (line 7) | function ButtonGroupSeparatorDemo() {
FILE: apps/v4/examples/base/button-group-size.tsx
function ButtonGroupSize (line 5) | function ButtonGroupSize() {
FILE: apps/v4/examples/base/button-group-split.tsx
function ButtonGroupSplit (line 8) | function ButtonGroupSplit() {
FILE: apps/v4/examples/base/button-icon.tsx
function ButtonIcon (line 4) | function ButtonIcon() {
FILE: apps/v4/examples/base/button-link.tsx
function ButtonLink (line 3) | function ButtonLink() {
FILE: apps/v4/examples/base/button-outline.tsx
function ButtonOutline (line 3) | function ButtonOutline() {
FILE: apps/v4/examples/base/button-render.tsx
function ButtonRender (line 5) | function ButtonRender() {
FILE: apps/v4/examples/base/button-rounded.tsx
function ButtonRounded (line 4) | function ButtonRounded() {
FILE: apps/v4/examples/base/button-rtl.tsx
function ButtonRtl (line 42) | function ButtonRtl() {
FILE: apps/v4/examples/base/button-secondary.tsx
function ButtonSecondary (line 3) | function ButtonSecondary() {
FILE: apps/v4/examples/base/button-size.tsx
function ButtonSize (line 4) | function ButtonSize() {
FILE: apps/v4/examples/base/button-spinner.tsx
function ButtonLoading (line 4) | function ButtonLoading() {
FILE: apps/v4/examples/base/button-with-icon.tsx
function ButtonWithIcon (line 4) | function ButtonWithIcon() {
FILE: apps/v4/examples/base/calendar-basic.tsx
function CalendarBasic (line 5) | function CalendarBasic() {
FILE: apps/v4/examples/base/calendar-booked-dates.tsx
function CalendarBookedDates (line 7) | function CalendarBookedDates() {
FILE: apps/v4/examples/base/calendar-caption.tsx
function CalendarCaption (line 5) | function CalendarCaption() {
FILE: apps/v4/examples/base/calendar-custom-days.tsx
function CalendarCustomDays (line 9) | function CalendarCustomDays() {
FILE: apps/v4/examples/base/calendar-demo.tsx
function CalendarDemo (line 6) | function CalendarDemo() {
FILE: apps/v4/examples/base/calendar-hijri.tsx
function CalendarHijri (line 18) | function CalendarHijri() {
function Calendar (line 40) | function Calendar({
function CalendarDayButton (line 198) | function CalendarDayButton({
FILE: apps/v4/examples/base/calendar-multiple.tsx
function CalendarMultiple (line 4) | function CalendarMultiple() {
FILE: apps/v4/examples/base/calendar-presets.tsx
function CalendarWithPresets (line 9) | function CalendarWithPresets() {
FILE: apps/v4/examples/base/calendar-range.tsx
function CalendarRange (line 9) | function CalendarRange() {
FILE: apps/v4/examples/base/calendar-rtl.tsx
function CalendarRtl (line 32) | function CalendarRtl() {
FILE: apps/v4/examples/base/calendar-time.tsx
function CalendarWithTime (line 14) | function CalendarWithTime() {
FILE: apps/v4/examples/base/calendar-week-numbers.tsx
function CalendarWeekNumbers (line 7) | function CalendarWeekNumbers() {
FILE: apps/v4/examples/base/card-demo.tsx
function CardDemo (line 14) | function CardDemo() {
FILE: apps/v4/examples/base/card-image.tsx
function CardImage (line 12) | function CardImage() {
FILE: apps/v4/examples/base/card-rtl.tsx
function CardRtl (line 67) | function CardRtl() {
FILE: apps/v4/examples/base/card-small.tsx
function CardSmall (line 12) | function CardSmall() {
FILE: apps/v4/examples/base/carousel-api.tsx
function CarouselDApiDemo (line 14) | function CarouselDApiDemo() {
FILE: apps/v4/examples/base/carousel-demo.tsx
function CarouselDemo (line 11) | function CarouselDemo() {
FILE: apps/v4/examples/base/carousel-multiple.tsx
function CarouselMultiple (line 10) | function CarouselMultiple() {
FILE: apps/v4/examples/base/carousel-orientation.tsx
function CarouselOrientation (line 11) | function CarouselOrientation() {
FILE: apps/v4/examples/base/carousel-plugin.tsx
function CarouselPlugin (line 14) | function CarouselPlugin() {
FILE: apps/v4/examples/base/carousel-rtl.tsx
function toArabicNumerals (line 33) | function toArabicNumerals(num: number): string {
function CarouselRtl (line 42) | function CarouselRtl() {
FILE: apps/v4/examples/base/carousel-size.tsx
function CarouselSize (line 11) | function CarouselSize() {
FILE: apps/v4/examples/base/carousel-spacing.tsx
function CarouselSpacing (line 11) | function CarouselSpacing() {
FILE: apps/v4/examples/base/chart-demo.tsx
function ChartDemo (line 69) | function ChartDemo() {
FILE: apps/v4/examples/base/chart-example-axis.tsx
function ChartBarDemoAxis (line 26) | function ChartBarDemoAxis() {
FILE: apps/v4/examples/base/chart-example-grid.tsx
function ChartBarDemoGrid (line 26) | function ChartBarDemoGrid() {
FILE: apps/v4/examples/base/chart-example-legend.tsx
function ChartBarDemoLegend (line 33) | function ChartBarDemoLegend() {
FILE: apps/v4/examples/base/chart-example-tooltip.tsx
function ChartBarDemoTooltip (line 31) | function ChartBarDemoTooltip() {
FILE: apps/v4/examples/base/chart-example.tsx
function ChartExample (line 26) | function ChartExample() {
FILE: apps/v4/examples/base/chart-rtl.tsx
function ChartRtl (line 69) | function ChartRtl() {
FILE: apps/v4/examples/base/chart-tooltip.tsx
function ChartTooltipDemo (line 7) | function ChartTooltipDemo() {
function TooltipDemo (line 122) | function TooltipDemo({
FILE: apps/v4/examples/base/checkbox-basic.tsx
function CheckboxBasic (line 4) | function CheckboxBasic() {
FILE: apps/v4/examples/base/checkbox-demo.tsx
function CheckboxDemo (line 14) | function CheckboxDemo() {
FILE: apps/v4/examples/base/checkbox-description.tsx
function CheckboxDescription (line 10) | function CheckboxDescription() {
FILE: apps/v4/examples/base/checkbox-disabled.tsx
function CheckboxDisabled (line 4) | function CheckboxDisabled() {
FILE: apps/v4/examples/base/checkbox-group.tsx
function CheckboxGroup (line 11) | function CheckboxGroup() {
FILE: apps/v4/examples/base/checkbox-invalid.tsx
function CheckboxInvalid (line 4) | function CheckboxInvalid() {
FILE: apps/v4/examples/base/checkbox-rtl.tsx
function CheckboxRtl (line 55) | function CheckboxRtl() {
FILE: apps/v4/examples/base/checkbox-table.tsx
function CheckboxInTable (line 41) | function CheckboxInTable() {
FILE: apps/v4/examples/base/collapsible-basic.tsx
function CollapsibleBasic (line 11) | function CollapsibleBasic() {
FILE: apps/v4/examples/base/collapsible-demo.tsx
function CollapsibleDemo (line 12) | function CollapsibleDemo() {
FILE: apps/v4/examples/base/collapsible-file-tree.tsx
type FileTreeItem (line 11) | type FileTreeItem = { name: string } | { name: string; items: FileTreeIt...
function CollapsibleFileTree (line 13) | function CollapsibleFileTree() {
FILE: apps/v4/examples/base/collapsible-rtl.tsx
function CollapsibleRtl (line 56) | function CollapsibleRtl() {
FILE: apps/v4/examples/base/collapsible-settings.tsx
function CollapsibleSettings (line 21) | function CollapsibleSettings() {
FILE: apps/v4/examples/base/combobox-auto-highlight.tsx
function ComboboxAutoHighlight (line 20) | function ComboboxAutoHighlight() {
FILE: apps/v4/examples/base/combobox-basic.tsx
function ComboboxBasic (line 20) | function ComboboxBasic() {
FILE: apps/v4/examples/base/combobox-clear.tsx
function ComboboxWithClear (line 20) | function ComboboxWithClear() {
FILE: apps/v4/examples/base/combobox-custom.tsx
function ComboboxWithCustomItems (line 71) | function ComboboxWithCustomItems() {
FILE: apps/v4/examples/base/combobox-demo.tsx
function ComboboxBasic (line 20) | function ComboboxBasic() {
FILE: apps/v4/examples/base/combobox-disabled.tsx
function ComboboxDisabled (line 20) | function ComboboxDisabled() {
FILE: apps/v4/examples/base/combobox-groups.tsx
function ComboboxWithGroupsAndSeparator (line 52) | function ComboboxWithGroupsAndSeparator() {
FILE: apps/v4/examples/base/combobox-input-group.tsx
function ComboxboxInputGroup (line 53) | function ComboxboxInputGroup() {
FILE: apps/v4/examples/base/combobox-invalid.tsx
function ComboboxInvalid (line 20) | function ComboboxInvalid() {
FILE: apps/v4/examples/base/combobox-multiple.tsx
function ComboboxMultiple (line 25) | function ComboboxMultiple() {
FILE: apps/v4/examples/base/combobox-popup.tsx
function ComboboxPopup (line 68) | function ComboboxPopup() {
FILE: apps/v4/examples/base/combobox-rtl.tsx
function ComboboxRtl (line 77) | function ComboboxRtl() {
FILE: apps/v4/examples/base/command-basic.tsx
function CommandBasic (line 15) | function CommandBasic() {
FILE: apps/v4/examples/base/command-demo.tsx
function CommandDemo (line 20) | function CommandDemo() {
FILE: apps/v4/examples/base/command-dialog.tsx
function CommandDialogDemo (line 23) | function CommandDialogDemo() {
FILE: apps/v4/examples/base/command-groups.tsx
function CommandWithGroups (line 25) | function CommandWithGroups() {
FILE: apps/v4/examples/base/command-rtl.tsx
function CommandRtl (line 73) | function CommandRtl() {
FILE: apps/v4/examples/base/command-scrollable.tsx
function CommandManyItems (line 42) | function CommandManyItems() {
FILE: apps/v4/examples/base/command-shortcuts.tsx
function CommandWithShortcuts (line 17) | function CommandWithShortcuts() {
FILE: apps/v4/examples/base/context-menu-basic.tsx
function ContextMenuBasic (line 9) | function ContextMenuBasic() {
FILE: apps/v4/examples/base/context-menu-checkboxes.tsx
function ContextMenuCheckboxes (line 9) | function ContextMenuCheckboxes() {
FILE: apps/v4/examples/base/context-menu-demo.tsx
function ContextMenuDemo (line 18) | function ContextMenuDemo() {
FILE: apps/v4/examples/base/context-menu-destructive.tsx
function ContextMenuDestructive (line 11) | function ContextMenuDestructive() {
FILE: apps/v4/examples/base/context-menu-groups.tsx
function ContextMenuGroups (line 12) | function ContextMenuGroups() {
FILE: apps/v4/examples/base/context-menu-icons.tsx
function ContextMenuIcons (line 16) | function ContextMenuIcons() {
FILE: apps/v4/examples/base/context-menu-radio.tsx
function ContextMenuRadio (line 15) | function ContextMenuRadio() {
FILE: apps/v4/examples/base/context-menu-rtl.tsx
function ContextMenuRtl (line 96) | function ContextMenuRtl() {
FILE: apps/v4/examples/base/context-menu-shortcuts.tsx
function ContextMenuShortcuts (line 11) | function ContextMenuShortcuts() {
FILE: apps/v4/examples/base/context-menu-sides.tsx
function ContextMenuSides (line 9) | function ContextMenuSides() {
FILE: apps/v4/examples/base/context-menu-submenu.tsx
function ContextMenuSubmenu (line 14) | function ContextMenuSubmenu() {
FILE: apps/v4/examples/base/data-picker-with-dropdowns.tsx
function DataPickerWithDropdowns (line 15) | function DataPickerWithDropdowns() {
FILE: apps/v4/examples/base/data-table-demo.tsx
type Payment (line 72) | type Payment = {
function DataTableDemo (line 174) | function DataTableDemo() {
FILE: apps/v4/examples/base/data-table-rtl.tsx
type Payment (line 125) | type Payment = {
function DataTableRtl (line 165) | function DataTableRtl() {
FILE: apps/v4/examples/base/date-picker-basic.tsx
function DatePickerSimple (line 14) | function DatePickerSimple() {
FILE: apps/v4/examples/base/date-picker-demo.tsx
function DatePickerDemo (line 14) | function DatePickerDemo() {
FILE: apps/v4/examples/base/date-picker-dob.tsx
function DatePickerSimple (line 13) | function DatePickerSimple() {
FILE: apps/v4/examples/base/date-picker-input.tsx
function formatDate (line 19) | function formatDate(date: Date | undefined) {
function isValidDate (line 31) | function isValidDate(date: Date | undefined) {
function DatePickerInput (line 38) | function DatePickerInput() {
FILE: apps/v4/examples/base/date-picker-natural-language.tsx
function formatDate (line 20) | function formatDate(date: Date | undefined) {
function DatePickerNaturalLanguage (line 32) | function DatePickerNaturalLanguage() {
FILE: apps/v4/examples/base/date-picker-range.tsx
function DatePickerWithRange (line 16) | function DatePickerWithRange() {
FILE: apps/v4/examples/base/date-picker-rtl.tsx
function DatePickerRtl (line 55) | function DatePickerRtl() {
FILE: apps/v4/examples/base/date-picker-time.tsx
function DatePickerTime (line 16) | function DatePickerTime() {
FILE: apps/v4/examples/base/dialog-close-button.tsx
function DialogCloseButton (line 15) | function DialogCloseButton() {
FILE: apps/v4/examples/base/dialog-demo.tsx
function DialogDemo (line 16) | function DialogDemo() {
FILE: apps/v4/examples/base/dialog-no-close-button.tsx
function DialogNoCloseButton (line 13) | function DialogNoCloseButton() {
FILE: apps/v4/examples/base/dialog-rtl.tsx
function DialogRtl (line 64) | function DialogRtl() {
FILE: apps/v4/examples/base/dialog-scrollable-content.tsx
function DialogScrollableContent (line 11) | function DialogScrollableContent() {
FILE: apps/v4/examples/base/dialog-sticky-footer.tsx
function DialogStickyFooter (line 13) | function DialogStickyFooter() {
FILE: apps/v4/examples/base/drawer-demo.tsx
function DrawerDemo (line 60) | function DrawerDemo() {
FILE: apps/v4/examples/base/drawer-dialog.tsx
function DrawerDialogDemo (line 29) | function DrawerDialogDemo() {
function ProfileForm (line 76) | function ProfileForm({ className }: React.ComponentProps<"form">) {
FILE: apps/v4/examples/base/drawer-rtl.tsx
function DrawerRtl (line 110) | function DrawerRtl() {
FILE: apps/v4/examples/base/drawer-scrollable-content.tsx
function DrawerScrollableContent (line 13) | function DrawerScrollableContent() {
FILE: apps/v4/examples/base/drawer-sides.tsx
constant DRAWER_SIDES (line 13) | const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const
function DrawerWithSides (line 15) | function DrawerWithSides() {
FILE: apps/v4/examples/base/dropdown-menu-avatar.tsx
function DropdownMenuAvatar (line 20) | function DropdownMenuAvatar() {
FILE: apps/v4/examples/base/dropdown-menu-basic.tsx
function DropdownMenuBasic (line 14) | function DropdownMenuBasic() {
FILE: apps/v4/examples/base/dropdown-menu-checkboxes-icons.tsx
function DropdownMenuCheckboxesIcons (line 15) | function DropdownMenuCheckboxesIcons() {
FILE: apps/v4/examples/base/dropdown-menu-checkboxes.tsx
function DropdownMenuCheckboxes (line 14) | function DropdownMenuCheckboxes() {
FILE: apps/v4/examples/base/dropdown-menu-complex.tsx
function DropdownMenuComplex (line 50) | function DropdownMenuComplex() {
FILE: apps/v4/examples/base/dropdown-menu-demo.tsx
function DropdownMenuDemo (line 19) | function DropdownMenuDemo() {
FILE: apps/v4/examples/base/dropdown-menu-destructive.tsx
function DropdownMenuDestructive (line 14) | function DropdownMenuDestructive() {
FILE: apps/v4/examples/base/dropdown-menu-icons.tsx
function DropdownMenuIcons (line 18) | function DropdownMenuIcons() {
FILE: apps/v4/examples/base/dropdown-menu-radio-group.tsx
function DropdownMenuRadioGroupDemo (line 15) | function DropdownMenuRadioGroupDemo() {
FILE: apps/v4/examples/base/dropdown-menu-radio-icons.tsx
function DropdownMenuRadioIcons (line 16) | function DropdownMenuRadioIcons() {
FILE: apps/v4/examples/base/dropdown-menu-rtl.tsx
function DropdownMenuRtl (line 122) | function DropdownMenuRtl() {
FILE: apps/v4/examples/base/dropdown-menu-shortcuts.tsx
function DropdownMenuShortcuts (line 15) | function DropdownMenuShortcuts() {
FILE: apps/v4/examples/base/dropdown-menu-submenu.tsx
function DropdownMenuSubmenu (line 18) | function DropdownMenuSubmenu() {
FILE: apps/v4/examples/base/empty-avatar-group.tsx
function EmptyAvatarGroup (line 13) | function EmptyAvatarGroup() {
FILE: apps/v4/examples/base/empty-avatar.tsx
function EmptyAvatar (line 12) | function EmptyAvatar() {
FILE: apps/v4/examples/base/empty-background.tsx
function EmptyMuted (line 13) | function EmptyMuted() {
FILE: apps/v4/examples/base/empty-card.tsx
function EmptyInCard (line 12) | function EmptyInCard() {
FILE: apps/v4/examples/base/empty-demo.tsx
function EmptyDemo (line 13) | function EmptyDemo() {
FILE: apps/v4/examples/base/empty-input-group.tsx
function EmptyInputGroup (line 16) | function EmptyInputGroup() {
FILE: apps/v4/examples/base/empty-outline.tsx
function EmptyOutline (line 12) | function EmptyOutline() {
FILE: apps/v4/examples/base/empty-rtl.tsx
function EmptyRtl (line 56) | function EmptyRtl() {
FILE: apps/v4/examples/base/field-checkbox.tsx
function FieldCheckbox (line 13) | function FieldCheckbox() {
FILE: apps/v4/examples/base/field-choice-card.tsx
function FieldChoiceCard (line 13) | function FieldChoiceCard() {
FILE: apps/v4/examples/base/field-demo.tsx
function FieldDemo (line 49) | function FieldDemo() {
FILE: apps/v4/examples/base/field-fieldset.tsx
function FieldFieldset (line 11) | function FieldFieldset() {
FILE: apps/v4/examples/base/field-group.tsx
function FieldGroupExample (line 11) | function FieldGroupExample() {
FILE: apps/v4/examples/base/field-input.tsx
function FieldInput (line 10) | function FieldInput() {
FILE: apps/v4/examples/base/field-radio.tsx
function FieldRadio (line 10) | function FieldRadio() {
FILE: apps/v4/examples/base/field-responsive.tsx
function FieldResponsive (line 13) | function FieldResponsive() {
FILE: apps/v4/examples/base/field-rtl.tsx
function FieldRtl (line 160) | function FieldRtl() {
FILE: apps/v4/examples/base/field-select.tsx
function FieldSelect (line 23) | function FieldSelect() {
FILE: apps/v4/examples/base/field-slider.tsx
function FieldSlider (line 7) | function FieldSlider() {
FILE: apps/v4/examples/base/field-switch.tsx
function FieldSwitch (line 4) | function FieldSwitch() {
FILE: apps/v4/examples/base/field-textarea.tsx
function FieldTextarea (line 10) | function FieldTextarea() {
FILE: apps/v4/examples/base/file-upload-list.tsx
function FileUploadList (line 15) | function FileUploadList() {
FILE: apps/v4/examples/base/hooks/use-mobile.ts
constant MOBILE_BREAKPOINT (line 3) | const MOBILE_BREAKPOINT = 768
function useIsMobile (line 5) | function useIsMobile() {
FILE: apps/v4/examples/base/hover-card-demo.tsx
function HoverCardDemo (line 9) | function HoverCardDemo() {
FILE: apps/v4/examples/base/hover-card-rtl.tsx
function HoverCardRtl (line 63) | function HoverCardRtl() {
FILE: apps/v4/examples/base/hover-card-sides.tsx
constant HOVER_CARD_SIDES (line 8) | const HOVER_CARD_SIDES = ["left", "top", "bottom", "right"] as const
function HoverCardSides (line 10) | function HoverCardSides() {
FILE: apps/v4/examples/base/input-badge.tsx
function InputBadge (line 5) | function InputBadge() {
FILE: apps/v4/examples/base/input-basic.tsx
function InputBasic (line 3) | function InputBasic() {
FILE: apps/v4/examples/base/input-button-group.tsx
function InputButtonGroup (line 6) | function InputButtonGroup() {
FILE: apps/v4/examples/base/input-demo.tsx
function InputDemo (line 4) | function InputDemo() {
FILE: apps/v4/examples/base/input-disabled.tsx
function InputDisabled (line 4) | function InputDisabled() {
FILE: apps/v4/examples/base/input-field.tsx
function InputField (line 4) | function InputField() {
FILE: apps/v4/examples/base/input-fieldgroup.tsx
function InputFieldgroup (line 10) | function InputFieldgroup() {
FILE: apps/v4/examples/base/input-file.tsx
function InputFile (line 4) | function InputFile() {
FILE: apps/v4/examples/base/input-form.tsx
function InputForm (line 18) | function InputForm() {
FILE: apps/v4/examples/base/input-grid.tsx
function InputGrid (line 4) | function InputGrid() {
FILE: apps/v4/examples/base/input-group-basic.tsx
function InputGroupBasic (line 5) | function InputGroupBasic() {
FILE: apps/v4/examples/base/input-group-block-end.tsx
function InputGroupBlockEnd (line 16) | function InputGroupBlockEnd() {
FILE: apps/v4/examples/base/input-group-block-start.tsx
function InputGroupBlockStart (line 17) | function InputGroupBlockStart() {
FILE: apps/v4/examples/base/input-group-button-group.tsx
function InputGroupButtonGroup (line 10) | function InputGroupButtonGroup() {
FILE: apps/v4/examples/base/input-group-button.tsx
function InputGroupButtonExample (line 24) | function InputGroupButtonExample() {
FILE: apps/v4/examples/base/input-group-custom.tsx
function InputGroupCustom (line 10) | function InputGroupCustom() {
FILE: apps/v4/examples/base/input-group-demo.tsx
function InputGroupDemo (line 8) | function InputGroupDemo() {
FILE: apps/v4/examples/base/input-group-dropdown.tsx
function InputGroupDropdown (line 18) | function InputGroupDropdown() {
FILE: apps/v4/examples/base/input-group-icon.tsx
function InputGroupIcon (line 15) | function InputGroupIcon() {
FILE: apps/v4/examples/base/input-group-in-card.tsx
function InputGroupInCard (line 21) | function InputGroupInCard() {
FILE: apps/v4/examples/base/input-group-inline-end.tsx
function InputGroupInlineEnd (line 9) | function InputGroupInlineEnd() {
FILE: apps/v4/examples/base/input-group-inline-start.tsx
function InputGroupInlineStart (line 9) | function InputGroupInlineStart() {
FILE: apps/v4/examples/base/input-group-kbd.tsx
function InputGroupKbd (line 9) | function InputGroupKbd() {
FILE: apps/v4/examples/base/input-group-label.tsx
function InputGroupLabel (line 15) | function InputGroupLabel() {
FILE: apps/v4/examples/base/input-group-rtl.tsx
function InputGroupRtl (line 74) | function InputGroupRtl() {
FILE: apps/v4/examples/base/input-group-spinner.tsx
function InputGroupSpinner (line 10) | function InputGroupSpinner() {
FILE: apps/v4/examples/base/input-group-text.tsx
function InputGroupTextExample (line 9) | function InputGroupTextExample() {
FILE: apps/v4/examples/base/input-group-textarea-examples.tsx
function InputGroupTextareaExamples (line 24) | function InputGroupTextareaExamples() {
FILE: apps/v4/examples/base/input-group-textarea.tsx
function InputGroupTextareaExample (line 15) | function InputGroupTextareaExample() {
FILE: apps/v4/examples/base/input-group-tooltip.tsx
function InputGroupTooltip (line 14) | function InputGroupTooltip() {
FILE: apps/v4/examples/base/input-group-with-addons.tsx
function InputGroupWithAddons (line 27) | function InputGroupWithAddons() {
FILE: apps/v4/examples/base/input-group-with-buttons.tsx
function InputGroupWithButtons (line 12) | function InputGroupWithButtons() {
FILE: apps/v4/examples/base/input-group-with-kbd.tsx
function InputGroupWithKbd (line 17) | function InputGroupWithKbd() {
FILE: apps/v4/examples/base/input-group-with-tooltip.tsx
function InputGroupWithTooltip (line 38) | function InputGroupWithTooltip({
FILE: apps/v4/examples/base/input-inline.tsx
function InputInline (line 5) | function InputInline() {
FILE: apps/v4/examples/base/input-input-group.tsx
function InputInputGroup (line 10) | function InputInputGroup() {
FILE: apps/v4/examples/base/input-invalid.tsx
function InputInvalid (line 4) | function InputInvalid() {
FILE: apps/v4/examples/base/input-otp-alphanumeric.tsx
function InputOTPAlphanumeric (line 11) | function InputOTPAlphanumeric() {
FILE: apps/v4/examples/base/input-otp-controlled.tsx
function InputOTPControlled (line 10) | function InputOTPControlled() {
FILE: apps/v4/examples/base/input-otp-demo.tsx
function InputOTPDemo (line 7) | function InputOTPDemo() {
FILE: apps/v4/examples/base/input-otp-disabled.tsx
function InputOTPDisabled (line 9) | function InputOTPDisabled() {
FILE: apps/v4/examples/base/input-otp-form.tsx
function InputOTPForm (line 19) | function InputOTPForm() {
FILE: apps/v4/examples/base/input-otp-four-digits.tsx
function InputOTPFourDigits (line 10) | function InputOTPFourDigits() {
FILE: apps/v4/examples/base/input-otp-invalid.tsx
function InputOTPInvalid (line 11) | function InputOTPInvalid() {
FILE: apps/v4/examples/base/input-otp-pattern.tsx
function InputOTPPattern (line 11) | function InputOTPPattern() {
FILE: apps/v4/examples/base/input-otp-rtl.tsx
function InputOTPRtl (line 37) | function InputOTPRtl() {
FILE: apps/v4/examples/base/input-otp-separator.tsx
function InputOTPWithSeparator (line 8) | function InputOTPWithSeparator() {
FILE: apps/v4/examples/base/input-required.tsx
function InputRequired (line 4) | function InputRequired() {
FILE: apps/v4/examples/base/input-rtl.tsx
function InputRtl (line 43) | function InputRtl() {
FILE: apps/v4/examples/base/item-avatar.tsx
function ItemAvatar (line 13) | function ItemAvatar() {
FILE: apps/v4/examples/base/item-demo.tsx
function ItemDemo (line 12) | function ItemDemo() {
FILE: apps/v4/examples/base/item-dropdown.tsx
function ItemDropdown (line 39) | function ItemDropdown() {
FILE: apps/v4/examples/base/item-group.tsx
function ItemGroupExample (line 34) | function ItemGroupExample() {
FILE: apps/v4/examples/base/item-header.tsx
function ItemHeaderDemo (line 35) | function ItemHeaderDemo() {
FILE: apps/v4/examples/base/item-icon.tsx
function ItemIcon (line 12) | function ItemIcon() {
FILE: apps/v4/examples/base/item-image.tsx
function ItemImage (line 32) | function ItemImage() {
FILE: apps/v4/examples/base/item-link.tsx
function ItemLink (line 10) | function ItemLink() {
FILE: apps/v4/examples/base/item-rtl.tsx
function ItemRtl (line 50) | function ItemRtl() {
FILE: apps/v4/examples/base/item-size.tsx
function ItemSizeDemo (line 10) | function ItemSizeDemo() {
FILE: apps/v4/examples/base/item-variant.tsx
function ItemVariant (line 10) | function ItemVariant() {
FILE: apps/v4/examples/base/kbd-button.tsx
function KbdButton (line 4) | function KbdButton() {
FILE: apps/v4/examples/base/kbd-demo.tsx
function KbdDemo (line 3) | function KbdDemo() {
FILE: apps/v4/examples/base/kbd-group.tsx
function KbdGroupExample (line 3) | function KbdGroupExample() {
FILE: apps/v4/examples/base/kbd-input-group.tsx
function KbdInputGroup (line 9) | function KbdInputGroup() {
FILE: apps/v4/examples/base/kbd-rtl.tsx
function KbdRtl (line 26) | function KbdRtl() {
FILE: apps/v4/examples/base/kbd-tooltip.tsx
function KbdTooltip (line 10) | function KbdTooltip() {
FILE: apps/v4/examples/base/label-demo.tsx
function LabelDemo (line 4) | function LabelDemo() {
FILE: apps/v4/examples/base/label-rtl.tsx
function LabelRtl (line 33) | function LabelRtl() {
FILE: apps/v4/examples/base/lib/utils.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
FILE: apps/v4/examples/base/menubar-checkbox.tsx
function MenubarCheckbox (line 12) | function MenubarCheckbox() {
FILE: apps/v4/examples/base/menubar-demo.tsx
function MenubarDemo (line 18) | function MenubarDemo() {
FILE: apps/v4/examples/base/menubar-icons.tsx
function MenubarIcons (line 20) | function MenubarIcons() {
FILE: apps/v4/examples/base/menubar-radio.tsx
function MenubarRadio (line 15) | function MenubarRadio() {
FILE: apps/v4/examples/base/menubar-rtl.tsx
function MenubarRtl (line 143) | function MenubarRtl() {
FILE: apps/v4/examples/base/menubar-submenu.tsx
function MenubarSubmenu (line 14) | function MenubarSubmenu() {
FILE: apps/v4/examples/base/muted-item-group.tsx
function MutedItemGroup (line 11) | function MutedItemGroup() {
FILE: apps/v4/examples/base/native-select-demo.tsx
function NativeSelectDemo (line 6) | function NativeSelectDemo() {
FILE: apps/v4/examples/base/native-select-disabled.tsx
function NativeSelectDisabled (line 6) | function NativeSelectDisabled() {
FILE: apps/v4/examples/base/native-select-groups.tsx
function NativeSelectGroups (line 7) | function NativeSelectGroups() {
FILE: apps/v4/examples/base/native-select-invalid.tsx
function NativeSelectInvalid (line 6) | function NativeSelectInvalid() {
FILE: apps/v4/examples/base/native-select-rtl.tsx
function NativeSelectRtl (line 47) | function NativeSelectRtl() {
FILE: apps/v4/examples/base/navigation-menu-demo.tsx
function NavigationMenuDemo (line 58) | function NavigationMenuDemo() {
function ListItem (line 140) | function ListItem({
FILE: apps/v4/examples/base/navigation-menu-rtl.tsx
function NavigationMenuRtl (line 164) | function NavigationMenuRtl() {
function ListItem (line 258) | function ListItem({
FILE: apps/v4/examples/base/outline-item-group.tsx
function OutlineItemGroup (line 11) | function OutlineItemGroup() {
FILE: apps/v4/examples/base/pagination-demo.tsx
function PaginationDemo (line 11) | function PaginationDemo() {
FILE: apps/v4/examples/base/pagination-icons-only.tsx
function PaginationIconsOnly (line 18) | function PaginationIconsOnly() {
FILE: apps/v4/examples/base/pagination-rtl.tsx
function toArabicNumerals (line 43) | function toArabicNumerals(num: number): string {
function PaginationRtl (line 52) | function PaginationRtl() {
FILE: apps/v4/examples/base/pagination-simple.tsx
function PaginationSimple (line 8) | function PaginationSimple() {
FILE: apps/v4/examples/base/popover-alignments.tsx
function PopoverAlignments (line 8) | function PopoverAlignments() {
FILE: apps/v4/examples/base/popover-basic.tsx
function PopoverBasic (line 11) | function PopoverBasic() {
FILE: apps/v4/examples/base/popover-demo.tsx
function PopoverDemo (line 10) | function PopoverDemo() {
FILE: apps/v4/examples/base/popover-form.tsx
function PopoverForm (line 13) | function PopoverForm() {
FILE: apps/v4/examples/base/popover-rtl.tsx
function PopoverRtl (line 63) | function PopoverRtl() {
FILE: apps/v4/examples/base/progress-controlled.tsx
function ProgressControlled (line 7) | function ProgressControlled() {
FILE: apps/v4/examples/base/progress-demo.tsx
function ProgressDemo (line 6) | function ProgressDemo() {
FILE: apps/v4/examples/base/progress-label.tsx
function ProgressWithLabel (line 7) | function ProgressWithLabel() {
FILE: apps/v4/examples/base/progress-rtl.tsx
function toArabicNumerals (line 36) | function toArabicNumerals(num: number): string {
function ProgressRtl (line 45) | function ProgressRtl() {
FILE: apps/v4/examples/base/radio-fields.tsx
function RadioFields (line 13) | function RadioFields() {
FILE: apps/v4/examples/base/radio-group-choice-card.tsx
function RadioGroupChoiceCard (line 10) | function RadioGroupChoiceCard() {
FILE: apps/v4/examples/base/radio-group-demo.tsx
function RadioGroupDemo (line 4) | function RadioGroupDemo() {
FILE: apps/v4/examples/base/radio-group-description.tsx
function RadioGroupDescription (line 9) | function RadioGroupDescription() {
FILE: apps/v4/examples/base/radio-group-disabled.tsx
function RadioGroupDisabled (line 4) | function RadioGroupDisabled() {
FILE: apps/v4/examples/base/radio-group-fieldset.tsx
function RadioGroupFieldset (line 10) | function RadioGroupFieldset() {
FILE: apps/v4/examples/base/radio-group-invalid.tsx
function RadioGroupInvalid (line 10) | function RadioGroupInvalid() {
FILE: apps/v4/examples/base/radio-group-rtl.tsx
function RadioGroupRtl (line 53) | function RadioGroupRtl() {
FILE: apps/v4/examples/base/resizable-demo.tsx
function ResizableDemo (line 7) | function ResizableDemo() {
FILE: apps/v4/examples/base/resizable-handle.tsx
function ResizableHandleDemo (line 7) | function ResizableHandleDemo() {
FILE: apps/v4/examples/base/resizable-rtl.tsx
function ResizableRtl (line 42) | function ResizableRtl() {
FILE: apps/v4/examples/base/resizable-vertical.tsx
function ResizableVertical (line 7) | function ResizableVertical() {
FILE: apps/v4/examples/base/scroll-area-demo.tsx
function ScrollAreaDemo (line 9) | function ScrollAreaDemo() {
FILE: apps/v4/examples/base/scroll-area-horizontal-demo.tsx
type Artwork (line 5) | interface Artwork {
function ScrollAreaHorizontalDemo (line 25) | function ScrollAreaHorizontalDemo() {
FILE: apps/v4/examples/base/scroll-area-rtl.tsx
function ScrollAreaRtl (line 37) | function ScrollAreaRtl() {
FILE: apps/v4/examples/base/select-align-item.tsx
function SelectAlignItem (line 31) | function SelectAlignItem() {
FILE: apps/v4/examples/base/select-demo.tsx
function SelectDemo (line 20) | function SelectDemo() {
FILE: apps/v4/examples/base/select-disabled.tsx
function SelectDisabled (line 10) | function SelectDisabled() {
FILE: apps/v4/examples/base/select-groups.tsx
function SelectGroups (line 12) | function SelectGroups() {
FILE: apps/v4/examples/base/select-invalid.tsx
function SelectInvalid (line 18) | function SelectInvalid() {
FILE: apps/v4/examples/base/select-rtl.tsx
function SelectRtl (line 72) | function SelectRtl() {
FILE: apps/v4/examples/base/select-scrollable.tsx
function SelectScrollable (line 62) | function SelectScrollable() {
FILE: apps/v4/examples/base/separator-demo.tsx
function SeparatorDemo (line 3) | function SeparatorDemo() {
FILE: apps/v4/examples/base/separator-list.tsx
function SeparatorList (line 3) | function SeparatorList() {
FILE: apps/v4/examples/base/separator-menu.tsx
function SeparatorMenu (line 3) | function SeparatorMenu() {
FILE: apps/v4/examples/base/separator-rtl.tsx
function SeparatorRtl (line 41) | function SeparatorRtl() {
FILE: apps/v4/examples/base/separator-vertical.tsx
function SeparatorVertical (line 3) | function SeparatorVertical() {
FILE: apps/v4/examples/base/sheet-demo.tsx
function SheetDemo (line 15) | function SheetDemo() {
FILE: apps/v4/examples/base/sheet-no-close-button.tsx
function SheetNoCloseButton (line 11) | function SheetNoCloseButton() {
FILE: apps/v4/examples/base/sheet-rtl.tsx
function SheetRtl (line 63) | function SheetRtl() {
FILE: apps/v4/examples/base/sheet-side.tsx
constant SHEET_SIDES (line 13) | const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
function SheetSide (line 15) | function SheetSide() {
FILE: apps/v4/examples/base/sidebar-controlled.tsx
function AppSidebar (line 55) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-demo.tsx
function TeamSwitcher (line 195) | function TeamSwitcher({
function NavMain (line 274) | function NavMain({
function NavProjects (line 325) | function NavProjects({
function NavUser (line 384) | function NavUser({
function AppSidebar (line 473) | function AppSidebar({
FILE: apps/v4/examples/base/sidebar-footer.tsx
function AppSidebar (line 23) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-group-action.tsx
function AppSidebar (line 18) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-group-collapsible.tsx
function AppSidebar (line 21) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-group.tsx
function AppSidebar (line 16) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-header.tsx
function AppSidebar (line 21) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-menu-action.tsx
function AppSidebar (line 58) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-menu-badge.tsx
function AppSidebar (line 56) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-menu-collapsible.tsx
function AppSidebar (line 151) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-menu-sub.tsx
function AppSidebar (line 145) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-menu.tsx
function AppSidebar (line 50) | function AppSidebar() {
FILE: apps/v4/examples/base/sidebar-rsc.tsx
function fetchProjects (line 56) | async function fetchProjects() {
function AppSidebar (line 61) | function AppSidebar() {
function NavProjectsSkeleton (line 80) | function NavProjectsSkeleton() {
function NavProjects (line 92) | async function NavProjects() {
FILE: apps/v4/examples/base/sidebar-rtl.tsx
function SidebarRtl (line 187) | function SidebarRtl() {
function AppSidebarWithProvider (line 195) | function AppSidebarWithProvider() {
function AppSidebar (line 212) | function AppSidebar() {
function SidebarContentInner (line 286) | function SidebarContentInner({
FILE: apps/v4/examples/base/skeleton-avatar.tsx
function SkeletonAvatar (line 3) | function SkeletonAvatar() {
FILE: apps/v4/examples/base/skeleton-card.tsx
function SkeletonCard (line 4) | function SkeletonCard() {
FILE: apps/v4/examples/base/skeleton-demo.tsx
function SkeletonDemo (line 3) | function SkeletonDemo() {
FILE: apps/v4/examples/base/skeleton-form.tsx
function SkeletonForm (line 3) | function SkeletonForm() {
FILE: apps/v4/examples/base/skeleton-rtl.tsx
function SkeletonRtl (line 26) | function SkeletonRtl() {
FILE: apps/v4/examples/base/skeleton-table.tsx
function SkeletonTable (line 3) | function SkeletonTable() {
FILE: apps/v4/examples/base/skeleton-text.tsx
function SkeletonText (line 3) | function SkeletonText() {
FILE: apps/v4/examples/base/slider-controlled.tsx
function SliderControlled (line 7) | function SliderControlled() {
FILE: apps/v4/examples/base/slider-demo.tsx
function SliderDemo (line 3) | function SliderDemo() {
FILE: apps/v4/examples/base/slider-disabled.tsx
function SliderDisabled (line 3) | function SliderDisabled() {
FILE: apps/v4/examples/base/slider-multiple.tsx
function SliderMultiple (line 3) | function SliderMultiple() {
FILE: apps/v4/examples/base/slider-range.tsx
function SliderRange (line 3) | function SliderRange() {
FILE: apps/v4/examples/base/slider-rtl.tsx
function SliderRtl (line 26) | function SliderRtl() {
FILE: apps/v4/examples/base/slider-vertical.tsx
function SliderVertical (line 3) | function SliderVertical() {
FILE: apps/v4/examples/base/sonner-demo.tsx
function SonnerDemo (line 6) | function SonnerDemo() {
FILE: apps/v4/examples/base/sonner-description.tsx
function SonnerDescription (line 6) | function SonnerDescription() {
FILE: apps/v4/examples/base/sonner-position.tsx
function SonnerPosition (line 6) | function SonnerPosition() {
FILE: apps/v4/examples/base/sonner-types.tsx
function SonnerTypes (line 6) | function SonnerTypes() {
FILE: apps/v4/examples/base/spinner-badge.tsx
function SpinnerBadge (line 4) | function SpinnerBadge() {
FILE: apps/v4/examples/base/spinner-button.tsx
function SpinnerButton (line 4) | function SpinnerButton() {
FILE: apps/v4/examples/base/spinner-custom.tsx
function Spinner (line 5) | function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
function SpinnerCustom (line 16) | function SpinnerCustom() {
FILE: apps/v4/examples/base/spinner-demo.tsx
function SpinnerDemo (line 9) | function SpinnerDemo() {
FILE: apps/v4/examples/base/spinner-empty.tsx
function SpinnerEmpty (line 12) | function SpinnerEmpty() {
FILE: apps/v4/examples/base/spinner-input-group.tsx
function SpinnerInputGroup (line 11) | function SpinnerInputGroup() {
FILE: apps/v4/examples/base/spinner-rtl.tsx
function SpinnerRtl (line 41) | function SpinnerRtl() {
FILE: apps/v4/examples/base/spinner-size.tsx
function SpinnerSize (line 3) | function SpinnerSize() {
FILE: apps/v4/examples/base/switch-choice-card.tsx
function SwitchChoiceCard (line 11) | function SwitchChoiceCard() {
FILE: apps/v4/examples/base/switch-demo.tsx
function SwitchDemo (line 4) | function SwitchDemo() {
FILE: apps/v4/examples/base/switch-description.tsx
function SwitchDescription (line 9) | function SwitchDescription() {
FILE: apps/v4/examples/base/switch-disabled.tsx
function SwitchDisabled (line 4) | function SwitchDisabled() {
FILE: apps/v4/examples/base/switch-invalid.tsx
function SwitchInvalid (line 9) | function SwitchInvalid() {
FILE: apps/v4/examples/base/switch-rtl.tsx
function SwitchRtl (line 43) | function SwitchRtl() {
FILE: apps/v4/examples/base/switch-sizes.tsx
function SwitchSizes (line 4) | function SwitchSizes() {
FILE: apps/v4/examples/base/table-actions.tsx
function TableActions (line 19) | function TableActions() {
FILE: apps/v4/examples/base/table-demo.tsx
function TableDemo (line 57) | function TableDemo() {
FILE: apps/v4/examples/base/table-footer.tsx
function TableFooterExample (line 57) | function TableFooterExample() {
FILE: apps/v4/examples/base/table-rtl.tsx
function TableRtl (line 119) | function TableRtl() {
FILE: apps/v4/examples/base/tabs-demo.tsx
function TabsDemo (line 15) | function TabsDemo() {
FILE: apps/v4/examples/base/tabs-disabled.tsx
function TabsDisabled (line 3) | function TabsDisabled() {
FILE: apps/v4/examples/base/tabs-icons.tsx
function TabsIcons (line 4) | function TabsIcons() {
FILE: apps/v4/examples/base/tabs-line.tsx
function TabsLine (line 3) | function TabsLine() {
FILE: apps/v4/examples/base/tabs-rtl.tsx
function TabsRtl (line 101) | function TabsRtl() {
FILE: apps/v4/examples/base/tabs-vertical.tsx
function TabsVertical (line 3) | function TabsVertical() {
FILE: apps/v4/examples/base/textarea-button.tsx
function TextareaButton (line 4) | function TextareaButton() {
FILE: apps/v4/examples/base/textarea-demo.tsx
function TextareaDemo (line 3) | function TextareaDemo() {
FILE: apps/v4/examples/base/textarea-disabled.tsx
function TextareaDisabled (line 4) | function TextareaDisabled() {
FILE: apps/v4/examples/base/textarea-field.tsx
function TextareaField (line 4) | function TextareaField() {
FILE: apps/v4/examples/base/textarea-invalid.tsx
function TextareaInvalid (line 4) | function TextareaInvalid() {
FILE: apps/v4/examples/base/textarea-rtl.tsx
function TextareaRtl (line 43) | function TextareaRtl() {
FILE: apps/v4/examples/base/toggle-demo.tsx
function ToggleDemo (line 4) | function ToggleDemo() {
FILE: apps/v4/examples/base/toggle-disabled.tsx
function ToggleDisabled (line 3) | function ToggleDisabled() {
FILE: apps/v4/examples/base/toggle-group-demo.tsx
function ToggleGroupDemo (line 4) | function ToggleGroupDemo() {
FILE: apps/v4/examples/base/toggle-group-disabled.tsx
function ToggleGroupDisabled (line 4) | function ToggleGroupDisabled() {
FILE: apps/v4/examples/base/toggle-group-font-weight-selector.tsx
function ToggleGroupFontWeightSelector (line 7) | function ToggleGroupFontWeightSelector() {
FILE: apps/v4/examples/base/toggle-group-outline.tsx
function ToggleGroupOutline (line 3) | function ToggleGroupOutline() {
FILE: apps/v4/examples/base/toggle-group-rtl.tsx
function ToggleGroupRtl (line 41) | function ToggleGroupRtl() {
FILE: apps/v4/examples/base/toggle-group-sizes.tsx
function ToggleGroupSizes (line 3) | function ToggleGroupSizes() {
FILE: apps/v4/examples/base/toggle-group-spacing.tsx
function ToggleGroupSpacing (line 3) | function ToggleGroupSpacing() {
FILE: apps/v4/examples/base/toggle-group-vertical.tsx
function ToggleGroupVertical (line 4) | function ToggleGroupVertical() {
FILE: apps/v4/examples/base/toggle-outline.tsx
function ToggleOutline (line 4) | function ToggleOutline() {
FILE: apps/v4/examples/base/toggle-rtl.tsx
function ToggleRtl (line 33) | function ToggleRtl() {
FILE: apps/v4/examples/base/toggle-sizes.tsx
function ToggleSizes (line 3) | function ToggleSizes() {
FILE: apps/v4/examples/base/toggle-text.tsx
function ToggleText (line 4) | function ToggleText() {
FILE: apps/v4/examples/base/tooltip-demo.tsx
function TooltipDemo (line 8) | function TooltipDemo() {
FILE: apps/v4/examples/base/tooltip-disabled.tsx
function TooltipDisabled (line 8) | function TooltipDisabled() {
FILE: apps/v4/examples/base/tooltip-keyboard.tsx
function TooltipKeyboard (line 10) | function TooltipKeyboard() {
FILE: apps/v4/examples/base/tooltip-rtl.tsx
function TooltipRtl (line 57) | function TooltipRtl() {
FILE: apps/v4/examples/base/tooltip-sides.tsx
function TooltipSides (line 8) | function TooltipSides() {
FILE: apps/v4/examples/base/typography-blockquote.tsx
function TypographyBlockquote (line 1) | function TypographyBlockquote() {
FILE: apps/v4/examples/base/typography-demo.tsx
function TypographyDemo (line 1) | function TypographyDemo() {
FILE: apps/v4/examples/base/typography-h1.tsx
function TypographyH1 (line 1) | function TypographyH1() {
FILE: apps/v4/examples/base/typography-h2.tsx
function TypographyH2 (line 1) | function TypographyH2() {
FILE: apps/v4/examples/base/typography-h3.tsx
function TypographyH3 (line 1) | function TypographyH3() {
FILE: apps/v4/examples/base/typography-h4.tsx
function TypographyH4 (line 1) | function TypographyH4() {
FILE: apps/v4/examples/base/typography-inline-code.tsx
function TypographyInlineCode (line 1) | function TypographyInlineCode() {
FILE: apps/v4/examples/base/typography-large.tsx
function TypographyLarge (line 1) | function TypographyLarge() {
FILE: apps/v4/examples/base/typography-lead.tsx
function TypographyLead (line 1) | function TypographyLead() {
FILE: apps/v4/examples/base/typography-list.tsx
function TypographyList (line 1) | function TypographyList() {
FILE: apps/v4/examples/base/typography-muted.tsx
function TypographyMuted (line 1) | function TypographyMuted() {
FILE: apps/v4/examples/base/typography-p.tsx
function TypographyP (line 1) | function TypographyP() {
FILE: apps/v4/examples/base/typography-rtl.tsx
function TypographyRtl (line 139) | function TypographyRtl() {
FILE: apps/v4/examples/base/typography-small.tsx
function TypographySmall (line 1) | function TypographySmall() {
FILE: apps/v4/examples/base/typography-table.tsx
function TypographyTable (line 1) | function TypographyTable() {
FILE: apps/v4/examples/base/ui-rtl/accordion.tsx
function Accordion (line 7) | function Accordion({ className, ...props }: AccordionPrimitive.Root.Prop...
function AccordionItem (line 17) | function AccordionItem({ className, ...props }: AccordionPrimitive.Item....
function AccordionTrigger (line 27) | function AccordionTrigger({
function AccordionContent (line 56) | function AccordionContent({
FILE: apps/v4/examples/base/ui-rtl/alert-dialog.tsx
function AlertDialog (line 8) | function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
function AlertDialogTrigger (line 12) | function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.P...
function AlertDialogPortal (line 18) | function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Pro...
function AlertDialogOverlay (line 24) | function AlertDialogOverlay({
function AlertDialogContent (line 40) | function AlertDialogContent({
function AlertDialogHeader (line 63) | function AlertDialogHeader({
function AlertDialogFooter (line 79) | function AlertDialogFooter({
function AlertDialogMedia (line 95) | function AlertDialogMedia({
function AlertDialogTitle (line 111) | function AlertDialogTitle({
function AlertDialogDescription (line 127) | function AlertDialogDescription({
function AlertDialogAction (line 143) | function AlertDialogAction({
function AlertDialogCancel (line 156) | function AlertDialogCancel({
FILE: apps/v4/examples/base/ui-rtl/alert.tsx
function Alert (line 21) | function Alert({
function AlertTitle (line 36) | function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
function AlertDescription (line 49) | function AlertDescription({
function AlertAction (line 65) | function AlertAction({ className, ...props }: React.ComponentProps<"div"...
FILE: apps/v4/examples/base/ui-rtl/aspect-ratio.tsx
function AspectRatio (line 3) | function AspectRatio({
FILE: apps/v4/examples/base/ui-rtl/avatar.tsx
function Avatar (line 7) | function Avatar({
function AvatarImage (line 27) | function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Prop...
function AvatarFallback (line 40) | function AvatarFallback({
function AvatarBadge (line 56) | function AvatarBadge({ className, ...props }: React.ComponentProps<"span...
function AvatarGroup (line 72) | function AvatarGroup({ className, ...props }: React.ComponentProps<"div"...
function AvatarGroupCount (line 85) | function AvatarGroupCount({
FILE: apps/v4/examples/base/ui-rtl/badge.tsx
function Badge (line 29) | function Badge({
FILE: apps/v4/examples/base/ui-rtl/breadcrumb.tsx
function Breadcrumb (line 7) | function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
function BreadcrumbList (line 18) | function BreadcrumbList({ className, ...props }: React.ComponentProps<"o...
function BreadcrumbItem (line 31) | function BreadcrumbItem({ className, ...props }: React.ComponentProps<"l...
function BreadcrumbLink (line 41) | function BreadcrumbLink({
function BreadcrumbPage (line 61) | function BreadcrumbPage({ className, ...props }: React.ComponentProps<"s...
function BreadcrumbSeparator (line 74) | function BreadcrumbSeparator({
function BreadcrumbEllipsis (line 92) | function BreadcrumbEllipsis({
FILE: apps/v4/examples/base/ui-rtl/button-group.tsx
function ButtonGroup (line 24) | function ButtonGroup({
function ButtonGroupText (line 40) | function ButtonGroupText({
function ButtonGroupSeparator (line 63) | function ButtonGroupSeparator({
FILE: apps/v4/examples/base/ui-rtl/button.tsx
function Button (line 44) | function Button({
FILE: apps/v4/examples/base/ui-rtl/calendar.tsx
function Calendar (line 18) | function Calendar({
function CalendarDayButton (line 192) | function CalendarDayButton({
FILE: apps/v4/examples/base/ui-rtl/card.tsx
function Card (line 4) | function Card({
function CardHeader (line 22) | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
function CardTitle (line 35) | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
function CardDescription (line 48) | function CardDescription({ className, ...props }: React.ComponentProps<"...
function CardAction (line 58) | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
function CardContent (line 71) | function CardContent({ className, ...props }: React.ComponentProps<"div"...
function CardFooter (line 81) | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui-rtl/carousel.tsx
type CarouselApi (line 11) | type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters (line 12) | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions (line 13) | type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin (line 14) | type CarouselPlugin = UseCarouselParameters[1]
type CarouselProps (line 16) | type CarouselProps = {
type CarouselContextProps (line 23) | type CarouselContextProps = {
function useCarousel (line 34) | function useCarousel() {
function Carousel (line 44) | function Carousel({
function CarouselContent (line 134) | function CarouselContent({ className, ...props }: React.ComponentProps<"...
function CarouselItem (line 155) | function CarouselItem({ className, ...props }: React.ComponentProps<"div...
function CarouselPrevious (line 173) | function CarouselPrevious({
function CarouselNext (line 203) | function CarouselNext({
FILE: apps/v4/examples/base/ui-rtl/chart.tsx
constant THEMES (line 8) | const THEMES = { light: "", dark: ".dark" } as const
type ChartConfig (line 10) | type ChartConfig = {
type ChartContextProps (line 20) | type ChartContextProps = {
function useChart (line 26) | function useChart() {
function ChartContainer (line 36) | function ChartContainer({
function ChartTooltipContent (line 106) | function ChartTooltipContent({
function ChartLegendContent (line 254) | function ChartLegendContent({
function getPayloadConfigFromPayload (line 310) | function getPayloadConfigFromPayload(
FILE: apps/v4/examples/base/ui-rtl/checkbox.tsx
function Checkbox (line 7) | function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
FILE: apps/v4/examples/base/ui-rtl/collapsible.tsx
function Collapsible (line 5) | function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
function CollapsibleTrigger (line 9) | function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.P...
function CollapsibleContent (line 15) | function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Pro...
FILE: apps/v4/examples/base/ui-rtl/combobox.tsx
function ComboboxValue (line 17) | function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
function ComboboxTrigger (line 21) | function ComboboxTrigger({
function ComboboxClear (line 38) | function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear....
function ComboboxInput (line 51) | function ComboboxInput({
function ComboboxContent (line 86) | function ComboboxContent({
function ComboboxList (line 123) | function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Pr...
function ComboboxItem (line 136) | function ComboboxItem({
function ComboboxGroup (line 162) | function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group....
function ComboboxLabel (line 172) | function ComboboxLabel({
function ComboboxCollection (line 185) | function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.P...
function ComboboxEmpty (line 191) | function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty....
function ComboboxSeparator (line 204) | function ComboboxSeparator({
function ComboboxChips (line 217) | function ComboboxChips({
function ComboboxChip (line 234) | function ComboboxChip({
function ComboboxChipsInput (line 265) | function ComboboxChipsInput({
function useComboboxAnchor (line 278) | function useComboboxAnchor() {
FILE: apps/v4/examples/base/ui-rtl/command.tsx
function Command (line 16) | function Command({
function CommandDialog (line 32) | function CommandDialog({
function CommandInput (line 65) | function CommandInput({
function CommandList (line 88) | function CommandList({
function CommandEmpty (line 104) | function CommandEmpty({
function CommandGroup (line 117) | function CommandGroup({
function CommandSeparator (line 133) | function CommandSeparator({
function CommandItem (line 146) | function CommandItem({
function CommandShortcut (line 166) | function CommandShortcut({
FILE: apps/v4/examples/base/ui-rtl/context-menu.tsx
function ContextMenu (line 8) | function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
function ContextMenuPortal (line 12) | function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Pro...
function ContextMenuTrigger (line 18) | function ContextMenuTrigger({
function ContextMenuContent (line 31) | function ContextMenuContent({
function ContextMenuGroup (line 65) | function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
function ContextMenuLabel (line 71) | function ContextMenuLabel({
function ContextMenuItem (line 91) | function ContextMenuItem({
function ContextMenuSub (line 114) | function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.P...
function ContextMenuSubTrigger (line 120) | function ContextMenuSubTrigger({
function ContextMenuSubContent (line 144) | function ContextMenuSubContent({
function ContextMenuCheckboxItem (line 157) | function ContextMenuCheckboxItem({
function ContextMenuRadioGroup (line 187) | function ContextMenuRadioGroup({
function ContextMenuRadioItem (line 198) | function ContextMenuRadioItem({
function ContextMenuSeparator (line 226) | function ContextMenuSeparator({
function ContextMenuShortcut (line 239) | function ContextMenuShortcut({
FILE: apps/v4/examples/base/ui-rtl/dialog.tsx
function Dialog (line 9) | function Dialog({ ...props }: DialogPrimitive.Root.Props) {
function DialogTrigger (line 13) | function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
function DialogPortal (line 17) | function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
function DialogClose (line 21) | function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
function DialogOverlay (line 25) | function DialogOverlay({
function DialogContent (line 41) | function DialogContent({
function DialogHeader (line 81) | function DialogHeader({ className, ...props }: React.ComponentProps<"div...
function DialogFooter (line 91) | function DialogFooter({
function DialogTitle (line 118) | function DialogTitle({ className, ...props }: DialogPrimitive.Title.Prop...
function DialogDescription (line 131) | function DialogDescription({
FILE: apps/v4/examples/base/ui-rtl/drawer.tsx
function Drawer (line 7) | function Drawer({
function DrawerTrigger (line 13) | function DrawerTrigger({
function DrawerPortal (line 19) | function DrawerPortal({
function DrawerClose (line 25) | function DrawerClose({
function DrawerOverlay (line 31) | function DrawerOverlay({
function DrawerContent (line 47) | function DrawerContent({
function DrawerHeader (line 70) | function DrawerHeader({ className, ...props }: React.ComponentProps<"div...
function DrawerFooter (line 83) | function DrawerFooter({ className, ...props }: React.ComponentProps<"div...
function DrawerTitle (line 93) | function DrawerTitle({
function DrawerDescription (line 109) | function DrawerDescription({
FILE: apps/v4/examples/base/ui-rtl/dropdown-menu.tsx
function DropdownMenu (line 8) | function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
function DropdownMenuPortal (line 12) | function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
function DropdownMenuTrigger (line 16) | function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
function DropdownMenuContent (line 20) | function DropdownMenuContent({
function DropdownMenuGroup (line 54) | function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
function DropdownMenuLabel (line 58) | function DropdownMenuLabel({
function DropdownMenuItem (line 78) | function DropdownMenuItem({
function DropdownMenuSub (line 101) | function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
function DropdownMenuSubTrigger (line 105) | function DropdownMenuSubTrigger({
function DropdownMenuSubContent (line 129) | function DropdownMenuSubContent({
function DropdownMenuCheckboxItem (line 153) | function DropdownMenuCheckboxItem({
function DropdownMenuRadioGroup (line 186) | function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.P...
function DropdownMenuRadioItem (line 195) | function DropdownMenuRadioItem({
function DropdownMenuSeparator (line 226) | function DropdownMenuSeparator({
function DropdownMenuShortcut (line 239) | function DropdownMenuShortcut({
FILE: apps/v4/examples/base/ui-rtl/empty.tsx
function Empty (line 4) | function Empty({ className, ...props }: React.ComponentProps<"div">) {
function EmptyHeader (line 17) | function EmptyHeader({ className, ...props }: React.ComponentProps<"div"...
function EmptyMedia (line 42) | function EmptyMedia({
function EmptyTitle (line 57) | function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
function EmptyDescription (line 70) | function EmptyDescription({ className, ...props }: React.ComponentProps<...
function EmptyContent (line 83) | function EmptyContent({ className, ...props }: React.ComponentProps<"div...
FILE: apps/v4/examples/base/ui-rtl/field.tsx
function FieldSet (line 9) | function FieldSet({ className, ...props }: React.ComponentProps<"fieldse...
function FieldLegend (line 22) | function FieldLegend({
function FieldGroup (line 40) | function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
function Field (line 71) | function Field({
function FieldContent (line 87) | function FieldContent({ className, ...props }: React.ComponentProps<"div...
function FieldLabel (line 100) | function FieldLabel({
function FieldTitle (line 117) | function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
function FieldDescription (line 130) | function FieldDescription({ className, ...props }: React.ComponentProps<...
function FieldSeparator (line 145) | function FieldSeparator({
function FieldError (line 175) | function FieldError({
FILE: apps/v4/examples/base/ui-rtl/hover-card.tsx
function HoverCard (line 6) | function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
function HoverCardTrigger (line 10) | function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Pro...
function HoverCardContent (line 16) | function HoverCardContent({
FILE: apps/v4/examples/base/ui-rtl/input-group.tsx
function InputGroup (line 10) | function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
function InputGroupAddon (line 45) | function InputGroupAddon({
function InputGroupButton (line 85) | function InputGroupButton({
function InputGroupText (line 106) | function InputGroupText({ className, ...props }: React.ComponentProps<"s...
function InputGroupInput (line 118) | function InputGroupInput({
function InputGroupTextarea (line 134) | function InputGroupTextarea({
FILE: apps/v4/examples/base/ui-rtl/input-otp.tsx
function InputOTP (line 8) | function InputOTP({
function InputOTPGroup (line 29) | function InputOTPGroup({ className, ...props }: React.ComponentProps<"di...
function InputOTPSlot (line 42) | function InputOTPSlot({
function InputOTPSeparator (line 72) | function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui-rtl/input.tsx
function Input (line 5) | function Input({ className, type, ...props }: React.ComponentProps<"inpu...
FILE: apps/v4/examples/base/ui-rtl/item.tsx
function ItemGroup (line 8) | function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
function ItemSeparator (line 22) | function ItemSeparator({
function Item (line 58) | function Item({
function ItemMedia (line 99) | function ItemMedia({
function ItemContent (line 114) | function ItemContent({ className, ...props }: React.ComponentProps<"div"...
function ItemTitle (line 127) | function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
function ItemDescription (line 140) | function ItemDescription({ className, ...props }: React.ComponentProps<"...
function ItemActions (line 153) | function ItemActions({ className, ...props }: React.ComponentProps<"div"...
function ItemHeader (line 163) | function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
function ItemFooter (line 176) | function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui-rtl/kbd.tsx
function Kbd (line 3) | function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
function KbdGroup (line 16) | function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui-rtl/label.tsx
function Label (line 6) | function Label({ className, ...props }: React.ComponentProps<"label">) {
FILE: apps/v4/examples/base/ui-rtl/menubar.tsx
function Menubar (line 24) | function Menubar({ className, ...props }: MenubarPrimitive.Props) {
function MenubarMenu (line 37) | function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownM...
function MenubarGroup (line 41) | function MenubarGroup({
function MenubarPortal (line 47) | function MenubarPortal({
function MenubarTrigger (line 53) | function MenubarTrigger({
function MenubarContent (line 69) | function MenubarContent({
function MenubarItem (line 91) | function MenubarItem({
function MenubarCheckboxItem (line 111) | function MenubarCheckboxItem({
function MenubarRadioGroup (line 141) | function MenubarRadioGroup({
function MenubarRadioItem (line 147) | function MenubarRadioItem({
function MenubarLabel (line 175) | function MenubarLabel({
function MenubarSeparator (line 195) | function MenubarSeparator({
function MenubarShortcut (line 208) | function MenubarShortcut({
function MenubarSub (line 224) | function MenubarSub({
function MenubarSubTrigger (line 230) | function MenubarSubTrigger({
function MenubarSubContent (line 250) | function MenubarSubContent({
FILE: apps/v4/examples/base/ui-rtl/native-select.tsx
type NativeSelectProps (line 5) | type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
function NativeSelect (line 9) | function NativeSelect({
function NativeSelectOption (line 38) | function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
function NativeSelectOptGroup (line 42) | function NativeSelectOptGroup({
FILE: apps/v4/examples/base/ui-rtl/navigation-menu.tsx
function NavigationMenu (line 6) | function NavigationMenu({
function NavigationMenuList (line 28) | function NavigationMenuList({
function NavigationMenuItem (line 44) | function NavigationMenuItem({
function NavigationMenuTrigger (line 61) | function NavigationMenuTrigger({
function NavigationMenuContent (line 81) | function NavigationMenuContent({
function NavigationMenuPositioner (line 97) | function NavigationMenuPositioner({
function NavigationMenuLink (line 126) | function NavigationMenuLink({
function NavigationMenuIndicator (line 142) | function NavigationMenuIndicator({
FILE: apps/v4/examples/base/ui-rtl/pagination.tsx
function Pagination (line 10) | function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
function PaginationContent (line 22) | function PaginationContent({
function PaginationItem (line 35) | function PaginationItem({ ...props }: React.ComponentProps<"li">) {
type PaginationLinkProps (line 39) | type PaginationLinkProps = {
function PaginationLink (line 44) | function PaginationLink({
function PaginationPrevious (line 68) | function PaginationPrevious({
function PaginationNext (line 86) | function PaginationNext({
function PaginationEllipsis (line 104) | function PaginationEllipsis({
FILE: apps/v4/examples/base/ui-rtl/popover.tsx
function Popover (line 7) | function Popover({ ...props }: PopoverPrimitive.Root.Props) {
function PopoverTrigger (line 11) | function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
function PopoverContent (line 15) | function PopoverContent({
function PopoverHeader (line 49) | function PopoverHeader({ className, ...props }: React.ComponentProps<"di...
function PopoverTitle (line 59) | function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Pr...
function PopoverDescription (line 69) | function PopoverDescription({
FILE: apps/v4/examples/base/ui-rtl/progress.tsx
function Progress (line 6) | function Progress({
function ProgressTrack (line 27) | function ProgressTrack({ className, ...props }: ProgressPrimitive.Track....
function ProgressIndicator (line 40) | function ProgressIndicator({
function ProgressLabel (line 53) | function ProgressLabel({ className, ...props }: ProgressPrimitive.Label....
function ProgressValue (line 63) | function ProgressValue({ className, ...props }: ProgressPrimitive.Value....
FILE: apps/v4/examples/base/ui-rtl/radio-group.tsx
function RadioGroup (line 7) | function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
function RadioGroupItem (line 17) | function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Pro...
FILE: apps/v4/examples/base/ui-rtl/resizable.tsx
function ResizablePanelGroup (line 6) | function ResizablePanelGroup({
function ResizablePanel (line 22) | function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
function ResizableHandle (line 26) | function ResizableHandle({
FILE: apps/v4/examples/base/ui-rtl/scroll-area.tsx
function ScrollArea (line 7) | function ScrollArea({
function ScrollBar (line 30) | function ScrollBar({
FILE: apps/v4/examples/base/ui-rtl/select.tsx
function SelectGroup (line 10) | function SelectGroup({ className, ...props }: SelectPrimitive.Group.Prop...
function SelectValue (line 20) | function SelectValue({ className, ...props }: SelectPrimitive.Value.Prop...
function SelectTrigger (line 30) | function SelectTrigger({
function SelectContent (line 58) | function SelectContent({
function SelectLabel (line 100) | function SelectLabel({
function SelectItem (line 113) | function SelectItem({
function SelectSeparator (line 141) | function SelectSeparator({
function SelectScrollUpButton (line 154) | function SelectScrollUpButton({
function SelectScrollDownButton (line 172) | function SelectScrollDownButton({
FILE: apps/v4/examples/base/ui-rtl/separator.tsx
function Separator (line 6) | function Separator({
FILE: apps/v4/examples/base/ui-rtl/sheet.tsx
function Sheet (line 9) | function Sheet({ ...props }: SheetPrimitive.Root.Props) {
function SheetTrigger (line 13) | function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
function SheetClose (line 17) | function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
function SheetPortal (line 21) | function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
function SheetOverlay (line 25) | function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.P...
function SheetContent (line 38) | function SheetContent({
function SheetHeader (line 81) | function SheetHeader({ className, ...props }: React.ComponentProps<"div"...
function SheetFooter (line 91) | function SheetFooter({ className, ...props }: React.ComponentProps<"div"...
function SheetTitle (line 101) | function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
function SheetDescription (line 114) | function SheetDescription({
FILE: apps/v4/examples/base/ui-rtl/sidebar.tsx
constant SIDEBAR_COOKIE_NAME (line 27) | const SIDEBAR_COOKIE_NAME = "sidebar_state"
constant SIDEBAR_COOKIE_MAX_AGE (line 28) | const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
constant SIDEBAR_WIDTH (line 29) | const SIDEBAR_WIDTH = "16rem"
constant SIDEBAR_WIDTH_MOBILE (line 30) | const SIDEBAR_WIDTH_MOBILE = "18rem"
constant SIDEBAR_WIDTH_ICON (line 31) | const SIDEBAR_WIDTH_ICON = "3rem"
constant SIDEBAR_KEYBOARD_SHORTCUT (line 32) | const SIDEBAR_KEYBOARD_SHORTCUT = "b"
type SidebarContextProps (line 34) | type SidebarContextProps = {
function useSidebar (line 46) | function useSidebar() {
function SidebarProvider (line 55) | function SidebarProvider({
function Sidebar (line 151) | function Sidebar({
function SidebarTrigger (line 253) | function SidebarTrigger({
function SidebarRail (line 279) | function SidebarRail({ className, ...props }: React.ComponentProps<"butt...
function SidebarInset (line 304) | function SidebarInset({ className, ...props }: React.ComponentProps<"mai...
function SidebarInput (line 317) | function SidebarInput({
function SidebarHeader (line 331) | function SidebarHeader({ className, ...props }: React.ComponentProps<"di...
function SidebarFooter (line 342) | function SidebarFooter({ className, ...props }: React.ComponentProps<"di...
function SidebarSeparator (line 353) | function SidebarSeparator({
function SidebarContent (line 367) | function SidebarContent({ className, ...props }: React.ComponentProps<"d...
function SidebarGroup (line 381) | function SidebarGroup({ className, ...props }: React.ComponentProps<"div...
function SidebarGroupLabel (line 392) | function SidebarGroupLabel({
function SidebarGroupAction (line 416) | function SidebarGroupAction({
function SidebarGroupContent (line 440) | function SidebarGroupContent({
function SidebarMenu (line 454) | function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
function SidebarMenuItem (line 465) | function SidebarMenuItem({ className, ...props }: React.ComponentProps<"...
function SidebarMenuButton (line 498) | function SidebarMenuButton({
function SidebarMenuAction (line 552) | function SidebarMenuAction({
function SidebarMenuBadge (line 582) | function SidebarMenuBadge({
function SidebarMenuSkeleton (line 599) | function SidebarMenuSkeleton({
function SidebarMenuSub (line 637) | function SidebarMenuSub({ className, ...props }: React.ComponentProps<"u...
function SidebarMenuSubItem (line 651) | function SidebarMenuSubItem({
function SidebarMenuSubButton (line 665) | function SidebarMenuSubButton({
FILE: apps/v4/examples/base/ui-rtl/skeleton.tsx
function Skeleton (line 3) | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui-rtl/slider.tsx
function Slider (line 7) | function Slider({
FILE: apps/v4/examples/base/ui-rtl/spinner.tsx
function Spinner (line 4) | function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
FILE: apps/v4/examples/base/ui-rtl/switch.tsx
function Switch (line 6) | function Switch({
FILE: apps/v4/examples/base/ui-rtl/table.tsx
function Table (line 6) | function Table({ className, ...props }: React.ComponentProps<"table">) {
function TableHeader (line 21) | function TableHeader({ className, ...props }: React.ComponentProps<"thea...
function TableBody (line 31) | function TableBody({ className, ...props }: React.ComponentProps<"tbody"...
function TableFooter (line 41) | function TableFooter({ className, ...props }: React.ComponentProps<"tfoo...
function TableRow (line 54) | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
function TableHead (line 67) | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
function TableCell (line 80) | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
function TableCaption (line 93) | function TableCaption({
FILE: apps/v4/examples/base/ui-rtl/tabs.tsx
function Tabs (line 7) | function Tabs({
function TabsList (line 40) | function TabsList({
function TabsTrigger (line 55) | function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
function TabsContent (line 71) | function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
FILE: apps/v4/examples/base/ui-rtl/textarea.tsx
function Textarea (line 4) | function Textarea({ className, ...props }: React.ComponentProps<"textare...
FILE: apps/v4/examples/base/ui-rtl/toggle-group.tsx
function ToggleGroup (line 22) | function ToggleGroup({
function ToggleGroupItem (line 58) | function ToggleGroupItem({
FILE: apps/v4/examples/base/ui-rtl/toggle.tsx
function Toggle (line 28) | function Toggle({
FILE: apps/v4/examples/base/ui-rtl/tooltip.tsx
function TooltipProvider (line 6) | function TooltipProvider({
function Tooltip (line 19) | function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
function TooltipTrigger (line 23) | function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
function TooltipContent (line 27) | function TooltipContent({
FILE: apps/v4/examples/base/ui/accordion.tsx
function Accordion (line 7) | function Accordion({ className, ...props }: AccordionPrimitive.Root.Prop...
function AccordionItem (line 17) | function AccordionItem({ className, ...props }: AccordionPrimitive.Item....
function AccordionTrigger (line 27) | function AccordionTrigger({
function AccordionContent (line 56) | function AccordionContent({
FILE: apps/v4/examples/base/ui/alert-dialog.tsx
function AlertDialog (line 8) | function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
function AlertDialogTrigger (line 12) | function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.P...
function AlertDialogPortal (line 18) | function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Pro...
function AlertDialogOverlay (line 24) | function AlertDialogOverlay({
function AlertDialogContent (line 40) | function AlertDialogContent({
function AlertDialogHeader (line 63) | function AlertDialogHeader({
function AlertDialogFooter (line 79) | function AlertDialogFooter({
function AlertDialogMedia (line 95) | function AlertDialogMedia({
function AlertDialogTitle (line 111) | function AlertDialogTitle({
function AlertDialogDescription (line 127) | function AlertDialogDescription({
function AlertDialogAction (line 143) | function AlertDialogAction({
function AlertDialogCancel (line 156) | function AlertDialogCancel({
FILE: apps/v4/examples/base/ui/alert.tsx
function Alert (line 21) | function Alert({
function AlertTitle (line 36) | function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
function AlertDescription (line 49) | function AlertDescription({
function AlertAction (line 65) | function AlertAction({ className, ...props }: React.ComponentProps<"div"...
FILE: apps/v4/examples/base/ui/aspect-ratio.tsx
function AspectRatio (line 3) | function AspectRatio({
FILE: apps/v4/examples/base/ui/avatar.tsx
function Avatar (line 7) | function Avatar({
function AvatarImage (line 27) | function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Prop...
function AvatarFallback (line 40) | function AvatarFallback({
function AvatarBadge (line 56) | function AvatarBadge({ className, ...props }: React.ComponentProps<"span...
function AvatarGroup (line 72) | function AvatarGroup({ className, ...props }: React.ComponentProps<"div"...
function AvatarGroupCount (line 85) | function AvatarGroupCount({
FILE: apps/v4/examples/base/ui/badge.tsx
function Badge (line 29) | function Badge({
FILE: apps/v4/examples/base/ui/breadcrumb.tsx
function Breadcrumb (line 7) | function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
function BreadcrumbList (line 18) | function BreadcrumbList({ className, ...props }: React.ComponentProps<"o...
function BreadcrumbItem (line 31) | function BreadcrumbItem({ className, ...props }: React.ComponentProps<"l...
function BreadcrumbLink (line 41) | function BreadcrumbLink({
function BreadcrumbPage (line 61) | function BreadcrumbPage({ className, ...props }: React.ComponentProps<"s...
function BreadcrumbSeparator (line 74) | function BreadcrumbSeparator({
function BreadcrumbEllipsis (line 92) | function BreadcrumbEllipsis({
FILE: apps/v4/examples/base/ui/button-group.tsx
function ButtonGroup (line 24) | function ButtonGroup({
function ButtonGroupText (line 40) | function ButtonGroupText({
function ButtonGroupSeparator (line 63) | function ButtonGroupSeparator({
FILE: apps/v4/examples/base/ui/button.tsx
function Button (line 44) | function Button({
FILE: apps/v4/examples/base/ui/calendar.tsx
function Calendar (line 18) | function Calendar({
function CalendarDayButton (line 192) | function CalendarDayButton({
FILE: apps/v4/examples/base/ui/card.tsx
function Card (line 4) | function Card({
function CardHeader (line 22) | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
function CardTitle (line 35) | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
function CardDescription (line 48) | function CardDescription({ className, ...props }: React.ComponentProps<"...
function CardAction (line 58) | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
function CardContent (line 71) | function CardContent({ className, ...props }: React.ComponentProps<"div"...
function CardFooter (line 81) | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui/carousel.tsx
type CarouselApi (line 11) | type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters (line 12) | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions (line 13) | type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin (line 14) | type CarouselPlugin = UseCarouselParameters[1]
type CarouselProps (line 16) | type CarouselProps = {
type CarouselContextProps (line 23) | type CarouselContextProps = {
function useCarousel (line 34) | function useCarousel() {
function Carousel (line 44) | function Carousel({
function CarouselContent (line 134) | function CarouselContent({ className, ...props }: React.ComponentProps<"...
function CarouselItem (line 155) | function CarouselItem({ className, ...props }: React.ComponentProps<"div...
function CarouselPrevious (line 173) | function CarouselPrevious({
function CarouselNext (line 203) | function CarouselNext({
FILE: apps/v4/examples/base/ui/chart.tsx
constant THEMES (line 8) | const THEMES = { light: "", dark: ".dark" } as const
type ChartConfig (line 10) | type ChartConfig = {
type ChartContextProps (line 20) | type ChartContextProps = {
function useChart (line 26) | function useChart() {
function ChartContainer (line 36) | function ChartContainer({
function ChartTooltipContent (line 106) | function ChartTooltipContent({
function ChartLegendContent (line 254) | function ChartLegendContent({
function getPayloadConfigFromPayload (line 310) | function getPayloadConfigFromPayload(
FILE: apps/v4/examples/base/ui/checkbox.tsx
function Checkbox (line 7) | function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
FILE: apps/v4/examples/base/ui/collapsible.tsx
function Collapsible (line 5) | function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
function CollapsibleTrigger (line 9) | function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.P...
function CollapsibleContent (line 15) | function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Pro...
FILE: apps/v4/examples/base/ui/combobox.tsx
function ComboboxValue (line 17) | function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
function ComboboxTrigger (line 21) | function ComboboxTrigger({
function ComboboxClear (line 38) | function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear....
function ComboboxInput (line 51) | function ComboboxInput({
function ComboboxContent (line 86) | function ComboboxContent({
function ComboboxList (line 123) | function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Pr...
function ComboboxItem (line 136) | function ComboboxItem({
function ComboboxGroup (line 162) | function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group....
function ComboboxLabel (line 172) | function ComboboxLabel({
function ComboboxCollection (line 185) | function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.P...
function ComboboxEmpty (line 191) | function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty....
function ComboboxSeparator (line 204) | function ComboboxSeparator({
function ComboboxChips (line 217) | function ComboboxChips({
function ComboboxChip (line 234) | function ComboboxChip({
function ComboboxChipsInput (line 265) | function ComboboxChipsInput({
function useComboboxAnchor (line 278) | function useComboboxAnchor() {
FILE: apps/v4/examples/base/ui/command.tsx
function Command (line 16) | function Command({
function CommandDialog (line 32) | function CommandDialog({
function CommandInput (line 65) | function CommandInput({
function CommandList (line 88) | function CommandList({
function CommandEmpty (line 104) | function CommandEmpty({
function CommandGroup (line 117) | function CommandGroup({
function CommandSeparator (line 133) | function CommandSeparator({
function CommandItem (line 146) | function CommandItem({
function CommandShortcut (line 166) | function CommandShortcut({
FILE: apps/v4/examples/base/ui/context-menu.tsx
function ContextMenu (line 8) | function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
function ContextMenuPortal (line 12) | function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Pro...
function ContextMenuTrigger (line 18) | function ContextMenuTrigger({
function ContextMenuContent (line 31) | function ContextMenuContent({
function ContextMenuGroup (line 65) | function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
function ContextMenuLabel (line 71) | function ContextMenuLabel({
function ContextMenuItem (line 91) | function ContextMenuItem({
function ContextMenuSub (line 114) | function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.P...
function ContextMenuSubTrigger (line 120) | function ContextMenuSubTrigger({
function ContextMenuSubContent (line 144) | function ContextMenuSubContent({
function ContextMenuCheckboxItem (line 157) | function ContextMenuCheckboxItem({
function ContextMenuRadioGroup (line 187) | function ContextMenuRadioGroup({
function ContextMenuRadioItem (line 198) | function ContextMenuRadioItem({
function ContextMenuSeparator (line 226) | function ContextMenuSeparator({
function ContextMenuShortcut (line 239) | function ContextMenuShortcut({
FILE: apps/v4/examples/base/ui/dialog.tsx
function Dialog (line 9) | function Dialog({ ...props }: DialogPrimitive.Root.Props) {
function DialogTrigger (line 13) | function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
function DialogPortal (line 17) | function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
function DialogClose (line 21) | function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
function DialogOverlay (line 25) | function DialogOverlay({
function DialogContent (line 41) | function DialogContent({
function DialogHeader (line 81) | function DialogHeader({ className, ...props }: React.ComponentProps<"div...
function DialogFooter (line 91) | function DialogFooter({
function DialogTitle (line 118) | function DialogTitle({ className, ...props }: DialogPrimitive.Title.Prop...
function DialogDescription (line 131) | function DialogDescription({
FILE: apps/v4/examples/base/ui/drawer.tsx
function Drawer (line 7) | function Drawer({
function DrawerTrigger (line 13) | function DrawerTrigger({
function DrawerPortal (line 19) | function DrawerPortal({
function DrawerClose (line 25) | function DrawerClose({
function DrawerOverlay (line 31) | function DrawerOverlay({
function DrawerContent (line 47) | function DrawerContent({
function DrawerHeader (line 70) | function DrawerHeader({ className, ...props }: React.ComponentProps<"div...
function DrawerFooter (line 83) | function DrawerFooter({ className, ...props }: React.ComponentProps<"div...
function DrawerTitle (line 93) | function DrawerTitle({
function DrawerDescription (line 109) | function DrawerDescription({
FILE: apps/v4/examples/base/ui/dropdown-menu.tsx
function DropdownMenu (line 8) | function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
function DropdownMenuPortal (line 12) | function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
function DropdownMenuTrigger (line 16) | function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
function DropdownMenuContent (line 20) | function DropdownMenuContent({
function DropdownMenuGroup (line 54) | function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
function DropdownMenuLabel (line 58) | function DropdownMenuLabel({
function DropdownMenuItem (line 78) | function DropdownMenuItem({
function DropdownMenuSub (line 101) | function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
function DropdownMenuSubTrigger (line 105) | function DropdownMenuSubTrigger({
function DropdownMenuSubContent (line 129) | function DropdownMenuSubContent({
function DropdownMenuCheckboxItem (line 153) | function DropdownMenuCheckboxItem({
function DropdownMenuRadioGroup (line 186) | function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.P...
function DropdownMenuRadioItem (line 195) | function DropdownMenuRadioItem({
function DropdownMenuSeparator (line 226) | function DropdownMenuSeparator({
function DropdownMenuShortcut (line 239) | function DropdownMenuShortcut({
FILE: apps/v4/examples/base/ui/empty.tsx
function Empty (line 4) | function Empty({ className, ...props }: React.ComponentProps<"div">) {
function EmptyHeader (line 17) | function EmptyHeader({ className, ...props }: React.ComponentProps<"div"...
function EmptyMedia (line 42) | function EmptyMedia({
function EmptyTitle (line 57) | function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
function EmptyDescription (line 70) | function EmptyDescription({ className, ...props }: React.ComponentProps<...
function EmptyContent (line 83) | function EmptyContent({ className, ...props }: React.ComponentProps<"div...
FILE: apps/v4/examples/base/ui/field.tsx
function FieldSet (line 9) | function FieldSet({ className, ...props }: React.ComponentProps<"fieldse...
function FieldLegend (line 22) | function FieldLegend({
function FieldGroup (line 40) | function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
function Field (line 71) | function Field({
function FieldContent (line 87) | function FieldContent({ className, ...props }: React.ComponentProps<"div...
function FieldLabel (line 100) | function FieldLabel({
function FieldTitle (line 117) | function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
function FieldDescription (line 130) | function FieldDescription({ className, ...props }: React.ComponentProps<...
function FieldSeparator (line 145) | function FieldSeparator({
function FieldError (line 175) | function FieldError({
FILE: apps/v4/examples/base/ui/hover-card.tsx
function HoverCard (line 6) | function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
function HoverCardTrigger (line 10) | function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Pro...
function HoverCardContent (line 16) | function HoverCardContent({
FILE: apps/v4/examples/base/ui/input-group.tsx
function InputGroup (line 10) | function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
function InputGroupAddon (line 45) | function InputGroupAddon({
function InputGroupButton (line 85) | function InputGroupButton({
function InputGroupText (line 106) | function InputGroupText({ className, ...props }: React.ComponentProps<"s...
function InputGroupInput (line 118) | function InputGroupInput({
function InputGroupTextarea (line 134) | function InputGroupTextarea({
FILE: apps/v4/examples/base/ui/input-otp.tsx
function InputOTP (line 8) | function InputOTP({
function InputOTPGroup (line 29) | function InputOTPGroup({ className, ...props }: React.ComponentProps<"di...
function InputOTPSlot (line 42) | function InputOTPSlot({
function InputOTPSeparator (line 72) | function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui/input.tsx
function Input (line 5) | function Input({ className, type, ...props }: React.ComponentProps<"inpu...
FILE: apps/v4/examples/base/ui/item.tsx
function ItemGroup (line 8) | function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
function ItemSeparator (line 22) | function ItemSeparator({
function Item (line 58) | function Item({
function ItemMedia (line 99) | function ItemMedia({
function ItemContent (line 114) | function ItemContent({ className, ...props }: React.ComponentProps<"div"...
function ItemTitle (line 127) | function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
function ItemDescription (line 140) | function ItemDescription({ className, ...props }: React.ComponentProps<"...
function ItemActions (line 153) | function ItemActions({ className, ...props }: React.ComponentProps<"div"...
function ItemHeader (line 163) | function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
function ItemFooter (line 176) | function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui/kbd.tsx
function Kbd (line 3) | function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
function KbdGroup (line 16) | function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui/label.tsx
function Label (line 6) | function Label({ className, ...props }: React.ComponentProps<"label">) {
FILE: apps/v4/examples/base/ui/menubar.tsx
function Menubar (line 24) | function Menubar({ className, ...props }: MenubarPrimitive.Props) {
function MenubarMenu (line 37) | function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownM...
function MenubarGroup (line 41) | function MenubarGroup({
function MenubarPortal (line 47) | function MenubarPortal({
function MenubarTrigger (line 53) | function MenubarTrigger({
function MenubarContent (line 69) | function MenubarContent({
function MenubarItem (line 91) | function MenubarItem({
function MenubarCheckboxItem (line 111) | function MenubarCheckboxItem({
function MenubarRadioGroup (line 141) | function MenubarRadioGroup({
function MenubarRadioItem (line 147) | function MenubarRadioItem({
function MenubarLabel (line 175) | function MenubarLabel({
function MenubarSeparator (line 195) | function MenubarSeparator({
function MenubarShortcut (line 208) | function MenubarShortcut({
function MenubarSub (line 224) | function MenubarSub({
function MenubarSubTrigger (line 230) | function MenubarSubTrigger({
function MenubarSubContent (line 250) | function MenubarSubContent({
FILE: apps/v4/examples/base/ui/native-select.tsx
type NativeSelectProps (line 5) | type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
function NativeSelect (line 9) | function NativeSelect({
function NativeSelectOption (line 38) | function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
function NativeSelectOptGroup (line 42) | function NativeSelectOptGroup({
FILE: apps/v4/examples/base/ui/navigation-menu.tsx
function NavigationMenu (line 6) | function NavigationMenu({
function NavigationMenuList (line 28) | function NavigationMenuList({
function NavigationMenuItem (line 44) | function NavigationMenuItem({
function NavigationMenuTrigger (line 61) | function NavigationMenuTrigger({
function NavigationMenuContent (line 81) | function NavigationMenuContent({
function NavigationMenuPositioner (line 97) | function NavigationMenuPositioner({
function NavigationMenuLink (line 126) | function NavigationMenuLink({
function NavigationMenuIndicator (line 142) | function NavigationMenuIndicator({
FILE: apps/v4/examples/base/ui/pagination.tsx
function Pagination (line 10) | function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
function PaginationContent (line 22) | function PaginationContent({
function PaginationItem (line 35) | function PaginationItem({ ...props }: React.ComponentProps<"li">) {
type PaginationLinkProps (line 39) | type PaginationLinkProps = {
function PaginationLink (line 44) | function PaginationLink({
function PaginationPrevious (line 68) | function PaginationPrevious({
function PaginationNext (line 86) | function PaginationNext({
function PaginationEllipsis (line 104) | function PaginationEllipsis({
FILE: apps/v4/examples/base/ui/popover.tsx
function Popover (line 7) | function Popover({ ...props }: PopoverPrimitive.Root.Props) {
function PopoverTrigger (line 11) | function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
function PopoverContent (line 15) | function PopoverContent({
function PopoverHeader (line 49) | function PopoverHeader({ className, ...props }: React.ComponentProps<"di...
function PopoverTitle (line 59) | function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Pr...
function PopoverDescription (line 69) | function PopoverDescription({
FILE: apps/v4/examples/base/ui/progress.tsx
function Progress (line 6) | function Progress({
function ProgressTrack (line 27) | function ProgressTrack({ className, ...props }: ProgressPrimitive.Track....
function ProgressIndicator (line 40) | function ProgressIndicator({
function ProgressLabel (line 53) | function ProgressLabel({ className, ...props }: ProgressPrimitive.Label....
function ProgressValue (line 63) | function ProgressValue({ className, ...props }: ProgressPrimitive.Value....
FILE: apps/v4/examples/base/ui/radio-group.tsx
function RadioGroup (line 7) | function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
function RadioGroupItem (line 17) | function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Pro...
FILE: apps/v4/examples/base/ui/resizable.tsx
function ResizablePanelGroup (line 6) | function ResizablePanelGroup({
function ResizablePanel (line 22) | function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
function ResizableHandle (line 26) | function ResizableHandle({
FILE: apps/v4/examples/base/ui/scroll-area.tsx
function ScrollArea (line 7) | function ScrollArea({
function ScrollBar (line 30) | function ScrollBar({
FILE: apps/v4/examples/base/ui/select.tsx
function SelectGroup (line 10) | function SelectGroup({ className, ...props }: SelectPrimitive.Group.Prop...
function SelectValue (line 20) | function SelectValue({ className, ...props }: SelectPrimitive.Value.Prop...
function SelectTrigger (line 30) | function SelectTrigger({
function SelectContent (line 58) | function SelectContent({
function SelectLabel (line 100) | function SelectLabel({
function SelectItem (line 113) | function SelectItem({
function SelectSeparator (line 141) | function SelectSeparator({
function SelectScrollUpButton (line 154) | function SelectScrollUpButton({
function SelectScrollDownButton (line 172) | function SelectScrollDownButton({
FILE: apps/v4/examples/base/ui/separator.tsx
function Separator (line 6) | function Separator({
FILE: apps/v4/examples/base/ui/sheet.tsx
function Sheet (line 9) | function Sheet({ ...props }: SheetPrimitive.Root.Props) {
function SheetTrigger (line 13) | function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
function SheetClose (line 17) | function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
function SheetPortal (line 21) | function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
function SheetOverlay (line 25) | function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.P...
function SheetContent (line 38) | function SheetContent({
function SheetHeader (line 81) | function SheetHeader({ className, ...props }: React.ComponentProps<"div"...
function SheetFooter (line 91) | function SheetFooter({ className, ...props }: React.ComponentProps<"div"...
function SheetTitle (line 101) | function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
function SheetDescription (line 114) | function SheetDescription({
FILE: apps/v4/examples/base/ui/sidebar.tsx
constant SIDEBAR_COOKIE_NAME (line 27) | const SIDEBAR_COOKIE_NAME = "sidebar_state"
constant SIDEBAR_COOKIE_MAX_AGE (line 28) | const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
constant SIDEBAR_WIDTH (line 29) | const SIDEBAR_WIDTH = "16rem"
constant SIDEBAR_WIDTH_MOBILE (line 30) | const SIDEBAR_WIDTH_MOBILE = "18rem"
constant SIDEBAR_WIDTH_ICON (line 31) | const SIDEBAR_WIDTH_ICON = "3rem"
constant SIDEBAR_KEYBOARD_SHORTCUT (line 32) | const SIDEBAR_KEYBOARD_SHORTCUT = "b"
type SidebarContextProps (line 34) | type SidebarContextProps = {
function useSidebar (line 46) | function useSidebar() {
function SidebarProvider (line 55) | function SidebarProvider({
function Sidebar (line 151) | function Sidebar({
function SidebarTrigger (line 253) | function SidebarTrigger({
function SidebarRail (line 279) | function SidebarRail({ className, ...props }: React.ComponentProps<"butt...
function SidebarInset (line 304) | function SidebarInset({ className, ...props }: React.ComponentProps<"mai...
function SidebarInput (line 317) | function SidebarInput({
function SidebarHeader (line 331) | function SidebarHeader({ className, ...props }: React.ComponentProps<"di...
function SidebarFooter (line 342) | function SidebarFooter({ className, ...props }: React.ComponentProps<"di...
function SidebarSeparator (line 353) | function SidebarSeparator({
function SidebarContent (line 367) | function SidebarContent({ className, ...props }: React.ComponentProps<"d...
function SidebarGroup (line 381) | function SidebarGroup({ className, ...props }: React.ComponentProps<"div...
function SidebarGroupLabel (line 392) | function SidebarGroupLabel({
function SidebarGroupAction (line 416) | function SidebarGroupAction({
function SidebarGroupContent (line 440) | function SidebarGroupContent({
function SidebarMenu (line 454) | function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
function SidebarMenuItem (line 465) | function SidebarMenuItem({ className, ...props }: React.ComponentProps<"...
function SidebarMenuButton (line 498) | function SidebarMenuButton({
function SidebarMenuAction (line 552) | function SidebarMenuAction({
function SidebarMenuBadge (line 582) | function SidebarMenuBadge({
function SidebarMenuSkeleton (line 599) | function SidebarMenuSkeleton({
function SidebarMenuSub (line 637) | function SidebarMenuSub({ className, ...props }: React.ComponentProps<"u...
function SidebarMenuSubItem (line 651) | function SidebarMenuSubItem({
function SidebarMenuSubButton (line 665) | function SidebarMenuSubButton({
FILE: apps/v4/examples/base/ui/skeleton.tsx
function Skeleton (line 3) | function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
FILE: apps/v4/examples/base/ui/slider.tsx
function Slider (line 7) | function Slider({
FILE: apps/v4/examples/base/ui/spinner.tsx
function Spinner (line 4) | function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
FILE: apps/v4/examples/base/ui/switch.tsx
function Switch (line 6) | function Switch({
FILE: apps/v4/examples/base/ui/table.tsx
function Table (line 6) | function Table({ className, ...props }: React.ComponentProps<"table">) {
function TableHeader (line 21) | function TableHeader({ className, ...props }: React.ComponentProps<"thea...
function TableBody (line 31) | function TableBody({ className, ...props }: React.ComponentProps<"tbody"...
function TableFooter (line 41) | function TableFooter({ className, ...props }: React.ComponentProps<"tfoo...
function TableRow (line 54) | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
function TableHead (line 67) | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
function TableCell (line 80) | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
function TableCaption (line 93) | function TableCaption({
FILE: apps/v4/examples/base/ui/tabs.tsx
function Tabs (line 7) | function Tabs({
function TabsList (line 40) | function TabsList({
function TabsTrigger (line 55) | function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
function TabsContent (line 71) | function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
FILE: apps/v4/examples/base/ui/textarea.tsx
function Textarea (line 4) | function Textarea({ className, ...props }: React.ComponentProps<"textare...
FILE: apps/v4/examples/base/ui/toggle-group.tsx
function ToggleGroup (line 22) | function ToggleGroup({
function ToggleGroupItem (line 58) | function ToggleGroupItem({
FILE: apps/v4/examples/base/ui/toggle.tsx
function Toggle (line 28) | function Toggle({
FILE: apps/v4/examples/base/ui/tooltip.tsx
function TooltipProvider (line 6) | function TooltipProvider({
function Tooltip (line 19) | function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
function TooltipTrigger (line 23) | function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
function TooltipContent (line 27) | function TooltipContent({
FILE: apps/v4/examples/radix/accordion-basic.tsx
function AccordionBasic (line 29) | function AccordionBasic() {
FILE: apps/v4/examples/radix/accordion-borders.tsx
function AccordionBorders (line 29) | function AccordionBorders() {
FILE: apps/v4/examples/radix/accordion-card.tsx
function AccordionCard (line 36) | function AccordionCard() {
FILE: apps/v4/examples/radix/accordion-demo.tsx
function AccordionDemo (line 8) | function AccordionDemo() {
FILE: apps/v4/examples/radix/accordion-disabled.tsx
function AccordionDisabled (line 8) | function AccordionDisabled() {
FILE: apps/v4/examples/radix/accordion-multiple.tsx
function AccordionMultiple (line 29) | function AccordionMultiple() {
FILE: apps/v4/examples/radix/accordion-rtl.tsx
function AccordionRtl (line 77) | function AccordionRtl() {
FILE: apps/v4/examples/radix/alert-action.tsx
function AlertActionExample (line 9) | function AlertActionExample() {
FILE: apps/v4/examples/radix/alert-basic.tsx
function AlertBasic (line 4) | function AlertBasic() {
FILE: apps/v4/examples/radix/alert-colors.tsx
function AlertColors (line 4) | function AlertColors() {
FILE: apps/v4/examples/radix/alert-demo.tsx
function AlertDemo (line 4) | function AlertDemo() {
FILE: apps/v4/examples/radix/alert-destructive.tsx
function AlertDestructive (line 4) | function AlertDestructive() {
FILE: apps/v4/examples/radix/alert-dialog-basic.tsx
function AlertDialogBasic (line 14) | function AlertDialogBasic() {
FILE: apps/v4/examples/radix/alert-dialog-demo.tsx
function AlertDialogDemo (line 14) | function AlertDialogDemo() {
FILE: apps/v4/examples/radix/alert-dialog-destructive.tsx
function AlertDialogDestructive (line 16) | function AlertDialogDestructive() {
FILE: apps/v4/examples/radix/alert-dialog-media.tsx
function AlertDialogWithMedia (line 16) | function AlertDialogWithMedia() {
FILE: apps/v4/examples/radix/alert-dialog-rtl.tsx
function AlertDialogRtl (line 76) | function AlertDialogRtl() {
FILE: apps/v4/examples/radix/alert-dialog-small-media.tsx
function AlertDialogSmallWithMedia (line 16) | function AlertDialogSmallWithMedia() {
FILE: apps/v4/examples/radix/alert-dialog-small.tsx
function AlertDialogSmall (line 14) | function AlertDialogSmall() {
FILE: apps/v4/examples/radix/alert-rtl.tsx
function AlertRtl (line 65) | function AlertRtl() {
FILE: apps/v4/examples/radix/aspect-ratio-demo.tsx
function AspectRatioDemo (line 4) | function AspectRatioDemo() {
FILE: apps/v4/examples/radix/aspect-ratio-portrait.tsx
function AspectRatioPortrait (line 4) | function AspectRatioPortrait() {
FILE: apps/v4/examples/radix/aspect-ratio-rtl.tsx
function AspectRatioRtl (line 33) | function AspectRatioRtl() {
FILE: apps/v4/examples/radix/aspect-ratio-square.tsx
function AspectRatioSquare (line 4) | function AspectRatioSquare() {
FILE: apps/v4/examples/radix/avatar-badge-icon.tsx
function AvatarBadgeIconExample (line 9) | function AvatarBadgeIconExample() {
FILE: apps/v4/examples/radix/avatar-badge.tsx
function AvatarWithBadge (line 8) | function AvatarWithBadge() {
FILE: apps/v4/examples/radix/avatar-basic.tsx
function AvatarDemo (line 3) | function AvatarDemo() {
FILE: apps/v4/examples/radix/avatar-demo.tsx
function AvatarDemo (line 10) | function AvatarDemo() {
FILE: apps/v4/examples/radix/avatar-dropdown.tsx
function AvatarDropdown (line 12) | function AvatarDropdown() {
FILE: apps/v4/examples/radix/avatar-group-count-icon.tsx
function AvatarGroupCountIconExample (line 10) | function AvatarGroupCountIconExample() {
FILE: apps/v4/examples/radix/avatar-group-count.tsx
function AvatarGroupCountExample (line 9) | function AvatarGroupCountExample() {
FILE: apps/v4/examples/radix/avatar-group.tsx
function AvatarGroupExample (line 8) | function AvatarGroupExample() {
FILE: apps/v4/examples/radix/avatar-rtl.tsx
function AvatarRtl (line 39) | function AvatarRtl() {
FILE: apps/v4/examples/radix/avatar-size.tsx
function AvatarSizeExample (line 3) | function AvatarSizeExample() {
FILE: apps/v4/examples/radix/badge-colors.tsx
function BadgeCustomColors (line 3) | function BadgeCustomColors() {
FILE: apps/v4/examples/radix/badge-demo.tsx
function BadgeDemo (line 3) | function BadgeDemo() {
FILE: apps/v4/examples/radix/badge-icon.tsx
function BadgeWithIconLeft (line 4) | function BadgeWithIconLeft() {
FILE: apps/v4/examples/radix/badge-link.tsx
function BadgeAsLink (line 4) | function BadgeAsLink() {
FILE: apps/v4/examples/radix/badge-rtl.tsx
function BadgeRtl (line 48) | function BadgeRtl() {
FILE: apps/v4/examples/radix/badge-spinner.tsx
function BadgeWithSpinner (line 4) | function BadgeWithSpinner() {
FILE: apps/v4/examples/radix/badge-variants.tsx
function BadgeVariants (line 3) | function BadgeVariants() {
FILE: apps/v4/examples/radix/breadcrumb-basic.tsx
function BreadcrumbBasic (line 10) | function BreadcrumbBasic() {
FILE: apps/v4/examples/radix/breadcrumb-demo.tsx
function BreadcrumbDemo (line 20) | function BreadcrumbDemo() {
FILE: apps/v4/examples/radix/breadcrumb-dropdown.tsx
function BreadcrumbDropdown (line 19) | function BreadcrumbDropdown() {
FILE: apps/v4/examples/radix/breadcrumb-ellipsis.tsx
function BreadcrumbEllipsisDemo (line 12) | function BreadcrumbEllipsisDemo() {
FILE: apps/v4/examples/radix/breadcrumb-link.tsx
function BreadcrumbLinkDemo (line 11) | function BreadcrumbLinkDemo() {
FILE: apps/v4/examples/radix/breadcrumb-rtl.tsx
function BreadcrumbRtl (line 63) | function BreadcrumbRtl() {
FILE: apps/v4/examples/radix/breadcrumb-separator.tsx
function BreadcrumbSeparatorDemo (line 12) | function BreadcrumbSeparatorDemo() {
FILE: apps/v4/examples/radix/button-aschild.tsx
function ButtonAsChild (line 4) | function ButtonAsChild() {
FILE: apps/v4/examples/radix/button-default.tsx
function ButtonDefault (line 3) | function ButtonDefault() {
FILE: apps/v4/examples/radix/button-demo.tsx
function ButtonDemo (line 4) | function ButtonDemo() {
FILE: apps/v4/examples/radix/button-destructive.tsx
function ButtonDestructive (line 3) | function ButtonDestructive() {
FILE: apps/v4/examples/radix/button-ghost.tsx
function ButtonGhost (line 3) | function ButtonGhost() {
FILE: apps/v4/examples/radix/button-group-demo.tsx
function ButtonGroupDemo (line 31) | function ButtonGroupDemo() {
FILE: apps/v4/examples/radix/button-group-dropdown.tsx
function ButtonGroupDropdown (line 24) | function ButtonGroupDropdown() {
FILE: apps/v4/examples/radix/button-group-input-group.tsx
function ButtonGroupInputGroup (line 19) | function ButtonGroupInputGroup() {
FILE: apps/v4/examples/radix/button-group-input.tsx
function ButtonGroupInput (line 6) | function ButtonGroupInput() {
FILE: apps/v4/examples/radix/button-group-nested.tsx
function ButtonGroupNested (line 16) | function ButtonGroupNested() {
FILE: apps/v4/examples/radix/button-group-orientation.tsx
function ButtonGroupOrientation (line 5) | function ButtonGroupOrientation() {
FILE: apps/v4/examples/radix/button-group-popover.tsx
function ButtonGroupPopover (line 15) | function ButtonGroupPopover() {
FILE: apps/v4/examples/radix/button-group-rtl.tsx
function ButtonGroupRtl (line 87) | function ButtonGroupRtl() {
FILE: apps/v4/examples/radix/button-group-select.tsx
constant CURRENCIES (line 16) | const CURRENCIES = [
function ButtonGroupSelect (line 31) | function ButtonGroupSelect() {
FILE: apps/v4/examples/radix/button-group-separator.tsx
function ButtonGroupSeparatorDemo (line 7) | function ButtonGroupSeparatorDemo() {
FILE: apps/v4/examples/radix/button-group-size.tsx
function ButtonGroupSize (line 5) | function ButtonGroupSize() {
FILE: apps/v4/examples/radix/button-group-split.tsx
function ButtonGroupSplit (line 8) | function ButtonGroupSplit() {
FILE: apps/v4/examples/radix/button-icon.tsx
function ButtonIcon (line 4) | function ButtonIcon() {
FILE: apps/v4/examples/radix/button-link.tsx
function ButtonLink (line 3) | function ButtonLink() {
FILE: apps/v4/examples/radix/button-outline.tsx
function ButtonOutline (line 3) | function ButtonOutline() {
FILE: apps/v4/examples/radix/button-rounded.tsx
function ButtonRounded (line 4) | function ButtonRounded() {
FILE: apps/v4/examples/radix/button-rtl.tsx
function ButtonRtl (line 42) | function ButtonRtl() {
FILE: apps/v4/examples/radix/button-secondary.tsx
function ButtonSecondary (line 3) | function ButtonSecondary() {
FILE: apps/v4/examples/radix/button-size.tsx
function ButtonSize (line 4) | function ButtonSize() {
FILE: apps/v4/examples/radix/button-spinner.tsx
function ButtonSpinner (line 4) | function ButtonSpinner() {
FILE: apps/v4/examples/radix/button-with-icon.tsx
function ButtonWithIcon (line 4) | function ButtonWithIcon() {
FILE: apps/v4/examples/radix/calendar-basic.tsx
function CalendarBasic (line 5) | function CalendarBasic() {
FILE: apps/v4/examples/radix/calendar-booked-dates.tsx
function CalendarBookedDates (line 8) | function CalendarBookedDates() {
FILE: apps/v4/examples/radix/calendar-caption.tsx
function CalendarCaption (line 5) | function CalendarCaption() {
FILE: apps/v4/examples/radix/calendar-custom-days.tsx
function CalendarCustomDays (line 9) | function CalendarCustomDays() {
FILE: apps/v4/examples/radix/calendar-demo.tsx
function CalendarDemo (line 6) | function CalendarDemo() {
FILE: apps/v4/examples/radix/calendar-hijri.tsx
function CalendarHijri (line 18) | function CalendarHijri() {
function Calendar (line 40) | function Calendar({
function CalendarDayButton (line 198) | function CalendarDayButton({
FILE: apps/v4/examples/radix/calendar-multiple.tsx
function CalendarMultiple (line 4) | function CalendarMultiple() {
FILE: apps/v4/examples/radix/calendar-presets.tsx
function CalendarWithPresets (line 9) | function CalendarWithPresets() {
FILE: apps/v4/examples/radix/calendar-range.tsx
function CalendarRange (line 9) | function CalendarRange() {
FILE: apps/v4/examples/radix/calendar-rtl.tsx
function CalendarRtl (line 32) | function CalendarRtl() {
FILE: apps/v4/examples/radix/calendar-time.tsx
function CalendarWithTime (line 14) | function CalendarWithTime() {
FILE: apps/v4/examples/radix/calendar-week-numbers.tsx
function CalendarWeekNumbers (line 7) | function CalendarWeekNumbers() {
FILE: apps/v4/examples/radix/card-demo.tsx
function CardDemo (line 14) | function CardDemo() {
FILE: apps/v4/examples/radix/card-image.tsx
function CardImage (line 12) | function CardImage() {
FILE: apps/v4/examples/radix/card-rtl.tsx
function CardRtl (line 67) | function CardRtl() {
FILE: apps/v4/examples/radix/card-small.tsx
function CardSmall (line 11) | function CardSmall() {
FILE: apps/v4/examples/radix/carousel-api.tsx
function CarouselDApiDemo (line 14) | function CarouselDApiDemo() {
FILE: apps/v4/examples/radix/carousel-demo.tsx
function CarouselDemo (line 11) | function CarouselDemo() {
FILE: apps/v4/examples/radix/carousel-multiple.tsx
function CarouselMultiple (line 10) | function CarouselMultiple() {
FILE: apps/v4/examples/radix/carousel-orientation.tsx
function CarouselOrientation (line 11) | function CarouselOrientation() {
FILE: apps/v4/examples/radix/carousel-plugin.tsx
function CarouselPlugin (line 14) | function CarouselPlugin() {
FILE: apps/v4/examples/radix/carousel-rtl.tsx
function toArabicNumerals (line 32) | function toArabicNumerals(num: number): string {
function CarouselRtl (line 41) | function CarouselRtl() {
FILE: apps/v4/examples/radix/carousel-size.tsx
function CarouselSize (line 11) | function CarouselSize() {
FILE: apps/v4/examples/radix/carousel-spacing.tsx
function CarouselSpacing (line 11) | function CarouselSpacing() {
FILE: apps/v4/examples/radix/chart-demo.tsx
function ChartDemo (line 69) | function ChartDemo() {
FILE: apps/v4/examples/radix/chart-example-axis.tsx
function ChartBarDemoAxis (line 26) | function ChartBarDemoAxis() {
FILE: apps/v4/examples/radix/chart-example-grid.tsx
function ChartBarDemoGrid (line 26) | function ChartBarDemoGrid() {
FILE: apps/v4/examples/radix/chart-example-legend.tsx
function ChartBarDemoLegend (line 33) | function ChartBarDemoLegend() {
FILE: apps/v4/examples/radix/chart-example-tooltip.tsx
function ChartBarDemoTooltip (line 31) | function ChartBarDemoTooltip() {
FILE: apps/v4/examples/radix/chart-example.tsx
function ChartExample (line 26) | function ChartExample() {
FILE: apps/v4/examples/radix/chart-rtl.tsx
function ChartRtl (line 69) | function ChartRtl() {
FILE: apps/v4/examples/radix/chart-tooltip.tsx
function ChartTooltipDemo (line 7) | function ChartTooltipDemo() {
function TooltipDemo (line 122) | function TooltipDemo({
FILE: apps/v4/examples/radix/checkbox-basic.tsx
function CheckboxBasic (line 4) | function CheckboxBasic() {
FILE: apps/v4/examples/radix/checkbox-demo.tsx
function CheckboxDemo (line 14) | function CheckboxDemo() {
FILE: apps/v4/examples/radix/checkbox-description.tsx
function CheckboxDescription (line 10) | function CheckboxDescription() {
FILE: apps/v4/examples/radix/checkbox-disabled.tsx
function CheckboxDisabled (line 4) | function CheckboxDisabled() {
FILE: apps/v4/examples/radix/checkbox-group.tsx
function CheckboxGroup (line 11) | function CheckboxGroup() {
FILE: apps/v4/examples/radix/checkbox-invalid.tsx
function CheckboxInvalid (line 4) | function CheckboxInvalid() {
FILE: apps/v4/examples/radix/checkbox-rtl.tsx
function CheckboxRtl (line 55) | function CheckboxRtl() {
FILE: apps/v4/examples/radix/checkbox-table.tsx
function CheckboxInTable (line 41) | function CheckboxInTable() {
FILE: apps/v4/examples/radix/collapsible-basic.tsx
function CollapsibleBasic (line 11) | function CollapsibleBasic() {
FILE: apps/v4/examples/radix/collapsible-demo.tsx
function CollapsibleDemo (line 12) | function CollapsibleDemo() {
FILE: apps/v4/examples/radix/collapsible-file-tree.tsx
type FileTreeItem (line 11) | type FileTreeItem = { name: string } | { name: string; items: FileTreeIt...
function CollapsibleFileTree (line 13) | function CollapsibleFileTree() {
FILE: apps/v4/examples/radix/collapsible-rtl.tsx
function CollapsibleRtl (line 56) | function CollapsibleRtl() {
FILE: apps/v4/examples/radix/collapsible-settings.tsx
function CollapsibleSettings (line 21) | function CollapsibleSettings() {
FILE: apps/v4/examples/radix/combobox-auto-highlight.tsx
function ComboboxAutoHighlight (line 20) | function ComboboxAutoHighlight() {
FILE: apps/v4/examples/radix/combobox-basic.tsx
function ComboboxBasic (line 20) | function ComboboxBasic() {
FILE: apps/v4/examples/radix/combobox-clear.tsx
function ComboboxWithClear (line 20) | function ComboboxWithClear() {
FILE: apps/v4/examples/radix/combobox-custom.tsx
function ComboboxWithCustomItems (line 71) | function ComboboxWithCustomItems() {
FILE: apps/v4/examples/radix/combobox-demo.tsx
function ComboboxBasic (line 20) | function ComboboxBasic() {
FILE: apps/v4/examples/radix/combobox-disabled.tsx
function ComboboxDisabled (line 20) | function ComboboxDisabled() {
FILE: apps/v4/examples/radix/combobox-groups.tsx
function ComboboxWithGroupsAndSeparator (line 52) | function ComboboxWithGroupsAndSeparator() {
FILE: apps/v4/examples/radix/combobox-input-group.tsx
function ComboxboxInputGroup (line 53) | function ComboxboxInputGroup() {
FILE: apps/v4/examples/radix/combobox-invalid.tsx
function ComboboxInvalid (line 20) | function ComboboxInvalid() {
FILE: apps/v4/examples/radix/combobox-multiple.tsx
function ComboboxMultiple (line 25) | function ComboboxMultiple() {
FILE: apps/v4/examples/radix/combobox-popup.tsx
function ComboboxPopup (line 68) | function ComboboxPopup() {
FILE: apps/v4/examples/radix/combobox-rtl.tsx
function ComboboxRtl (line 77) | function ComboboxRtl() {
FILE: apps/v4/examples/radix/command-basic.tsx
function CommandBasic (line 15) | function CommandBasic() {
FILE: apps/v4/examples/radix/command-demo.tsx
function CommandDemo (line 20) | function CommandDemo() {
FILE: apps/v4/examples/radix/command-dialog.tsx
function CommandDialogDemo (line 23) | function CommandDialogDemo() {
FILE: apps/v4/examples/radix/command-groups.tsx
function CommandWithGroups (line 25) | function CommandWithGroups() {
FILE: apps/v4/examples/radix/command-rtl.tsx
function CommandRtl (line 73) | function CommandRtl() {
FILE: apps/v4/examples/radix/command-scrollable.tsx
function CommandManyItems (line 42) | function CommandManyItems() {
FILE: apps/v4/examples/radix/command-shortcuts.tsx
function CommandWithShortcuts (line 17) | function CommandWithShortcuts() {
FILE: apps/v4/examples/radix/context-menu-basic.tsx
function ContextMenuBasic (line 9) | function ContextMenuBasic() {
FILE: apps/v4/examples/radix/context-menu-checkboxes.tsx
function ContextMenuCheckboxes (line 9) | function ContextMenuCheckboxes() {
FILE: apps/v4/examples/radix/context-menu-demo.tsx
function ContextMenuDemo (line 18) | function ContextMenuDemo() {
FILE: apps/v4/examples/radix/context-menu-destructive.tsx
function ContextMenuDestructive (line 11) | function ContextMenuDestructive() {
FILE: apps/v4/examples/radix/context-menu-groups.tsx
function ContextMenuGroups (line 12) | function ContextMenuGroups() {
FILE: apps/v4/examples/radix/context-menu-icons.tsx
function ContextMenuIcons (line 16) | function ContextMenuIcons() {
FILE: apps/v4/examples/radix/context-menu-radio.tsx
function ContextMenuRadio (line 15) | function ContextMenuRadio() {
FILE: apps/v4/examples/radix/context-menu-rtl.tsx
function ContextMenuRtl (line 96) | function ContextMenuRtl() {
FILE: apps/v4/examples/radix/context-menu-shortcuts.tsx
function ContextMenuShortcuts (line 11) | function ContextMenuShortcuts() {
FILE: apps/v4/examples/radix/context-menu-sides.tsx
function ContextMenuSides (line 9) | function ContextMenuSides() {
FILE: apps/v4/examples/radix/context-menu-submenu.tsx
function ContextMenuSubmenu (line 14) | function ContextMenuSubmenu() {
FILE: apps/v4/examples/radix/data-picker-with-dropdowns.tsx
function DataPickerWithDropdowns (line 15) | function DataPickerWithDropdowns() {
FILE: apps/v4/examples/radix/data-table-demo.tsx
type Payment (line 71) | type Payment = {
function DataTableDemo (line 172) | function DataTableDemo() {
FILE: apps/v4/examples/radix/data-table-rtl.tsx
type Payment (line 125) | type Payment = {
function DataTableRtl (line 165) | function DataTableRtl() {
FILE: apps/v4/examples/radix/date-picker-basic.tsx
function DatePickerSimple (line 14) | function DatePickerSimple() {
FILE: apps/v4/examples/radix/date-picker-demo.tsx
function DatePickerDemo (line 14) | function DatePickerDemo() {
FILE: apps/v4/examples/radix/date-picker-dob.tsx
function DatePickerSimple (line 13) | function DatePickerSimple() {
FILE: apps/v4/examples/radix/date-picker-input.tsx
function formatDate (line 19) | function formatDate(date: Date | undefined) {
function isValidDate (line 31) | function isValidDate(date: Date | undefined) {
function DatePickerInput (line 38) | function DatePickerInput() {
FILE: apps/v4/examples/radix/date-picker-natural-language.tsx
function formatDate (line 20) | function formatDate(date: Date | undefined) {
function DatePickerNaturalLanguage (line 32) | function DatePickerNaturalLanguage() {
FILE: apps/v4/examples/radix/date-picker-range.tsx
function DatePickerWithRange (line 16) | function DatePickerWithRange() {
FILE: apps/v4/examples/radix/date-picker-rtl.tsx
function DatePickerRtl (line 55) | function DatePickerRtl() {
FILE: apps/v4/examples/radix/date-picker-time.tsx
function DatePickerTime (line 16) | function DatePickerTime() {
FILE: apps/v4/examples/radix/dialog-close-button.tsx
function DialogCloseButton (line 15) | function DialogCloseButton() {
FILE: apps/v4/examples/radix/dialog-demo.tsx
function DialogDemo (line 16) | function DialogDemo() {
FILE: apps/v4/examples/radix/dialog-no-close-button.tsx
function DialogNoCloseButton (line 11) | function DialogNoCloseButton() {
FILE: apps/v4/examples/radix/dialog-rtl.tsx
function DialogRtl (line 64) | function DialogRtl() {
FILE: apps/v4/examples/radix/dialog-scrollable-content.tsx
function DialogScrollableContent (line 11) | function DialogScrollableContent() {
FILE: apps/v4/examples/radix/dialog-sticky-footer.tsx
function DialogStickyFooter (line 13) | function DialogStickyFooter() {
FILE: apps/v4/examples/radix/drawer-demo.tsx
function DrawerDemo (line 60) | function DrawerDemo() {
FILE: apps/v4/examples/radix/drawer-dialog.tsx
function DrawerDialogDemo (line 29) | function DrawerDialogDemo() {
function ProfileForm (line 76) | function ProfileForm({ className }: React.ComponentProps<"form">) {
FILE: apps/v4/examples/radix/drawer-rtl.tsx
function DrawerRtl (line 110) | function DrawerRtl() {
FILE: apps/v4/examples/radix/drawer-scrollable-content.tsx
function DrawerScrollableContent (line 13) | function DrawerScrollableContent() {
FIL
Copy disabled (too large)
Download .json
Condensed preview — 6754 files, each showing path, character count, and a content snippet. Download the .json file for the full structured content (37,456K chars).
[
{
"path": ".changeset/README.md",
"chars": 510,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 317,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@2.3.0/schema.json\",\n \"changelog\": [\"@changesets/changelog-github\","
},
{
"path": ".claude/settings.local.json",
"chars": 221,
"preview": "{\n \"permissions\": {\n \"allow\": [\n \"Bash(npm test:*)\",\n \"Bash(npm run typecheck:*)\",\n \"Bash(ls:*)\",\n "
},
{
"path": ".commitlintrc.json",
"chars": 53,
"preview": "{\n \"extends\": [\"@commitlint/config-conventional\"]\n}\n"
},
{
"path": ".cursor/rules/registry-bases-parity.mdc",
"chars": 1106,
"preview": "---\ndescription: Keep registry base and radix trees in sync when editing shared UI\nglobs: apps/v4/registry/bases/**/*\nal"
},
{
"path": ".editorconfig",
"chars": 166,
"preview": "# editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_n"
},
{
"path": ".eslintignore",
"chars": 66,
"preview": "node_modules/\ntarget/\n.next/\nbuild/\ndist/\n\n/templates/\n/fixtures/\n"
},
{
"path": ".eslintrc.json",
"chars": 693,
"preview": "{\n \"$schema\": \"https://json.schemastore.org/eslintrc\",\n \"root\": true,\n \"extends\": [\n \"next/core-web-vitals\",\n \""
},
{
"path": ".github/DISCUSSION_TEMPLATE/blocks-request.yml",
"chars": 775,
"preview": "title: \"[blocks]: \"\nlabels: [\"Blocks Request\"]\nbody:\n - type: markdown\n attributes:\n value: |\n ### Thank"
},
{
"path": ".github/FUNDING.yml",
"chars": 64,
"preview": "# These are supported funding model platforms\n\ngithub: [shadcn]\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.yml",
"chars": 2986,
"preview": "name: \"Bug report\"\ndescription: Report an issue\ntitle: '[bug]: '\nlabels: [\"bug\"]\nbody:\n - type: markdown\n attributes"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 243,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: Get Help\n url: https://github.com/shadcn-ui/ui/discussions/new?c"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.yml",
"chars": 1910,
"preview": "name: \"Feature request\"\ndescription: Create a feature request for shadcn/ui\ntitle: '[feat]: '\nlabels: ['area: request']\n"
},
{
"path": ".github/changeset-version.js",
"chars": 699,
"preview": "// ORIGINALLY FROM CLOUDFLARE WRANGLER:\n// https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.j"
},
{
"path": ".github/dependabot.yml",
"chars": 1202,
"preview": "version: 2\nupdates:\n - package-ecosystem: \"npm\"\n directory: \"/\"\n schedule:\n interval: \"weekly\"\n - package-e"
},
{
"path": ".github/version-script-beta.js",
"chars": 600,
"preview": "// ORIGINALLY FROM CLOUDFLARE WRANGLER:\n// https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js\n\n"
},
{
"path": ".github/version-script-next.js",
"chars": 600,
"preview": "// ORIGINALLY FROM CLOUDFLARE WRANGLER:\n// https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js\n\n"
},
{
"path": ".github/workflows/code-check.yml",
"chars": 3002,
"preview": "name: Code check\n\non:\n pull_request:\n branches: [\"*\"]\n\njobs:\n lint:\n runs-on: ubuntu-latest\n name: pnpm lint\n"
},
{
"path": ".github/workflows/issue-stale.yml",
"chars": 2487,
"preview": "# Adapted from vercel/next.js\nname: \"Stale issue handler\"\non:\n workflow_dispatch:\n schedule:\n # This runs every day"
},
{
"path": ".github/workflows/prerelease-comment.yml",
"chars": 2104,
"preview": "# Adapted from create-t3-app.\nname: Write Beta Release comment\n\non:\n workflow_run:\n workflows: [\"Release - Beta\"]\n "
},
{
"path": ".github/workflows/prerelease.yml",
"chars": 1586,
"preview": "# Adapted from create-t3-app.\n\nname: Release - Beta\n\non:\n pull_request:\n types: [labeled]\n branches:\n - main"
},
{
"path": ".github/workflows/release.yml",
"chars": 1386,
"preview": "# Adapted from create-t3-app.\n\nname: Release\n\non:\n push:\n branches:\n - main\n\npermissions:\n id-token: write\n c"
},
{
"path": ".github/workflows/test.yml",
"chars": 1080,
"preview": "name: Test\n\non:\n pull_request:\n branches: [\"*\"]\n\njobs:\n test:\n runs-on: ubuntu-latest\n name: pnpm test\n en"
},
{
"path": ".github/workflows/validate-registries.yml",
"chars": 4052,
"preview": "name: Validate Registries\n\non:\n pull_request:\n paths:\n - \"apps/v4/public/r/registries.json\"\n - \"apps/v4/re"
},
{
"path": ".gitignore",
"chars": 486,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n.pnp\n"
},
{
"path": ".kodiak.toml",
"chars": 379,
"preview": "# .kodiak.toml\nversion = 1\n\n[merge]\nautomerge_label = \"automerge\"\nrequire_automerge_label = true\nmethod = \"squash\"\ndelet"
},
{
"path": ".npmrc",
"chars": 53,
"preview": "auto-install-peers=true\nlink-workspace-packages=true\n"
},
{
"path": ".nvmrc",
"chars": 8,
"preview": "v20.5.1\n"
},
{
"path": ".prettierignore",
"chars": 100,
"preview": "dist\nnode_modules\n.next\nbuild\n.contentlayer\n**/fixtures\ndeprecated\napps/v4/registry/styles/**/*.css\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 5571,
"preview": "# Contributing\n\nThanks for your interest in contributing to ui.shadcn.com. We're happy to have you here.\n\nPlease take a "
},
{
"path": "LICENSE.md",
"chars": 1063,
"preview": "MIT License\n\nCopyright (c) 2023 shadcn\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof "
},
{
"path": "README.md",
"chars": 467,
"preview": "# shadcn/ui\n\nA set of beautifully designed components that you can customize, extend, and build on. Start here then make"
},
{
"path": "SECURITY.md",
"chars": 538,
"preview": "# Security Policy\n\nIf you believe you have found a security vulnerability, we encourage you to let us know right away.\n\n"
},
{
"path": "apps/v4/.env.example",
"chars": 75,
"preview": "NEXT_PUBLIC_V0_URL=https://v0.dev\nNEXT_PUBLIC_APP_URL=http://localhost:4000"
},
{
"path": "apps/v4/.gitignore",
"chars": 559,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "apps/v4/.prettierignore",
"chars": 129,
"preview": "dist\nnode_modules\n.next\nbuild\n.contentlayer\nregistry/__index__.tsx\ncontent/docs/components/calendar.mdx\nregistry/styles/"
},
{
"path": "apps/v4/README.md",
"chars": 100,
"preview": "This is a wip registry for the `shadcn` canary version. It has React 19 and Tailwind v4 components.\n"
},
{
"path": "apps/v4/app/(app)/(root)/components/appearance-settings.tsx",
"chars": 4246,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } "
},
{
"path": "apps/v4/app/(app)/(root)/components/button-group-demo.tsx",
"chars": 3573,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } "
},
{
"path": "apps/v4/app/(app)/(root)/components/button-group-input-group.tsx",
"chars": 1775,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } "
},
{
"path": "apps/v4/app/(app)/(root)/components/button-group-nested.tsx",
"chars": 823,
"preview": "\"use client\"\n\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } from \"@/examples/radix/ui/butto"
},
{
"path": "apps/v4/app/(app)/(root)/components/button-group-popover.tsx",
"chars": 1549,
"preview": "import { Button } from \"@/examples/radix/ui/button\"\nimport { ButtonGroup } from \"@/examples/radix/ui/button-group\"\nimpor"
},
{
"path": "apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx",
"chars": 1521,
"preview": "import {\n Avatar,\n AvatarFallback,\n AvatarGroup,\n AvatarImage,\n} from \"@/examples/radix/ui/avatar\"\nimport { Button }"
},
{
"path": "apps/v4/app/(app)/(root)/components/empty-input-group.tsx",
"chars": 1131,
"preview": "import { SearchIcon } from \"lucide-react\"\n\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyT"
},
{
"path": "apps/v4/app/(app)/(root)/components/field-checkbox.tsx",
"chars": 476,
"preview": "import { Checkbox } from \"@/examples/radix/ui/checkbox\"\nimport { Field, FieldLabel } from \"@/examples/radix/ui/field\"\n\ne"
},
{
"path": "apps/v4/app/(app)/(root)/components/field-choice-card.tsx",
"chars": 1858,
"preview": "import {\n Field,\n FieldContent,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSet,\n FieldTitle,\n} from \"@/re"
},
{
"path": "apps/v4/app/(app)/(root)/components/field-demo.tsx",
"chars": 5830,
"preview": "import { Button } from \"@/examples/radix/ui/button\"\nimport { Checkbox } from \"@/examples/radix/ui/checkbox\"\nimport {\n F"
},
{
"path": "apps/v4/app/(app)/(root)/components/field-hear.tsx",
"chars": 2170,
"preview": "import { Card, CardContent } from \"@/examples/radix/ui/card\"\nimport { Checkbox } from \"@/examples/radix/ui/checkbox\"\nimp"
},
{
"path": "apps/v4/app/(app)/(root)/components/field-slider.tsx",
"chars": 856,
"preview": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Field, FieldDescription, FieldTitle } from \"@/examples/radix/ui/"
},
{
"path": "apps/v4/app/(app)/(root)/components/index.tsx",
"chars": 2082,
"preview": "import { FieldSeparator } from \"@/examples/radix/ui/field\"\n\nimport { AppearanceSettings } from \"./appearance-settings\"\ni"
},
{
"path": "apps/v4/app/(app)/(root)/components/input-group-button.tsx",
"chars": 2051,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupI"
},
{
"path": "apps/v4/app/(app)/(root)/components/input-group-demo.tsx",
"chars": 3198,
"preview": "import {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/examples/radix/ui/d"
},
{
"path": "apps/v4/app/(app)/(root)/components/input-group-textarea.tsx",
"chars": 1330,
"preview": "import {\n IconBrandJavascript,\n IconCopy,\n IconCornerDownLeft,\n IconRefresh,\n} from \"@tabler/icons-react\"\n\nimport {\n"
},
{
"path": "apps/v4/app/(app)/(root)/components/item-avatar.tsx",
"chars": 2342,
"preview": "import { Plus } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/"
},
{
"path": "apps/v4/app/(app)/(root)/components/item-demo.tsx",
"chars": 1152,
"preview": "import { Button } from \"@/examples/radix/ui/button\"\nimport {\n Item,\n ItemActions,\n ItemContent,\n ItemDescription,\n "
},
{
"path": "apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx",
"chars": 14613,
"preview": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/examples/"
},
{
"path": "apps/v4/app/(app)/(root)/components/spinner-badge.tsx",
"chars": 446,
"preview": "import { Badge } from \"@/examples/radix/ui/badge\"\nimport { Spinner } from \"@/examples/radix/ui/spinner\"\n\nexport function"
},
{
"path": "apps/v4/app/(app)/(root)/components/spinner-empty.tsx",
"chars": 781,
"preview": "import { Button } from \"@/examples/radix/ui/button\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,"
},
{
"path": "apps/v4/app/(app)/(root)/page.tsx",
"chars": 3071,
"preview": "import { type Metadata } from \"next\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { Announcement "
},
{
"path": "apps/v4/app/(app)/blocks/[...categories]/page.tsx",
"chars": 943,
"preview": "import { getAllBlockIds } from \"@/lib/blocks\"\nimport { registryCategories } from \"@/lib/categories\"\nimport { BlockDispla"
},
{
"path": "apps/v4/app/(app)/blocks/layout.tsx",
"chars": 2068,
"preview": "import { type Metadata } from \"next\"\nimport Link from \"next/link\"\n\nimport { Announcement } from \"@/components/announceme"
},
{
"path": "apps/v4/app/(app)/blocks/page.tsx",
"chars": 945,
"preview": "import Link from \"next/link\"\n\nimport { BlockDisplay } from \"@/components/block-display\"\nimport { getActiveStyle } from \""
},
{
"path": "apps/v4/app/(app)/charts/[type]/page.tsx",
"chars": 2586,
"preview": "import * as React from \"react\"\nimport { notFound } from \"next/navigation\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n C"
},
{
"path": "apps/v4/app/(app)/charts/charts.tsx",
"chars": 13004,
"preview": "import type * as React from \"react\"\n\nimport { ChartAreaAxes } from \"@/registry/new-york-v4/charts/chart-area-axes\"\nimpor"
},
{
"path": "apps/v4/app/(app)/charts/layout.tsx",
"chars": 1975,
"preview": "import { type Metadata } from \"next\"\nimport Link from \"next/link\"\n\nimport { Announcement } from \"@/components/announceme"
},
{
"path": "apps/v4/app/(app)/colors/layout.tsx",
"chars": 2110,
"preview": "import { type Metadata } from \"next\"\nimport Link from \"next/link\"\n\nimport { Announcement } from \"@/components/announceme"
},
{
"path": "apps/v4/app/(app)/colors/page.tsx",
"chars": 446,
"preview": "import { getColors } from \"@/lib/colors\"\nimport { ColorPalette } from \"@/components/color-palette\"\n\nexport const dynamic"
},
{
"path": "apps/v4/app/(app)/docs/[[...slug]]/page.tsx",
"chars": 6681,
"preview": "import Link from \"next/link\"\nimport { notFound } from \"next/navigation\"\nimport { mdxComponents } from \"@/mdx-components\""
},
{
"path": "apps/v4/app/(app)/docs/changelog/page.tsx",
"chars": 5538,
"preview": "import Link from \"next/link\"\nimport { Button } from \"@/examples/radix/ui/button\"\nimport { mdxComponents } from \"@/mdx-co"
},
{
"path": "apps/v4/app/(app)/docs/layout.tsx",
"chars": 843,
"preview": "import { source } from \"@/lib/source\"\nimport { DocsSidebar } from \"@/components/docs-sidebar\"\nimport { SidebarProvider }"
},
{
"path": "apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx",
"chars": 1739,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons"
},
{
"path": "apps/v4/app/(app)/examples/authentication/page.tsx",
"chars": 3373,
"preview": "import { type Metadata } from \"next\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/"
},
{
"path": "apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx",
"chars": 3695,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n IconCamera,\n IconChartBar,\n IconD"
},
{
"path": "apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx",
"chars": 10647,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { "
},
{
"path": "apps/v4/app/(app)/examples/dashboard/components/data-table.tsx",
"chars": 26873,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n "
},
{
"path": "apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx",
"chars": 2511,
"preview": "\"use client\"\n\nimport {\n IconDots,\n IconFolder,\n IconShare3,\n IconTrash,\n type Icon,\n} from \"@tabler/icons-react\"\n\ni"
},
{
"path": "apps/v4/app/(app)/examples/dashboard/components/nav-main.tsx",
"chars": 855,
"preview": "\"use client\"\n\nimport { type Icon } from \"@tabler/icons-react\"\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n Sidebar"
},
{
"path": "apps/v4/app/(app)/examples/dashboard/components/nav-secondary.tsx",
"chars": 926,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Icon } from \"@tabler/icons-react\"\n\nimport {\n SidebarGroup,\n "
},
{
"path": "apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx",
"chars": 3382,
"preview": "\"use client\"\n\nimport {\n IconCreditCard,\n IconDotsVertical,\n IconLogout,\n IconNotification,\n IconUserCircle,\n} from "
},
{
"path": "apps/v4/app/(app)/examples/dashboard/components/section-cards.tsx",
"chars": 3660,
"preview": "import { IconTrendingDown, IconTrendingUp } from \"@tabler/icons-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui"
},
{
"path": "apps/v4/app/(app)/examples/dashboard/components/site-header.tsx",
"chars": 790,
"preview": "import { IconCirclePlusFilled } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\ne"
},
{
"path": "apps/v4/app/(app)/examples/dashboard/data.json",
"chars": 12795,
"preview": "[\n {\n \"id\": 1,\n \"header\": \"Cover page\",\n \"type\": \"Cover page\",\n \"status\": \"In Process\",\n \"target\": \"18\","
},
{
"path": "apps/v4/app/(app)/examples/dashboard/page.tsx",
"chars": 1961,
"preview": "import Image from \"next/image\"\n\nimport {\n SidebarInset,\n SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\ni"
},
{
"path": "apps/v4/app/(app)/examples/layout.tsx",
"chars": 2577,
"preview": "import { type Metadata } from \"next\"\nimport Link from \"next/link\"\n\nimport { Announcement } from \"@/components/announceme"
},
{
"path": "apps/v4/app/(app)/examples/playground/components/code-viewer.tsx",
"chars": 2931,
"preview": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n Dia"
},
{
"path": "apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx",
"chars": 1738,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport {\n Hover"
},
{
"path": "apps/v4/app/(app)/examples/playground/components/model-selector.tsx",
"chars": 5225,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport type { Popover "
},
{
"path": "apps/v4/app/(app)/examples/playground/components/preset-actions.tsx",
"chars": 4061,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\nimport { toast } from \"sonner"
},
{
"path": "apps/v4/app/(app)/examples/playground/components/preset-save.tsx",
"chars": 1359,
"preview": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n Dia"
},
{
"path": "apps/v4/app/(app)/examples/playground/components/preset-selector.tsx",
"chars": 2493,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport type { Popover "
},
{
"path": "apps/v4/app/(app)/examples/playground/components/preset-share.tsx",
"chars": 1556,
"preview": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/"
},
{
"path": "apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx",
"chars": 1738,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport {\n Hover"
},
{
"path": "apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx",
"chars": 1632,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport {\n Hover"
},
{
"path": "apps/v4/app/(app)/examples/playground/data/models.ts",
"chars": 2170,
"preview": "export const types = [\"GPT-3\", \"Codex\"] as const\n\nexport type ModelType = (typeof types)[number]\n\nexport interface Model"
},
{
"path": "apps/v4/app/(app)/examples/playground/data/presets.ts",
"chars": 981,
"preview": "export interface Preset {\n id: string\n name: string\n}\n\nexport const presets: Preset[] = [\n {\n id: \"9cb0e66a-9937-4"
},
{
"path": "apps/v4/app/(app)/examples/playground/page.tsx",
"chars": 13579,
"preview": "import { type Metadata } from \"next\"\nimport Image from \"next/image\"\nimport { RotateCcw } from \"lucide-react\"\n\nimport { B"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx",
"chars": 5653,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/base/ui-rtl/button\"\nimport { ButtonGroup"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/button-group-demo.tsx",
"chars": 5246,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/base/ui-rtl/button\"\nimport { ButtonGroup"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/button-group-input-group.tsx",
"chars": 2356,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/base/ui-rtl/button\"\nimport { ButtonGroup"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/button-group-nested.tsx",
"chars": 1512,
"preview": "\"use client\"\n\nimport { Button } from \"@/examples/base/ui-rtl/button\"\nimport { ButtonGroup } from \"@/examples/base/ui-rtl"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/button-group-popover.tsx",
"chars": 2379,
"preview": "\"use client\"\n\nimport { Button } from \"@/examples/base/ui-rtl/button\"\nimport { ButtonGroup } from \"@/examples/base/ui-rtl"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/empty-avatar-group.tsx",
"chars": 2029,
"preview": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarGroup,\n AvatarImage,\n} from \"@/examples/base/ui-rtl/avatar\"\n"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/field-checkbox.tsx",
"chars": 918,
"preview": "\"use client\"\n\nimport { Checkbox } from \"@/examples/base/ui-rtl/checkbox\"\nimport { Field, FieldLabel } from \"@/examples/b"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/field-demo.tsx",
"chars": 7342,
"preview": "\"use client\"\n\nimport { Button } from \"@/examples/base/ui-rtl/button\"\nimport { Checkbox } from \"@/examples/base/ui-rtl/ch"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/field-hear.tsx",
"chars": 2921,
"preview": "\"use client\"\n\nimport { Card, CardContent } from \"@/examples/base/ui-rtl/card\"\nimport { Checkbox } from \"@/examples/base/"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/field-slider.tsx",
"chars": 1630,
"preview": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n Field,\n FieldDescription,\n FieldTitle,\n} from \"@/examples/ba"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/index.tsx",
"chars": 2965,
"preview": "\"use client\"\n\nimport { DirectionProvider } from \"@/examples/base/ui-rtl/direction\"\nimport { FieldSeparator } from \"@/exa"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx",
"chars": 2764,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupI"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx",
"chars": 4014,
"preview": "\"use client\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/examp"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/item-demo.tsx",
"chars": 1724,
"preview": "\"use client\"\n\nimport { Button } from \"@/examples/base/ui-rtl/button\"\nimport {\n Item,\n ItemActions,\n ItemContent,\n It"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx",
"chars": 18360,
"preview": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/ex"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/spinner-badge.tsx",
"chars": 944,
"preview": "\"use client\"\n\nimport { Badge } from \"@/examples/base/ui-rtl/badge\"\nimport { Spinner } from \"@/examples/base/ui-rtl/spinn"
},
{
"path": "apps/v4/app/(app)/examples/rtl/components/spinner-empty.tsx",
"chars": 1284,
"preview": "\"use client\"\n\nimport { Button } from \"@/examples/base/ui-rtl/button\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescriptio"
},
{
"path": "apps/v4/app/(app)/examples/rtl/page.tsx",
"chars": 292,
"preview": "import { type Metadata } from \"next\"\n\nimport { RtlComponents } from \"./components\"\n\nexport const metadata: Metadata = {\n"
},
{
"path": "apps/v4/app/(app)/examples/tasks/components/columns.tsx",
"chars": 3304,
"preview": "\"use client\"\n\nimport { type ColumnDef } from \"@tanstack/react-table\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/b"
},
{
"path": "apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx",
"chars": 1925,
"preview": "import { type Column } from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from \"lucide-r"
},
{
"path": "apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx",
"chars": 4994,
"preview": "import * as React from \"react\"\nimport { type Column } from \"@tanstack/react-table\"\nimport { Check, PlusCircle } from \"lu"
},
{
"path": "apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx",
"chars": 3266,
"preview": "import { type Table } from \"@tanstack/react-table\"\nimport {\n ChevronLeft,\n ChevronRight,\n ChevronsLeft,\n ChevronsRig"
},
{
"path": "apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx",
"chars": 2080,
"preview": "\"use client\"\n\nimport { type Row } from \"@tanstack/react-table\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { B"
},
{
"path": "apps/v4/app/(app)/examples/tasks/components/data-table-toolbar.tsx",
"chars": 1908,
"preview": "\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { X } from \"lucide-react\"\n\nimport { Button } fro"
},
{
"path": "apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx",
"chars": 1511,
"preview": "\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Settings2 } from \"lucide-react\"\n\nimport { Butt"
},
{
"path": "apps/v4/app/(app)/examples/tasks/components/data-table.tsx",
"chars": 3676,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacete"
},
{
"path": "apps/v4/app/(app)/examples/tasks/components/user-nav.tsx",
"chars": 1963,
"preview": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/"
},
{
"path": "apps/v4/app/(app)/examples/tasks/data/data.tsx",
"chars": 949,
"preview": "import {\n ArrowDown,\n ArrowRight,\n ArrowUp,\n CheckCircle,\n Circle,\n CircleOff,\n HelpCircle,\n Timer,\n} from \"luci"
},
{
"path": "apps/v4/app/(app)/examples/tasks/data/schema.ts",
"chars": 325,
"preview": "import { z } from \"zod\"\n\n// We're keeping a simple non-relational schema here.\n// IRL, you will have a schema for your d"
},
{
"path": "apps/v4/app/(app)/examples/tasks/data/seed.ts",
"chars": 630,
"preview": "import fs from \"fs\"\nimport path from \"path\"\nimport { faker } from \"@faker-js/faker\"\n\nimport { labels, priorities, status"
},
{
"path": "apps/v4/app/(app)/examples/tasks/data/tasks.json",
"chars": 19515,
"preview": "[\n {\n \"id\": \"TASK-8782\",\n \"title\": \"You can't compress the program without quantifying the open-source SSD pixel!"
},
{
"path": "apps/v4/app/(app)/examples/tasks/page.tsx",
"chars": 1878,
"preview": "import { promises as fs } from \"fs\"\nimport path from \"path\"\nimport { type Metadata } from \"next\"\nimport Image from \"next"
},
{
"path": "apps/v4/app/(app)/layout.tsx",
"chars": 433,
"preview": "import { SiteFooter } from \"@/components/site-footer\"\nimport { SiteHeader } from \"@/components/site-header\"\n\nexport defa"
},
{
"path": "apps/v4/app/(app)/llm/[[...slug]]/route.ts",
"chars": 1320,
"preview": "import { notFound } from \"next/navigation\"\nimport { NextResponse, type NextRequest } from \"next/server\"\n\nimport { proces"
},
{
"path": "apps/v4/app/(app)/themes/layout.tsx",
"chars": 1537,
"preview": "import { type Metadata } from \"next\"\nimport Link from \"next/link\"\n\nimport { Announcement } from \"@/components/announceme"
},
{
"path": "apps/v4/app/(app)/themes/page.tsx",
"chars": 679,
"preview": "import { CardsDemo } from \"@/components/cards\"\nimport { ThemeCustomizer } from \"@/components/theme-customizer\"\n\nexport c"
},
{
"path": "apps/v4/app/(create)/components/accent-picker.tsx",
"chars": 3869,
"preview": "\"use client\"\n\nimport { MENU_ACCENTS, type MenuAccentValue } from \"@/registry/config\"\nimport { LockButton } from \"@/app/("
},
{
"path": "apps/v4/app/(create)/components/action-menu.tsx",
"chars": 2305,
"preview": "\"use client\"\n\nimport Script from \"next/script\"\nimport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n Co"
},
{
"path": "apps/v4/app/(create)/components/base-color-picker.tsx",
"chars": 2605,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMounted } from \"@/hooks/use-mounted\"\nimport { BASE_COLORS, typ"
},
{
"path": "apps/v4/app/(create)/components/base-picker.tsx",
"chars": 2367,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { BASES } from \"@/registry/config\"\nimport {\n Picker,\n PickerConte"
},
{
"path": "apps/v4/app/(create)/components/chart-color-picker.tsx",
"chars": 4150,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMounted } from \"@/hooks/use-mounted\"\nimport {\n BASE_COLORS,\n "
},
{
"path": "apps/v4/app/(create)/components/copy-preset.tsx",
"chars": 1215,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/base/ui/button\"\n\nimport { cn } from \"@/l"
},
{
"path": "apps/v4/app/(create)/components/customizer.tsx",
"chars": 4468,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n} from \"@/examp"
},
{
"path": "apps/v4/app/(create)/components/design-system-provider.tsx",
"chars": 8442,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n buildRegistryTheme,\n DEFAULT_CONFIG,\n type DesignSystemConfig"
},
{
"path": "apps/v4/app/(create)/components/font-picker.tsx",
"chars": 4476,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { LockButton } from \"@/app/(create)/components/lock-button\"\nimport "
},
{
"path": "apps/v4/app/(create)/components/history-buttons.tsx",
"chars": 2401,
"preview": "\"use client\"\n\nimport Script from \"next/script\"\nimport { Button } from \"@/examples/base/ui/button\"\nimport { Redo02Icon, U"
},
{
"path": "apps/v4/app/(create)/components/icon-library-picker.tsx",
"chars": 5650,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { iconLibraries, type IconLibraryName } from \"@/registry/config\"\nim"
},
{
"path": "apps/v4/app/(create)/components/icon-placeholder.tsx",
"chars": 2095,
"preview": "\"use client\"\n\nimport { lazy, Suspense } from \"react\"\nimport { SquareIcon } from \"lucide-react\"\nimport type { IconLibrary"
},
{
"path": "apps/v4/app/(create)/components/item-explorer.tsx",
"chars": 4143,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n Collapsible,\n CollapsibleContent,\n"
},
{
"path": "apps/v4/app/(create)/components/lock-button.tsx",
"chars": 1174,
"preview": "\"use client\"\n\nimport {\n SquareLock01Icon,\n SquareUnlock01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsI"
},
{
"path": "apps/v4/app/(create)/components/main-menu.tsx",
"chars": 2970,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Button } from \"@/examples/base/ui/button\"\nimport { Menu09Icon"
},
{
"path": "apps/v4/app/(create)/components/menu-picker.tsx",
"chars": 5234,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu02Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsI"
},
{
"path": "apps/v4/app/(create)/components/mode-switcher.tsx",
"chars": 2526,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport Script from \"next/script\"\nimport { Button } from \"@/examples/base/ui"
},
{
"path": "apps/v4/app/(create)/components/picker.tsx",
"chars": 9321,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } "
},
{
"path": "apps/v4/app/(create)/components/preset-handler.tsx",
"chars": 915,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { useRouter } from \"next/navigation\"\nimport { generateRandomPreset, "
},
{
"path": "apps/v4/app/(create)/components/preset-picker.tsx",
"chars": 3831,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { STYLES, type Preset } from \"@/registry/config\"\nimport {\n Picker,"
},
{
"path": "apps/v4/app/(create)/components/preview-style.tsx",
"chars": 257,
"preview": "\"use client\"\n\nexport function PreviewStyle() {\n return (\n <style jsx global>{`\n html {\n -ms-overflow-sty"
},
{
"path": "apps/v4/app/(create)/components/preview.tsx",
"chars": 4198,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { CMD_K_FORWARD_TYPE } from \"@/app/(create)/components/action-menu\""
},
{
"path": "apps/v4/app/(create)/components/project-form.tsx",
"chars": 13323,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/base/ui/button\"\nimport {\n Dialog,\n Dia"
},
{
"path": "apps/v4/app/(create)/components/radius-picker.tsx",
"chars": 3484,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { RADII, type RadiusValue } from \"@/registry/config\"\nimport { LockB"
},
{
"path": "apps/v4/app/(create)/components/random-button.tsx",
"chars": 2010,
"preview": "\"use client\"\n\nimport Script from \"next/script\"\nimport { Button } from \"@/examples/base/ui/button\"\nimport { DiceFaces05Ic"
},
{
"path": "apps/v4/app/(create)/components/reset-button.tsx",
"chars": 1039,
"preview": "\"use client\"\n\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescr"
},
{
"path": "apps/v4/app/(create)/components/share-button.tsx",
"chars": 1643,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/base/ui/button\"\nimport { Share03Icon, Ti"
},
{
"path": "apps/v4/app/(create)/components/style-picker.tsx",
"chars": 2351,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { type Style, type StyleName } from \"@/registry/config\"\nimport { Lo"
},
{
"path": "apps/v4/app/(create)/components/theme-picker.tsx",
"chars": 3918,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMounted } from \"@/hooks/use-mounted\"\nimport { BASE_COLORS, typ"
},
{
"path": "apps/v4/app/(create)/components/v0-button.tsx",
"chars": 1638,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/base/ui/button\"\nimport { Skeleton } from"
},
{
"path": "apps/v4/app/(create)/components/welcome-dialog.tsx",
"chars": 2200,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/examples/base/ui/button\"\nimport {\n Dialog,\n Dia"
},
{
"path": "apps/v4/app/(create)/create/layout.tsx",
"chars": 401,
"preview": "import { Suspense } from \"react\"\n\nimport { HistoryProvider } from \"@/app/(create)/hooks/use-history\"\nimport { LocksProvi"
},
{
"path": "apps/v4/app/(create)/create/page.tsx",
"chars": 2045,
"preview": "import { type Metadata } from \"next\"\n\nimport { siteConfig } from \"@/lib/config\"\nimport { absoluteUrl } from \"@/lib/utils"
},
{
"path": "apps/v4/app/(create)/hooks/use-action-menu.ts",
"chars": 3617,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { type RegistryItem } from \"shadcn/schema\"\nimport useSWR from \"swr\"\n"
},
{
"path": "apps/v4/app/(create)/hooks/use-design-system.ts",
"chars": 351,
"preview": "\"use client\"\n\nimport { getPresetCode } from \"@/app/(create)/lib/preset-code\"\nimport { useDesignSystemSearchParams } from"
},
{
"path": "apps/v4/app/(create)/hooks/use-history.tsx",
"chars": 3833,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { usePathname, useRouter, useSearchParams } from \"next/navigation\"\n\n"
},
{
"path": "apps/v4/app/(create)/hooks/use-iframe-sync.tsx",
"chars": 1499,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport type { DesignSystemSearchParams } from \"@/app/(create)/lib/search-p"
},
{
"path": "apps/v4/app/(create)/hooks/use-locks.tsx",
"chars": 1332,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nexport type LockableParam =\n | \"style\"\n | \"baseColor\"\n | \"theme\"\n | \"c"
},
{
"path": "apps/v4/app/(create)/hooks/use-random.tsx",
"chars": 5448,
"preview": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n BASE_COLORS,\n getThemesForBaseColor,\n iconLibraries,\n MENU_A"
},
{
"path": "apps/v4/app/(create)/hooks/use-reset.tsx",
"chars": 1659,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport useSWR from \"swr\"\n\nimport { DEFAULT_CONFIG } from \"@/registry/config"
},
{
"path": "apps/v4/app/(create)/hooks/use-theme-toggle.tsx",
"chars": 1244,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { useTheme } from \"next-themes\"\n\nimport { useMetaColor } from \"@/hoo"
},
{
"path": "apps/v4/app/(create)/init/md/build-instructions.ts",
"chars": 8487,
"preview": "import dedent from \"dedent\"\n\nimport { UI_COMPONENTS } from \"@/lib/components\"\nimport {\n buildRegistryBase,\n getBodyFon"
},
{
"path": "apps/v4/app/(create)/init/md/route.ts",
"chars": 855,
"preview": "import { type NextRequest } from \"next/server\"\nimport { track } from \"@vercel/analytics/server\"\n\nimport { parseDesignSys"
},
{
"path": "apps/v4/app/(create)/init/parse-config.test.ts",
"chars": 625,
"preview": "import { describe, expect, it } from \"vitest\"\n\nimport { parseDesignSystemConfig } from \"./parse-config\"\n\ndescribe(\"parse"
},
{
"path": "apps/v4/app/(create)/init/parse-config.ts",
"chars": 1863,
"preview": "import { decodePreset, isPresetCode } from \"shadcn/preset\"\n\nimport {\n designSystemConfigSchema,\n type DesignSystemConf"
},
{
"path": "apps/v4/app/(create)/init/route.ts",
"chars": 1576,
"preview": "import { NextResponse, type NextRequest } from \"next/server\"\nimport { track } from \"@vercel/analytics/server\"\nimport { i"
},
{
"path": "apps/v4/app/(create)/init/v0/route.ts",
"chars": 1268,
"preview": "import { after, NextResponse, type NextRequest } from \"next/server\"\nimport { track } from \"@vercel/analytics/server\"\nimp"
},
{
"path": "apps/v4/app/(create)/lib/api.ts",
"chars": 1827,
"preview": "import \"server-only\"\n\nimport { registryItemSchema } from \"shadcn/schema\"\n\nimport { BASES, getThemesForBaseColor, type Ba"
},
{
"path": "apps/v4/app/(create)/lib/constants.ts",
"chars": 126,
"preview": "export const ALLOWED_ITEM_TYPES = [\"registry:block\", \"registry:example\"]\n\nexport const EXCLUDED_ITEMS = [\"component-exam"
},
{
"path": "apps/v4/app/(create)/lib/fonts.ts",
"chars": 4663,
"preview": "import {\n DM_Sans,\n Figtree,\n Geist,\n Geist_Mono,\n IBM_Plex_Sans,\n Instrument_Sans,\n Inter,\n JetBrains_Mono,\n L"
},
{
"path": "apps/v4/app/(create)/lib/merge-theme.ts",
"chars": 881,
"preview": "import { registryItemSchema, type RegistryItem } from \"shadcn/schema\"\n\nimport { BASE_COLORS, THEMES } from \"@/registry/c"
},
{
"path": "apps/v4/app/(create)/lib/preset-code.ts",
"chars": 1070,
"preview": "import { encodePreset, type PresetConfig } from \"shadcn/preset\"\n\nimport { type DesignSystemConfig } from \"@/registry/con"
},
{
"path": "apps/v4/app/(create)/lib/preset-query.test.ts",
"chars": 909,
"preview": "import { describe, expect, it } from \"vitest\"\n\nimport { resolvePresetOverrides } from \"./preset-query\"\n\ndescribe(\"resolv"
},
{
"path": "apps/v4/app/(create)/lib/preset-query.ts",
"chars": 989,
"preview": "import { V1_CHART_COLOR_MAP, type PresetConfig } from \"shadcn/preset\"\n\nimport { type ChartColorName, type FontHeadingVal"
},
{
"path": "apps/v4/app/(create)/lib/randomize-biases.ts",
"chars": 2622,
"preview": "import type {\n BaseColor,\n BaseColorName,\n Radius,\n StyleName,\n Theme,\n ThemeName,\n} from \"@/registry/config\"\n\nimp"
},
{
"path": "apps/v4/app/(create)/lib/search-params.ts",
"chars": 9083,
"preview": "import * as React from \"react\"\nimport { useSearchParams } from \"next/navigation\"\nimport { useQueryStates } from \"nuqs\"\ni"
},
{
"path": "apps/v4/app/(create)/lib/templates.ts",
"chars": 11492,
"preview": "export const TEMPLATES = [\n {\n value: \"next\",\n title: \"Next.js\",\n logo: '<svg role=\"img\" viewBox=\"0 0 24 24\" x"
},
{
"path": "apps/v4/app/(create)/lib/utils.ts",
"chars": 1168,
"preview": "import { type RegistryItem } from \"shadcn/schema\"\n\nconst mapping = {\n \"registry:block\": \"Blocks\",\n \"registry:example\":"
},
{
"path": "apps/v4/app/(create)/lib/v0.test.ts",
"chars": 3076,
"preview": "import { afterEach, beforeEach, describe, expect, it, vi } from \"vitest\"\n\nimport { DEFAULT_CONFIG } from \"@/registry/con"
},
{
"path": "apps/v4/app/(create)/lib/v0.ts",
"chars": 16806,
"preview": "import dedent from \"dedent\"\nimport {\n registryItemFileSchema,\n registryItemSchema,\n type configSchema,\n type Registr"
},
{
"path": "apps/v4/app/(create)/preview/[base]/[name]/page.tsx",
"chars": 3662,
"preview": "import * as React from \"react\"\nimport { type Metadata } from \"next\"\nimport { notFound } from \"next/navigation\"\n\nimport {"
},
{
"path": "apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx",
"chars": 3600,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n IconCamera,\n IconChartBar,\n IconDashboard,\n IconDatabase,\n I"
},
{
"path": "apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx",
"chars": 10743,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { "
},
{
"path": "apps/v4/app/(examples)/dashboard/components/data-table.tsx",
"chars": 26873,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n "
},
{
"path": "apps/v4/app/(examples)/dashboard/components/mode-toggle.tsx",
"chars": 653,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { IconBrightness } from \"@tabler/icons-react\"\nimport { useTheme } fr"
},
{
"path": "apps/v4/app/(examples)/dashboard/components/nav-documents.tsx",
"chars": 2511,
"preview": "\"use client\"\n\nimport {\n IconDots,\n IconFolder,\n IconShare3,\n IconTrash,\n type Icon,\n} from \"@tabler/icons-react\"\n\ni"
},
{
"path": "apps/v4/app/(examples)/dashboard/components/nav-main.tsx",
"chars": 1699,
"preview": "\"use client\"\n\nimport { IconCirclePlusFilled, IconMail, type Icon } from \"@tabler/icons-react\"\n\nimport { Button } from \"@"
},
{
"path": "apps/v4/app/(examples)/dashboard/components/nav-secondary.tsx",
"chars": 1986,
"preview": "\"use client\"\n\nimport * as React from \"react\"\nimport { IconBrightness, type Icon } from \"@tabler/icons-react\"\nimport { us"
}
]
// ... and 6554 more files (download for full content)
About this extraction
This page contains the full source code of the shadcn-ui/ui GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 6754 files (32.8 MB), approximately 9.0M tokens, and a symbol index with 6320 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.