├── .nvmrc
├── apps
    └── www
    │   ├── pages
    │       ├── .gitkeep
    │       └── api
    │       │   ├── .gitkeep
    │       │   └── components.ts
    │   ├── __registry__
    │       ├── .gitkeep
    │       ├── .autogenerated
    │       └── README.md
    │   ├── .gitignore
    │   ├── postcss.config.cjs
    │   ├── public
    │       ├── og.png
    │       ├── favicon.ico
    │       ├── og-unused.jpg
    │       ├── avatars
    │       │   ├── 01.png
    │       │   ├── 02.png
    │       │   ├── 03.png
    │       │   ├── 04.png
    │       │   └── 05.png
    │       ├── favicon-16x16.png
    │       ├── favicon-32x32.png
    │       ├── images
    │       │   ├── style.jpg
    │       │   └── style-with-theming.jpg
    │       ├── registry
    │       │   ├── styles
    │       │   │   ├── index.json
    │       │   │   └── default
    │       │   │   │   ├── aspect-ratio.json
    │       │   │   │   ├── skeleton.json
    │       │   │   │   ├── collapsible.json
    │       │   │   │   ├── textarea.json
    │       │   │   │   ├── label.json
    │       │   │   │   ├── progress.json
    │       │   │   │   ├── spinner.json
    │       │   │   │   ├── status-dot.json
    │       │   │   │   ├── kbd.json
    │       │   │   │   ├── sonner.json
    │       │   │   │   ├── loading-dots.json
    │       │   │   │   ├── checkbox.json
    │       │   │   │   ├── show-more.json
    │       │   │   │   ├── hover-card.json
    │       │   │   │   └── popover.json
    │       │   └── themes
    │       │   │   └── neutral.json
    │       ├── apple-touch-icon.png
    │       ├── examples
    │       │   ├── cards-dark.png
    │       │   ├── forms-dark.png
    │       │   ├── mail-dark.png
    │       │   ├── mail-light.png
    │       │   ├── music-dark.png
    │       │   ├── tasks-dark.png
    │       │   ├── cards-light.png
    │       │   ├── forms-light.png
    │       │   ├── music-light.png
    │       │   ├── tasks-light.png
    │       │   ├── dashboard-dark.png
    │       │   ├── dashboard-light.png
    │       │   ├── playground-dark.png
    │       │   ├── playground-light.png
    │       │   ├── authentication-dark.png
    │       │   └── authentication-light.png
    │       ├── android-chrome-192x192.png
    │       ├── android-chrome-512x512.png
    │       ├── site.webmanifest
    │       └── schema.json
    │   ├── assets
    │       └── fonts
    │       │   ├── Inter-Bold.ttf
    │       │   └── Inter-Regular.ttf
    │   ├── registry
    │       ├── default
    │       │   ├── example
    │       │   │   ├── grid-cell-span.tsx
    │       │   │   ├── kbd-small.tsx
    │       │   │   ├── spinner-demo.tsx
    │       │   │   ├── kbd-combination.tsx
    │       │   │   ├── spinner-size.tsx
    │       │   │   ├── gauge-arc-priority.tsx
    │       │   │   ├── theme-switcher-demo.tsx
    │       │   │   ├── snippet-demo.tsx
    │       │   │   ├── text-responsive.tsx
    │       │   │   ├── textarea-demo.tsx
    │       │   │   ├── snippet-multi-line.tsx
    │       │   │   ├── snippet-inverted.tsx
    │       │   │   ├── snippet-no-prompt.tsx
    │       │   │   ├── textarea-disabled.tsx
    │       │   │   ├── text-color.tsx
    │       │   │   ├── text-polymorphic.tsx
    │       │   │   ├── kbd-demo.tsx
    │       │   │   ├── text-monospace.tsx
    │       │   │   ├── text-truncate.tsx
    │       │   │   ├── button-with-icon.tsx
    │       │   │   ├── toggle-disabled.tsx
    │       │   │   ├── snippet-callback.tsx
    │       │   │   ├── text-modifiers.tsx
    │       │   │   ├── show-more-demo.tsx
    │       │   │   ├── tooltip-demo.tsx
    │       │   │   ├── tooltip-other.tsx
    │       │   │   ├── loading-dots-with-text.tsx
    │       │   │   ├── tooltip-box-align.tsx
    │       │   │   ├── tooltip-components.tsx
    │       │   │   ├── tooltip-custom-type.tsx
    │       │   │   ├── tooltip-no-delay.tsx
    │       │   │   ├── switch-full-width.tsx
    │       │   │   ├── tooltip-custom-content.tsx
    │       │   │   ├── avatar-demo.tsx
    │       │   │   ├── text-align.tsx
    │       │   │   ├── loading-dots-demo.tsx
    │       │   │   ├── toggle-size.tsx
    │       │   │   ├── switch-demo.tsx
    │       │   │   ├── stack-demo.tsx
    │       │   │   ├── textarea-with-button.tsx
    │       │   │   ├── input-with-label.tsx
    │       │   │   ├── switch-icon.tsx
    │       │   │   ├── gauge-color-scale.tsx
    │       │   │   ├── input-with-button.tsx
    │       │   │   ├── switch-disabled.tsx
    │       │   │   ├── textarea-with-label.tsx
    │       │   │   ├── label-demo.tsx
    │       │   │   ├── gauge-demo.tsx
    │       │   │   ├── note-demo.tsx
    │       │   │   ├── skeleton-demo.tsx
    │       │   │   ├── skeleton-card.tsx
    │       │   │   ├── calendar-demo.tsx
    │       │   │   ├── gauge-custom-secondary-color.tsx
    │       │   │   ├── status-dot-demo.tsx
    │       │   │   ├── progress-demo.tsx
    │       │   │   ├── snippet-variants.tsx
    │       │   │   ├── status-dot-label.tsx
    │       │   │   ├── grid-debug.tsx
    │       │   │   ├── grid-demo.tsx
    │       │   │   ├── input-with-text.tsx
    │       │   │   ├── alert-demo.tsx
    │       │   │   ├── stack-responsive.tsx
    │       │   │   ├── button-demo.tsx
    │       │   │   ├── checkbox-disabled.tsx
    │       │   │   ├── toast-simple.tsx
    │       │   │   ├── badge-sizes.tsx
    │       │   │   ├── checkbox-demo.tsx
    │       │   │   ├── aspect-ratio-demo.tsx
    │       │   │   ├── menu-link-items.tsx
    │       │   │   ├── alert-destructive.tsx
    │       │   │   ├── textarea-with-text.tsx
    │       │   │   ├── text-clamp.tsx
    │       │   │   ├── input-disabled.tsx
    │       │   │   ├── sonner-demo.tsx
    │       │   │   ├── toast-with-title.tsx
    │       │   │   ├── button-loading.tsx
    │       │   │   ├── button-types.tsx
    │       │   │   ├── button-disabled.tsx
    │       │   │   ├── note-disabled.tsx
    │       │   │   ├── gauge-label.tsx
    │       │   │   ├── stack-padding.tsx
    │       │   │   ├── input-demo.tsx
    │       │   │   ├── text-demo.tsx
    │       │   │   ├── note-action.tsx
    │       │   │   ├── button-rounded.tsx
    │       │   │   ├── toast-with-action.tsx
    │       │   │   ├── toggle-demo.tsx
    │       │   │   ├── scroll-area-demo.tsx
    │       │   │   ├── menu-disabled-items.tsx
    │       │   │   ├── checkbox-with-text.tsx
    │       │   │   ├── toast-demo.tsx
    │       │   │   ├── toast-destructive.tsx
    │       │   │   ├── button-prefix.tsx
    │       │   │   ├── note-cyan.tsx
    │       │   │   ├── note-error.tsx
    │       │   │   ├── menu-demo.tsx
    │       │   │   ├── menu-prefix.tsx
    │       │   │   ├── note-success.tsx
    │       │   │   ├── note-violet.tsx
    │       │   │   ├── note-warning.tsx
    │       │   │   ├── menu-custom-trigger.tsx
    │       │   │   ├── tabs-demo.tsx
    │       │   │   ├── radio-group-demo.tsx
    │       │   │   ├── tabs-disable-specific-tabs.tsx
    │       │   │   ├── resizable-vertical.tsx
    │       │   │   ├── resizable-handle.tsx
    │       │   │   ├── collapse-demo.tsx
    │       │   │   ├── note-secondary.tsx
    │       │   │   ├── tabs-controlled.tsx
    │       │   │   ├── select-demo.tsx
    │       │   │   ├── switch-sizes.tsx
    │       │   │   ├── menu-radio-group.tsx
    │       │   │   ├── pagination-demo.tsx
    │       │   │   ├── text-variants.tsx
    │       │   │   ├── mode-toggle.tsx
    │       │   │   ├── input-prefix-suffix.tsx
    │       │   │   ├── date-picker-demo.tsx
    │       │   │   ├── resizable-demo.tsx
    │       │   │   ├── resizable-demo-with-handle.tsx
    │       │   │   ├── menu-position.tsx
    │       │   │   ├── button-shapes.tsx
    │       │   │   ├── hover-card-demo.tsx
    │       │   │   ├── collapsible-demo.tsx
    │       │   │   └── menu-checkboxes.tsx
    │       │   └── ui
    │       │   │   ├── aspect-ratio.tsx
    │       │   │   ├── skeleton.tsx
    │       │   │   ├── collapsible.tsx
    │       │   │   ├── label.tsx
    │       │   │   ├── textarea.tsx
    │       │   │   ├── progress.tsx
    │       │   │   ├── toaster.tsx
    │       │   │   ├── sonner.tsx
    │       │   │   ├── status-dot.tsx
    │       │   │   ├── spinner.tsx
    │       │   │   ├── loading-dots.tsx
    │       │   │   ├── kbd.tsx
    │       │   │   ├── checkbox.tsx
    │       │   │   ├── show-more.tsx
    │       │   │   ├── hover-card.tsx
    │       │   │   ├── popover.tsx
    │       │   │   ├── tooltip.tsx
    │       │   │   └── avatar.tsx
    │       ├── .eslintrc.json
    │       ├── styles.ts
    │       └── schema.ts
    │   ├── .prettierignore
    │   ├── lib
    │       ├── validations
    │       │   ├── log.ts
    │       │   └── og.ts
    │       ├── fonts.ts
    │       ├── utils.ts
    │       └── events.ts
    │   ├── components
    │       ├── analytics.tsx
    │       ├── announcement.tsx
    │       ├── providers.tsx
    │       ├── promo-video.tsx
    │       ├── style-wrapper.tsx
    │       ├── component-card.tsx
    │       ├── callout.tsx
    │       ├── framework-docs.tsx
    │       ├── component-source.tsx
    │       ├── tailwind-indicator.tsx
    │       ├── theme-switcher.tsx
    │       ├── theme-wrapper.tsx
    │       ├── padding-box.tsx
    │       ├── site-footer.tsx
    │       ├── drawer.tsx
    │       └── theme-component.tsx
    │   ├── .env.example
    │   ├── hooks
    │       ├── use-mounted.ts
    │       ├── use-lock-body.ts
    │       ├── use-config.ts
    │       ├── use-media-query.tsx
    │       └── use-mutation-observer.ts
    │   ├── next-env.d.ts
    │   ├── tailwind.config.cjs
    │   ├── content
    │       └── docs
    │       │   ├── changelog.mdx
    │       │   ├── index.mdx
    │       │   ├── about.mdx
    │       │   └── components
    │       │       ├── grid.mdx
    │       │       ├── theme-switcher.mdx
    │       │       ├── status-dot.mdx
    │       │       ├── kbd.mdx
    │       │       ├── skeleton.mdx
    │       │       ├── label.mdx
    │       │       ├── progress.mdx
    │       │       ├── switch.mdx
    │       │       ├── show-more.mdx
    │       │       ├── avatar.mdx
    │       │       ├── card.mdx
    │       │       ├── popover.mdx
    │       │       ├── snippet.mdx
    │       │       ├── aspect-ratio.mdx
    │       │       ├── gauge.mdx
    │       │       ├── textarea.mdx
    │       │       ├── toggle.mdx
    │       │       ├── hover-card.mdx
    │       │       └── checkbox.mdx
    │   ├── tsconfig.scripts.json
    │   ├── config
    │       └── site.ts
    │   ├── types
    │       ├── nav.ts
    │       └── unist.ts
    │   ├── app
    │       ├── docs
    │       │   └── layout.tsx
    │       └── examples
    │       │   └── authentication
    │       │       └── components
    │       │           └── user-auth-form.tsx
    │   ├── tsconfig.json
    │   └── next.config.mjs
├── packages
    └── cli
    │   ├── .prettierignore
    │   ├── .gitignore
    │   ├── tsup.config.ts
    │   ├── src
    │       ├── utils
    │       │   ├── get-package-info.ts
    │       │   ├── handle-error.ts
    │       │   ├── resolve-import.ts
    │       │   ├── logger.ts
    │       │   ├── get-package-manager.ts
    │       │   ├── transformers
    │       │   │   ├── transform-rsc.ts
    │       │   │   └── transform-import.ts
    │       │   └── registry
    │       │   │   └── schema.ts
    │       └── index.ts
    │   ├── tsconfig.json
    │   └── README.md
├── .npmrc
├── .commitlintrc.json
├── .prettierignore
├── pnpm-workspace.yaml
├── postcss.config.cjs
├── .editorconfig
├── vitest.config.ts
├── .vscode
    └── settings.json
├── README.md
├── .kodiak.toml
├── .gitignore
├── tsconfig.json
├── .eslintrc.json
├── prettier.config.cjs
├── LICENSE.md
├── scripts
    └── sync-templates.sh
└── turbo.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | v18.17.0
2 | 


--------------------------------------------------------------------------------
/apps/www/pages/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/apps/www/pages/api/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/apps/www/__registry__/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/packages/cli/.prettierignore:
--------------------------------------------------------------------------------
1 | test


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | auto-install-peers=true
2 | 


--------------------------------------------------------------------------------
/apps/www/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | .env


--------------------------------------------------------------------------------
/packages/cli/.gitignore:
--------------------------------------------------------------------------------
1 | components
2 | dist
3 | .turbo


--------------------------------------------------------------------------------
/.commitlintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["@commitlint/config-conventional"]
3 | }
4 | 


--------------------------------------------------------------------------------
/apps/www/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = require("../../postcss.config.cjs")
2 | 


--------------------------------------------------------------------------------
/apps/www/public/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/og.png


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .next
4 | build
5 | .contentlayer
6 | apps/www/pages/api/registry.json


--------------------------------------------------------------------------------
/apps/www/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/favicon.ico


--------------------------------------------------------------------------------
/apps/www/public/og-unused.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/og-unused.jpg


--------------------------------------------------------------------------------
/apps/www/__registry__/.autogenerated:
--------------------------------------------------------------------------------
1 | // The content of this directory is autogenerated by the registry server.
2 | 


--------------------------------------------------------------------------------
/apps/www/public/avatars/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/avatars/01.png


--------------------------------------------------------------------------------
/apps/www/public/avatars/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/avatars/02.png


--------------------------------------------------------------------------------
/apps/www/public/avatars/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/avatars/03.png


--------------------------------------------------------------------------------
/apps/www/public/avatars/04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/avatars/04.png


--------------------------------------------------------------------------------
/apps/www/public/avatars/05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/avatars/05.png


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - "apps/*"
3 |   - "packages/*"
4 |   - "templates/*"
5 |   - "!**/test/**"
6 | 


--------------------------------------------------------------------------------
/apps/www/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/favicon-16x16.png


--------------------------------------------------------------------------------
/apps/www/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/favicon-32x32.png


--------------------------------------------------------------------------------
/apps/www/public/images/style.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/images/style.jpg


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/index.json:
--------------------------------------------------------------------------------
1 | [
2 |   {
3 |     "name": "default",
4 |     "label": "Default"
5 |   }
6 | ]


--------------------------------------------------------------------------------
/apps/www/assets/fonts/Inter-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/assets/fonts/Inter-Bold.ttf


--------------------------------------------------------------------------------
/apps/www/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/apps/www/assets/fonts/Inter-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/assets/fonts/Inter-Regular.ttf


--------------------------------------------------------------------------------
/apps/www/public/examples/cards-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/cards-dark.png


--------------------------------------------------------------------------------
/apps/www/public/examples/forms-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/forms-dark.png


--------------------------------------------------------------------------------
/apps/www/public/examples/mail-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/mail-dark.png


--------------------------------------------------------------------------------
/apps/www/public/examples/mail-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/mail-light.png


--------------------------------------------------------------------------------
/apps/www/public/examples/music-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/music-dark.png


--------------------------------------------------------------------------------
/apps/www/public/examples/tasks-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/tasks-dark.png


--------------------------------------------------------------------------------
/apps/www/registry/default/example/grid-cell-span.tsx:
--------------------------------------------------------------------------------
1 | export default function GridCellSpan() {
2 |   return <div>grid</div>
3 | }
4 | 


--------------------------------------------------------------------------------
/apps/www/public/examples/cards-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/cards-light.png


--------------------------------------------------------------------------------
/apps/www/public/examples/forms-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/forms-light.png


--------------------------------------------------------------------------------
/apps/www/public/examples/music-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/music-light.png


--------------------------------------------------------------------------------
/apps/www/public/examples/tasks-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/tasks-light.png


--------------------------------------------------------------------------------
/apps/www/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/apps/www/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/apps/www/public/examples/dashboard-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/dashboard-dark.png


--------------------------------------------------------------------------------
/apps/www/public/examples/dashboard-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/dashboard-light.png


--------------------------------------------------------------------------------
/apps/www/public/examples/playground-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/playground-dark.png


--------------------------------------------------------------------------------
/apps/www/public/examples/playground-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/playground-light.png


--------------------------------------------------------------------------------
/apps/www/public/images/style-with-theming.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/images/style-with-theming.jpg


--------------------------------------------------------------------------------
/apps/www/public/examples/authentication-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/authentication-dark.png


--------------------------------------------------------------------------------
/apps/www/public/examples/authentication-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imMatheus/vercel-ui/HEAD/apps/www/public/examples/authentication-light.png


--------------------------------------------------------------------------------
/apps/www/.prettierignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .next
4 | build
5 | .contentlayer
6 | __registry__/index.tsx
7 | app/examples/mail/components/mail.tsx
8 | 


--------------------------------------------------------------------------------
/apps/www/__registry__/README.md:
--------------------------------------------------------------------------------
1 | > Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** - shadcn
2 | 


--------------------------------------------------------------------------------
/apps/www/registry/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://json.schemastore.org/eslintrc",
3 |   "rules": {
4 |     "react/no-unescaped-entities": "off"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/apps/www/lib/validations/log.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod"
2 | 
3 | export const logSchema = z.object({
4 |   event: z.enum(["copy_primitive"]),
5 |   data: z.record(z.string()),
6 | })
7 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/kbd-small.tsx:
--------------------------------------------------------------------------------
1 | import { Kbd } from "@/registry/default/ui/kbd"
2 | 
3 | export default function KbdSmallDemo() {
4 |   return <Kbd small>/</Kbd>
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/spinner-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Spinner } from "@/registry/default/ui/spinner"
2 | 
3 | export default function SpinnerDemo() {
4 |   return <Spinner />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/styles.ts:
--------------------------------------------------------------------------------
1 | export const styles = [
2 |   {
3 |     name: "default",
4 |     label: "Default",
5 |   },
6 | ] as const
7 | 
8 | export type Style = (typeof styles)[number]
9 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/kbd-combination.tsx:
--------------------------------------------------------------------------------
1 | import { Kbd } from "@/registry/default/ui/kbd"
2 | 
3 | export default function KbdCombination() {
4 |   return <Kbd meta shift />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/spinner-size.tsx:
--------------------------------------------------------------------------------
1 | import { Spinner } from "@/registry/default/ui/spinner"
2 | 
3 | export default function SpinnerSize() {
4 |   return <Spinner size={30} />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/components/analytics.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | 
3 | import { Analytics as VercelAnalytics } from "@vercel/analytics/react"
4 | 
5 | export function Analytics() {
6 |   return <VercelAnalytics />
7 | }
8 | 


--------------------------------------------------------------------------------
/apps/www/lib/validations/og.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod"
2 | 
3 | export const ogImageSchema = z.object({
4 |   heading: z.string(),
5 |   type: z.string(),
6 |   mode: z.enum(["light", "dark"]).default("dark"),
7 | })
8 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/gauge-arc-priority.tsx:
--------------------------------------------------------------------------------
1 | import { Gauge } from "@/registry/default/ui/gauge"
2 | 
3 | export default function GaugeArcPriority() {
4 |   return <Gauge size="medium" value={50} />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/theme-switcher-demo.tsx:
--------------------------------------------------------------------------------
1 | import { ThemeSwitcher } from "@/registry/default/ui/theme-switcher"
2 | 
3 | export default function ThemeSwitcherDemo() {
4 |   return <ThemeSwitcher />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | 
3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4 | 
5 | const AspectRatio = AspectRatioPrimitive.Root
6 | 
7 | export { AspectRatio }
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 2
 8 | indent_style = space
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/snippet-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Snippet } from "@/registry/default/ui/snippet"
2 | 
3 | export default function SnippetDemo() {
4 |   return <Snippet text="npm init next-app" width="300px" />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-responsive.tsx:
--------------------------------------------------------------------------------
1 | import { Text } from "../ui/text"
2 | 
3 | export default function TextResponsive() {
4 |   return <Text size={{ sm: 24, md: 32, lg: 48 }}> The Evil Rabbit jumps.</Text>
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/textarea-demo.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/default/ui/textarea"
2 | 
3 | export default function TextareaDemo() {
4 |   return <Textarea placeholder="Type your message here." />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/snippet-multi-line.tsx:
--------------------------------------------------------------------------------
1 | import { Snippet } from "@/registry/default/ui/snippet"
2 | 
3 | export default function SnippetMultiLine() {
4 |   return <Snippet text={["cd project", "now"]} width="100%" />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/.env.example:
--------------------------------------------------------------------------------
1 | # -----------------------------------------------------------------------------
2 | # App
3 | # -----------------------------------------------------------------------------
4 | NEXT_PUBLIC_APP_URL=http://localhost:3001
5 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import tsconfigPaths from "vite-tsconfig-paths"
 2 | import { defineConfig } from "vitest/config"
 3 | 
 4 | export default defineConfig({
 5 |   test: {
 6 |     // ...
 7 |   },
 8 |   plugins: [tsconfigPaths()],
 9 | })
10 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/snippet-inverted.tsx:
--------------------------------------------------------------------------------
1 | import { Snippet } from "@/registry/default/ui/snippet"
2 | 
3 | export default function SnippetInverted() {
4 |   return <Snippet type="dark" text="npm init next-app" width="300px" />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/snippet-no-prompt.tsx:
--------------------------------------------------------------------------------
1 | import { Snippet } from "@/registry/default/ui/snippet"
2 | 
3 | export default function SnippetNoPrompt() {
4 |   return <Snippet prompt={false} text="npm init next-app" width="300px" />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/textarea-disabled.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea } from "@/registry/default/ui/textarea"
2 | 
3 | export default function TextareaDisabled() {
4 |   return <Textarea placeholder="Type your message here." disabled />
5 | }
6 | 


--------------------------------------------------------------------------------
/apps/www/components/announcement.tsx:
--------------------------------------------------------------------------------
 1 | import { Badge } from "@/registry/default/ui/badge"
 2 | 
 3 | export function Announcement() {
 4 |   return (
 5 |     <Badge variant="blue-subtle" size="lg">
 6 |       Just Released In Alpha 🎉
 7 |     </Badge>
 8 |   )
 9 | }
10 | 


--------------------------------------------------------------------------------
/apps/www/hooks/use-mounted.ts:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | export function useMounted() {
 4 |   const [mounted, setMounted] = React.useState(false)
 5 | 
 6 |   React.useEffect(() => {
 7 |     setMounted(true)
 8 |   }, [])
 9 | 
10 |   return mounted
11 | }
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-color.tsx:
--------------------------------------------------------------------------------
 1 | import { Text } from "@/registry/default/ui/text"
 2 | 
 3 | export default function TextColor() {
 4 |   return (
 5 |     <Text color="blue-900" size={16}>
 6 |       The Evil Rabbit jumps.
 7 |     </Text>
 8 |   )
 9 | }
10 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-polymorphic.tsx:
--------------------------------------------------------------------------------
 1 | import { Text } from "@/registry/default/ui/text"
 2 | 
 3 | export default function TextPolymorphic() {
 4 |   return (
 5 |     <Text size={32}>
 6 |       {`<p>`} semantically, {`<h2>`} visually.
 7 |     </Text>
 8 |   )
 9 | }
10 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/kbd-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Kbd } from "@/registry/default/ui/kbd"
 2 | 
 3 | export default function KbdDemo() {
 4 |   return (
 5 |     <>
 6 |       <Kbd meta />
 7 |       <Kbd shift />
 8 |       <Kbd alt />
 9 |       <Kbd ctrl />
10 |     </>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/packages/cli/tsup.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "tsup"
 2 | 
 3 | export default defineConfig({
 4 |   clean: true,
 5 |   dts: true,
 6 |   entry: ["src/index.ts"],
 7 |   format: ["esm"],
 8 |   sourcemap: true,
 9 |   minify: true,
10 |   target: "esnext",
11 |   outDir: "dist",
12 | })
13 | 


--------------------------------------------------------------------------------
/apps/www/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | /// <reference types="next/navigation-types/compat/navigation" />
4 | 
5 | // NOTE: This file should not be edited
6 | // see https://nextjs.org/docs/basic-features/typescript for more information.
7 | 


--------------------------------------------------------------------------------
/apps/www/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | const baseConfig = require("../../tailwind.config.cjs")
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   ...baseConfig,
 6 |   content: [
 7 |     ...baseConfig.content,
 8 |     "content/**/*.mdx",
 9 |     "registry/**/*.{ts,tsx}",
10 |   ],
11 | }
12 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "eslint.workingDirectories": [
 3 |     { "pattern": "apps/*/" },
 4 |     { "pattern": "packages/*/" }
 5 |   ],
 6 |   "tailwindCSS.experimental.classRegex": [
 7 |     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
 8 |     ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/packages/cli/src/utils/get-package-info.ts:
--------------------------------------------------------------------------------
 1 | import path from "path"
 2 | import fs from "fs-extra"
 3 | import { type PackageJson } from "type-fest"
 4 | 
 5 | export function getPackageInfo() {
 6 |   const packageJsonPath = path.join("package.json")
 7 | 
 8 |   return fs.readJSONSync(packageJsonPath) as PackageJson
 9 | }
10 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-monospace.tsx:
--------------------------------------------------------------------------------
 1 | import { Text } from "@/registry/default/ui/text"
 2 | 
 3 | export default function TextMonospace() {
 4 |   return (
 5 |     <div>
 6 |       <Text>This is a sans-serif font.</Text>
 7 | 
 8 |       <Text monospace>This is a monospace font.</Text>
 9 |     </div>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-truncate.tsx:
--------------------------------------------------------------------------------
 1 | import { Text } from "@/registry/default/ui/text"
 2 | 
 3 | export default function TextTruncate() {
 4 |   return (
 5 |     <div style={{ maxWidth: 100 }}>
 6 |       <Text size={16} truncate>
 7 |         The Evil Rabbit jumps.
 8 |       </Text>
 9 |     </div>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/button-with-icon.tsx:
--------------------------------------------------------------------------------
 1 | import { Mail } from "lucide-react"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | 
 5 | export default function ButtonWithIcon() {
 6 |   return (
 7 |     <Button>
 8 |       <Mail className="mr-2 h-4 w-4" /> Login with Email
 9 |     </Button>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/toggle-disabled.tsx:
--------------------------------------------------------------------------------
 1 | import { Toggle } from "@/registry/default/ui/toggle"
 2 | 
 3 | export default function ToggleDemo() {
 4 |   return (
 5 |     <div className="flex flex-col gap-6">
 6 |       <Toggle checked={false} disabled />
 7 |       <Toggle checked disabled />
 8 |     </div>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/snippet-callback.tsx:
--------------------------------------------------------------------------------
 1 | import { Snippet } from "@/registry/default/ui/snippet"
 2 | 
 3 | export default function SnippetCallback() {
 4 |   return (
 5 |     <Snippet
 6 |       onCopy={() => alert("You copied the text!")}
 7 |       text="npm init next-app"
 8 |       width="300px"
 9 |     />
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-modifiers.tsx:
--------------------------------------------------------------------------------
 1 | import { Text } from "@/registry/default/ui/text"
 2 | 
 3 | export default function TextModifiers() {
 4 |   return (
 5 |     <Text size={16}>
 6 |       The <strong>Evil Rabbit</strong> <em>jumps</em>
 7 |       over the <s>quick brown fox</s> <u>Lawful Meerkat</u>.
 8 |     </Text>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/changelog.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Changelog
 3 | description: Latest updates and announcements.
 4 | toc: false
 5 | ---
 6 | 
 7 | <PaddingBox title="June 2024 - Alpha release">
 8 | 
 9 | Project gets its first sortof working use case, with many components still needing fixing, but its good enought for trying :)
10 | 
11 | </PaddingBox>
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/show-more-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react"
 2 | 
 3 | import { ShowMore } from "@/registry/default/ui/show-more"
 4 | 
 5 | export default function ShowMoreDemo() {
 6 |   const [expanded, setExpanded] = useState(false)
 7 | 
 8 |   return <ShowMore expanded={expanded} onClick={() => setExpanded(!expanded)} />
 9 | }
10 | 


--------------------------------------------------------------------------------
/packages/cli/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://json.schemastore.org/tsconfig",
 3 |   "extends": "../../tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "isolatedModules": false,
 6 |     "baseUrl": ".",
 7 |     "paths": {
 8 |       "@/*": ["./*"]
 9 |     }
10 |   },
11 |   "include": ["src/**/*.ts"],
12 |   "exclude": ["node_modules"]
13 | }
14 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tooltip-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Tooltip } from "@/registry/default/ui/tooltip"
 3 | 
 4 | export default function TooltipDemo() {
 5 |   return (
 6 |     <Tooltip text="Add to library">
 7 |       <Button variant="secondary">Hover</Button>
 8 |     </Tooltip>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tooltip-other.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Tooltip } from "@/registry/default/ui/tooltip"
 3 | 
 4 | export default function TooltipBoxAlignDemo() {
 5 |   return (
 6 |     <Tooltip text="Add to library">
 7 |       <Button variant="secondary">Box</Button>
 8 |     </Tooltip>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/loading-dots-with-text.tsx:
--------------------------------------------------------------------------------
 1 | import { LoadingDots } from "@/registry/default/ui/loading-dots"
 2 | import { Text } from "@/registry/default/ui/text"
 3 | 
 4 | export default function LoadingDotsWithText() {
 5 |   return (
 6 |     <LoadingDots size={4}>
 7 |       <Text color="gray-900">Loading</Text>
 8 |     </LoadingDots>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tooltip-box-align.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Tooltip } from "@/registry/default/ui/tooltip"
 3 | 
 4 | export default function TooltipBoxAlignDemo() {
 5 |   return (
 6 |     <Tooltip text="Add to library">
 7 |       <Button variant="secondary">Box</Button>
 8 |     </Tooltip>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tooltip-components.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Tooltip } from "@/registry/default/ui/tooltip"
 3 | 
 4 | export default function TooltipBoxAlignDemo() {
 5 |   return (
 6 |     <Tooltip text="Add to library">
 7 |       <Button variant="secondary">Box</Button>
 8 |     </Tooltip>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tooltip-custom-type.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Tooltip } from "@/registry/default/ui/tooltip"
 3 | 
 4 | export default function TooltipBoxAlignDemo() {
 5 |   return (
 6 |     <Tooltip text="Add to library">
 7 |       <Button variant="secondary">Box</Button>
 8 |     </Tooltip>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tooltip-no-delay.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Tooltip } from "@/registry/default/ui/tooltip"
 3 | 
 4 | export default function TooltipNoDelayDemo() {
 5 |   return (
 6 |     <Tooltip text="Add to library">
 7 |       <Button variant="secondary">No delay</Button>
 8 |     </Tooltip>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/switch-full-width.tsx:
--------------------------------------------------------------------------------
 1 | import { Switch, SwitchControl } from "@/registry/default/ui/switch"
 2 | 
 3 | export default function SwitchFullWidth() {
 4 |   return (
 5 |     <Switch>
 6 |       <SwitchControl defaultChecked label="Source" value="source" />
 7 |       <SwitchControl label="Width" value="output" />
 8 |     </Switch>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tooltip-custom-content.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Tooltip } from "@/registry/default/ui/tooltip"
 3 | 
 4 | export default function TooltipBoxAlignDemo() {
 5 |   return (
 6 |     <Tooltip text="Add to library">
 7 |       <Button variant="secondary">Box</Button>
 8 |     </Tooltip>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/apps/www/components/providers.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes"
 5 | import { ThemeProviderProps } from "next-themes/dist/types"
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 9 | }
10 | 


--------------------------------------------------------------------------------
/apps/www/pages/api/components.ts:
--------------------------------------------------------------------------------
 1 | import { NextApiRequest, NextApiResponse } from "next"
 2 | 
 3 | import components from "./components.json"
 4 | 
 5 | export default async function handler(
 6 |   req: NextApiRequest,
 7 |   res: NextApiResponse
 8 | ) {
 9 |   if (req.method !== "GET") {
10 |     return res.status(405).end()
11 |   }
12 | 
13 |   return res.status(200).json(components)
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/avatar-demo.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Avatar,
 3 |   AvatarFallback,
 4 |   AvatarImage,
 5 | } from "@/registry/default/ui/avatar"
 6 | 
 7 | export default function AvatarDemo() {
 8 |   return (
 9 |     <Avatar>
10 |       <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
11 |       <AvatarFallback>CN</AvatarFallback>
12 |     </Avatar>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/www/tsconfig.scripts.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://json.schemastore.org/tsconfig",
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "target": "es6",
 6 |     "module": "commonjs",
 7 |     "esModuleInterop": true,
 8 |     "isolatedModules": false
 9 |   },
10 |   "include": [".contentlayer/generated", "scripts/**/*.ts"],
11 |   "exclude": ["node_modules"]
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-align.tsx:
--------------------------------------------------------------------------------
 1 | import { Text } from "@/registry/default/ui/text"
 2 | 
 3 | export default function TextAlign() {
 4 |   return (
 5 |     <div>
 6 |       <Text align="center">The Evil Rabbit jumps.</Text>
 7 | 
 8 |       <Text align="left">The Evil Rabbit jumps.</Text>
 9 | 
10 |       <Text align="right">The Evil Rabbit jumps.</Text>
11 |     </div>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/loading-dots-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { LoadingDots } from "@/registry/default/ui/loading-dots"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function LoadingDotsDemo() {
 5 |   return (
 6 |     <Stack align="start" gap={6} justify="space-between">
 7 |       <LoadingDots />
 8 |       <LoadingDots size={4} />
 9 |     </Stack>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/toggle-size.tsx:
--------------------------------------------------------------------------------
 1 | import { Toggle } from "@/registry/default/ui/toggle"
 2 | 
 3 | export default function ToggleDemo() {
 4 |   return (
 5 |     <div className="flex items-start">
 6 |       <div className="flex-1">
 7 |         <Toggle />
 8 |       </div>
 9 |       <div className="flex-1">
10 |         <Toggle size="large" />
11 |       </div>
12 |     </div>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/switch-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Switch, SwitchControl } from "@/registry/default/ui/switch"
 2 | 
 3 | export default function SwitchDemo() {
 4 |   return (
 5 |     <div className="flex">
 6 |       <Switch>
 7 |         <SwitchControl defaultChecked label="Source" value="source" />
 8 |         <SwitchControl label="Output" value="output" />
 9 |       </Switch>
10 |     </div>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/collapsible.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 4 | 
 5 | const Collapsible = CollapsiblePrimitive.Root
 6 | 
 7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 8 | 
 9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 | 
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/stack-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Stack } from "@/registry/default/ui/stack"
 2 | 
 3 | export default function Component(): JSX.Element {
 4 |   return (
 5 |     <Stack gap={3}>
 6 |       <div className="h-12 w-12 rounded-md bg-gray-1000" />
 7 |       <div className="h-12 w-12 rounded-md bg-gray-1000" />
 8 |       <div className="h-12 w-12 rounded-md bg-gray-1000" />
 9 |     </Stack>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/textarea-with-button.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Textarea } from "@/registry/default/ui/textarea"
 3 | 
 4 | export default function TextareaWithButton() {
 5 |   return (
 6 |     <div className="grid w-full gap-2">
 7 |       <Textarea placeholder="Type your message here." />
 8 |       <Button>Send message</Button>
 9 |     </div>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/input-with-label.tsx:
--------------------------------------------------------------------------------
 1 | import type { JSX } from "react"
 2 | 
 3 | import { Input } from "@/registry/default/ui/input"
 4 | import { Stack } from "@/registry/default/ui/stack"
 5 | 
 6 | export default function Component(): JSX.Element {
 7 |   return (
 8 |     <Stack align="flex-start">
 9 |       <Input aria-labelledby="Demo input" label="Label" placeholder="Label" />
10 |     </Stack>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/switch-icon.tsx:
--------------------------------------------------------------------------------
 1 | import { Switch, SwitchControl } from "@/registry/default/ui/switch"
 2 | 
 3 | export default function SwitchIcon() {
 4 |   return (
 5 |     <div className="flex">
 6 |       <Switch>
 7 |         <SwitchControl defaultChecked disabled label="Source" value="source" />
 8 |         <SwitchControl label="Icon" disabled value="output" />
 9 |       </Switch>
10 |     </div>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/gauge-color-scale.tsx:
--------------------------------------------------------------------------------
 1 | import { Gauge } from "@/registry/default/ui/gauge"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function GaugeColorScale() {
 5 |   return (
 6 |     <Stack direction="row" gap={8}>
 7 |       <Gauge size="small" value={14} />
 8 |       <Gauge size="small" value={34} />
 9 |       <Gauge size="small" value={68} />
10 |     </Stack>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/input-with-button.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Input } from "@/registry/default/ui/input"
 3 | 
 4 | export default function InputWithButton() {
 5 |   return (
 6 |     <div className="flex w-full max-w-sm items-center space-x-2">
 7 |       <Input type="email" placeholder="Email" />
 8 |       <Button type="submit">Subscribe</Button>
 9 |     </div>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/apps/www/config/site.ts:
--------------------------------------------------------------------------------
 1 | export const siteConfig = {
 2 |   name: "vercel/ui",
 3 |   url: "https://vercel-ui-phi.vercel.app",
 4 |   ogImage: "https://vercel-ui-phi.vercel.app/og.png",
 5 |   description: "Component system based on Vercel's Geist system",
 6 |   links: {
 7 |     twitter: "https://twitter.com/whosmatu",
 8 |     github: "https://github.com/immatheus/vercel-ui",
 9 |   },
10 | }
11 | 
12 | export type SiteConfig = typeof siteConfig
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/switch-disabled.tsx:
--------------------------------------------------------------------------------
 1 | import { Switch, SwitchControl } from "@/registry/default/ui/switch"
 2 | 
 3 | export default function SwitchDisabled() {
 4 |   return (
 5 |     <div className="flex">
 6 |       <Switch>
 7 |         <SwitchControl defaultChecked disabled label="Source" value="source" />
 8 |         <SwitchControl label="Output" disabled value="output" />
 9 |       </Switch>
10 |     </div>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/hooks/use-lock-body.ts:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | // @see https://usehooks.com/useLockBodyScroll.
 4 | export function useLockBody() {
 5 |   React.useLayoutEffect((): (() => void) => {
 6 |     const originalStyle: string = window.getComputedStyle(
 7 |       document.body
 8 |     ).overflow
 9 |     document.body.style.overflow = "hidden"
10 |     return () => (document.body.style.overflow = originalStyle)
11 |   }, [])
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/textarea-with-label.tsx:
--------------------------------------------------------------------------------
 1 | import { Label } from "@/registry/default/ui/label"
 2 | import { Textarea } from "@/registry/default/ui/textarea"
 3 | 
 4 | export default function TextareaWithLabel() {
 5 |   return (
 6 |     <div className="grid w-full gap-1.5">
 7 |       <Label htmlFor="message">Your message</Label>
 8 |       <Textarea placeholder="Type your message here." id="message" />
 9 |     </div>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/cli/src/utils/handle-error.ts:
--------------------------------------------------------------------------------
 1 | import { logger } from "@/src/utils/logger"
 2 | 
 3 | export function handleError(error: unknown) {
 4 |   if (typeof error === "string") {
 5 |     logger.error(error)
 6 |     process.exit(1)
 7 |   }
 8 | 
 9 |   if (error instanceof Error) {
10 |     logger.error(error.message)
11 |     process.exit(1)
12 |   }
13 | 
14 |   logger.error("Something went wrong. Please try again.")
15 |   process.exit(1)
16 | }
17 | 


--------------------------------------------------------------------------------
/packages/cli/src/utils/resolve-import.ts:
--------------------------------------------------------------------------------
 1 | import { createMatchPath, type ConfigLoaderSuccessResult } from "tsconfig-paths"
 2 | 
 3 | export async function resolveImport(
 4 |   importPath: string,
 5 |   config: Pick<ConfigLoaderSuccessResult, "absoluteBaseUrl" | "paths">
 6 | ) {
 7 |   return createMatchPath(config.absoluteBaseUrl, config.paths)(
 8 |     importPath,
 9 |     undefined,
10 |     () => true,
11 |     [".ts", ".tsx"]
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/label-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Checkbox } from "@/registry/default/ui/checkbox"
 2 | import { Label } from "@/registry/default/ui/label"
 3 | 
 4 | export default function LabelDemo() {
 5 |   return (
 6 |     <div>
 7 |       <div className="flex items-center space-x-2">
 8 |         <Checkbox id="terms" />
 9 |         <Label htmlFor="terms">Accept terms and conditions</Label>
10 |       </div>
11 |     </div>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vercel/ui
2 | 
3 | Accessible and customizable components designed by [vercel](https://vercel.com) that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.
4 | 
5 | > [!NOTE]
6 | > This is a NOT affiliated with Vercel or Shadcn in any way and is only a fork of Shadcn I made for fun and learning.
7 | 
8 | This repo was a fork of the Shadcn repo, so a lot of cred to him and the other contributors.
9 | 


--------------------------------------------------------------------------------
/.kodiak.toml:
--------------------------------------------------------------------------------
 1 | # .kodiak.toml
 2 | version = 1
 3 | 
 4 | [merge]
 5 | automerge_label = "automerge"
 6 | require_automerge_label = true
 7 | method = "squash"
 8 | delete_branch_on_merge = true
 9 | optimistic_updates = false
10 | prioritize_ready_to_merge = true
11 | notify_on_conflict = true
12 | 
13 | [merge.message]
14 | title = "pull_request_title"
15 | body = "pull_request_body"
16 | include_pr_number = true
17 | body_type = "markdown"
18 | strip_html_comments = true
19 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/aspect-ratio.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "aspect-ratio",
 3 |   "dependencies": [
 4 |     "@radix-ui/react-aspect-ratio"
 5 |   ],
 6 |   "files": [
 7 |     {
 8 |       "name": "aspect-ratio.tsx",
 9 |       "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n"
10 |     }
11 |   ],
12 |   "type": "components:ui"
13 | }


--------------------------------------------------------------------------------
/apps/www/registry/default/example/gauge-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Gauge } from "@/registry/default/ui/gauge"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function GaugeDemo() {
 5 |   return (
 6 |     <Stack direction="row" gap={8}>
 7 |       <Gauge size="tiny" value={50} />
 8 |       <Gauge size="small" value={50} />
 9 |       <Gauge size="medium" value={50} />
10 |       <Gauge size="large" value={50} />
11 |     </Stack>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/apps/www/public/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "",
 3 |   "short_name": "",
 4 |   "icons": [
 5 |     {
 6 |       "src": "/android-chrome-192x192.png",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "/android-chrome-512x512.png",
12 |       "sizes": "512x512",
13 |       "type": "image/png"
14 |     }
15 |   ],
16 |   "theme_color": "#ffffff",
17 |   "background_color": "#ffffff",
18 |   "display": "standalone"
19 | }
20 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/note-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Note } from "@/registry/default/ui/note"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function NoteDemo() {
 5 |   return (
 6 |     <Stack align="flex-start" direction={{ sm: "column", md: "row" }} gap={6}>
 7 |       <Note size="small">A small note.</Note>
 8 |       <Note>A default note.</Note>
 9 |       <Note size="large">A large note.</Note>
10 |     </Stack>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/skeleton-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Skeleton } from "@/registry/default/ui/skeleton"
 2 | 
 3 | export default function SkeletonDemo() {
 4 |   return (
 5 |     <div className="flex items-center space-x-4">
 6 |       <Skeleton className="h-12 w-12 rounded-full" />
 7 |       <div className="space-y-2">
 8 |         <Skeleton className="h-4 w-[250px]" />
 9 |         <Skeleton className="h-4 w-[200px]" />
10 |       </div>
11 |     </div>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/skeleton-card.tsx:
--------------------------------------------------------------------------------
 1 | import { Skeleton } from "@/registry/default/ui/skeleton"
 2 | 
 3 | export default function SkeletonCard() {
 4 |   return (
 5 |     <div className="flex flex-col space-y-3">
 6 |       <Skeleton className="h-[125px] w-[250px] rounded-xl" />
 7 |       <div className="space-y-2">
 8 |         <Skeleton className="h-4 w-[250px]" />
 9 |         <Skeleton className="h-4 w-[200px]" />
10 |       </div>
11 |     </div>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/calendar-demo.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | 
 5 | import { Calendar } from "@/registry/default/ui/calendar"
 6 | 
 7 | export default function CalendarDemo() {
 8 |   const [date, setDate] = React.useState<Date | undefined>(new Date())
 9 | 
10 |   return (
11 |     <Calendar
12 |       mode="single"
13 |       selected={date}
14 |       onSelect={setDate}
15 |       className="rounded-md border"
16 |     />
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/gauge-custom-secondary-color.tsx:
--------------------------------------------------------------------------------
 1 | import { Gauge } from "@/registry/default/ui/gauge"
 2 | 
 3 | export default function GaugeCustomSecondaryColor() {
 4 |   return (
 5 |     <div className="flex justify-start">
 6 |       <Gauge
 7 |         colors={{
 8 |           primary: "var(--ds-blue-700)",
 9 |           secondary: "var(--ds-blue-300)",
10 |         }}
11 |         size="medium"
12 |         value={50}
13 |       />
14 |     </div>
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/status-dot-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Stack } from "@/registry/default/ui/stack"
 2 | import { StatusDot } from "@/registry/default/ui/status-dot"
 3 | 
 4 | export default function StatusDotDemo() {
 5 |   return (
 6 |     <Stack gap={6}>
 7 |       <StatusDot state="QUEUED" />
 8 |       <StatusDot state="BUILDING" />
 9 |       <StatusDot state="ERROR" />
10 |       <StatusDot state="READY" />
11 |       <StatusDot state="CANCELED" />
12 |     </Stack>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/www/types/nav.ts:
--------------------------------------------------------------------------------
 1 | import { Icons } from "@/components/icons"
 2 | 
 3 | export interface NavItem {
 4 |   title: string
 5 |   href?: string
 6 |   disabled?: boolean
 7 |   external?: boolean
 8 |   icon?: keyof typeof Icons
 9 |   label?: string
10 | }
11 | 
12 | export interface NavItemWithChildren extends NavItem {
13 |   items: NavItemWithChildren[]
14 | }
15 | 
16 | export interface MainNavItem extends NavItem {}
17 | 
18 | export interface SidebarNavItem extends NavItemWithChildren {}
19 | 


--------------------------------------------------------------------------------
/packages/cli/src/utils/logger.ts:
--------------------------------------------------------------------------------
 1 | import chalk from "chalk"
 2 | 
 3 | export const logger = {
 4 |   error(...args: unknown[]) {
 5 |     console.log(chalk.red(...args))
 6 |   },
 7 |   warn(...args: unknown[]) {
 8 |     console.log(chalk.yellow(...args))
 9 |   },
10 |   info(...args: unknown[]) {
11 |     console.log(chalk.cyan(...args))
12 |   },
13 |   success(...args: unknown[]) {
14 |     console.log(chalk.green(...args))
15 |   },
16 |   break() {
17 |     console.log("")
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/skeleton.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "skeleton",
 3 |   "files": [
 4 |     {
 5 |       "name": "skeleton.tsx",
 6 |       "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n"
 7 |     }
 8 |   ],
 9 |   "type": "components:ui"
10 | }


--------------------------------------------------------------------------------
/packages/cli/src/utils/get-package-manager.ts:
--------------------------------------------------------------------------------
 1 | import { detect } from "@antfu/ni"
 2 | 
 3 | export async function getPackageManager(
 4 |   targetDir: string
 5 | ): Promise<"yarn" | "pnpm" | "bun" | "npm"> {
 6 |   const packageManager = await detect({ programmatic: true, cwd: targetDir })
 7 | 
 8 |   if (packageManager === "yarn@berry") return "yarn"
 9 |   if (packageManager === "pnpm@6") return "pnpm"
10 |   if (packageManager === "bun") return "bun"
11 | 
12 |   return packageManager ?? "npm"
13 | }
14 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/progress-demo.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | 
 5 | import { Progress } from "@/registry/default/ui/progress"
 6 | 
 7 | export default function ProgressDemo() {
 8 |   const [progress, setProgress] = React.useState(13)
 9 | 
10 |   React.useEffect(() => {
11 |     const timer = setTimeout(() => setProgress(66), 500)
12 |     return () => clearTimeout(timer)
13 |   }, [])
14 | 
15 |   return <Progress value={progress} className="w-[60%]" />
16 | }
17 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/snippet-variants.tsx:
--------------------------------------------------------------------------------
 1 | import { Snippet } from "@/registry/default/ui/snippet"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function SnippetVariants() {
 5 |   return (
 6 |     <Stack gap={3}>
 7 |       <Snippet text="npm init next-app" type="success" width="300px" />
 8 |       <Snippet text="npm init next-app" type="error" width="300px" />
 9 |       <Snippet text="npm init next-app" type="warning" width="300px" />
10 |     </Stack>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/status-dot-label.tsx:
--------------------------------------------------------------------------------
 1 | import { Stack } from "@/registry/default/ui/stack"
 2 | import { StatusDot } from "@/registry/default/ui/status-dot"
 3 | 
 4 | export default function Component() {
 5 |   return (
 6 |     <Stack gap={6}>
 7 |       <StatusDot label state="QUEUED" />
 8 |       <StatusDot label state="BUILDING" />
 9 |       <StatusDot label state="ERROR" />
10 |       <StatusDot label state="READY" />
11 |       <StatusDot label state="CANCELED" />
12 |     </Stack>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/grid-debug.tsx:
--------------------------------------------------------------------------------
 1 | import { Grid, GridCell, GridSystem } from "@/registry/default/ui/grid"
 2 | 
 3 | export default function GridDebug() {
 4 |   return (
 5 |     <GridSystem debug guideWidth={1}>
 6 |       <Grid columns={3} rows={2}>
 7 |         <GridCell></GridCell>
 8 |         <GridCell></GridCell>
 9 |         <GridCell></GridCell>
10 |         <GridCell></GridCell>
11 |         <GridCell></GridCell>
12 |         <GridCell></GridCell>
13 |       </Grid>
14 |     </GridSystem>
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/grid-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Grid, GridCell, GridSystem } from "@/registry/default/ui/grid"
 2 | 
 3 | export default function GridDemo() {
 4 |   return (
 5 |     <GridSystem guideWidth={1}>
 6 |       <Grid columns={3} rows={2}>
 7 |         <GridCell>1</GridCell>
 8 |         <GridCell>2</GridCell>
 9 |         <GridCell>3</GridCell>
10 |         <GridCell>4</GridCell>
11 |         <GridCell>5</GridCell>
12 |         <GridCell>6</GridCell>
13 |       </Grid>
14 |     </GridSystem>
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/input-with-text.tsx:
--------------------------------------------------------------------------------
 1 | import { Input } from "@/registry/default/ui/input"
 2 | import { Label } from "@/registry/default/ui/label"
 3 | 
 4 | export default function InputWithText() {
 5 |   return (
 6 |     <div className="grid w-full max-w-sm items-center gap-1.5">
 7 |       <Label htmlFor="email-2">Email</Label>
 8 |       <Input type="email" id="email-2" placeholder="Email" />
 9 |       <p className="text-sm text-muted-foreground">Enter your email address.</p>
10 |     </div>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/alert-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Terminal } from "lucide-react"
 2 | 
 3 | import {
 4 |   Alert,
 5 |   AlertDescription,
 6 |   AlertTitle,
 7 | } from "@/registry/default/ui/alert"
 8 | 
 9 | export default function AlertDemo() {
10 |   return (
11 |     <Alert>
12 |       <Terminal className="h-4 w-4" />
13 |       <AlertTitle>Heads up!</AlertTitle>
14 |       <AlertDescription>
15 |         You can add components to your app using the cli.
16 |       </AlertDescription>
17 |     </Alert>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/apps/www/hooks/use-config.ts:
--------------------------------------------------------------------------------
 1 | import { useAtom } from "jotai"
 2 | import { atomWithStorage } from "jotai/utils"
 3 | 
 4 | import { Style } from "@/registry/styles"
 5 | import { Theme } from "@/registry/themes"
 6 | 
 7 | type Config = {
 8 |   style: Style["name"]
 9 |   theme: Theme["name"]
10 |   radius: number
11 | }
12 | 
13 | const configAtom = atomWithStorage<Config>("config", {
14 |   style: "default",
15 |   theme: "zinc",
16 |   radius: 0.5,
17 | })
18 | 
19 | export function useConfig() {
20 |   return useAtom(configAtom)
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/stack-responsive.tsx:
--------------------------------------------------------------------------------
 1 | import { Stack } from "@/registry/default/ui/stack"
 2 | 
 3 | export default function Component(): JSX.Element {
 4 |   return (
 5 |     <Stack
 6 |       direction={{ sm: "column", lg: "row" }}
 7 |       gap={{ sm: 2, md: 5, xl: 12 }}
 8 |     >
 9 |       <div className="h-12 w-12 rounded-md bg-gray-1000 p-2" />
10 |       <div className="h-12 w-12 rounded-md bg-gray-1000 p-2" />
11 |       <div className="h-12 w-12 rounded-md bg-gray-1000 p-2" />
12 |     </Stack>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/www/lib/fonts.ts:
--------------------------------------------------------------------------------
 1 | // import { JetBrains_Mono as FontMono, Inter as FontSans } from "next/font/google"
 2 | import { JetBrains_Mono as FontMono } from "next/font/google"
 3 | // import { GeistMono } from "geist/font/mono"
 4 | import { GeistSans } from "geist/font/sans"
 5 | 
 6 | // export const fontSans = FontSans({
 7 | //   subsets: ["latin"],
 8 | //   variable: "--font-sans",
 9 | // })
10 | export const fontSans = GeistSans
11 | 
12 | export const fontMono = FontMono({
13 |   subsets: ["latin"],
14 |   variable: "--font-mono",
15 | })
16 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/button-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function ButtonDemo() {
 5 |   return (
 6 |     <Stack
 7 |       align="flex-start"
 8 |       direction={{ sm: "column", md: "row" }}
 9 |       gap={4}
10 |       justify="space-between"
11 |     >
12 |       <Button size="small">Upload</Button>
13 |       <Button>Upload</Button>
14 |       <Button size="large">Upload</Button>
15 |     </Stack>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/checkbox-disabled.tsx:
--------------------------------------------------------------------------------
 1 | import { Checkbox } from "@/registry/default/ui/checkbox"
 2 | 
 3 | export default function CheckboxDisabled() {
 4 |   return (
 5 |     <div className="flex items-center space-x-2">
 6 |       <Checkbox id="terms2" disabled />
 7 |       <label
 8 |         htmlFor="terms2"
 9 |         className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
10 |       >
11 |         Accept terms and conditions
12 |       </label>
13 |     </div>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/toast-simple.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import { useToast } from "@/registry/default/ui/use-toast"
 5 | 
 6 | export default function ToastSimple() {
 7 |   const { toast } = useToast()
 8 | 
 9 |   return (
10 |     <Button
11 |       variant="secondary"
12 |       onClick={() => {
13 |         toast({
14 |           description: "Your message has been sent.",
15 |         })
16 |       }}
17 |     >
18 |       Show Toast
19 |     </Button>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/badge-sizes.tsx:
--------------------------------------------------------------------------------
 1 | import { Badge } from "@/registry/default/ui/badge"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function BadgeDestructive() {
 5 |   return (
 6 |     <Stack gap={2} align="flex-start">
 7 |       <Badge variant="gray" size="sm">
 8 |         Small
 9 |       </Badge>
10 |       <Badge variant="gray" size="md">
11 |         Medium
12 |       </Badge>
13 |       <Badge variant="gray" size="lg">
14 |         Large
15 |       </Badge>
16 |     </Stack>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/checkbox-demo.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Checkbox } from "@/registry/default/ui/checkbox"
 4 | 
 5 | export default function CheckboxDemo() {
 6 |   return (
 7 |     <div className="flex items-center space-x-2">
 8 |       <Checkbox id="terms" />
 9 |       <label
10 |         htmlFor="terms"
11 |         className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
12 |       >
13 |         Accept terms and conditions
14 |       </label>
15 |     </div>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/apps/www/components/promo-video.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
 4 | 
 5 | export function PromoVideo() {
 6 |   return (
 7 |     <AspectRatio
 8 |       ratio={16 / 9}
 9 |       className="overflow-hidden rounded-lg border bg-white shadow-xl"
10 |     >
11 |       <video autoPlay muted playsInline>
12 |         <source
13 |           src="https://ui-shadcn.s3.amazonaws.com/ui-promo-hd.mp4"
14 |           type="video/mp4"
15 |         />
16 |       </video>
17 |     </AspectRatio>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/packages/cli/src/utils/transformers/transform-rsc.ts:
--------------------------------------------------------------------------------
 1 | import { Transformer } from "@/src/utils/transformers"
 2 | import { SyntaxKind } from "ts-morph"
 3 | 
 4 | export const transformRsc: Transformer = async ({ sourceFile, config }) => {
 5 |   if (config.rsc) {
 6 |     return sourceFile
 7 |   }
 8 | 
 9 |   // Remove "use client" from the top of the file.
10 |   const first = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement)
11 |   if (first?.getText() === `"use client"`) {
12 |     first.remove()
13 |   }
14 | 
15 |   return sourceFile
16 | }
17 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/aspect-ratio-demo.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image"
 2 | 
 3 | import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
 4 | 
 5 | export default function AspectRatioDemo() {
 6 |   return (
 7 |     <AspectRatio ratio={16 / 9} className="bg-muted">
 8 |       <Image
 9 |         src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
10 |         alt="Photo by Drew Beamer"
11 |         fill
12 |         className="rounded-md object-cover"
13 |       />
14 |     </AspectRatio>
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/menu-link-items.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Menu,
 3 |   MenuButton,
 4 |   MenuContainer,
 5 |   MenuLink,
 6 | } from "@/registry/default/ui/menu"
 7 | 
 8 | export default function MenuLinksDemo() {
 9 |   return (
10 |     <MenuContainer>
11 |       <MenuButton>Actions</MenuButton>
12 |       <Menu width={200}>
13 |         <MenuLink href="/design/menu#custom-trigger">One</MenuLink>
14 |         <MenuLink href="#">Two</MenuLink>
15 |         <MenuLink href="#">Three</MenuLink>
16 |       </Menu>
17 |     </MenuContainer>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/alert-destructive.tsx:
--------------------------------------------------------------------------------
 1 | import { AlertCircle } from "lucide-react"
 2 | 
 3 | import {
 4 |   Alert,
 5 |   AlertDescription,
 6 |   AlertTitle,
 7 | } from "@/registry/default/ui/alert"
 8 | 
 9 | export default function AlertDestructive() {
10 |   return (
11 |     <Alert variant="destructive">
12 |       <AlertCircle className="h-4 w-4" />
13 |       <AlertTitle>Error</AlertTitle>
14 |       <AlertDescription>
15 |         Your session has expired. Please log in again.
16 |       </AlertDescription>
17 |     </Alert>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/apps/www/registry/schema.ts:
--------------------------------------------------------------------------------
 1 | import { z } from "zod"
 2 | 
 3 | export const registrySchema = z.array(
 4 |   z.object({
 5 |     name: z.string(),
 6 |     dependencies: z.array(z.string()).optional(),
 7 |     devDependencies: z.array(z.string()).optional(),
 8 |     registryDependencies: z.array(z.string()).optional(),
 9 |     files: z.array(z.string()),
10 |     type: z.enum([
11 |       "components:ui",
12 |       "components:component",
13 |       "components:example",
14 |     ]),
15 |   })
16 | )
17 | 
18 | export type Registry = z.infer<typeof registrySchema>
19 | 


--------------------------------------------------------------------------------
/apps/www/components/style-wrapper.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | 
 5 | import { useConfig } from "@/hooks/use-config"
 6 | import { Style } from "@/registry/styles"
 7 | 
 8 | interface StyleWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
 9 |   styleName?: Style["name"]
10 | }
11 | 
12 | export function StyleWrapper({ styleName, children }: StyleWrapperProps) {
13 |   const [config] = useConfig()
14 | 
15 |   if (!styleName || config.style === styleName) {
16 |     return <>{children}</>
17 |   }
18 | 
19 |   return null
20 | }
21 | 


--------------------------------------------------------------------------------
/apps/www/hooks/use-media-query.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | export function useMediaQuery(query: string) {
 4 |   const [value, setValue] = React.useState(false)
 5 | 
 6 |   React.useEffect(() => {
 7 |     function onChange(event: MediaQueryListEvent) {
 8 |       setValue(event.matches)
 9 |     }
10 | 
11 |     const result = matchMedia(query)
12 |     result.addEventListener("change", onChange)
13 |     setValue(result.matches)
14 | 
15 |     return () => result.removeEventListener("change", onChange)
16 |   }, [query])
17 | 
18 |   return value
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | .pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | coverage
10 | 
11 | # next.js
12 | .next/
13 | out/
14 | build
15 | 
16 | # misc
17 | .DS_Store
18 | *.pem
19 | 
20 | # debug
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .pnpm-debug.log*
25 | 
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | 
32 | # turbo
33 | .turbo
34 | 
35 | .contentlayer
36 | tsconfig.tsbuildinfo


--------------------------------------------------------------------------------
/apps/www/registry/default/example/textarea-with-text.tsx:
--------------------------------------------------------------------------------
 1 | import { Label } from "@/registry/default/ui/label"
 2 | import { Textarea } from "@/registry/default/ui/textarea"
 3 | 
 4 | export default function TextareaWithText() {
 5 |   return (
 6 |     <div className="grid w-full gap-1.5">
 7 |       <Label htmlFor="message-2">Your Message</Label>
 8 |       <Textarea placeholder="Type your message here." id="message-2" />
 9 |       <p className="text-sm text-muted-foreground">
10 |         Your message will be copied to the support team.
11 |       </p>
12 |     </div>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/www/components/component-card.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
 5 | 
 6 | export function ComponentCard({
 7 |   className,
 8 |   ...props
 9 | }: React.HTMLAttributes<HTMLDivElement>) {
10 |   return (
11 |     <AspectRatio ratio={1 / 1} asChild>
12 |       <div
13 |         className={cn(
14 |           "flex items-center justify-center rounded-md border p-8",
15 |           className
16 |         )}
17 |         {...props}
18 |       />
19 |     </AspectRatio>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-clamp.tsx:
--------------------------------------------------------------------------------
 1 | import { Text } from "@/registry/default/ui/text"
 2 | 
 3 | export default function TextClamp() {
 4 |   return (
 5 |     <div style={{ maxHeight: 100 }}>
 6 |       <Text size={16} truncate={2}>
 7 |         The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The
 8 |         Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The
 9 |         Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The
10 |         Evil Rabbit jumps. The Evil Rabbit jumps.
11 |       </Text>
12 |     </div>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/www/components/callout.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Alert,
 3 |   AlertDescription,
 4 |   AlertTitle,
 5 | } from "@/registry/default/ui/alert"
 6 | 
 7 | interface CalloutProps {
 8 |   icon?: string
 9 |   title?: string
10 |   children?: React.ReactNode
11 | }
12 | 
13 | export function Callout({ title, children, icon, ...props }: CalloutProps) {
14 |   return (
15 |     <Alert {...props}>
16 |       {icon && <span className="mr-4 text-2xl">{icon}</span>}
17 |       {title && <AlertTitle>{title}</AlertTitle>}
18 |       <AlertDescription>{children}</AlertDescription>
19 |     </Alert>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/www/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { clsx, type ClassValue } from "clsx"
 3 | import { twMerge } from "tailwind-merge"
 4 | 
 5 | export function cn(...inputs: ClassValue[]) {
 6 |   return twMerge(clsx(inputs))
 7 | }
 8 | 
 9 | export function formatDate(input: string | number): string {
10 |   const date = new Date(input)
11 |   return date.toLocaleDateString("en-US", {
12 |     month: "long",
13 |     day: "numeric",
14 |     year: "numeric",
15 |   })
16 | }
17 | 
18 | export function absoluteUrl(path: string) {
19 |   return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
20 | }
21 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/input-disabled.tsx:
--------------------------------------------------------------------------------
 1 | import type { JSX } from "react"
 2 | 
 3 | import { Input } from "@/registry/default/ui/input"
 4 | import { Stack } from "@/registry/default/ui/stack"
 5 | 
 6 | export default function Component(): JSX.Element {
 7 |   return (
 8 |     <Stack align="start" direction={{ sm: "column", md: "row" }} gap={4}>
 9 |       <Input
10 |         aria-labelledby="Demo"
11 |         disabled
12 |         placeholder="Disabled with placeholder"
13 |       />
14 |       <Input aria-labelledby="Demo" disabled value="Disabled with value" />
15 |     </Stack>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/apps/www/hooks/use-mutation-observer.ts:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | export const useMutationObserver = (
 4 |   ref: React.MutableRefObject<HTMLElement | null>,
 5 |   callback: MutationCallback,
 6 |   options = {
 7 |     attributes: true,
 8 |     characterData: true,
 9 |     childList: true,
10 |     subtree: true,
11 |   }
12 | ) => {
13 |   React.useEffect(() => {
14 |     if (ref.current) {
15 |       const observer = new MutationObserver(callback)
16 |       observer.observe(ref.current, options)
17 |       return () => observer.disconnect()
18 |     }
19 |   }, [ref, callback, options])
20 | }
21 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/sonner-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { toast } from "sonner"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | 
 5 | export default function SonnerDemo() {
 6 |   return (
 7 |     <Button
 8 |       variant="secondary"
 9 |       onClick={() =>
10 |         toast("Event has been created", {
11 |           description: "Sunday, December 03, 2023 at 9:00 AM",
12 |           action: {
13 |             label: "Undo",
14 |             onClick: () => console.log("Undo"),
15 |           },
16 |         })
17 |       }
18 |     >
19 |       Show Toast
20 |     </Button>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/toast-with-title.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import { useToast } from "@/registry/default/ui/use-toast"
 5 | 
 6 | export default function ToastWithTitle() {
 7 |   const { toast } = useToast()
 8 | 
 9 |   return (
10 |     <Button
11 |       variant="secondary"
12 |       onClick={() => {
13 |         toast({
14 |           title: "Uh oh! Something went wrong.",
15 |           description: "There was a problem with your request.",
16 |         })
17 |       }}
18 |     >
19 |       Show Toast
20 |     </Button>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/button-loading.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function ButtonLoading() {
 5 |   return (
 6 |     <Stack
 7 |       align="start"
 8 |       direction={{ sm: "column", md: "row" }}
 9 |       gap={4}
10 |       justify="space-between"
11 |     >
12 |       <Button loading size="small">
13 |         Upload
14 |       </Button>
15 |       <Button loading>Upload</Button>
16 |       <Button loading size="large">
17 |         Upload
18 |       </Button>
19 |     </Stack>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/button-types.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function ButtonTypes() {
 5 |   return (
 6 |     <Stack
 7 |       align="start"
 8 |       direction={{ sm: "column", md: "row" }}
 9 |       gap={4}
10 |       justify="space-between"
11 |     >
12 |       <Button variant="secondary">Upload</Button>
13 |       <Button variant="tertiary">Upload</Button>
14 |       <Button variant="error">Upload</Button>
15 |       <Button variant="warning">Upload</Button>
16 |     </Stack>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://json.schemastore.org/tsconfig",
 3 |   "display": "Default",
 4 |   "compilerOptions": {
 5 |     "composite": false,
 6 |     "declaration": true,
 7 |     "declarationMap": true,
 8 |     "esModuleInterop": true,
 9 |     "forceConsistentCasingInFileNames": true,
10 |     "inlineSources": false,
11 |     "isolatedModules": true,
12 |     "moduleResolution": "node",
13 |     "noUnusedLocals": false,
14 |     "noUnusedParameters": false,
15 |     "preserveWatchOutput": true,
16 |     "skipLibCheck": true,
17 |     "strict": true
18 |   },
19 |   "exclude": ["node_modules"]
20 | }
21 | 


--------------------------------------------------------------------------------
/apps/www/components/framework-docs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { allDocs } from "contentlayer/generated"
 5 | 
 6 | import { Mdx } from "./mdx-components"
 7 | 
 8 | interface FrameworkDocsProps extends React.HTMLAttributes<HTMLDivElement> {
 9 |   data: string
10 | }
11 | 
12 | export function FrameworkDocs({ ...props }: FrameworkDocsProps) {
13 |   const frameworkDoc = allDocs.find(
14 |     (doc) => doc.slug === `/docs/installation/${props.data}`
15 |   )
16 | 
17 |   if (!frameworkDoc) {
18 |     return null
19 |   }
20 | 
21 |   return <Mdx code={frameworkDoc.body.code} />
22 | }
23 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/button-disabled.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function ButtonDisabled() {
 5 |   return (
 6 |     <Stack
 7 |       align="start"
 8 |       direction={{ sm: "column", md: "row" }}
 9 |       gap={4}
10 |       justify="space-between"
11 |     >
12 |       <Button disabled size="small">
13 |         Upload
14 |       </Button>
15 |       <Button disabled>Upload</Button>
16 |       <Button disabled size="large">
17 |         Upload
18 |       </Button>
19 |     </Stack>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/note-disabled.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Note } from "@/registry/default/ui/note"
 3 | import { Stack } from "@/registry/default/ui/stack"
 4 | 
 5 | export default function NoteDisabled() {
 6 |   return (
 7 |     <Stack gap={6}>
 8 |       <Note
 9 |         action={
10 |           <Button size="small" disabled>
11 |             Upgrade
12 |           </Button>
13 |         }
14 |         disabled
15 |         fill
16 |         type="warning"
17 |       >
18 |         This note details a warning.
19 |       </Note>
20 |     </Stack>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/collapsible.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "collapsible",
 3 |   "dependencies": [
 4 |     "@radix-ui/react-collapsible"
 5 |   ],
 6 |   "files": [
 7 |     {
 8 |       "name": "collapsible.tsx",
 9 |       "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"
10 |     }
11 |   ],
12 |   "type": "components:ui"
13 | }


--------------------------------------------------------------------------------
/apps/www/content/docs/index.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Introduction
 3 | description: Inspired by ShadcnUI and Vercel, this is a collection of re-usable components that you can copy and paste into your apps.
 4 | ---
 5 | 
 6 | <PaddingBox>
 7 | 
 8 | This is **NOT** in any way affiliated with **Vercel** or **ShadcnUI**. This is a solo project made for fun.
 9 | 
10 | <Note fill type="warning" className="mt-4" size="lg">
11 | This project is currently in alpha so please note that some components are not fully implemented and can change without further notice. If you encounter any issues, please reach out on Github or Twitter/X
12 | </Note>
13 | </PaddingBox>
14 | 


--------------------------------------------------------------------------------
/apps/www/components/component-source.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | import { CodeBlockWrapper } from "@/components/code-block-wrapper"
 7 | 
 8 | interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
 9 |   src: string
10 | }
11 | 
12 | export function ComponentSource({
13 |   children,
14 |   className,
15 |   ...props
16 | }: ComponentSourceProps) {
17 |   return (
18 |     <CodeBlockWrapper
19 |       expandButtonTitle="Expand"
20 |       className={cn("my-6 overflow-hidden rounded-md", className)}
21 |     >
22 |       {children}
23 |     </CodeBlockWrapper>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/gauge-label.tsx:
--------------------------------------------------------------------------------
 1 | import { Gauge } from "@/registry/default/ui/gauge"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function GaugeLabel() {
 5 |   return (
 6 |     <Stack direction="row" gap={8}>
 7 |       <Gauge showValue size="tiny" value={80} />
 8 |       <Gauge showValue size="small" value={80} />
 9 |       <Gauge showValue size="small" value={100} />
10 |       <Gauge showValue size="medium" value={80} />
11 |       <Gauge showValue size="medium" value={100} />
12 |       <Gauge showValue size="large" value={80} />
13 |       <Gauge showValue size="large" value={100} />
14 |     </Stack>
15 |   )
16 | }
17 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/stack-padding.tsx:
--------------------------------------------------------------------------------
 1 | import { Stack } from "@/registry/default/ui/stack"
 2 | 
 3 | export default function Component(): JSX.Element {
 4 |   return (
 5 |     <Stack gap={3}>
 6 |       <div className="h-12 w-12 rounded-md bg-gray-1000 p-2">
 7 |         <div className="h-full w-full rounded bg-gray-800" />
 8 |       </div>
 9 |       <div className="h-12 w-12 rounded-md bg-gray-1000 p-2">
10 |         <div className="h-full w-full rounded bg-gray-800" />
11 |       </div>
12 |       <div className="h-12 w-12 rounded-md bg-gray-1000 p-2">
13 |         <div className="h-full w-full rounded bg-gray-800" />
14 |       </div>
15 |     </Stack>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/apps/www/components/tailwind-indicator.tsx:
--------------------------------------------------------------------------------
 1 | export function TailwindIndicator() {
 2 |   if (process.env.NODE_ENV === "production") return null
 3 | 
 4 |   return (
 5 |     <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
 6 |       <div className="block sm:hidden">xs</div>
 7 |       <div className="hidden sm:block md:hidden">sm</div>
 8 |       <div className="hidden md:block lg:hidden">md</div>
 9 |       <div className="hidden lg:block xl:hidden">lg</div>
10 |       <div className="hidden xl:block 2xl:hidden">xl</div>
11 |       <div className="hidden 2xl:block">2xl</div>
12 |     </div>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/input-demo.tsx:
--------------------------------------------------------------------------------
 1 | import type { JSX } from "react"
 2 | 
 3 | import { Input } from "@/registry/default/ui/input"
 4 | import { Stack } from "@/registry/default/ui/stack"
 5 | 
 6 | export default function Component(): JSX.Element {
 7 |   return (
 8 |     <Stack
 9 |       align="start"
10 |       direction={{ sm: "column", md: "row" }}
11 |       gap={4}
12 |       justify="space-between"
13 |     >
14 |       <Input aria-labelledby="Demo input" placeholder="Small" size="small" />
15 |       <Input aria-labelledby="Demo input" placeholder="Default" size="medium" />
16 |       <Input aria-labelledby="Demo input" placeholder="Large" size="large" />
17 |     </Stack>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/about.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: About
 3 | description: Powered by amazing open source projects.
 4 | ---
 5 | 
 6 | ## About
 7 | 
 8 | [ui.shadcn.com](https://ui.shadcn.com) is a project by [shadcn](https://shadcn.com).
 9 | 
10 | ## Credits
11 | 
12 | - [Radix UI](https://radix-ui.com) - For the primitives.
13 | - [Vercel](https://vercel.com) - Where I host all my projects.
14 | - [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
15 | - [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`.
16 | - [cmdk](https://cmdk.paco.me) - For the `<Command />` component.
17 | 
18 | ## License
19 | 
20 | MIT © [shadcn](https://shadcn.com)
21 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Stack } from "@/registry/default/ui/stack"
 2 | import { Text } from "@/registry/default/ui/text"
 3 | 
 4 | export default function TextDemo() {
 5 |   return (
 6 |     <Stack gap={2}>
 7 |       <Text size={48}>The Evil Rabbit jumps.</Text>
 8 |       <Text size={32}>The Evil Rabbit jumps.</Text>
 9 |       <Text size={24}>The Evil Rabbit jumps.</Text>
10 |       <Text size={20}>The Evil Rabbit jumps.</Text>
11 |       <Text size={16}>The Evil Rabbit jumps.</Text>
12 |       <Text size={14}>The Evil Rabbit jumps.</Text>
13 |       <Text size={12}>The Evil Rabbit jumps.</Text>
14 |       <Text size={10}>The Evil Rabbit jumps.</Text>
15 |     </Stack>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/note-action.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Note } from "@/registry/default/ui/note"
 3 | import { Stack } from "@/registry/default/ui/stack"
 4 | 
 5 | export default function NoteAction() {
 6 |   return (
 7 |     <Stack align="flex-start" gap={6}>
 8 |       <Note action={<Button size="small">Upgrade</Button>}>
 9 |         This note details some information.
10 |       </Note>
11 |       <Note action={<Button size="small">Upgrade</Button>}>
12 |         This note details a large amount information that could potentially wrap
13 |         into two or more lines, forcing the height of the Note to be larger.
14 |       </Note>
15 |     </Stack>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/button-rounded.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Stack } from "@/registry/default/ui/stack"
 3 | 
 4 | export default function ButtonRounded() {
 5 |   return (
 6 |     <Stack
 7 |       align="start"
 8 |       direction={{ sm: "column", md: "row" }}
 9 |       gap={4}
10 |       justify="space-between"
11 |     >
12 |       <Button shadow shape="rounded" size="small" variant="secondary">
13 |         Upload
14 |       </Button>
15 |       <Button shadow shape="rounded" variant="secondary">
16 |         Upload
17 |       </Button>
18 |       <Button shadow shape="rounded" size="large" variant="secondary">
19 |         Upload
20 |       </Button>
21 |     </Stack>
22 |   )
23 | }
24 | 


--------------------------------------------------------------------------------
/apps/www/lib/events.ts:
--------------------------------------------------------------------------------
 1 | import va from "@vercel/analytics"
 2 | import { z } from "zod"
 3 | 
 4 | const eventSchema = z.object({
 5 |   name: z.enum([
 6 |     "copy_npm_command",
 7 |     "copy_usage_import_code",
 8 |     "copy_usage_code",
 9 |     "copy_primitive_code",
10 |     "copy_theme_code",
11 |   ]),
12 |   // declare type AllowedPropertyValues = string | number | boolean | null
13 |   properties: z
14 |     .record(z.union([z.string(), z.number(), z.boolean(), z.null()]))
15 |     .optional(),
16 | })
17 | 
18 | export type Event = z.infer<typeof eventSchema>
19 | 
20 | export function trackEvent(input: Event): void {
21 |   const event = eventSchema.parse(input)
22 |   if (event) {
23 |     va.track(event.name, event.properties)
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/apps/www/types/unist.ts:
--------------------------------------------------------------------------------
 1 | import { Node } from "unist-builder"
 2 | 
 3 | export interface UnistNode extends Node {
 4 |   type: string
 5 |   name?: string
 6 |   tagName?: string
 7 |   value?: string
 8 |   properties?: {
 9 |     __rawString__?: string
10 |     __className__?: string
11 |     __event__?: string
12 |     [key: string]: unknown
13 |   } & NpmCommands
14 |   attributes?: {
15 |     name: string
16 |     value: unknown
17 |     type?: string
18 |   }[]
19 |   children?: UnistNode[]
20 | }
21 | 
22 | export interface UnistTree extends Node {
23 |   children: UnistNode[]
24 | }
25 | 
26 | export interface NpmCommands {
27 |   __npmCommand__?: string
28 |   __yarnCommand__?: string
29 |   __pnpmCommand__?: string
30 |   __bunCommand__?: string
31 | }
32 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/toast-with-action.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import { ToastAction } from "@/registry/default/ui/toast"
 5 | import { useToast } from "@/registry/default/ui/use-toast"
 6 | 
 7 | export default function ToastWithAction() {
 8 |   const { toast } = useToast()
 9 | 
10 |   return (
11 |     <Button
12 |       variant="secondary"
13 |       onClick={() => {
14 |         toast({
15 |           title: "Uh oh! Something went wrong.",
16 |           description: "There was a problem with your request.",
17 |           action: <ToastAction altText="Try again">Try again</ToastAction>,
18 |         })
19 |       }}
20 |     >
21 |       Show Toast
22 |     </Button>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/toggle-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react"
 2 | 
 3 | import { Toggle } from "@/registry/default/ui/toggle"
 4 | 
 5 | export default function ToggleDemo() {
 6 |   const [checked, setChecked] = useState(false)
 7 |   const [checked2, setChecked2] = useState(true)
 8 | 
 9 |   return (
10 |     <div className="flex flex-col gap-6">
11 |       <div className="">
12 |         <Toggle
13 |           checked={checked}
14 |           onCheckedChange={(): void => setChecked(!checked)}
15 |         />
16 |       </div>
17 |       <div className="">
18 |         <Toggle
19 |           checked={checked2}
20 |           onCheckedChange={(): void => setChecked2(!checked2)}
21 |         />
22 |       </div>
23 |     </div>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/scroll-area-demo.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { ScrollArea } from "@/registry/default/ui/scroll-area"
 4 | 
 5 | const tags = Array.from({ length: 50 }).map(
 6 |   (_, i, a) => `v1.2.0-beta.${a.length - i}`
 7 | )
 8 | 
 9 | export default function ScrollAreaDemo() {
10 |   return (
11 |     <ScrollArea className="h-72 w-48 rounded-md border">
12 |       <div className="p-4">
13 |         <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
14 |         {tags.map((tag) => (
15 |           <>
16 |             <div key={tag} className="border-b border-b-red-500 text-sm">
17 |               {tag}
18 |             </div>
19 |           </>
20 |         ))}
21 |       </div>
22 |     </ScrollArea>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/menu-disabled-items.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Menu,
 3 |   MenuButton,
 4 |   MenuContainer,
 5 |   MenuItem,
 6 | } from "@/registry/default/ui/menu"
 7 | 
 8 | export default function DropdownMenuDemo() {
 9 |   return (
10 |     <MenuContainer>
11 |       <MenuButton>Actions</MenuButton>
12 |       <Menu width={200}>
13 |         <MenuItem onClick={() => undefined}>One</MenuItem>
14 |         <MenuItem disabled onClick={() => undefined}>
15 |           Two
16 |         </MenuItem>
17 |         <MenuItem disabled onClick={() => undefined}>
18 |           Three
19 |         </MenuItem>
20 |         <MenuItem onClick={() => undefined} type="error">
21 |           Delete
22 |         </MenuItem>
23 |       </Menu>
24 |     </MenuContainer>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/www/components/theme-switcher.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { useSelectedLayoutSegment } from "next/navigation"
 5 | 
 6 | import { useConfig } from "@/hooks/use-config"
 7 | 
 8 | export function ThemeSwitcher() {
 9 |   const [config] = useConfig()
10 |   const segment = useSelectedLayoutSegment()
11 | 
12 |   React.useEffect(() => {
13 |     document.body.classList.forEach((className) => {
14 |       if (className.match(/^theme.*/)) {
15 |         document.body.classList.remove(className)
16 |       }
17 |     })
18 | 
19 |     const theme = segment === "themes" ? config.theme : null
20 |     if (theme) {
21 |       return document.body.classList.add(`theme-${theme}`)
22 |     }
23 |   }, [segment, config])
24 | 
25 |   return null
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/checkbox-with-text.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Checkbox } from "@/registry/default/ui/checkbox"
 4 | 
 5 | export default function CheckboxWithText() {
 6 |   return (
 7 |     <div className="items-top flex space-x-2">
 8 |       <Checkbox id="terms1" />
 9 |       <div className="grid gap-1.5 leading-none">
10 |         <label
11 |           htmlFor="terms1"
12 |           className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
13 |         >
14 |           Accept terms and conditions
15 |         </label>
16 |         <p className="text-sm text-muted-foreground">
17 |           You agree to our Terms of Service and Privacy Policy.
18 |         </p>
19 |       </div>
20 |     </div>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/toast-demo.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import { ToastAction } from "@/registry/default/ui/toast"
 5 | import { useToast } from "@/registry/default/ui/use-toast"
 6 | 
 7 | export default function ToastDemo() {
 8 |   const { toast } = useToast()
 9 | 
10 |   return (
11 |     <Button
12 |       variant="secondary"
13 |       onClick={() => {
14 |         toast({
15 |           title: "Scheduled: Catch up ",
16 |           description: "Friday, February 10, 2023 at 5:57 PM",
17 |           action: (
18 |             <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
19 |           ),
20 |         })
21 |       }}
22 |     >
23 |       Add to calendar
24 |     </Button>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://json.schemastore.org/eslintrc",
 3 |   "root": true,
 4 |   "extends": [
 5 |     "next/core-web-vitals",
 6 |     "turbo",
 7 |     "prettier",
 8 |     "plugin:tailwindcss/recommended"
 9 |   ],
10 |   "plugins": ["tailwindcss"],
11 |   "rules": {
12 |     "@next/next/no-html-link-for-pages": "off",
13 |     "tailwindcss/no-custom-classname": "off",
14 |     "tailwindcss/classnames-order": "off"
15 |   },
16 |   "settings": {
17 |     "tailwindcss": {
18 |       "callees": ["cn", "cva"],
19 |       "config": "tailwind.config.cjs"
20 |     },
21 |     "next": {
22 |       "rootDir": ["apps/*/"]
23 |     }
24 |   },
25 |   "overrides": [
26 |     {
27 |       "files": ["*.ts", "*.tsx"],
28 |       "parser": "@typescript-eslint/parser"
29 |     }
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/toast-destructive.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import { ToastAction } from "@/registry/default/ui/toast"
 5 | import { useToast } from "@/registry/default/ui/use-toast"
 6 | 
 7 | export default function ToastDestructive() {
 8 |   const { toast } = useToast()
 9 | 
10 |   return (
11 |     <Button
12 |       variant="secondary"
13 |       onClick={() => {
14 |         toast({
15 |           variant: "destructive",
16 |           title: "Uh oh! Something went wrong.",
17 |           description: "There was a problem with your request.",
18 |           action: <ToastAction altText="Try again">Try again</ToastAction>,
19 |         })
20 |       }}
21 |     >
22 |       Show Toast
23 |     </Button>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/apps/www/components/theme-wrapper.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | import { useConfig } from "@/hooks/use-config"
 5 | 
 6 | interface ThemeWrapperProps extends React.ComponentProps<"div"> {
 7 |   defaultTheme?: string
 8 | }
 9 | 
10 | export function ThemeWrapper({
11 |   defaultTheme,
12 |   children,
13 |   className,
14 | }: ThemeWrapperProps) {
15 |   const [config] = useConfig()
16 | 
17 |   return (
18 |     <div
19 |       className={cn(
20 |         `theme-${defaultTheme || config.theme}`,
21 |         "w-full",
22 |         className
23 |       )}
24 |       style={
25 |         {
26 |           "--radius": `${defaultTheme ? 0.5 : config.radius}rem`,
27 |         } as React.CSSProperties
28 |       }
29 |     >
30 |       {children}
31 |     </div>
32 |   )
33 | }
34 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/button-prefix.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowLeft, ArrowRight } from "lucide-react"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import { Stack } from "@/registry/default/ui/stack"
 5 | 
 6 | export default function ButtonPrefix() {
 7 |   return (
 8 |     <Stack
 9 |       align="start"
10 |       direction={{ sm: "column", md: "row" }}
11 |       gap={4}
12 |       justify="space-between"
13 |     >
14 |       <Button prefix={<ArrowLeft className="h-4 w-4" />}>Upload</Button>
15 |       <Button suffix={<ArrowRight className="h-4 w-4" />}>Upload</Button>
16 |       <Button
17 |         prefix={<ArrowLeft className="h-4 w-4" />}
18 |         suffix={<ArrowRight className="h-4 w-4" />}
19 |       >
20 |         Upload
21 |       </Button>
22 |     </Stack>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/note-cyan.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Note } from "@/registry/default/ui/note"
 3 | import { Stack } from "@/registry/default/ui/stack"
 4 | 
 5 | export default function NoteCyan() {
 6 |   return (
 7 |     <Stack gap={6}>
 8 |       <Note type="cyan">This note details some success information.</Note>
 9 |       <Note action={<Button size="small">Upgrade</Button>} type="cyan">
10 |         This note details some success information.
11 |       </Note>
12 |       <Note fill type="cyan">
13 |         This filled note details some success information.
14 |       </Note>
15 |       <Note action={<Button size="small">Upgrade</Button>} fill type="cyan">
16 |         This filled note details some success information.
17 |       </Note>
18 |     </Stack>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/note-error.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Note } from "@/registry/default/ui/note"
 3 | import { Stack } from "@/registry/default/ui/stack"
 4 | 
 5 | export default function NoteDemo() {
 6 |   return (
 7 |     <Stack gap={6}>
 8 |       <Note type="error">This note details some error information.</Note>
 9 |       <Note action={<Button size="small">Upgrade</Button>} type="error">
10 |         This note details some error information.
11 |       </Note>
12 |       <Note fill type="error">
13 |         This filled note details some error information.
14 |       </Note>
15 |       <Note action={<Button size="small">Upgrade</Button>} fill type="error">
16 |         This filled note details some error information.
17 |       </Note>
18 |     </Stack>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/menu-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Cloud, Plus, Users } from "lucide-react"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import {
 5 |   DropdownMenuShortcut,
 6 |   Menu,
 7 |   MenuButton,
 8 |   MenuContainer,
 9 |   MenuItem,
10 | } from "@/registry/default/ui/menu"
11 | 
12 | export default function DropdownMenuDemo() {
13 |   return (
14 |     <MenuContainer>
15 |       <MenuButton>Actions</MenuButton>
16 |       <Menu width={200}>
17 |         <MenuItem onClick={() => alert("one")}>One</MenuItem>
18 |         <MenuItem onClick={() => alert("one")}>Two</MenuItem>
19 |         <MenuItem onClick={() => alert("one")}>Three</MenuItem>
20 |         <MenuItem onClick={() => alert("one")} type="error">
21 |           Delete
22 |         </MenuItem>
23 |       </Menu>
24 |     </MenuContainer>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/menu-prefix.tsx:
--------------------------------------------------------------------------------
 1 | import { Cloud, Plus, Users } from "lucide-react"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import {
 5 |   DropdownMenuShortcut,
 6 |   Menu,
 7 |   MenuButton,
 8 |   MenuContainer,
 9 |   MenuItem,
10 | } from "@/registry/default/ui/menu"
11 | 
12 | export default function MenuPrefixDemo() {
13 |   return (
14 |     <MenuContainer>
15 |       <MenuButton>prefix</MenuButton>
16 |       <Menu width={200}>
17 |         <MenuItem onClick={() => alert("one")}>One</MenuItem>
18 |         <MenuItem onClick={() => alert("one")}>Two</MenuItem>
19 |         <MenuItem onClick={() => alert("one")}>Three</MenuItem>
20 |         <MenuItem onClick={() => alert("one")} type="error">
21 |           Delete
22 |         </MenuItem>
23 |       </Menu>
24 |     </MenuContainer>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/note-success.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Note } from "@/registry/default/ui/note"
 3 | import { Stack } from "@/registry/default/ui/stack"
 4 | 
 5 | export default function NoteDemo() {
 6 |   return (
 7 |     <Stack gap={6}>
 8 |       <Note type="success">This note details some success information.</Note>
 9 |       <Note action={<Button size="small">Upgrade</Button>} type="success">
10 |         This note details some success information.
11 |       </Note>
12 |       <Note fill type="success">
13 |         This filled note details some success information.
14 |       </Note>
15 |       <Note action={<Button size="small">Upgrade</Button>} fill type="success">
16 |         This filled note details some success information.
17 |       </Note>
18 |     </Stack>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/note-violet.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Note } from "@/registry/default/ui/note"
 3 | import { Stack } from "@/registry/default/ui/stack"
 4 | 
 5 | export default function NoteViolet() {
 6 |   return (
 7 |     <Stack gap={6}>
 8 |       <Note type="violet">This note details some warning information.</Note>
 9 |       <Note action={<Button size="small">Upgrade</Button>} type="violet">
10 |         This note details some warning information.
11 |       </Note>
12 |       <Note fill type="violet">
13 |         This filled note details some warning information.
14 |       </Note>
15 |       <Note action={<Button size="small">Upgrade</Button>} fill type="violet">
16 |         This filled note details some warning information.
17 |       </Note>
18 |     </Stack>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/note-warning.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Note } from "@/registry/default/ui/note"
 3 | import { Stack } from "@/registry/default/ui/stack"
 4 | 
 5 | export default function NoteWarning() {
 6 |   return (
 7 |     <Stack gap={6}>
 8 |       <Note type="warning">This note details some warning information.</Note>
 9 |       <Note action={<Button size="small">Upgrade</Button>} type="warning">
10 |         This note details some warning information.
11 |       </Note>
12 |       <Note fill type="warning">
13 |         This filled note details some warning information.
14 |       </Note>
15 |       <Note action={<Button size="small">Upgrade</Button>} fill type="warning">
16 |         This filled note details some warning information.
17 |       </Note>
18 |     </Stack>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/menu-custom-trigger.tsx:
--------------------------------------------------------------------------------
 1 | import { Cloud, Plus, Users } from "lucide-react"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import {
 5 |   DropdownMenuShortcut,
 6 |   Menu,
 7 |   MenuButton,
 8 |   MenuContainer,
 9 |   MenuItem,
10 | } from "@/registry/default/ui/menu"
11 | 
12 | export default function DropdownMenuDemo() {
13 |   return (
14 |     <MenuContainer>
15 |       <MenuButton>custom trigger</MenuButton>
16 |       <Menu width={200}>
17 |         <MenuItem onClick={() => alert("one")}>One</MenuItem>
18 |         <MenuItem onClick={() => alert("one")}>Two</MenuItem>
19 |         <MenuItem onClick={() => alert("one")}>Three</MenuItem>
20 |         <MenuItem onClick={() => alert("one")} type="error">
21 |           Delete
22 |         </MenuItem>
23 |       </Menu>
24 |     </MenuContainer>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tabs-demo.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Tabs,
 3 |   TabsContent,
 4 |   TabsList,
 5 |   TabsTrigger,
 6 | } from "@/registry/default/ui/tabs"
 7 | 
 8 | // TODO fix some of the left over cases
 9 | export default function TabsDemo() {
10 |   return (
11 |     <Tabs defaultValue="apple">
12 |       <TabsList>
13 |         <TabsTrigger value="apple">Apple</TabsTrigger>
14 |         <TabsTrigger value="orange">Orange</TabsTrigger>
15 |         <TabsTrigger value="mango">Mango</TabsTrigger>
16 |       </TabsList>
17 |       <TabsContent value="apple" className="py-4">
18 |         Apple
19 |       </TabsContent>
20 |       <TabsContent value="orange" className="py-4">
21 |         Orange
22 |       </TabsContent>
23 |       <TabsContent value="mango" className="py-4">
24 |         Mango
25 |       </TabsContent>
26 |     </Tabs>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/radio-group-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Label } from "@/registry/default/ui/label"
 2 | import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group"
 3 | 
 4 | export default function RadioGroupDemo() {
 5 |   return (
 6 |     <RadioGroup defaultValue="comfortable">
 7 |       <div className="flex items-center space-x-2">
 8 |         <RadioGroupItem value="default" id="r1" />
 9 |         <Label htmlFor="r1">Default</Label>
10 |       </div>
11 |       <div className="flex items-center space-x-2">
12 |         <RadioGroupItem value="comfortable" id="r2" />
13 |         <Label htmlFor="r2">Comfortable</Label>
14 |       </div>
15 |       <div className="flex items-center space-x-2">
16 |         <RadioGroupItem value="compact" id="r3" />
17 |         <Label htmlFor="r3">Compact</Label>
18 |       </div>
19 |     </RadioGroup>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/packages/cli/src/index.ts:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | import { add } from "@/src/commands/add"
 3 | import { diff } from "@/src/commands/diff"
 4 | import { init } from "@/src/commands/init"
 5 | import { Command } from "commander"
 6 | 
 7 | import { getPackageInfo } from "./utils/get-package-info"
 8 | 
 9 | process.on("SIGINT", () => process.exit(0))
10 | process.on("SIGTERM", () => process.exit(0))
11 | 
12 | async function main() {
13 |   const packageInfo = await getPackageInfo()
14 | 
15 |   const program = new Command()
16 |     .name("shadcn-ui")
17 |     .description("add components and dependencies to your project")
18 |     .version(
19 |       packageInfo.version || "1.0.0",
20 |       "-v, --version",
21 |       "display the version number"
22 |     )
23 | 
24 |   program.addCommand(init).addCommand(add).addCommand(diff)
25 | 
26 |   program.parse()
27 | }
28 | 
29 | main()
30 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tabs-disable-specific-tabs.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Tabs,
 3 |   TabsContent,
 4 |   TabsList,
 5 |   TabsTrigger,
 6 | } from "@/registry/default/ui/tabs"
 7 | 
 8 | export default function TabsDisableSpecificTabs() {
 9 |   return (
10 |     <Tabs defaultValue="apple">
11 |       <TabsList>
12 |         <TabsTrigger value="apple">Apple</TabsTrigger>
13 |         <TabsTrigger value="orange">Orange</TabsTrigger>
14 |         <TabsTrigger value="mango" disabled>
15 |           Mango
16 |         </TabsTrigger>
17 |       </TabsList>
18 |       <TabsContent value="apple" className="py-4">
19 |         Apple
20 |       </TabsContent>
21 |       <TabsContent value="orange" className="py-4">
22 |         Orange
23 |       </TabsContent>
24 |       <TabsContent value="mango" className="py-4">
25 |         Mango
26 |       </TabsContent>
27 |     </Tabs>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/apps/www/components/padding-box.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | interface PaddingBoxProps {
 4 |   title?: string
 5 |   description?: string
 6 |   children: React.ReactNode
 7 | }
 8 | 
 9 | export function PaddingBox({ title, description, children }: PaddingBoxProps) {
10 |   const hasLabel = !!title || !!description
11 | 
12 |   return (
13 |     <div className="border-b border-b-gray-400 p-6 last:border-b-0 md:p-10 lg:p-12">
14 |       {hasLabel && (
15 |         <div className="mb-4 xl:mb-7">
16 |           {title && (
17 |             <h2 className="text-2xl font-semibold text-gray-1000">{title}</h2>
18 |           )}
19 |           {description && (
20 |             <p className="mt-2 leading-6 text-gray-900 xl:mt-4">
21 |               {description}
22 |             </p>
23 |           )}
24 |         </div>
25 |       )}
26 |       {children}
27 |     </div>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/apps/www/app/docs/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { docsConfig } from "@/config/docs"
 2 | import { DocsSidebarNav } from "@/components/sidebar-nav"
 3 | import { ScrollArea } from "@/registry/default/ui/scroll-area"
 4 | 
 5 | interface DocsLayoutProps {
 6 |   children: React.ReactNode
 7 | }
 8 | 
 9 | export default function DocsLayout({ children }: DocsLayoutProps) {
10 |   return (
11 |     <div className="relative flex-1 items-start md:grid xl:grid-cols-[260px_1fr]">
12 |       <aside className="z-100 sticky bottom-0 top-16 hidden h-[calc(100vh-64px)] min-h-0 w-full shrink-0 flex-col border-r border-border xl:flex">
13 |         <div className="relative overflow-y-auto">
14 |           <ScrollArea className="h-full px-6 pt-4">
15 |             <DocsSidebarNav items={docsConfig.sidebarNav} />
16 |           </ScrollArea>
17 |         </div>
18 |       </aside>
19 |       {children}
20 |     </div>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/resizable-vertical.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ResizableHandle,
 3 |   ResizablePanel,
 4 |   ResizablePanelGroup,
 5 | } from "@/registry/default/ui/resizable"
 6 | 
 7 | export default function ResizableDemo() {
 8 |   return (
 9 |     <ResizablePanelGroup
10 |       direction="vertical"
11 |       className="min-h-[200px] max-w-md rounded-lg border"
12 |     >
13 |       <ResizablePanel defaultSize={25}>
14 |         <div className="flex h-full items-center justify-center p-6">
15 |           <span className="font-semibold">Header</span>
16 |         </div>
17 |       </ResizablePanel>
18 |       <ResizableHandle />
19 |       <ResizablePanel defaultSize={75}>
20 |         <div className="flex h-full items-center justify-center p-6">
21 |           <span className="font-semibold">Content</span>
22 |         </div>
23 |       </ResizablePanel>
24 |     </ResizablePanelGroup>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "ring-offset-background flex min-h-[80px] w-full rounded-md border border-input bg-background-200 px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/resizable-handle.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ResizableHandle,
 3 |   ResizablePanel,
 4 |   ResizablePanelGroup,
 5 | } from "@/registry/default/ui/resizable"
 6 | 
 7 | export default function ResizableDemo() {
 8 |   return (
 9 |     <ResizablePanelGroup
10 |       direction="horizontal"
11 |       className="min-h-[200px] max-w-md rounded-lg border"
12 |     >
13 |       <ResizablePanel defaultSize={25}>
14 |         <div className="flex h-full items-center justify-center p-6">
15 |           <span className="font-semibold">Sidebar</span>
16 |         </div>
17 |       </ResizablePanel>
18 |       <ResizableHandle withHandle />
19 |       <ResizablePanel defaultSize={75}>
20 |         <div className="flex h-full items-center justify-center p-6">
21 |           <span className="font-semibold">Content</span>
22 |         </div>
23 |       </ResizablePanel>
24 |     </ResizablePanelGroup>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/collapse-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { Collapse, CollapseGroup } from "@/registry/default/ui/collapse"
 2 | 
 3 | export default function CollapseDemo() {
 4 |   return (
 5 |     <CollapseGroup>
 6 |       <Collapse value="item-1" title="Question A">
 7 |         {/* TODO add the text component */}
 8 |         <p>
 9 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
10 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
11 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
12 |           aliquip ex ea commodo consequat.
13 |         </p>
14 |       </Collapse>
15 |       <Collapse value="item-2" title="Question B">
16 |         <p>
17 |           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
18 |           dolore eu fugiat nulla pariatur.
19 |         </p>
20 |       </Collapse>
21 |     </CollapseGroup>
22 |   )
23 | }
24 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/note-secondary.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/registry/default/ui/button"
 2 | import { Note } from "@/registry/default/ui/note"
 3 | import { Stack } from "@/registry/default/ui/stack"
 4 | 
 5 | export default function NoteDemo() {
 6 |   return (
 7 |     <Stack gap={6}>
 8 |       <Note type="secondary">
 9 |         This note details some secondary information.
10 |       </Note>
11 |       <Note action={<Button size="small">Upgrade</Button>} type="secondary">
12 |         This note details some secondary information.
13 |       </Note>
14 |       <Note fill type="secondary">
15 |         This filled note details some secondary information.
16 |       </Note>
17 |       <Note
18 |         action={<Button size="small">Upgrade</Button>}
19 |         fill
20 |         type="secondary"
21 |       >
22 |         This filled note details some secondary information.
23 |       </Note>
24 |     </Stack>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <ProgressPrimitive.Indicator
21 |       className="h-full w-full flex-1 bg-primary transition-all"
22 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
23 |     />
24 |   </ProgressPrimitive.Root>
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 | 
28 | export { Progress }
29 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/tabs-controlled.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react"
 2 | 
 3 | import {
 4 |   Tabs,
 5 |   TabsContent,
 6 |   TabsList,
 7 |   TabsTrigger,
 8 | } from "@/registry/default/ui/tabs"
 9 | 
10 | export default function TabsControlled() {
11 |   const [selected, setSelected] = useState("apple")
12 | 
13 |   return (
14 |     <Tabs value={selected} onValueChange={setSelected}>
15 |       <TabsList>
16 |         <TabsTrigger value="apple">Apple</TabsTrigger>
17 |         <TabsTrigger value="orange">Orange</TabsTrigger>
18 |         <TabsTrigger value="mango">Mango</TabsTrigger>
19 |       </TabsList>
20 |       <TabsContent value="apple" className="py-4">
21 |         Apple
22 |       </TabsContent>
23 |       <TabsContent value="orange" className="py-4">
24 |         Orange
25 |       </TabsContent>
26 |       <TabsContent value="mango" className="py-4">
27 |         Mango
28 |       </TabsContent>
29 |     </Tabs>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/select-demo.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import {
 4 |   Select,
 5 |   SelectContent,
 6 |   SelectGroup,
 7 |   SelectItem,
 8 |   SelectLabel,
 9 |   SelectTrigger,
10 |   SelectValue,
11 | } from "@/registry/default/ui/select"
12 | 
13 | export default function SelectDemo() {
14 |   return (
15 |     <Select>
16 |       <SelectTrigger className="w-[180px]">
17 |         <SelectValue placeholder="Select a fruit" />
18 |       </SelectTrigger>
19 |       <SelectContent>
20 |         <SelectGroup>
21 |           <SelectLabel>Fruits</SelectLabel>
22 |           <SelectItem value="apple">Apple</SelectItem>
23 |           <SelectItem value="banana">Banana</SelectItem>
24 |           <SelectItem value="blueberry">Blueberry</SelectItem>
25 |           <SelectItem value="grapes">Grapes</SelectItem>
26 |           <SelectItem value="pineapple">Pineapple</SelectItem>
27 |         </SelectGroup>
28 |       </SelectContent>
29 |     </Select>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from "@/registry/default/ui/toast"
11 | import { useToast } from "@/registry/default/ui/use-toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/textarea.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "textarea",
 3 |   "files": [
 4 |     {
 5 |       "name": "textarea.tsx",
 6 |       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"ring-offset-background flex min-h-[80px] w-full rounded-md border border-input bg-background-200 px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n"
 7 |     }
 8 |   ],
 9 |   "type": "components:ui"
10 | }


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/label.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "label",
 3 |   "dependencies": [
 4 |     "@radix-ui/react-label"
 5 |   ],
 6 |   "files": [
 7 |     {
 8 |       "name": "label.tsx",
 9 |       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"
10 |     }
11 |   ],
12 |   "type": "components:ui"
13 | }


--------------------------------------------------------------------------------
/apps/www/registry/default/example/switch-sizes.tsx:
--------------------------------------------------------------------------------
 1 | import { Switch, SwitchControl } from "@/registry/default/ui/switch"
 2 | 
 3 | export default function SwitchSizes() {
 4 |   return (
 5 |     <div className="flex justify-between">
 6 |       <div className="flex flex-1 justify-start">
 7 |         <Switch size="small">
 8 |           <SwitchControl defaultChecked label="Source" value="source" />
 9 |           <SwitchControl label="Sizes" value="output" />
10 |         </Switch>
11 |       </div>
12 |       <div className="flex flex-1 justify-start">
13 |         <Switch size="medium">
14 |           <SwitchControl defaultChecked label="Source" value="source" />
15 |           <SwitchControl label="Sizes" value="output" />
16 |         </Switch>
17 |       </div>
18 |       <div className="flex flex-1 justify-start">
19 |         <Switch size="large">
20 |           <SwitchControl label="Source" value="source" />
21 |           <SwitchControl label="Sizes" value="list" />
22 |         </Switch>
23 |       </div>
24 |     </div>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/apps/www/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://json.schemastore.org/tsconfig",
 3 |   "extends": "../../tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "target": "es5",
 6 |     "lib": ["dom", "dom.iterable", "esnext"],
 7 |     "allowJs": true,
 8 |     "skipLibCheck": true,
 9 |     "strict": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "noEmit": true,
12 |     "incremental": true,
13 |     "esModuleInterop": true,
14 |     "module": "esnext",
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "jsx": "preserve",
18 |     "baseUrl": ".",
19 |     "paths": {
20 |       "@/*": ["./*"],
21 |       "contentlayer/generated": ["./.contentlayer/generated"]
22 |     },
23 |     "plugins": [
24 |       {
25 |         "name": "next"
26 |       }
27 |     ]
28 |   },
29 |   "include": [
30 |     "next-env.d.ts",
31 |     "**/*.ts",
32 |     "**/*.tsx",
33 |     ".next/types/**/*.ts",
34 |     ".contentlayer/generated"
35 |   ],
36 |   "exclude": ["node_modules", "./scripts/build-registry.ts"]
37 | }
38 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner } from "sonner"
 5 | 
 6 | type ToasterProps = React.ComponentProps<typeof Sonner>
 7 | 
 8 | const Toaster = ({ ...props }: ToasterProps) => {
 9 |   const { theme = "system" } = useTheme()
10 | 
11 |   return (
12 |     <Sonner
13 |       theme={theme as ToasterProps["theme"]}
14 |       className="toaster group"
15 |       toastOptions={{
16 |         classNames: {
17 |           toast:
18 |             "group toast group-[.toaster]:bg-background-200 group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
19 |           description: "group-[.toast]:text-muted-foreground",
20 |           actionButton:
21 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
22 |           cancelButton:
23 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
24 |         },
25 |       }}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | export { Toaster }
32 | 


--------------------------------------------------------------------------------
/prettier.config.cjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('prettier').Config} */
 2 | module.exports = {
 3 |   endOfLine: "lf",
 4 |   semi: false,
 5 |   singleQuote: false,
 6 |   tabWidth: 2,
 7 |   trailingComma: "es5",
 8 |   importOrder: [
 9 |     "^(react/(.*)$)|^(react$)",
10 |     "^(next/(.*)$)|^(next$)",
11 |     "<THIRD_PARTY_MODULES>",
12 |     "",
13 |     "^types$",
14 |     "^@/types/(.*)$",
15 |     "^@/config/(.*)$",
16 |     "^@/lib/(.*)$",
17 |     "^@/hooks/(.*)$",
18 |     "^@/components/ui/(.*)$",
19 |     "^@/components/(.*)$",
20 |     "^@/registry/(.*)$",
21 |     "^@/styles/(.*)$",
22 |     "^@/app/(.*)$",
23 |     "",
24 |     "^[./]",
25 |   ],
26 |   importOrderSeparation: false,
27 |   importOrderSortSpecifiers: true,
28 |   importOrderBuiltinModulesToTop: true,
29 |   importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
30 |   importOrderMergeDuplicateImports: true,
31 |   importOrderCombineTypeAndValueImports: true,
32 |   plugins: [
33 |     "@ianvs/prettier-plugin-sort-imports",
34 |     "prettier-plugin-tailwindcss",
35 |   ],
36 | }
37 | 


--------------------------------------------------------------------------------
/packages/cli/README.md:
--------------------------------------------------------------------------------
 1 | # shadcn-ui
 2 | 
 3 | A CLI for adding components to your project.
 4 | 
 5 | ## Usage
 6 | 
 7 | Use the `init` command to initialize dependencies for a new project.
 8 | 
 9 | The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
10 | 
11 | ```bash
12 | npx shadcn-ui init
13 | ```
14 | 
15 | ## add
16 | 
17 | Use the `add` command to add components to your project.
18 | 
19 | The `add` command adds a component to your project and installs all required dependencies.
20 | 
21 | ```bash
22 | npx shadcn-ui add [component]
23 | ```
24 | 
25 | ### Example
26 | 
27 | ```bash
28 | npx shadcn-ui add modal
29 | ```
30 | 
31 | You can also run the command without any arguments to view a list of all available components:
32 | 
33 | ```bash
34 | npx shadcn-ui add
35 | ```
36 | 
37 | ## Documentation
38 | 
39 | Visit https://ui.shadcn.com/docs/cli to view the documentation.
40 | 
41 | ## License
42 | 
43 | Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
44 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/status-dot.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | type State = "QUEUED" | "BUILDING" | "ERROR" | "READY" | "CANCELED"
 6 | 
 7 | const labels: Record<State, string> = {
 8 |   QUEUED: "Queued",
 9 |   BUILDING: "Building",
10 |   ERROR: "Error",
11 |   READY: "Ready",
12 |   CANCELED: "Canceled",
13 | }
14 | 
15 | const colors: Record<State, string> = {
16 |   QUEUED: "bg-accents-2",
17 |   BUILDING: "bg-orange-500", // TODO change out these colors to real colors
18 |   ERROR: "bg-red-800",
19 |   READY: "bg-teal-600",
20 |   CANCELED: "bg-accents-2",
21 | }
22 | 
23 | interface StatusDotProps {
24 |   state: State
25 |   label?: boolean
26 | }
27 | 
28 | const StatusDot: React.FC<StatusDotProps> = ({ state, label }) => {
29 |   return (
30 |     <div className="flex items-center">
31 |       <div className={cn("h-2.5 w-2.5 rounded-full", colors[state])} />
32 |       {label && <p className="ml-2 text-sm leading-4">{labels[state]}</p>}
33 |     </div>
34 |   )
35 | }
36 | 
37 | export { StatusDot }
38 | 


--------------------------------------------------------------------------------
/apps/www/components/site-footer.tsx:
--------------------------------------------------------------------------------
 1 | import { siteConfig } from "@/config/site"
 2 | 
 3 | export function SiteFooter() {
 4 |   return (
 5 |     <footer className="py-6 md:px-8 md:py-0">
 6 |       <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
 7 |         <p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
 8 |           Built by{" "}
 9 |           <a
10 |             href={siteConfig.links.twitter}
11 |             target="_blank"
12 |             rel="noreferrer"
13 |             className="font-medium underline underline-offset-4"
14 |           >
15 |             shadcn
16 |           </a>
17 |           . The source code is available on{" "}
18 |           <a
19 |             href={siteConfig.links.github}
20 |             target="_blank"
21 |             rel="noreferrer"
22 |             className="font-medium underline underline-offset-4"
23 |           >
24 |             GitHub
25 |           </a>
26 |           .
27 |         </p>
28 |       </div>
29 |     </footer>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/spinner.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | type SpinnerProps = { size?: number }
 4 | 
 5 | const Spinner = ({ size }: SpinnerProps) => {
 6 |   return (
 7 |     <div
 8 |       className="h-[var(--spinner-size)] w-[var(--spinner-size)] shrink-0"
 9 |       style={
10 |         {
11 |           ["--spinner-size"]: size ? `${size}px` : "20px",
12 |         } as React.CSSProperties
13 |       }
14 |     >
15 |       <div className="relative left-1/2 top-1/2 h-[var(--spinner-size)] w-[var(--spinner-size)]">
16 |         {Array(12)
17 |           .fill(null)
18 |           .map((_, i) => (
19 |             <div
20 |               key={i}
21 |               className="absolute left-[-10%] top-[-3.9%] h-[8%] w-[24%] animate-spinner-spin rounded-[5px] bg-gray-700"
22 |               style={{
23 |                 transform: `rotate(${i * 30}deg) translate(146%)`,
24 |                 animationDelay: `-${1.2 - (i + 1) * 0.1}s`,
25 |               }}
26 |             />
27 |           ))}
28 |       </div>
29 |     </div>
30 |   )
31 | }
32 | 
33 | export { Spinner }
34 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/menu-radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | 
 5 | import { Button } from "@/registry/default/ui/button"
 6 | import {
 7 |   DropdownMenuLabel,
 8 |   DropdownMenuRadioGroup,
 9 |   DropdownMenuRadioItem,
10 |   Menu,
11 |   MenuButton,
12 |   MenuContainer,
13 | } from "@/registry/default/ui/menu"
14 | 
15 | export default function DropdownMenuRadioGroupDemo() {
16 |   const [position, setPosition] = React.useState("bottom")
17 | 
18 |   return (
19 |     <MenuContainer>
20 |       <MenuButton>Open</MenuButton>
21 |       <Menu className="w-56">
22 |         <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
23 |         <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
24 |           <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
25 |           <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
26 |           <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
27 |         </DropdownMenuRadioGroup>
28 |       </Menu>
29 |     </MenuContainer>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/progress.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "progress",
 3 |   "dependencies": [
 4 |     "@radix-ui/react-progress"
 5 |   ],
 6 |   "files": [
 7 |     {
 8 |       "name": "progress.tsx",
 9 |       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative h-4 w-full overflow-hidden rounded-full bg-secondary\",\n      className\n    )}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n"
10 |     }
11 |   ],
12 |   "type": "components:ui"
13 | }


--------------------------------------------------------------------------------
/apps/www/components/drawer.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { forwardRef } from "react"
 4 | import { Drawer as DrawerPrimitive } from "vaul"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const DrawerTrigger = DrawerPrimitive.Trigger
 9 | 
10 | const DrawerContent = forwardRef<
11 |   React.ElementRef<typeof DrawerPrimitive.Content>,
12 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
13 | >(({ className, children, ...props }, ref) => (
14 |   <DrawerPrimitive.Portal>
15 |     <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
16 |     <DrawerPrimitive.Content
17 |       ref={ref}
18 |       className={cn(
19 |         "fixed inset-x-0 bottom-0 z-50 mt-24 h-[96%] rounded-t-[10px] bg-background-200",
20 |         className
21 |       )}
22 |       {...props}
23 |     >
24 |       <div className="absolute left-1/2 top-3 h-2 w-[100px] translate-x-[-50%] rounded-full bg-muted" />
25 |       {children}
26 |     </DrawerPrimitive.Content>
27 |   </DrawerPrimitive.Portal>
28 | ))
29 | DrawerContent.displayName = "DrawerContent"
30 | 
31 | export { DrawerTrigger, DrawerContent }
32 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/grid.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Grid
 3 | description: Grid stuff
 4 | component: true
 5 | ---
 6 | 
 7 | <PaddingBox>
 8 |   <ComponentPreview name="grid-debug" />
 9 | </PaddingBox>
10 | 
11 | <PaddingBox title="Installation">
12 | <Tabs defaultValue="cli">
13 | 
14 | <TabsList>
15 |   <TabsTrigger value="cli">CLI</TabsTrigger>
16 |   <TabsTrigger value="manual">Manual</TabsTrigger>
17 | </TabsList>
18 | <TabsContent value="cli">
19 | 
20 | ```bash
21 | npx shadcn-ui@latest add grid
22 | ```
23 | 
24 | </TabsContent>
25 | 
26 | <TabsContent value="manual">
27 | 
28 | <Steps>
29 | 
30 | <Step>Copy and paste the following code into your project.</Step>
31 | 
32 | <ComponentSource name="input" />
33 | 
34 | <Step>Update the import paths to match your project setup.</Step>
35 | 
36 | </Steps>
37 | 
38 | </TabsContent>
39 | 
40 | </Tabs>
41 | 
42 | </PaddingBox>
43 | 
44 | <PaddingBox>
45 |   <ComponentPreview name="grid-demo" />
46 | </PaddingBox>
47 | 
48 | <PaddingBox title="Responsive Grid with responsive guide clipping cells">
49 |   <ComponentPreview name="grid-cell-span" />
50 | </PaddingBox>
51 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/theme-switcher.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Theme Switcher
 3 | description: Component that allows users to switch between light and dark themes.
 4 | component: true
 5 | ---
 6 | 
 7 | <PaddingBox title="Defualt">
 8 |   <ComponentPreview name="theme-switcher-demo" />
 9 | </PaddingBox>
10 | 
11 | <PaddingBox title="Installation">
12 | <Tabs defaultValue="manual">
13 | 
14 | <TabsList>
15 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
16 |   <TabsTrigger value="manual">Manual</TabsTrigger>
17 | </TabsList>
18 | <TabsContent value="cli">
19 | 
20 | ```bash
21 | npx shadcn-ui@latest add theme-switcher
22 | ```
23 | 
24 | </TabsContent>
25 | 
26 | <TabsContent value="manual">
27 | 
28 | <Steps>
29 | 
30 | <Step>Install the following dependencies:</Step>
31 | 
32 | ```bash
33 | npm install next-themes
34 | ```
35 | 
36 | <Step>Copy and paste the following code into your project.</Step>
37 | 
38 | <ComponentSource name="theme-switcher" />
39 | 
40 | <Step>Update the import paths to match your project setup.</Step>
41 | 
42 | </Steps>
43 | 
44 | </TabsContent>
45 | 
46 | </Tabs>
47 | </PaddingBox>
48 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/loading-dots.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | interface LoadingDotsProps {
 4 |   size?: number
 5 |   children?: React.ReactNode
 6 | }
 7 | 
 8 | const LoadingDots: React.FC<LoadingDotsProps> = ({ size = 2, children }) => {
 9 |   return (
10 |     <span
11 |       className="inline-flex items-center"
12 |       style={{
13 |         // @ts-ignore
14 |         "--loading-dots-size": `${size}px`,
15 |       }}
16 |     >
17 |       {children && <span className="mr-3 inline-block">{children}</span>}
18 |       <span className="mx-[1px] inline-block h-[var(--loading-dots-size)] w-[var(--loading-dots-size)] animate-loading-dots-blink rounded-full bg-gray-900"></span>
19 |       <span className="mx-[1px] inline-block h-[var(--loading-dots-size)] w-[var(--loading-dots-size)] animate-loading-dots-blink rounded-full bg-gray-900 delay-200"></span>
20 |       <span className="mx-[1px] inline-block h-[var(--loading-dots-size)] w-[var(--loading-dots-size)] animate-loading-dots-blink rounded-full bg-gray-900 [animation-delay:400ms]"></span>
21 |     </span>
22 |   )
23 | }
24 | 
25 | export { LoadingDots }
26 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/status-dot.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Status dot
 3 | description: Display an indicator of deployment status.
 4 | component: true
 5 | ---
 6 | 
 7 | <PaddingBox title="Default">
 8 |   <ComponentPreview name="status-dot-demo" />
 9 | </PaddingBox>
10 | 
11 | <PaddingBox title="Installation">
12 | 
13 | <Tabs defaultValue="manual">
14 | 
15 | <TabsList>
16 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
17 |   <TabsTrigger value="manual">Manual</TabsTrigger>
18 | </TabsList>
19 | <TabsContent value="cli">
20 | 
21 | {/* TODO change all of theese to be own command */}
22 | 
23 | ```bash
24 | npx shadcn-ui@latest add status-dot
25 | ```
26 | 
27 | </TabsContent>
28 | 
29 | <TabsContent value="manual">
30 | 
31 | <Steps>
32 | 
33 | <Step>Copy and paste the following code into your project.</Step>
34 | 
35 | <ComponentSource name="status-dot" />
36 | 
37 | <Step>Update the import paths to match your project setup.</Step>
38 | 
39 | </Steps>
40 | 
41 | </TabsContent>
42 | 
43 | </Tabs>
44 | </PaddingBox>
45 | 
46 | <PaddingBox title="Label">
47 |   <ComponentPreview name="status-dot-label" />
48 | </PaddingBox>
49 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/kbd.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Keyboard input
 3 | description: Display keyboard input that triggers an action.
 4 | component: true
 5 | ---
 6 | 
 7 | <PaddingBox>
 8 |   <ComponentPreview name="kbd-demo" />
 9 | </PaddingBox>
10 | 
11 | <PaddingBox title="Installation">
12 | <Tabs defaultValue="manual">
13 | 
14 | <TabsList>
15 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
16 |   <TabsTrigger value="manual">Manual</TabsTrigger>
17 | </TabsList>
18 | <TabsContent value="cli">
19 | 
20 | ```bash
21 | npx shadcn-ui@latest add kbd
22 | ```
23 | 
24 | </TabsContent>
25 | 
26 | <TabsContent value="manual">
27 | 
28 | <Steps>
29 | 
30 | <Step>Copy and paste the following code into your project.</Step>
31 | 
32 | <ComponentSource name="input" />
33 | 
34 | <Step>Update the import paths to match your project setup.</Step>
35 | 
36 | </Steps>
37 | 
38 | </TabsContent>
39 | 
40 | </Tabs>
41 | 
42 | </PaddingBox>
43 | 
44 | <PaddingBox title="Combinations">
45 |   <ComponentPreview name="kbd-combination" />
46 | </PaddingBox>
47 | 
48 | <PaddingBox title="Small">
49 |   <ComponentPreview name="kbd-small" />
50 | </PaddingBox>
51 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 imMatheus
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/spinner.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "spinner",
 3 |   "files": [
 4 |     {
 5 |       "name": "spinner.tsx",
 6 |       "content": "import React from \"react\"\n\ntype SpinnerProps = { size?: number }\n\nconst Spinner = ({ size }: SpinnerProps) => {\n  return (\n    <div\n      className=\"h-[var(--spinner-size)] w-[var(--spinner-size)] shrink-0\"\n      style={\n        {\n          [\"--spinner-size\"]: size ? `${size}px` : \"20px\",\n        } as React.CSSProperties\n      }\n    >\n      <div className=\"relative left-1/2 top-1/2 h-[var(--spinner-size)] w-[var(--spinner-size)]\">\n        {Array(12)\n          .fill(null)\n          .map((_, i) => (\n            <div\n              key={i}\n              className=\"absolute left-[-10%] top-[-3.9%] h-[8%] w-[24%] animate-spinner-spin rounded-[5px] bg-gray-700\"\n              style={{\n                transform: `rotate(${i * 30}deg) translate(146%)`,\n                animationDelay: `-${1.2 - (i + 1) * 0.1}s`,\n              }}\n            />\n          ))}\n      </div>\n    </div>\n  )\n}\n\nexport { Spinner }\n"
 7 |     }
 8 |   ],
 9 |   "type": "components:ui"
10 | }


--------------------------------------------------------------------------------
/apps/www/content/docs/components/skeleton.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Skeleton
 3 | description: Use to show a placeholder while content is loading.
 4 | component: true
 5 | ---
 6 | 
 7 | <ComponentPreview name="skeleton-demo" />
 8 | 
 9 | ## Installation
10 | 
11 | <Tabs defaultValue="manual">
12 | 
13 | <TabsList>
14 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
15 |   <TabsTrigger value="manual">Manual</TabsTrigger>
16 | </TabsList>
17 | <TabsContent value="cli">
18 | 
19 | ```bash
20 | npx shadcn-ui@latest add skeleton
21 | ```
22 | 
23 | </TabsContent>
24 | 
25 | <TabsContent value="manual">
26 | 
27 | <Steps>
28 | 
29 | <Step>Copy and paste the following code into your project.</Step>
30 | 
31 | <ComponentSource name="skeleton" />
32 | 
33 | <Step>Update the import paths to match your project setup.</Step>
34 | 
35 | </Steps>
36 | 
37 | </TabsContent>
38 | 
39 | </Tabs>
40 | 
41 | ## Usage
42 | 
43 | ```tsx
44 | import { Skeleton } from "@/components/ui/skeleton"
45 | ```
46 | 
47 | ```tsx
48 | <Skeleton className="h-[20px] w-[100px] rounded-full" />
49 | ```
50 | 
51 | ## Examples
52 | 
53 | ### Card
54 | 
55 | <ComponentPreview name="skeleton-card" />
56 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/pagination-demo.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Pagination,
 3 |   PaginationContent,
 4 |   PaginationEllipsis,
 5 |   PaginationItem,
 6 |   PaginationLink,
 7 |   PaginationNext,
 8 |   PaginationPrevious,
 9 | } from "@/registry/default/ui/pagination"
10 | 
11 | export default function PaginationDemo() {
12 |   return (
13 |     <Pagination>
14 |       <PaginationContent>
15 |         <PaginationItem>
16 |           <PaginationPrevious href="#" />
17 |         </PaginationItem>
18 |         <PaginationItem>
19 |           <PaginationLink href="#">1</PaginationLink>
20 |         </PaginationItem>
21 |         <PaginationItem>
22 |           <PaginationLink href="#" isActive>
23 |             2
24 |           </PaginationLink>
25 |         </PaginationItem>
26 |         <PaginationItem>
27 |           <PaginationLink href="#">3</PaginationLink>
28 |         </PaginationItem>
29 |         <PaginationItem>
30 |           <PaginationEllipsis />
31 |         </PaginationItem>
32 |         <PaginationItem>
33 |           <PaginationNext href="#" />
34 |         </PaginationItem>
35 |       </PaginationContent>
36 |     </Pagination>
37 |   )
38 | }
39 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/status-dot.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "status-dot",
 3 |   "dependencies": [],
 4 |   "files": [
 5 |     {
 6 |       "name": "status-dot.tsx",
 7 |       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype State = \"QUEUED\" | \"BUILDING\" | \"ERROR\" | \"READY\" | \"CANCELED\"\n\nconst labels: Record<State, string> = {\n  QUEUED: \"Queued\",\n  BUILDING: \"Building\",\n  ERROR: \"Error\",\n  READY: \"Ready\",\n  CANCELED: \"Canceled\",\n}\n\nconst colors: Record<State, string> = {\n  QUEUED: \"bg-accents-2\",\n  BUILDING: \"bg-orange-500\", // TODO change out these colors to real colors\n  ERROR: \"bg-red-800\",\n  READY: \"bg-teal-600\",\n  CANCELED: \"bg-accents-2\",\n}\n\ninterface StatusDotProps {\n  state: State\n  label?: boolean\n}\n\nconst StatusDot: React.FC<StatusDotProps> = ({ state, label }) => {\n  return (\n    <div className=\"flex items-center\">\n      <div className={cn(\"h-2.5 w-2.5 rounded-full\", colors[state])} />\n      {label && <p className=\"ml-2 text-sm leading-4\">{labels[state]}</p>}\n    </div>\n  )\n}\n\nexport { StatusDot }\n"
 8 |     }
 9 |   ],
10 |   "type": "components:ui"
11 | }


--------------------------------------------------------------------------------
/apps/www/registry/default/example/text-variants.tsx:
--------------------------------------------------------------------------------
 1 | import { Stack } from "@/registry/default/ui/stack"
 2 | import { Text } from "@/registry/default/ui/text"
 3 | 
 4 | export default function TextVariants() {
 5 |   return (
 6 |     <Stack gap={2}>
 7 |       {(
 8 |         [
 9 |           "heading-72",
10 |           "heading-64",
11 |           "heading-56",
12 |           "heading-48",
13 |           "heading-40",
14 |           "heading-32",
15 |           "heading-24",
16 |           "heading-20",
17 |           "heading-16",
18 |           "button-16",
19 |           "button-14",
20 |           "button-12",
21 |           "label-20",
22 |           "label-18",
23 |           "label-16",
24 |           "label-14",
25 |           "label-13",
26 |           "label-12",
27 |           "copy-24",
28 |           "copy-20",
29 |           "copy-18",
30 |           "copy-16",
31 |           "copy-14",
32 |           "copy-13",
33 |         ] as const
34 |       ).map((variant) => {
35 |         return (
36 |           <Text key={variant} transform="capitalize" size={variant}>
37 |             {variant.replace("-", " ")}
38 |           </Text>
39 |         )
40 |       })}
41 |     </Stack>
42 |   )
43 | }
44 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/kbd.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "kbd",
 3 |   "files": [
 4 |     {
 5 |       "name": "kbd.tsx",
 6 |       "content": "import React from \"react\"\nimport { cva } from \"class-variance-authority\"\n\nconst kbdVariants = cva(\n  \"text-gray-1000 text-sm bg-background-100 text-center space-x-1 inline-block rounded ml-1 shadow-border\",\n  {\n    variants: {\n      size: {\n        small: \"min-w-5 px-1\",\n        medium: \"min-w-6 min-h-6 px-1.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"medium\",\n    },\n  }\n)\n\ninterface KbdProps {\n  meta?: boolean\n  shift?: boolean\n  alt?: boolean\n  ctrl?: boolean\n  small?: boolean\n  children?: React.ReactNode\n}\n\n// TODO fix the font so that this looks good\nconst Kbd: React.FC<KbdProps> = ({\n  meta,\n  shift,\n  alt,\n  ctrl,\n  small,\n  children,\n}) => {\n  return (\n    <kbd className={kbdVariants({ size: small ? \"small\" : \"medium\" })}>\n      {meta && <span>⌘</span>}\n      {shift && <span>⇧</span>}\n      {alt && <span>⌥</span>}\n      {ctrl && <span>⌃</span>}\n\n      {children && <span>{children}</span>}\n    </kbd>\n  )\n}\n\nexport { Kbd }\n"
 7 |     }
 8 |   ],
 9 |   "type": "components:ui"
10 | }


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/kbd.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { cva } from "class-variance-authority"
 3 | 
 4 | const kbdVariants = cva(
 5 |   "text-gray-1000 text-sm bg-background-100 text-center space-x-1 inline-block rounded ml-1 shadow-border",
 6 |   {
 7 |     variants: {
 8 |       size: {
 9 |         small: "min-w-5 px-1",
10 |         medium: "min-w-6 min-h-6 px-1.5",
11 |       },
12 |     },
13 |     defaultVariants: {
14 |       size: "medium",
15 |     },
16 |   }
17 | )
18 | 
19 | interface KbdProps {
20 |   meta?: boolean
21 |   shift?: boolean
22 |   alt?: boolean
23 |   ctrl?: boolean
24 |   small?: boolean
25 |   children?: React.ReactNode
26 | }
27 | 
28 | // TODO fix the font so that this looks good
29 | const Kbd: React.FC<KbdProps> = ({
30 |   meta,
31 |   shift,
32 |   alt,
33 |   ctrl,
34 |   small,
35 |   children,
36 | }) => {
37 |   return (
38 |     <kbd className={kbdVariants({ size: small ? "small" : "medium" })}>
39 |       {meta && <span>⌘</span>}
40 |       {shift && <span>⇧</span>}
41 |       {alt && <span>⌥</span>}
42 |       {ctrl && <span>⌃</span>}
43 | 
44 |       {children && <span>{children}</span>}
45 |     </kbd>
46 |   )
47 | }
48 | 
49 | export { Kbd }
50 | 


--------------------------------------------------------------------------------
/scripts/sync-templates.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | set -e # bail on errors
 4 | GLOB=$1
 5 | IS_CI="${CI:-false}"
 6 | BASE=$(pwd)
 7 | COMMIT_MESSAGE=$(git log -1 --pretty=%B)
 8 | 
 9 | for folder in $GLOB; do
10 |   [ -d "$folder" ] || continue
11 |   cd $BASE
12 | 
13 |   if [ -n "$(git status --porcelain)" ]; then
14 |     git add .
15 |     git commit -m "chore: update template"
16 |     git push origin main
17 |   fi
18 | 
19 |   NAME=${folder##*/}
20 |   CLONE_DIR="__${NAME}__clone__"
21 | 
22 |   # sync to read-only clones
23 |   # clone, delete files in the clone, and copy (new) files over
24 |   # this handles file deletions, additions, and changes seamlessly
25 |   # note: redirect output to dev/null to avoid any possibility of leaking token
26 |   git clone --quiet --depth 1 git@github.com:shadcn/${NAME}.git $CLONE_DIR > /dev/null
27 |   cd $CLONE_DIR
28 |   find . | grep -v ".git" | grep -v "^\.*$" | xargs rm -rf # delete all files (to handle deletions in monorepo)
29 |   cp -r $BASE/$folder/. .
30 | 
31 |   if [ -n "$(git status --porcelain)" ]; then
32 |     git add .
33 |     git commit -m "$COMMIT_MESSAGE"
34 |     git push origin main
35 |   fi
36 | 
37 |   cd $BASE
38 |   rm -rf $CLONE_DIR
39 | done
40 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/sonner.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sonner",
 3 |   "dependencies": [
 4 |     "sonner",
 5 |     "next-themes"
 6 |   ],
 7 |   "files": [
 8 |     {
 9 |       "name": "sonner.tsx",
10 |       "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group toast group-[.toaster]:bg-background-200 group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n          description: \"group-[.toast]:text-muted-foreground\",\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n"
11 |     }
12 |   ],
13 |   "type": "components:ui"
14 | }


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 5 | import { Check } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Checkbox = React.forwardRef<
10 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12 | >(({ className, ...props }, ref) => (
13 |   <CheckboxPrimitive.Root
14 |     ref={ref}
15 |     className={cn(
16 |       "ring-offset-background peer h-4 w-4 shrink-0 rounded-sm border border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
17 |       className
18 |     )}
19 |     {...props}
20 |   >
21 |     <CheckboxPrimitive.Indicator
22 |       className={cn("flex items-center justify-center text-current")}
23 |     >
24 |       <Check className="h-4 w-4" />
25 |     </CheckboxPrimitive.Indicator>
26 |   </CheckboxPrimitive.Root>
27 | ))
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
29 | 
30 | export { Checkbox }
31 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/loading-dots.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "loading-dots",
 3 |   "files": [
 4 |     {
 5 |       "name": "loading-dots.tsx",
 6 |       "content": "import React from \"react\"\n\ninterface LoadingDotsProps {\n  size?: number\n  children?: React.ReactNode\n}\n\nconst LoadingDots: React.FC<LoadingDotsProps> = ({ size = 2, children }) => {\n  return (\n    <span\n      className=\"inline-flex items-center\"\n      style={{\n        // @ts-ignore\n        \"--loading-dots-size\": `${size}px`,\n      }}\n    >\n      {children && <span className=\"mr-3 inline-block\">{children}</span>}\n      <span className=\"mx-[1px] inline-block h-[var(--loading-dots-size)] w-[var(--loading-dots-size)] animate-loading-dots-blink rounded-full bg-gray-900\"></span>\n      <span className=\"mx-[1px] inline-block h-[var(--loading-dots-size)] w-[var(--loading-dots-size)] animate-loading-dots-blink rounded-full bg-gray-900 delay-200\"></span>\n      <span className=\"mx-[1px] inline-block h-[var(--loading-dots-size)] w-[var(--loading-dots-size)] animate-loading-dots-blink rounded-full bg-gray-900 [animation-delay:400ms]\"></span>\n    </span>\n  )\n}\n\nexport { LoadingDots }\n"
 7 |     }
 8 |   ],
 9 |   "type": "components:ui"
10 | }


--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://turbo.build/schema.json",
 3 |   "globalEnv": ["NODE_ENV"],
 4 |   "pipeline": {
 5 |     "build": {
 6 |       "dependsOn": ["^build"],
 7 |       "env": [
 8 |         "NEXT_PUBLIC_APP_URL",
 9 |         "UPSTASH_REDIS_REST_URL",
10 |         "UPSTASH_REDIS_REST_TOKEN",
11 |         "COMPONENTS_REGISTRY_URL",
12 |         "npm_config_user_agent",
13 |         "https_proxy"
14 |       ],
15 |       "outputs": ["dist/**", ".next/**"]
16 |     },
17 |     "preview": {
18 |       "env": ["NEXT_PUBLIC_APP_URL"],
19 |       "outputs": ["dist/**", ".next/**"]
20 |     },
21 |     "start": {
22 |       "dependsOn": ["^build"]
23 |     },
24 |     "lint": {
25 |       "cache": false,
26 |       "outputs": []
27 |     },
28 |     "lint:fix": {
29 |       "cache": false,
30 |       "outputs": []
31 |     },
32 |     "format:check": {
33 |       "cache": false,
34 |       "outputs": []
35 |     },
36 |     "format:write": {
37 |       "cache": false,
38 |       "outputs": []
39 |     },
40 |     "typecheck": {},
41 |     "dev": {
42 |       "cache": false
43 |     },
44 |     "check": {
45 |       "cache": false
46 |     },
47 |     "test": {
48 |       "cache": false,
49 |       "outputs": []
50 |     }
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Moon, Sun } from "lucide-react"
 5 | import { useTheme } from "next-themes"
 6 | 
 7 | import { Button } from "@/registry/default/ui/button"
 8 | import {
 9 |   Menu,
10 |   MenuButton,
11 |   MenuContainer,
12 |   MenuItem,
13 | } from "@/registry/default/ui/menu"
14 | 
15 | export default function ModeToggle() {
16 |   const { setTheme } = useTheme()
17 | 
18 |   return (
19 |     <MenuContainer>
20 |       <MenuButton>
21 |       <span className="relative flex items-center justify-center">
22 |         <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23 |         <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24 |         <span className="sr-only">Toggle theme</span>
25 |         </span>
26 |       </MenuButton>
27 |       <Menu align="end">
28 |         <MenuItem onClick={() => setTheme("light")}>Light</MenuItem>
29 |         <MenuItem onClick={() => setTheme("dark")}>Dark</MenuItem>
30 |         <MenuItem onClick={() => setTheme("system")}>System</MenuItem>
31 |       </Menu>
32 |     </MenuContainer>
33 |   )
34 | }
35 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/input-prefix-suffix.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowUpCircle } from "lucide-react"
 2 | 
 3 | import { Input } from "@/registry/default/ui/input"
 4 | import { Stack } from "@/registry/default/ui/stack"
 5 | 
 6 | export default function Component(): JSX.Element {
 7 |   return (
 8 |     <Stack align="start" gap={6}>
 9 |       <Input
10 |         aria-labelledby="Demo"
11 |         placeholder="Default"
12 |         prefix={<ArrowUpCircle />}
13 |       />
14 | 
15 |       <Input
16 |         aria-labelledby="Demo"
17 |         placeholder="Default"
18 |         suffix={<ArrowUpCircle />}
19 |       />
20 | 
21 |       <Input
22 |         aria-labelledby="Demo"
23 |         placeholder="Default"
24 |         prefix="https://"
25 |         suffix=".com"
26 |       />
27 | 
28 |       <Input
29 |         aria-labelledby="Demo"
30 |         placeholder="Default"
31 |         prefix={<ArrowUpCircle />}
32 |         prefixStyling={false}
33 |         suffix={<ArrowUpCircle />}
34 |         suffixStyling={false}
35 |       />
36 | 
37 |       <Input
38 |         aria-labelledby="Demo"
39 |         placeholder="Default"
40 |         prefix="vercel/"
41 |         suffix={<ArrowUpCircle />}
42 |         suffixStyling={false}
43 |       />
44 |     </Stack>
45 |   )
46 | }
47 | 


--------------------------------------------------------------------------------
/apps/www/app/examples/authentication/components/user-auth-form.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | import { Icons } from "@/components/icons"
 7 | 
 8 | interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
 9 | 
10 | export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
11 |   const [isLoading, setIsLoading] = React.useState<boolean>(false)
12 | 
13 |   async function onSubmit(event: React.SyntheticEvent) {
14 |     event.preventDefault()
15 |     setIsLoading(true)
16 | 
17 |     setTimeout(() => {
18 |       setIsLoading(false)
19 |     }, 3000)
20 |   }
21 | 
22 |   return (
23 |     <div className={cn("grid gap-6", className)} {...props}>
24 |       <form onSubmit={onSubmit}>
25 |         <div className="grid gap-2">hej</div>
26 |       </form>
27 |       <div className="relative">
28 |         <div className="absolute inset-0 flex items-center">
29 |           <span className="w-full border-t" />
30 |         </div>
31 |         <div className="relative flex justify-center text-xs uppercase">
32 |           <span className="bg-background-200 px-2 text-muted-foreground">
33 |             Or continue with
34 |           </span>
35 |         </div>
36 |       </div>
37 |     </div>
38 |   )
39 | }
40 | 


--------------------------------------------------------------------------------
/apps/www/public/schema.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "http://json-schema.org/draft-07/schema#",
 3 |   "type": "object",
 4 |   "properties": {
 5 |     "style": {
 6 |       "type": "string",
 7 |       "enum": ["default"]
 8 |     },
 9 |     "tailwind": {
10 |       "type": "object",
11 |       "properties": {
12 |         "config": {
13 |           "type": "string"
14 |         },
15 |         "css": {
16 |           "type": "string"
17 |         },
18 |         "baseColor": {
19 |           "type": "string"
20 |         },
21 |         "cssVariables": {
22 |           "type": "boolean"
23 |         },
24 |         "prefix": {
25 |           "type": "string"
26 |         }
27 |       },
28 |       "required": ["config", "css", "baseColor", "cssVariables"]
29 |     },
30 |     "rsc": {
31 |       "type": "boolean"
32 |     },
33 |     "tsx": {
34 |       "type": "boolean"
35 |     },
36 |     "aliases": {
37 |       "type": "object",
38 |       "properties": {
39 |         "utils": {
40 |           "type": "string"
41 |         },
42 |         "components": {
43 |           "type": "string"
44 |         },
45 |         "ui": {
46 |           "type": "string"
47 |         }
48 |       },
49 |       "required": ["utils", "components"]
50 |     }
51 |   },
52 |   "required": ["style", "tailwind", "rsc", "aliases"]
53 | }
54 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/label.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Label
 3 | description: Renders an accessible label associated with controls.
 4 | component: true
 5 | links:
 6 |   doc: https://www.radix-ui.com/docs/primitives/components/label
 7 |   api: https://www.radix-ui.com/docs/primitives/components/label#api-reference
 8 | ---
 9 | 
10 | <ComponentPreview name="label-demo" />
11 | 
12 | ## Installation
13 | 
14 | <Tabs defaultValue="manual">
15 | 
16 | <TabsList>
17 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
18 |   <TabsTrigger value="manual">Manual</TabsTrigger>
19 | </TabsList>
20 | <TabsContent value="cli">
21 | 
22 | ```bash
23 | npx shadcn-ui@latest add label
24 | ```
25 | 
26 | </TabsContent>
27 | 
28 | <TabsContent value="manual">
29 | 
30 | <Steps>
31 | 
32 | <Step>Install the following dependencies:</Step>
33 | 
34 | ```bash
35 | npm install @radix-ui/react-label
36 | ```
37 | 
38 | <Step>Copy and paste the following code into your project.</Step>
39 | 
40 | <ComponentSource name="label" />
41 | 
42 | <Step>Update the import paths to match your project setup.</Step>
43 | 
44 | </Steps>
45 | 
46 | </TabsContent>
47 | 
48 | </Tabs>
49 | 
50 | ## Usage
51 | 
52 | ```tsx
53 | import { Label } from "@/components/ui/label"
54 | ```
55 | 
56 | ```tsx
57 | <Label htmlFor="email">Your email address</Label>
58 | ```
59 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/show-more.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ChevronDownIcon } from "lucide-react"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | import { Button } from "@/registry/default/ui/button"
 8 | 
 9 | interface ShowMoreProps {
10 |   expanded: boolean
11 |   onClick: () => void
12 | }
13 | 
14 | const ShowMore = ({ expanded, onClick }: ShowMoreProps) => {
15 |   return (
16 |     <div className="flex min-h-[30px] w-[calc(100%-40px)] items-center">
17 |       <div className="h-[1px] flex-1 translate-x-[-1px] bg-gray-alpha-400"></div>
18 |       <div className="shrink-0">
19 |         <Button
20 |           size="small"
21 |           shape="rounded"
22 |           variant="secondary"
23 |           onClick={onClick}
24 |         >
25 |           <div className="flex items-center">
26 |             <span>{expanded ? "Show less" : "Show more"}</span>
27 |             <ChevronDownIcon
28 |               className={cn(
29 |                 "ml-1 h-5 w-5 transition-transform",
30 |                 expanded && "rotate-180"
31 |               )}
32 |             />
33 |           </div>
34 |         </Button>
35 |       </div>
36 |       <div className="h-[1px] flex-1 translate-x-[1px] bg-gray-alpha-400"></div>
37 |     </div>
38 |   )
39 | }
40 | 
41 | export { ShowMore }
42 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/date-picker-demo.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { format } from "date-fns"
 5 | import { Calendar as CalendarIcon } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | import { Button } from "@/registry/default/ui/button"
 9 | import { Calendar } from "@/registry/default/ui/calendar"
10 | import {
11 |   Popover,
12 |   PopoverContent,
13 |   PopoverTrigger,
14 | } from "@/registry/default/ui/popover"
15 | 
16 | export default function DatePickerDemo() {
17 |   const [date, setDate] = React.useState<Date>()
18 | 
19 |   return (
20 |     <Popover>
21 |       <PopoverTrigger asChild>
22 |         <Button
23 |           variant="secondary"
24 |           className={cn(
25 |             "w-[280px] justify-start text-left font-normal",
26 |             !date && "text-muted-foreground"
27 |           )}
28 |         >
29 |           <CalendarIcon className="mr-2 h-4 w-4" />
30 |           {date ? format(date, "PPP") : <span>Pick a date</span>}
31 |         </Button>
32 |       </PopoverTrigger>
33 |       <PopoverContent className="w-auto p-0">
34 |         <Calendar
35 |           mode="single"
36 |           selected={date}
37 |           onSelect={setDate}
38 |           initialFocus
39 |         />
40 |       </PopoverContent>
41 |     </Popover>
42 |   )
43 | }
44 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/resizable-demo.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ResizableHandle,
 3 |   ResizablePanel,
 4 |   ResizablePanelGroup,
 5 | } from "@/registry/default/ui/resizable"
 6 | 
 7 | export default function ResizableDemo() {
 8 |   return (
 9 |     <ResizablePanelGroup
10 |       direction="horizontal"
11 |       className="max-w-md rounded-lg border"
12 |     >
13 |       <ResizablePanel defaultSize={50}>
14 |         <div className="flex h-[200px] items-center justify-center p-6">
15 |           <span className="font-semibold">One</span>
16 |         </div>
17 |       </ResizablePanel>
18 |       <ResizableHandle />
19 |       <ResizablePanel defaultSize={50}>
20 |         <ResizablePanelGroup direction="vertical">
21 |           <ResizablePanel defaultSize={25}>
22 |             <div className="flex h-full items-center justify-center p-6">
23 |               <span className="font-semibold">Two</span>
24 |             </div>
25 |           </ResizablePanel>
26 |           <ResizableHandle />
27 |           <ResizablePanel defaultSize={75}>
28 |             <div className="flex h-full items-center justify-center p-6">
29 |               <span className="font-semibold">Three</span>
30 |             </div>
31 |           </ResizablePanel>
32 |         </ResizablePanelGroup>
33 |       </ResizablePanel>
34 |     </ResizablePanelGroup>
35 |   )
36 | }
37 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/hover-card.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const HoverCard = HoverCardPrimitive.Root
 9 | 
10 | const HoverCardTrigger = HoverCardPrimitive.Trigger
11 | 
12 | const HoverCardContent = React.forwardRef<
13 |   React.ElementRef<typeof HoverCardPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <HoverCardPrimitive.Content
17 |     ref={ref}
18 |     align={align}
19 |     sideOffset={sideOffset}
20 |     className={cn(
21 |       "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
22 |       className
23 |     )}
24 |     {...props}
25 |   />
26 | ))
27 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
28 | 
29 | export { HoverCard, HoverCardTrigger, HoverCardContent }
30 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/progress.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Progress
 3 | description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
 4 | component: true
 5 | links:
 6 |   doc: https://www.radix-ui.com/docs/primitives/components/progress
 7 |   api: https://www.radix-ui.com/docs/primitives/components/progress#api-reference
 8 | ---
 9 | 
10 | <ComponentPreview name="progress-demo" />
11 | 
12 | ## Installation
13 | 
14 | <Tabs defaultValue="manual">
15 | 
16 | <TabsList>
17 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
18 |   <TabsTrigger value="manual">Manual</TabsTrigger>
19 | </TabsList>
20 | <TabsContent value="cli">
21 | 
22 | ```bash
23 | npx shadcn-ui@latest add progress
24 | ```
25 | 
26 | </TabsContent>
27 | 
28 | <TabsContent value="manual">
29 | 
30 | <Steps>
31 | 
32 | <Step>Install the following dependencies:</Step>
33 | 
34 | ```bash
35 | npm install @radix-ui/react-progress
36 | ```
37 | 
38 | <Step>Copy and paste the following code into your project.</Step>
39 | 
40 | <ComponentSource name="progress" />
41 | 
42 | <Step>Update the import paths to match your project setup.</Step>
43 | 
44 | </Steps>
45 | 
46 | </TabsContent>
47 | 
48 | </Tabs>
49 | 
50 | ## Usage
51 | 
52 | ```tsx
53 | import { Progress } from "@/components/ui/progress"
54 | ```
55 | 
56 | ```tsx
57 | <Progress value={33} />
58 | ```
59 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/checkbox.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "checkbox",
 3 |   "dependencies": [
 4 |     "@radix-ui/react-checkbox"
 5 |   ],
 6 |   "files": [
 7 |     {
 8 |       "name": "checkbox.tsx",
 9 |       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"ring-offset-background peer h-4 w-4 shrink-0 rounded-sm border border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"
10 |     }
11 |   ],
12 |   "type": "components:ui"
13 | }


--------------------------------------------------------------------------------
/apps/www/registry/default/example/resizable-demo-with-handle.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ResizableHandle,
 3 |   ResizablePanel,
 4 |   ResizablePanelGroup,
 5 | } from "@/registry/default/ui/resizable"
 6 | 
 7 | export default function ResizableDemo() {
 8 |   return (
 9 |     <ResizablePanelGroup
10 |       direction="horizontal"
11 |       className="max-w-md rounded-lg border"
12 |     >
13 |       <ResizablePanel defaultSize={50}>
14 |         <div className="flex h-[200px] items-center justify-center p-6">
15 |           <span className="font-semibold">One</span>
16 |         </div>
17 |       </ResizablePanel>
18 |       <ResizableHandle withHandle />
19 |       <ResizablePanel defaultSize={50}>
20 |         <ResizablePanelGroup direction="vertical">
21 |           <ResizablePanel defaultSize={25}>
22 |             <div className="flex h-full items-center justify-center p-6">
23 |               <span className="font-semibold">Two</span>
24 |             </div>
25 |           </ResizablePanel>
26 |           <ResizableHandle withHandle />
27 |           <ResizablePanel defaultSize={75}>
28 |             <div className="flex h-full items-center justify-center p-6">
29 |               <span className="font-semibold">Three</span>
30 |             </div>
31 |           </ResizablePanel>
32 |         </ResizablePanelGroup>
33 |       </ResizablePanel>
34 |     </ResizablePanelGroup>
35 |   )
36 | }
37 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/switch.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Switch
 3 | description: Choose between a set of options.
 4 | component: true
 5 | ---
 6 | 
 7 | <PaddingBox title="Default">
 8 |   <ComponentPreview name="switch-demo" />
 9 | </PaddingBox>
10 | 
11 | <PaddingBox title="Installation">
12 | 
13 | <Tabs defaultValue="manual">
14 | 
15 | <TabsList>
16 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
17 |   <TabsTrigger value="manual">Manual</TabsTrigger>
18 | </TabsList>
19 | <TabsContent value="cli">
20 | 
21 | ```bash
22 | npx shadcn-ui@latest add switch
23 | ```
24 | 
25 | </TabsContent>
26 | 
27 | <TabsContent value="manual">
28 | 
29 | <Steps>
30 | 
31 | <Step>Copy and paste the following code into your project.</Step>
32 | 
33 | <ComponentSource name="card" />
34 | 
35 | <Step>Update the import paths to match your project setup.</Step>
36 | 
37 | </Steps>
38 | 
39 | </TabsContent>
40 | 
41 | </Tabs>
42 | 
43 | </PaddingBox>
44 | 
45 | <PaddingBox title="Disabled">
46 |   <ComponentPreview name="switch-disabled" />
47 | </PaddingBox>
48 | 
49 | <PaddingBox title="Sizes">
50 |   <ComponentPreview name="switch-sizes" />
51 | </PaddingBox>
52 | 
53 | <PaddingBox title="Full width">
54 |   <ComponentPreview name="switch-full-width" />
55 | </PaddingBox>
56 | 
57 | {/* TODO fix switch */}
58 | 
59 | <PaddingBox title="Icon">
60 |   <ComponentPreview name="switch-icon" />
61 | </PaddingBox>
62 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/show-more.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Show more
 3 | description: Displays a card with header, content, and footer.
 4 | component: true
 5 | ---
 6 | 
 7 | <PaddingBox title="Defualt">
 8 |   <ComponentPreview name="show-more-demo" />
 9 | </PaddingBox>
10 | 
11 | <PaddingBox title="Installation">
12 | <Tabs defaultValue="manual">
13 | 
14 | <TabsList>
15 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
16 |   <TabsTrigger value="manual">Manual</TabsTrigger>
17 | </TabsList>
18 | <TabsContent value="cli">
19 | 
20 | ```bash
21 | npx shadcn-ui@latest add show-more
22 | ```
23 | 
24 | </TabsContent>
25 | 
26 | <TabsContent value="manual">
27 | 
28 | <Steps>
29 | 
30 | <Step>Copy and paste the following code into your project.</Step>
31 | 
32 | <ComponentSource name="show-more" />
33 | 
34 | <Step>Update the import paths to match your project setup.</Step>
35 | 
36 | </Steps>
37 | 
38 | </TabsContent>
39 | 
40 | </Tabs>
41 | 
42 | ## Usage
43 | 
44 | ```tsx
45 | import { ShowMore } from "@/components/ui/show-more"
46 | ```
47 | 
48 | ```tsx
49 | import { useState } from "react"
50 | 
51 | import { ShowMore } from "@/registry/default/ui/show-more"
52 | 
53 | export default function ShowMoreDemo() {
54 |   const [expanded, setExpanded] = useState(false)
55 | 
56 |   return <ShowMore expanded={expanded} onClick={() => setExpanded(!expanded)} />
57 | }
58 | ```
59 | 
60 | </PaddingBox>
61 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/menu-position.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Menu,
 3 |   MenuButton,
 4 |   MenuContainer,
 5 |   MenuItem,
 6 | } from "@/registry/default/ui/menu"
 7 | import { Stack } from "@/registry/default/ui/stack"
 8 | 
 9 | export default function MenuPositionDemo() {
10 |   return (
11 |     <Stack direction="row" gap={4}>
12 |       <MenuContainer>
13 |         <MenuButton>Left Start</MenuButton>
14 |         <Menu width={200} side="left" align="start">
15 |           <MenuItem>One</MenuItem>
16 |           <MenuItem>Two</MenuItem>
17 |         </Menu>
18 |       </MenuContainer>
19 |       <MenuContainer>
20 |         <MenuButton>Top Start</MenuButton>
21 |         <Menu width={200} side="top" align="start">
22 |           <MenuItem>One</MenuItem>
23 |           <MenuItem>Two</MenuItem>
24 |         </Menu>
25 |       </MenuContainer>
26 |       <MenuContainer>
27 |         <MenuButton>Bottom Start</MenuButton>
28 |         <Menu width={200} side="bottom" align="start">
29 |           <MenuItem>One</MenuItem>
30 |           <MenuItem>Two</MenuItem>
31 |         </Menu>
32 |       </MenuContainer>
33 |       <MenuContainer>
34 |         <MenuButton>Right Start</MenuButton>
35 |         <Menu width={200} side="right" align="start">
36 |           <MenuItem>One</MenuItem>
37 |           <MenuItem>Two</MenuItem>
38 |         </Menu>
39 |       </MenuContainer>
40 |     </Stack>
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Popover = PopoverPrimitive.Root
 9 | 
10 | const PopoverTrigger = PopoverPrimitive.Trigger
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ))
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
30 | 
31 | export { Popover, PopoverTrigger, PopoverContent }
32 | 


--------------------------------------------------------------------------------
/packages/cli/src/utils/registry/schema.ts:
--------------------------------------------------------------------------------
 1 | import { z } from "zod"
 2 | 
 3 | // TODO: Extract this to a shared package.
 4 | export const registryItemSchema = z.object({
 5 |   name: z.string(),
 6 |   dependencies: z.array(z.string()).optional(),
 7 |   devDependencies: z.array(z.string()).optional(),
 8 |   registryDependencies: z.array(z.string()).optional(),
 9 |   files: z.array(z.string()),
10 |   type: z.enum(["components:ui", "components:component", "components:example"]),
11 | })
12 | 
13 | export const registryIndexSchema = z.array(registryItemSchema)
14 | 
15 | export const registryItemWithContentSchema = registryItemSchema.extend({
16 |   files: z.array(
17 |     z.object({
18 |       name: z.string(),
19 |       content: z.string(),
20 |     })
21 |   ),
22 | })
23 | 
24 | export const registryWithContentSchema = z.array(registryItemWithContentSchema)
25 | 
26 | export const stylesSchema = z.array(
27 |   z.object({
28 |     name: z.string(),
29 |     label: z.string(),
30 |   })
31 | )
32 | 
33 | export const registryBaseColorSchema = z.object({
34 |   inlineColors: z.object({
35 |     light: z.record(z.string(), z.string()),
36 |     dark: z.record(z.string(), z.string()),
37 |   }),
38 |   cssVars: z.object({
39 |     light: z.record(z.string(), z.string()),
40 |     dark: z.record(z.string(), z.string()),
41 |   }),
42 |   inlineColorsTemplate: z.string(),
43 |   cssVarsTemplate: z.string(),
44 | })
45 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/avatar.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Avatar
 3 | description: An image element with a fallback for representing the user.
 4 | component: true
 5 | links:
 6 |   doc: https://www.radix-ui.com/docs/primitives/components/avatar
 7 |   api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
 8 | ---
 9 | 
10 | <ComponentPreview name="avatar-demo" />
11 | 
12 | ## Installation
13 | 
14 | <Tabs defaultValue="manual">
15 | 
16 | <TabsList>
17 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
18 |   <TabsTrigger value="manual">Manual</TabsTrigger>
19 | </TabsList>
20 | <TabsContent value="cli">
21 | 
22 | ```bash
23 | npx shadcn-ui@latest add avatar
24 | ```
25 | 
26 | </TabsContent>
27 | 
28 | <TabsContent value="manual">
29 | 
30 | <Steps>
31 | 
32 | <Step>Install the following dependencies:</Step>
33 | 
34 | ```bash
35 | npm install @radix-ui/react-avatar
36 | ```
37 | 
38 | <Step>Copy and paste the following code into your project.</Step>
39 | 
40 | <ComponentSource name="avatar" />
41 | 
42 | <Step>Update the import paths to match your project setup.</Step>
43 | 
44 | </Steps>
45 | 
46 | </TabsContent>
47 | 
48 | </Tabs>
49 | 
50 | ## Usage
51 | 
52 | ```tsx
53 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
54 | ```
55 | 
56 | ```tsx
57 | <Avatar>
58 |   <AvatarImage src="https://github.com/shadcn.png" />
59 |   <AvatarFallback>CN</AvatarFallback>
60 | </Avatar>
61 | ```
62 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/button-shapes.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowUp } from "lucide-react"
 2 | 
 3 | import { Button } from "@/registry/default/ui/button"
 4 | import { Stack } from "@/registry/default/ui/stack"
 5 | 
 6 | export default function ButtonShapes() {
 7 |   const Arrow = () => <ArrowUp className="h-4 w-4" />
 8 | 
 9 |   return (
10 |     <Stack
11 |       align="start"
12 |       direction={{ sm: "column", md: "row" }}
13 |       gap={4}
14 |       justify="space-between"
15 |     >
16 |       <Button aria-label="Upload" shape="square" size="tiny" svgOnly>
17 |         <Arrow />
18 |       </Button>
19 |       <Button aria-label="Upload" shape="square" size="small" svgOnly>
20 |         <Arrow />
21 |       </Button>
22 |       <Button aria-label="Upload" shape="square" svgOnly>
23 |         <Arrow />
24 |       </Button>
25 |       <Button aria-label="Upload" shape="square" size="large" svgOnly>
26 |         <Arrow />
27 |       </Button>
28 |       <Button aria-label="Upload" shape="circle" size="tiny" svgOnly>
29 |         <Arrow />
30 |       </Button>
31 |       <Button aria-label="Upload" shape="circle" size="small" svgOnly>
32 |         <Arrow />
33 |       </Button>
34 |       <Button aria-label="Upload" shape="circle" svgOnly>
35 |         <Arrow />
36 |       </Button>
37 |       <Button aria-label="Upload" shape="circle" size="large" svgOnly>
38 |         <Arrow />
39 |       </Button>
40 |     </Stack>
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/packages/cli/src/utils/transformers/transform-import.ts:
--------------------------------------------------------------------------------
 1 | import { Transformer } from "@/src/utils/transformers"
 2 | 
 3 | export const transformImport: Transformer = async ({ sourceFile, config }) => {
 4 |   const importDeclarations = sourceFile.getImportDeclarations()
 5 | 
 6 |   for (const importDeclaration of importDeclarations) {
 7 |     const moduleSpecifier = importDeclaration.getModuleSpecifierValue()
 8 | 
 9 |     // Replace @/registry/[style] with the components alias.
10 |     if (moduleSpecifier.startsWith("@/registry/")) {
11 |       if (config.aliases.ui) {
12 |         importDeclaration.setModuleSpecifier(
13 |           moduleSpecifier.replace(/^@\/registry\/[^/]+\/ui/, config.aliases.ui)
14 |         )
15 |       } else {
16 |         importDeclaration.setModuleSpecifier(
17 |           moduleSpecifier.replace(
18 |             /^@\/registry\/[^/]+/,
19 |             config.aliases.components
20 |           )
21 |         )
22 |       }
23 |     }
24 | 
25 |     // Replace `import { cn } from "@/lib/utils"`
26 |     if (moduleSpecifier == "@/lib/utils") {
27 |       const namedImports = importDeclaration.getNamedImports()
28 |       const cnImport = namedImports.find((i) => i.getName() === "cn")
29 |       if (cnImport) {
30 |         importDeclaration.setModuleSpecifier(
31 |           moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils)
32 |         )
33 |       }
34 |     }
35 |   }
36 | 
37 |   return sourceFile
38 | }
39 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/card.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Card
 3 | description: Displays a card with header, content, and footer.
 4 | component: true
 5 | ---
 6 | 
 7 | <ComponentPreview name="card-with-form" />
 8 | 
 9 | ## Installation
10 | 
11 | <Tabs defaultValue="manual">
12 | 
13 | <TabsList>
14 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
15 |   <TabsTrigger value="manual">Manual</TabsTrigger>
16 | </TabsList>
17 | <TabsContent value="cli">
18 | 
19 | ```bash
20 | npx shadcn-ui@latest add card
21 | ```
22 | 
23 | </TabsContent>
24 | 
25 | <TabsContent value="manual">
26 | 
27 | <Steps>
28 | 
29 | <Step>Copy and paste the following code into your project.</Step>
30 | 
31 | <ComponentSource name="card" />
32 | 
33 | <Step>Update the import paths to match your project setup.</Step>
34 | 
35 | </Steps>
36 | 
37 | </TabsContent>
38 | 
39 | </Tabs>
40 | 
41 | ## Usage
42 | 
43 | ```tsx
44 | import {
45 |   Card,
46 |   CardContent,
47 |   CardDescription,
48 |   CardFooter,
49 |   CardHeader,
50 |   CardTitle,
51 | } from "@/components/ui/card"
52 | ```
53 | 
54 | ```tsx
55 | <Card>
56 |   <CardHeader>
57 |     <CardTitle>Card Title</CardTitle>
58 |     <CardDescription>Card Description</CardDescription>
59 |   </CardHeader>
60 |   <CardContent>
61 |     <p>Card Content</p>
62 |   </CardContent>
63 |   <CardFooter>
64 |     <p>Card Footer</p>
65 |   </CardFooter>
66 | </Card>
67 | ```
68 | 
69 | ## Examples
70 | 
71 | <ComponentPreview name="card-demo" />
72 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/show-more.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "show-more",
 3 |   "dependencies": [],
 4 |   "registryDependencies": [
 5 |     "button"
 6 |   ],
 7 |   "files": [
 8 |     {
 9 |       "name": "show-more.tsx",
10 |       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\n\ninterface ShowMoreProps {\n  expanded: boolean\n  onClick: () => void\n}\n\nconst ShowMore = ({ expanded, onClick }: ShowMoreProps) => {\n  return (\n    <div className=\"flex min-h-[30px] w-[calc(100%-40px)] items-center\">\n      <div className=\"h-[1px] flex-1 translate-x-[-1px] bg-gray-alpha-400\"></div>\n      <div className=\"shrink-0\">\n        <Button\n          size=\"small\"\n          shape=\"rounded\"\n          variant=\"secondary\"\n          onClick={onClick}\n        >\n          <div className=\"flex items-center\">\n            <span>{expanded ? \"Show less\" : \"Show more\"}</span>\n            <ChevronDownIcon\n              className={cn(\n                \"ml-1 h-5 w-5 transition-transform\",\n                expanded && \"rotate-180\"\n              )}\n            />\n          </div>\n        </Button>\n      </div>\n      <div className=\"h-[1px] flex-1 translate-x-[1px] bg-gray-alpha-400\"></div>\n    </div>\n  )\n}\n\nexport { ShowMore }\n"
11 |     }
12 |   ],
13 |   "type": "components:ui"
14 | }


--------------------------------------------------------------------------------
/apps/www/content/docs/components/popover.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Popover
 3 | description: Displays rich content in a portal, triggered by a button.
 4 | component: true
 5 | links:
 6 |   doc: https://www.radix-ui.com/docs/primitives/components/popover
 7 |   api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference
 8 | ---
 9 | 
10 | <ComponentPreview name="popover-demo" />
11 | 
12 | ## Installation
13 | 
14 | <Tabs defaultValue="manual">
15 | 
16 | <TabsList>
17 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
18 |   <TabsTrigger value="manual">Manual</TabsTrigger>
19 | </TabsList>
20 | <TabsContent value="cli">
21 | 
22 | ```bash
23 | npx shadcn-ui@latest add popover
24 | ```
25 | 
26 | </TabsContent>
27 | 
28 | <TabsContent value="manual">
29 | 
30 | <Steps>
31 | 
32 | <Step>Install the following dependencies:</Step>
33 | 
34 | ```bash
35 | npm install @radix-ui/react-popover
36 | ```
37 | 
38 | <Step>Copy and paste the following code into your project.</Step>
39 | 
40 | <ComponentSource name="popover" />
41 | 
42 | <Step>Update the import paths to match your project setup.</Step>
43 | 
44 | </Steps>
45 | 
46 | </TabsContent>
47 | 
48 | </Tabs>
49 | 
50 | ## Usage
51 | 
52 | ```tsx
53 | import {
54 |   Popover,
55 |   PopoverContent,
56 |   PopoverTrigger,
57 | } from "@/components/ui/popover"
58 | ```
59 | 
60 | ```tsx
61 | <Popover>
62 |   <PopoverTrigger>Open</PopoverTrigger>
63 |   <PopoverContent>Place content for the popover here.</PopoverContent>
64 | </Popover>
65 | ```
66 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/hover-card.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hover-card",
 3 |   "dependencies": [
 4 |     "@radix-ui/react-hover-card"
 5 |   ],
 6 |   "files": [
 7 |     {
 8 |       "name": "hover-card.tsx",
 9 |       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"
10 |     }
11 |   ],
12 |   "type": "components:ui"
13 | }


--------------------------------------------------------------------------------
/apps/www/content/docs/components/snippet.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Snippet
 3 | description: Display a snippet of copyable code for the command line.
 4 | component: true
 5 | ---
 6 | 
 7 | <PaddingBox title="Default">
 8 |   <ComponentPreview name="snippet-demo" />
 9 | </PaddingBox>
10 | 
11 | <PaddingBox title="Installation">
12 | 
13 | <Tabs defaultValue="manual">
14 | 
15 | <TabsList>
16 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
17 |   <TabsTrigger value="manual">Manual</TabsTrigger>
18 | </TabsList>
19 | <TabsContent value="cli">
20 | 
21 | ```bash
22 | npx shadcn-ui@latest add snippet
23 | ```
24 | 
25 | </TabsContent>
26 | 
27 | <TabsContent value="manual">
28 | 
29 | <Steps>
30 | 
31 | <Step>Copy and paste the following code into your project.</Step>
32 | 
33 | <ComponentSource name="snippet" />
34 | 
35 | <Step>Update the import paths to match your project setup.</Step>
36 | 
37 | </Steps>
38 | 
39 | </TabsContent>
40 | 
41 | </Tabs>
42 | </PaddingBox>
43 | 
44 | <PaddingBox title="Inverted">
45 |   <ComponentPreview name="snippet-inverted" />
46 | </PaddingBox>
47 | 
48 | <PaddingBox title="Multi line">
49 |   <ComponentPreview name="snippet-multi-line" />
50 | </PaddingBox>
51 | 
52 | <PaddingBox title="No prompt">
53 |   <ComponentPreview name="snippet-no-prompt" />
54 | </PaddingBox>
55 | 
56 | <PaddingBox title="Callback">
57 |   <ComponentPreview name="snippet-callback" />
58 | </PaddingBox>
59 | 
60 | <PaddingBox title="Variants">
61 |   <ComponentPreview name="snippet-variants" />
62 | </PaddingBox>
63 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/hover-card-demo.tsx:
--------------------------------------------------------------------------------
 1 | import { CalendarDays } from "lucide-react"
 2 | 
 3 | import {
 4 |   Avatar,
 5 |   AvatarFallback,
 6 |   AvatarImage,
 7 | } from "@/registry/default/ui/avatar"
 8 | import { Button } from "@/registry/default/ui/button"
 9 | import {
10 |   HoverCard,
11 |   HoverCardContent,
12 |   HoverCardTrigger,
13 | } from "@/registry/default/ui/hover-card"
14 | 
15 | export default function HoverCardDemo() {
16 |   return (
17 |     <HoverCard>
18 |       <HoverCardTrigger asChild>
19 |         <Button variant="secondary">@nextjs</Button>
20 |       </HoverCardTrigger>
21 |       <HoverCardContent className="w-80">
22 |         <div className="flex justify-between space-x-4">
23 |           <Avatar>
24 |             <AvatarImage src="https://github.com/vercel.png" />
25 |             <AvatarFallback>VC</AvatarFallback>
26 |           </Avatar>
27 |           <div className="space-y-1">
28 |             <h4 className="text-sm font-semibold">@nextjs</h4>
29 |             <p className="text-sm">
30 |               The React Framework – created and maintained by @vercel.
31 |             </p>
32 |             <div className="flex items-center pt-2">
33 |               <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
34 |               <span className="text-xs text-muted-foreground">
35 |                 Joined December 2021
36 |               </span>
37 |             </div>
38 |           </div>
39 |         </div>
40 |       </HoverCardContent>
41 |     </HoverCard>
42 |   )
43 | }
44 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/aspect-ratio.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Aspect Ratio
 3 | description: Displays content within a desired ratio.
 4 | component: true
 5 | links:
 6 |   doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio
 7 |   api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference
 8 | ---
 9 | 
10 | <ComponentPreview name="aspect-ratio-demo" />
11 | 
12 | ## Installation
13 | 
14 | <Tabs defaultValue="manual">
15 | 
16 | <TabsList>
17 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
18 |   <TabsTrigger value="manual">Manual</TabsTrigger>
19 | </TabsList>
20 | <TabsContent value="cli">
21 | 
22 | ```bash
23 | npx shadcn-ui@latest add aspect-ratio
24 | ```
25 | 
26 | </TabsContent>
27 | 
28 | <TabsContent value="manual">
29 | 
30 | <Steps>
31 | 
32 | <Step>Install the following dependencies:</Step>
33 | 
34 | ```bash
35 | npm install @radix-ui/react-aspect-ratio
36 | ```
37 | 
38 | <Step>Copy and paste the following code into your project.</Step>
39 | 
40 | <ComponentSource name="aspect-ratio" />
41 | 
42 | <Step>Update the import paths to match your project setup.</Step>
43 | 
44 | </Steps>
45 | 
46 | </TabsContent>
47 | 
48 | </Tabs>
49 | 
50 | ## Usage
51 | 
52 | ```tsx
53 | import Image from "next/image"
54 | 
55 | import { AspectRatio } from "@/components/ui/aspect-ratio"
56 | ```
57 | 
58 | ```tsx
59 | <div className="w-[450px]">
60 |   <AspectRatio ratio={16 / 9}>
61 |     <Image src="..." alt="Image" className="rounded-md object-cover" />
62 |   </AspectRatio>
63 | </div>
64 | ```
65 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/gauge.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Gauge
 3 | description: A circular visual for conveying a percentage.
 4 | component: true
 5 | ---
 6 | 
 7 | <PaddingBox title="Default">
 8 |   <ComponentPreview name="gauge-demo" />
 9 | </PaddingBox>
10 | 
11 | <PaddingBox title="Installation">
12 | 
13 | <Tabs defaultValue="manual">
14 | 
15 | <TabsList>
16 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
17 |   <TabsTrigger value="manual">Manual</TabsTrigger>
18 | </TabsList>
19 | <TabsContent value="cli">
20 | 
21 | ```bash
22 | npx shadcn-ui@latest add gauge
23 | ```
24 | 
25 | </TabsContent>
26 | 
27 | <TabsContent value="manual">
28 | 
29 | <Steps>
30 | 
31 | <Step>Copy and paste the following code into your project.</Step>
32 | 
33 | <ComponentSource name="gauge" />
34 | 
35 | <Step>Update the import paths to match your project setup.</Step>
36 | 
37 | </Steps>
38 | 
39 | </TabsContent>
40 | 
41 | </Tabs>
42 | </PaddingBox>
43 | 
44 | <PaddingBox title="Label">
45 |   <ComponentPreview name="gauge-label" />
46 | </PaddingBox>
47 | 
48 | <PaddingBox title="Defualt color scale">
49 |   <ComponentPreview name="gauge-color-scale" />
50 | </PaddingBox>
51 | 
52 | <PaddingBox title="Custom color range">
53 |   <ComponentPreview name="gauge-custom-color-range" />
54 | </PaddingBox>
55 | 
56 | <PaddingBox title="Custom secondary color">
57 |   <ComponentPreview name="gauge-custom-secondary-color" />
58 | </PaddingBox>
59 | 
60 | <PaddingBox title="Arc priority">
61 |   <ComponentPreview name="gauge-arc-priority" />
62 | </PaddingBox>
63 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/styles/default/popover.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "popover",
 3 |   "dependencies": [
 4 |     "@radix-ui/react-popover"
 5 |   ],
 6 |   "files": [
 7 |     {
 8 |       "name": "popover.tsx",
 9 |       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n"
10 |     }
11 |   ],
12 |   "type": "components:ui"
13 | }


--------------------------------------------------------------------------------
/apps/www/content/docs/components/textarea.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Textarea
 3 | description: Displays a form textarea or a component that looks like a textarea.
 4 | component: true
 5 | ---
 6 | 
 7 | <ComponentPreview name="textarea-demo" />
 8 | 
 9 | ## Installation
10 | 
11 | <Tabs defaultValue="manual">
12 | 
13 | <TabsList>
14 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
15 |   <TabsTrigger value="manual">Manual</TabsTrigger>
16 | </TabsList>
17 | <TabsContent value="cli">
18 | 
19 | ```bash
20 | npx shadcn-ui@latest add textarea
21 | ```
22 | 
23 | </TabsContent>
24 | 
25 | <TabsContent value="manual">
26 | 
27 | <Steps>
28 | 
29 | <Step>Copy and paste the following code into your project.</Step>
30 | 
31 | <ComponentSource name="textarea" />
32 | 
33 | <Step>Update the import paths to match your project setup.</Step>
34 | 
35 | </Steps>
36 | 
37 | </TabsContent>
38 | 
39 | </Tabs>
40 | 
41 | ## Usage
42 | 
43 | ```tsx
44 | import { Textarea } from "@/components/ui/textarea"
45 | ```
46 | 
47 | ```tsx
48 | <Textarea />
49 | ```
50 | 
51 | ## Examples
52 | 
53 | ### Default
54 | 
55 | <ComponentPreview name="textarea-demo" />
56 | 
57 | ### Disabled
58 | 
59 | <ComponentPreview name="textarea-disabled" />
60 | 
61 | ### With Label
62 | 
63 | <ComponentPreview name="textarea-with-label" className="[&_div.grid]:w-full" />
64 | 
65 | ### With Text
66 | 
67 | <ComponentPreview name="textarea-with-text" />
68 | 
69 | ### With Button
70 | 
71 | <ComponentPreview name="textarea-with-button" />
72 | 
73 | ### Form
74 | 
75 | <ComponentPreview name="textarea-form" />
76 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/toggle.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Toggle
 3 | description: Displays a boolean value.
 4 | component: true
 5 | links:
 6 |   doc: https://www.radix-ui.com/docs/primitives/components/switch
 7 |   api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference
 8 | ---
 9 | 
10 | <PaddingBox title="Defualt">
11 |   <ComponentPreview name="toggle-demo" />
12 | </PaddingBox>
13 | 
14 | <PaddingBox title="Installation">
15 | <Tabs defaultValue="manual">
16 | 
17 | <TabsList>
18 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
19 |   <TabsTrigger value="manual">Manual</TabsTrigger>
20 | </TabsList>
21 | <TabsContent value="cli">
22 | 
23 | ```bash
24 | npx shadcn-ui@latest add toggle
25 | ```
26 | 
27 | </TabsContent>
28 | 
29 | <TabsContent value="manual">
30 | 
31 | <Steps>
32 | 
33 | <Step>Install the following dependencies:</Step>
34 | 
35 | ```bash
36 | npm install @radix-ui/react-switch
37 | ```
38 | 
39 | <Step>Copy and paste the following code into your project.</Step>
40 | 
41 | <ComponentSource name="switch" />
42 | 
43 | <Step>Update the import paths to match your project setup.</Step>
44 | 
45 | </Steps>
46 | 
47 | </TabsContent>
48 | 
49 | </Tabs>
50 | 
51 | ## Usage
52 | 
53 | ```tsx
54 | import { Toggle } from "@/components/ui/toggle"
55 | ```
56 | 
57 | ```tsx
58 | <Toggle />
59 | ```
60 | 
61 | </PaddingBox>
62 | 
63 | <PaddingBox titl="Disabled">
64 |   <ComponentPreview name="toggle-disabled" />
65 | </PaddingBox>
66 | 
67 | <PaddingBox titl="Size">
68 |   <ComponentPreview name="toggle-size" />
69 | </PaddingBox>
70 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/hover-card.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Hover Card
 3 | description: For sighted users to preview content available behind a link.
 4 | component: true
 5 | links:
 6 |   doc: https://www.radix-ui.com/docs/primitives/components/hover-card
 7 |   api: https://www.radix-ui.com/docs/primitives/components/hover-card#api-reference
 8 | ---
 9 | 
10 | <ComponentPreview name="hover-card-demo" />
11 | 
12 | ## Installation
13 | 
14 | <Tabs defaultValue="manual">
15 | 
16 | <TabsList>
17 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
18 |   <TabsTrigger value="manual">Manual</TabsTrigger>
19 | </TabsList>
20 | <TabsContent value="cli">
21 | 
22 | ```bash
23 | npx shadcn-ui@latest add hover-card
24 | ```
25 | 
26 | </TabsContent>
27 | 
28 | <TabsContent value="manual">
29 | 
30 | <Step>Install the following dependencies:</Step>
31 | 
32 | ```bash
33 | npm install @radix-ui/react-hover-card
34 | ```
35 | 
36 | <Steps>
37 | 
38 | <Step>Copy and paste the following code into your project.</Step>
39 | 
40 | <ComponentSource name="hover-card" />
41 | 
42 | <Step>Update the import paths to match your project setup.</Step>
43 | 
44 | </Steps>
45 | 
46 | </TabsContent>
47 | 
48 | </Tabs>
49 | 
50 | ## Usage
51 | 
52 | ```tsx
53 | import {
54 |   HoverCard,
55 |   HoverCardContent,
56 |   HoverCardTrigger,
57 | } from "@/components/ui/hover-card"
58 | ```
59 | 
60 | ```tsx
61 | <HoverCard>
62 |   <HoverCardTrigger>Hover</HoverCardTrigger>
63 |   <HoverCardContent>
64 |     The React Framework – created and maintained by @vercel.
65 |   </HoverCardContent>
66 | </HoverCard>
67 | ```
68 | 


--------------------------------------------------------------------------------
/apps/www/components/theme-component.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Index } from "@/__registry__"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | import { useConfig } from "@/hooks/use-config"
 8 | import { Icons } from "@/components/icons"
 9 | 
10 | interface ThemeComponentProps extends React.HTMLAttributes<HTMLDivElement> {
11 |   name: string
12 |   extractClassname?: boolean
13 |   extractedClassNames?: string
14 |   align?: "center" | "start" | "end"
15 | }
16 | 
17 | export function ThemeComponent({ name, ...props }: ThemeComponentProps) {
18 |   const [config] = useConfig()
19 | 
20 |   const Preview = React.useMemo(() => {
21 |     const Component = Index[config.style][name]?.component
22 | 
23 |     if (!Component) {
24 |       return (
25 |         <p className="text-sm text-muted-foreground">
26 |           Component{" "}
27 |           <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
28 |             {name}
29 |           </code>{" "}
30 |           not found in registry.
31 |         </p>
32 |       )
33 |     }
34 | 
35 |     return <Component />
36 |   }, [name, config.style])
37 | 
38 |   return (
39 |     <div className={cn("relative")} {...props}>
40 |       <React.Suspense
41 |         fallback={
42 |           <div className="flex items-center text-sm text-muted-foreground">
43 |             <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
44 |             Loading...
45 |           </div>
46 |         }
47 |       >
48 |         {Preview}
49 |       </React.Suspense>
50 |     </div>
51 |   )
52 | }
53 | 


--------------------------------------------------------------------------------
/apps/www/next.config.mjs:
--------------------------------------------------------------------------------
 1 | import { createContentlayerPlugin } from "next-contentlayer"
 2 | 
 3 | /** @type {import('next').NextConfig} */
 4 | const nextConfig = {
 5 |   reactStrictMode: true,
 6 |   swcMinify: true,
 7 |   images: {
 8 |     remotePatterns: [
 9 |       {
10 |         protocol: "https",
11 |         hostname: "avatars.githubusercontent.com",
12 |       },
13 |       {
14 |         protocol: "https",
15 |         hostname: "images.unsplash.com",
16 |       },
17 |     ],
18 |   },
19 |   redirects() {
20 |     return [
21 |       {
22 |         source: "/components",
23 |         destination: "/docs/components/button",
24 |         permanent: true,
25 |       },
26 |       {
27 |         source: "/docs/components",
28 |         destination: "/docs/components/button",
29 |         permanent: true,
30 |       },
31 |       {
32 |         source: "/examples",
33 |         destination: "/examples/mail",
34 |         permanent: false,
35 |       },
36 |       {
37 |         source: "/docs/primitives/:path*",
38 |         destination: "/docs/components/:path*",
39 |         permanent: true,
40 |       },
41 |       {
42 |         source: "/docs/forms",
43 |         destination: "/docs/components/form",
44 |         permanent: false,
45 |       },
46 |       {
47 |         source: "/docs/forms/react-hook-form",
48 |         destination: "/docs/components/form",
49 |         permanent: false,
50 |       },
51 |     ]
52 |   },
53 | }
54 | 
55 | const withContentlayer = createContentlayerPlugin({
56 |   // Additional Contentlayer config options
57 | })
58 | 
59 | export default withContentlayer(nextConfig)
60 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/collapsible-demo.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ChevronsUpDown, Plus, X } from "lucide-react"
 5 | 
 6 | import { Button } from "@/registry/default/ui/button"
 7 | import {
 8 |   Collapsible,
 9 |   CollapsibleContent,
10 |   CollapsibleTrigger,
11 | } from "@/registry/default/ui/collapsible"
12 | 
13 | export default function CollapsibleDemo() {
14 |   const [isOpen, setIsOpen] = React.useState(false)
15 | 
16 |   return (
17 |     <Collapsible
18 |       open={isOpen}
19 |       onOpenChange={setIsOpen}
20 |       className="w-[350px] space-y-2"
21 |     >
22 |       <div className="flex items-center justify-between space-x-4 px-4">
23 |         <h4 className="text-sm font-semibold">
24 |           @peduarte starred 3 repositories
25 |         </h4>
26 |         <CollapsibleTrigger asChild>
27 |           <Button variant="tertiary" size="sm" className="w-9 p-0">
28 |             <ChevronsUpDown className="h-4 w-4" />
29 |             <span className="sr-only">Toggle</span>
30 |           </Button>
31 |         </CollapsibleTrigger>
32 |       </div>
33 |       <div className="rounded-md border px-4 py-3 font-mono text-sm">
34 |         @radix-ui/primitives
35 |       </div>
36 |       <CollapsibleContent className="space-y-2">
37 |         <div className="rounded-md border px-4 py-3 font-mono text-sm">
38 |           @radix-ui/colors
39 |         </div>
40 |         <div className="rounded-md border px-4 py-3 font-mono text-sm">
41 |           @stitches/react
42 |         </div>
43 |       </CollapsibleContent>
44 |     </Collapsible>
45 |   )
46 | }
47 | 


--------------------------------------------------------------------------------
/apps/www/public/registry/themes/neutral.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "neutral",
 3 |   "label": "Neutral",
 4 |   "cssVars": {
 5 |     "light": {
 6 |       "background": "0 0% 100%",
 7 |       "foreground": "0 0% 3.9%",
 8 |       "card": "0 0% 100%",
 9 |       "card-foreground": "0 0% 3.9%",
10 |       "popover": "0 0% 100%",
11 |       "popover-foreground": "0 0% 3.9%",
12 |       "primary": "0 0% 9%",
13 |       "primary-foreground": "0 0% 98%",
14 |       "secondary": "0 0% 96.1%",
15 |       "secondary-foreground": "0 0% 9%",
16 |       "muted": "0 0% 96.1%",
17 |       "muted-foreground": "0 0% 45.1%",
18 |       "accent": "0 0% 96.1%",
19 |       "accent-foreground": "0 0% 9%",
20 |       "destructive": "0 84.2% 60.2%",
21 |       "destructive-foreground": "0 0% 98%",
22 |       "border": "0 0% 89.8%",
23 |       "input": "0 0% 89.8%",
24 |       "ring": "0 0% 3.9%"
25 |     },
26 |     "dark": {
27 |       "background": "0 0% 3.9%",
28 |       "foreground": "0 0% 98%",
29 |       "card": "0 0% 3.9%",
30 |       "card-foreground": "0 0% 98%",
31 |       "popover": "0 0% 3.9%",
32 |       "popover-foreground": "0 0% 98%",
33 |       "primary": "0 0% 98%",
34 |       "primary-foreground": "0 0% 9%",
35 |       "secondary": "0 0% 14.9%",
36 |       "secondary-foreground": "0 0% 98%",
37 |       "muted": "0 0% 14.9%",
38 |       "muted-foreground": "0 0% 63.9%",
39 |       "accent": "0 0% 14.9%",
40 |       "accent-foreground": "0 0% 98%",
41 |       "destructive": "0 62.8% 30.6%",
42 |       "destructive-foreground": "0 0% 98%",
43 |       "border": "0 0% 14.9%",
44 |       "input": "0 0% 14.9%",
45 |       "ring": "0 0% 83.1%"
46 |     }
47 |   }
48 | }


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Tooltip = React.forwardRef<
 9 |   React.ElementRef<typeof TooltipPrimitive.Content>,
10 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
11 |     text: string | React.ReactNode
12 |   }
13 | >(({ className, sideOffset = 5, text, children, ...props }, ref) => (
14 |   <TooltipPrimitive.Provider>
15 |     <TooltipPrimitive.Root>
16 |       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
17 |       <TooltipPrimitive.Portal>
18 |         <TooltipPrimitive.Content
19 |           ref={ref}
20 |           sideOffset={sideOffset}
21 |           className={cn(
22 |             "z-50 overflow-hidden rounded-md border border-contrast bg-contrast px-3 py-2 text-[13px] text-gray-100 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |             className
24 |           )}
25 |           {...props}
26 |         >
27 |           <p>{text}</p>
28 |           <TooltipPrimitive.Arrow className="fill-contrast" />
29 |         </TooltipPrimitive.Content>
30 |       </TooltipPrimitive.Portal>
31 |     </TooltipPrimitive.Root>
32 |   </TooltipPrimitive.Provider>
33 | ))
34 | Tooltip.displayName = TooltipPrimitive.Content.displayName
35 | 
36 | export { Tooltip }
37 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/example/menu-checkboxes.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
 5 | 
 6 | import { Button } from "@/registry/default/ui/button"
 7 | import {
 8 |   DropdownMenuCheckboxItem,
 9 |   DropdownMenuLabel,
10 |   Menu,
11 |   MenuButton,
12 |   MenuContainer,
13 | } from "@/registry/default/ui/menu"
14 | 
15 | type Checked = DropdownMenuCheckboxItemProps["checked"]
16 | 
17 | export default function DropdownMenuCheckboxes() {
18 |   const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
19 |   const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
20 |   const [showPanel, setShowPanel] = React.useState<Checked>(false)
21 | 
22 |   return (
23 |     <MenuContainer>
24 |       <MenuButton>Open</MenuButton>
25 |       <Menu className="w-56">
26 |         <DropdownMenuLabel>Appearance</DropdownMenuLabel>
27 |         <DropdownMenuCheckboxItem
28 |           checked={showStatusBar}
29 |           onCheckedChange={setShowStatusBar}
30 |         >
31 |           Status Bar
32 |         </DropdownMenuCheckboxItem>
33 |         <DropdownMenuCheckboxItem
34 |           checked={showActivityBar}
35 |           onCheckedChange={setShowActivityBar}
36 |           disabled
37 |         >
38 |           Activity Bar
39 |         </DropdownMenuCheckboxItem>
40 |         <DropdownMenuCheckboxItem
41 |           checked={showPanel}
42 |           onCheckedChange={setShowPanel}
43 |         >
44 |           Panel
45 |         </DropdownMenuCheckboxItem>
46 |       </Menu>
47 |     </MenuContainer>
48 |   )
49 | }
50 | 


--------------------------------------------------------------------------------
/apps/www/content/docs/components/checkbox.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Checkbox
 3 | description: A control that allows the user to toggle between checked and not checked.
 4 | component: true
 5 | links:
 6 |   doc: https://www.radix-ui.com/docs/primitives/components/checkbox
 7 |   api: https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference
 8 | ---
 9 | 
10 | <ComponentPreview name="checkbox-demo" />
11 | 
12 | ## Installation
13 | 
14 | <Tabs defaultValue="manual">
15 | 
16 | <TabsList>
17 |  {/* <TabsTrigger value="cli">CLI</TabsTrigger> */}
18 |   <TabsTrigger value="manual">Manual</TabsTrigger>
19 | </TabsList>
20 | <TabsContent value="cli">
21 | 
22 | ```bash
23 | npx shadcn-ui@latest add checkbox
24 | ```
25 | 
26 | </TabsContent>
27 | 
28 | <TabsContent value="manual">
29 | 
30 | <Steps>
31 | 
32 | <Step>Install the following dependencies:</Step>
33 | 
34 | ```bash
35 | npm install @radix-ui/react-checkbox
36 | ```
37 | 
38 | <Step>Copy and paste the following code into your project.</Step>
39 | 
40 | <ComponentSource name="checkbox" />
41 | 
42 | <Step>Update the import paths to match your project setup.</Step>
43 | 
44 | </Steps>
45 | 
46 | </TabsContent>
47 | 
48 | </Tabs>
49 | 
50 | ## Usage
51 | 
52 | ```tsx
53 | import { Checkbox } from "@/components/ui/checkbox"
54 | ```
55 | 
56 | ```tsx
57 | <Checkbox />
58 | ```
59 | 
60 | ## Examples
61 | 
62 | ### With text
63 | 
64 | <ComponentPreview name="checkbox-with-text" />
65 | 
66 | ### Disabled
67 | 
68 | <ComponentPreview name="checkbox-disabled" />
69 | 
70 | ### Form
71 | 
72 | <ComponentPreview name="checkbox-form-single" />
73 | 
74 | <ComponentPreview name="checkbox-form-multiple" />
75 | 


--------------------------------------------------------------------------------
/apps/www/registry/default/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------