[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-shadcn":3,"mdc-l3dnxx-key":39,"related-repo-openai-shadcn":7380,"related-org-openai-shadcn":7495},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":34,"sourceUrl":37,"mdContent":38},"shadcn","build interfaces with shadcn\u002Fui","shadcn\u002Fui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"Tailwind CSS","tailwind-css",{"name":20,"slug":21,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":23,"slug":24,"type":15},"UI Components","ui-components",{"name":26,"slug":27,"type":15},"Frontend","frontend",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-04-06T18:40:30.269453",null,465,[],{"repoUrl":29,"stars":28,"forks":32,"topics":35,"description":36},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fvercel\u002Fskills\u002Fshadcn","---\nname: shadcn\ndescription: shadcn\u002Fui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.\nmetadata:\n  priority: 6\n  docs:\n    - \"https:\u002F\u002Fui.shadcn.com\u002Fdocs\"\n    - \"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fcomponents\"\n  pathPatterns:\n    - 'components.json'\n    - 'components\u002Fui\u002F**'\n    - 'src\u002Fcomponents\u002Fui\u002F**'\n    - 'apps\u002F*\u002Fcomponents\u002Fui\u002F**'\n    - 'apps\u002F*\u002Fsrc\u002Fcomponents\u002Fui\u002F**'\n    - 'packages\u002F*\u002Fcomponents\u002Fui\u002F**'\n    - 'packages\u002F*\u002Fsrc\u002Fcomponents\u002Fui\u002F**'\n  bashPatterns:\n    - '\\bnpx\\s+shadcn\\b'\n    - '\\bnpx\\s+shadcn@latest\\s+(init|add|build|search|list|migrate|info|docs|view)\\b'\n    - '\\bnpx\\s+create-next-app\\b'\n    - '\\bbunx\\s+create-next-app\\b'\n    - '\\bpnpm\\s+create\\s+next-app\\b'\n    - '\\bnpm\\s+create\\s+next-app\\b'\n---\n\n# shadcn\u002Fui\n\nYou are an expert in shadcn\u002Fui — a collection of beautifully designed, accessible, and customizable React components built on Radix UI primitives and Tailwind CSS. Components are added directly to your codebase as source code, not installed as a dependency.\n\n## Key Concept\n\nshadcn\u002Fui is **not a component library** in the traditional sense. You don't install it as a package. Instead, the CLI copies component source code into your project, giving you full ownership and customization ability.\n\n## CLI Commands\n\n### Initialize (non-interactive — ALWAYS use this)\n\n**IMPORTANT**: `shadcn init` is interactive by default. Always use `-d` (defaults) for non-interactive initialization:\n\n```bash\n# Non-interactive init with defaults — USE THIS\nnpx shadcn@latest init -d\n\n# Non-interactive with a preset (recommended for consistent design systems)\nnpx shadcn@latest init --preset \u003Ccode> -f\n\n# Non-interactive with explicit base library choice\nnpx shadcn@latest init -d --base radix\nnpx shadcn@latest init -d --base base-ui\n\n# Scaffold a full project template (CLI v4)\n```\n\n> **AI Elements compatibility**: Always use `--base radix` (the default) when the project uses or may use AI Elements. AI Elements components rely on Radix APIs and have type errors with Base UI.\n\n```bash\nnpx shadcn@latest init --template next -d\nnpx shadcn@latest init --template vite -d\n```\n\nOptions:\n- `-d, --defaults` — **Use default configuration, skip all interactive prompts** (REQUIRED for CI\u002Fagent use)\n- `-y, --yes` — Skip confirmation prompts (does NOT skip library selection — use `-d` instead)\n- `-f, --force` — Force overwrite existing configuration\n- `-t, --template` — Scaffold full project template (`next`, `vite`, `react-router`, `astro`, `laravel`, `tanstack-start`)\n- `--preset` — Apply a design system preset (colors, theme, icons, fonts, radius) as a single shareable code\n- `--base` — Choose primitive library: `radix` (default) or `base-ui`\n- `--monorepo` — Set up a monorepo structure\n\n> **WARNING**: `-y`\u002F`--yes` alone does NOT make init fully non-interactive — it still prompts for component library selection. Always use `-d` to skip ALL prompts.\n\n> **Deprecated in CLI v4**: `--style`, `--base-color`, `--src-dir`, `--no-base-style`, and `--css-variables` flags are removed and will error. The `registry:build` and `registry:mcp` registry types are also deprecated. Use `registry:base` and `registry:font` instead.\n\nThe init command:\n1. Detects your framework (Next.js, Vite, React Router, Astro, Laravel, TanStack Start)\n2. Installs required dependencies (Radix UI, tailwind-merge, class-variance-authority)\n3. Creates `components.json` configuration\n4. Sets up the `cn()` utility function\n5. Configures CSS variables for theming\n\n### Add Components\n\n```bash\n# Add specific components\nnpx shadcn@latest add button dialog card\n\n# Add all available components\nnpx shadcn@latest add --all\n\n# Add from a custom registry\nnpx shadcn@latest add @v0\u002Fdashboard\nnpx shadcn@latest add @acme\u002Fcustom-button\n\n# Add from AI Elements registry\nnpx shadcn@latest add https:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry\u002Fall.json\n```\n\nOptions:\n- `-o, --overwrite` — Overwrite existing files\n- `-p, --path` — Custom install path\n- `-a, --all` — Install all components\n- `--dry-run` — Preview what will be added without writing files\n- `--diff` — Show diff of changes when updating existing components\n- `--view` — Display a registry item's source code inline\n\n### Search & List\n\n```bash\nnpx shadcn@latest search button\nnpx shadcn@latest list @v0\n```\n\n### Build (Custom Registry)\n\n```bash\nnpx shadcn@latest build\nnpx shadcn@latest build .\u002Fregistry.json -o .\u002Fpublic\u002Fr\n```\n\n### View, Info & Docs (CLI v4)\n\n```bash\n# View a registry item's source before installing\nnpx shadcn@latest view button\n\n# Show project diagnostics — config, installed components, dependencies\nnpx shadcn@latest info\n\n# Get docs, code, and examples for any component (agent-friendly output)\nnpx shadcn@latest docs button\nnpx shadcn@latest docs dialog\n```\n\n> **`shadcn docs`** gives coding agents the context to use primitives correctly — returns code examples, API reference, and usage patterns inline.\n\n### Migrate\n\n```bash\nnpx shadcn@latest migrate rtl    # RTL support migration\nnpx shadcn@latest migrate radix  # Migrate to unified radix-ui package\nnpx shadcn@latest migrate icons  # Icon library changes\n\n# Migrate components outside the default ui directory\nnpx shadcn@latest migrate radix src\u002Fcomponents\u002Fcustom\n```\n\n## shadcn\u002Fskills (CLI v4)\n\nshadcn\u002Fskills gives coding agents the context they need to work with components and registries correctly. It covers both Radix and Base UI primitives, updated APIs, component patterns, and registry workflows. The skill knows how to use the CLI, when to invoke it, and which flags to pass — so agents produce code that matches your design system.\n\nInstall: `pnpm dlx skills add shadcn\u002Fui`\n\n## Unified Radix UI Package (February 2026)\n\nThe `new-york` style now uses a single `radix-ui` package instead of individual `@radix-ui\u002Freact-*` packages:\n\n```tsx\n\u002F\u002F OLD — individual packages\nimport * as DialogPrimitive from \"@radix-ui\u002Freact-dialog\"\n\n\u002F\u002F NEW — unified package\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n```\n\nTo migrate existing projects: `npx shadcn@latest migrate radix`. After migration, remove unused `@radix-ui\u002Freact-*` packages from `package.json`.\n\n## Base UI Support (January 2026)\n\nshadcn\u002Fui now supports **Base UI** as an alternative to Radix UI for the underlying primitive library. Components look and behave the same way regardless of which library you choose — only the underlying implementation changes.\n\nChoose during init: `npx shadcn@latest init --base base-ui`\n\nThe CLI pulls the correct component variant based on your project configuration automatically.\n\n## Configuration (components.json)\n\nThe `components.json` file configures how shadcn\u002Fui works in your project:\n\n```json\n{\n  \"$schema\": \"https:\u002F\u002Fui.shadcn.com\u002Fschema.json\",\n  \"style\": \"new-york\",\n  \"rsc\": true,\n  \"tsx\": true,\n  \"tailwind\": {\n    \"config\": \"tailwind.config.ts\",\n    \"css\": \"src\u002Fapp\u002Fglobals.css\",\n    \"baseColor\": \"zinc\",  \u002F\u002F Options: gray, neutral, slate, stone, zinc, mauve, olive, mist, taupe\n    \"cssVariables\": true\n  },\n  \"aliases\": {\n    \"components\": \"@\u002Fcomponents\",\n    \"utils\": \"@\u002Flib\u002Futils\",\n    \"ui\": \"@\u002Fcomponents\u002Fui\",\n    \"lib\": \"@\u002Flib\",\n    \"hooks\": \"@\u002Fhooks\"\n  },\n  \"registries\": {\n    \"v0\": {\n      \"url\": \"https:\u002F\u002Fv0.dev\u002Fchat\u002Fapi\u002Fregistry\"\n    },\n    \"ai-elements\": {\n      \"url\": \"https:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry\"\n    }\n  }\n}\n```\n\n### Namespaced Registries\n\nConfigure multiple registries for your project:\n\n```json\n{\n  \"registries\": {\n    \"acme\": {\n      \"url\": \"https:\u002F\u002Facme.com\u002Fregistry\u002F{name}.json\"\n    },\n    \"private\": {\n      \"url\": \"https:\u002F\u002Finternal.company.com\u002Fregistry\u002F{name}.json\",\n      \"headers\": {\n        \"Authorization\": \"Bearer ${REGISTRY_TOKEN}\"\n      }\n    }\n  }\n}\n```\n\nInstall using namespace syntax:\n\n```bash\nnpx shadcn@latest add @acme\u002Fheader @private\u002Fauth-form\n```\n\n## Theming\n\n### CSS Variables\n\nshadcn\u002Fui uses CSS custom properties for theming, defined in `globals.css`:\n\n```css\n@theme inline {\n  --color-background: oklch(0.145 0 0);\n  --color-foreground: oklch(0.985 0 0);\n  --color-card: oklch(0.205 0 0);\n  --color-card-foreground: oklch(0.985 0 0);\n  --color-primary: oklch(0.488 0.243 264.376);\n  --color-primary-foreground: oklch(0.985 0 0);\n  --color-secondary: oklch(0.269 0 0);\n  --color-secondary-foreground: oklch(0.985 0 0);\n  --color-muted: oklch(0.269 0 0);\n  --color-muted-foreground: oklch(0.708 0 0);\n  --color-accent: oklch(0.269 0 0);\n  --color-accent-foreground: oklch(0.985 0 0);\n  --color-destructive: oklch(0.396 0.141 25.723);\n  --color-border: oklch(0.269 0 0);\n  --color-input: oklch(0.269 0 0);\n  --color-ring: oklch(0.488 0.243 264.376);\n  --radius: 0.625rem;\n  \u002F* CLI v4: radius tokens use multiplicative calc instead of additive *\u002F\n  --radius-xs: calc(var(--radius) * 0.5);\n  --radius-sm: calc(var(--radius) * 0.75);\n  --radius-md: calc(var(--radius) * 0.875);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) * 1.5);\n}\n```\n\n### Dark Mode\n\nFor dark mode, use the `dark` class on `\u003Chtml>`:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\n\u003Chtml lang=\"en\" className=\"dark\">\n```\n\nOr use next-themes for toggling:\n\n```tsx\nimport { ThemeProvider } from 'next-themes'\n\n\u003CThemeProvider attribute=\"class\" defaultTheme=\"dark\">\n  {children}\n\u003C\u002FThemeProvider>\n```\n\n### Custom Colors\n\nAdd application-specific colors alongside shadcn defaults:\n\n```css\n@theme inline {\n  \u002F* shadcn defaults above... *\u002F\n\n  \u002F* Custom app colors *\u002F\n  --color-priority-urgent: oklch(0.637 0.237 15.163);\n  --color-priority-high: oklch(0.705 0.213 47.604);\n  --color-status-done: oklch(0.723 0.219 149.579);\n}\n```\n\nUse in components:\n\n```tsx\n\u003Cspan className=\"text-[var(--color-priority-urgent)]\">Urgent\u003C\u002Fspan>\n\u002F\u002F Or with Tailwind v4 theme():\n\u003Cspan className=\"text-priority-urgent\">Urgent\u003C\u002Fspan>\n```\n\n## Most Common Components\n\n| Component | Use Case |\n|-----------|----------|\n| `button` | Actions, form submission |\n| `card` | Content containers |\n| `dialog` | Modals, confirmation prompts |\n| `input` \u002F `textarea` | Form fields |\n| `select` | Dropdowns |\n| `table` | Data display |\n| `tabs` | View switching |\n| `command` | Command palette (Cmd+K) |\n| `dropdown-menu` | Context menus |\n| `popover` | Floating content |\n| `tooltip` | Hover hints |\n| `badge` | Status indicators |\n| `avatar` | User profile images |\n| `scroll-area` | Scrollable containers |\n| `separator` | Visual dividers |\n| `label` | Form labels |\n| `sheet` | Slide-out panels |\n| `skeleton` | Loading placeholders |\n\n## Design Direction for shadcn on Vercel\n\nshadcn\u002Fui is not only a component source generator. In the Vercel stack it is the default interface language. Do not stop at \"the component works.\" Compose pages that feel deliberate, high-signal, and consistent.\n\n### Default aesthetic for product UI\n\n- Prefer style: `new-york` for product, dashboard, AI, and admin surfaces.\n- Default to dark mode for dashboards, AI apps, internal tools, settings, and developer-facing products. Use light mode only when the product is clearly content-first or editorial.\n- Use Geist Sans for interface text and Geist Mono for code, metrics, IDs, timestamps, commands.\n- Prefer zinc, neutral, or slate as the base palette. Use one accent color through `--color-primary`.\n- Build core surfaces from tokens: `bg-background`, `bg-card`, `text-foreground`, `text-muted-foreground`, `border-border`, `ring-ring`. Avoid ad-hoc hex values.\n- Keep radius consistent. The default `--radius: 0.625rem` is a strong baseline.\n- Use one density system per page: comfortable (`gap-6` \u002F `p-6` \u002F `text-sm`) or compact (`gap-4` \u002F `p-4` \u002F `text-sm`).\n- Keep icons quiet and consistent. Lucide icons at `h-4 w-4` or `h-5 w-5`.\n\n### Reach for this first\n\n| Use case | Reach for this first | Why |\n|----------|----------------------|-----|\n| Settings page | `Tabs` + `Card` + `Form` | Clear information grouping with predictable save flows |\n| Data dashboard | `Card` + `Badge` + `Table` + `DropdownMenu` | Covers summary, status, dense data, and row actions without custom shells |\n| CRUD table | `Table` + `DropdownMenu` + `Sheet` + `AlertDialog` | Supports browse, act, edit, and destructive confirmation in a standard pattern |\n| Auth screen | `Card` + `Label` + `Input` + `Button` + `Alert` | Keeps entry flows focused and gives errors a proper treatment |\n| Global search | `Command` + `Dialog` | Fast keyboard-first discovery with an established interaction model |\n| Mobile nav | `Sheet` + `Button` + `Separator` | Provides a compact navigation shell that adapts cleanly to small screens |\n| Detail page | header + `Badge` + `Separator` + `Card` | Balances hierarchy, metadata, and supporting content without over-nesting |\n| Filters | `Card` sidebar + `Sheet` + `Select` | Works for persistent desktop filters and collapsible mobile controls |\n| Empty\u002Floading\u002Ferror states | `Card` + `Skeleton` + `Alert` | Gives non-happy paths a designed surface instead of placeholder text |\n\n### Composition recipes\n\n- Settings page: `Tabs` + `Card` per group + `Separator` + save action\n- Admin dashboard: summary `Card`s + filter bar + `Table`\n- Entity detail: header + status `Badge` + main `Card` + side `Card` + `AlertDialog` for destructive\n- Search-heavy: `Command` for quick find, `Popover` for pickers, `Sheet` for mobile filters\n- Auth\u002Fonboarding: centered `Card` + social `Separator` + inline `Alert` for errors\n- Destructive flows: `AlertDialog` (not `Dialog`) for confirmation\n\n### Anti-patterns to avoid\n\n- Raw `button` \u002F `input` \u002F `select` \u002F `div` when shadcn primitives exist\n- Repeated `div rounded-xl border p-6` instead of `Tabs` \u002F `Table` \u002F `Sheet` \u002F `Dialog`\n- Multiple accent colors fighting each other\n- Nested cards inside cards inside cards\n- Large gradient backgrounds and glassmorphism on every surface\n- Mixing arbitrary spacing and radius values\n- Using `Dialog` for destructive confirmation instead of `AlertDialog`\n- Shipping empty\u002Floading\u002Ferror states without design treatment\n- Using ad-hoc Tailwind palette classes for foundational surfaces instead of theme tokens\n\n## Building a Custom Registry\n\nCreate your own component registry to share across projects:\n\n### Registry Types (CLI v4)\n\n| Type | Purpose |\n|------|---------|\n| `registry:ui` | Individual UI components |\n| `registry:base` | Full design system payload — components, deps, CSS vars, fonts, config |\n| `registry:font` | Font configuration as a first-class registry item |\n\n### 1. Define registry.json\n\n```json\n[\n  {\n    \"name\": \"my-component\",\n    \"type\": \"registry:ui\",\n    \"title\": \"My Component\",\n    \"description\": \"A custom component\",\n    \"files\": [\n      {\n        \"path\": \"components\u002Fmy-component.tsx\",\n        \"type\": \"registry:ui\"\n      }\n    ],\n    \"dependencies\": [\"lucide-react\"]\n  }\n]\n```\n\n### 2. Build\n\n```bash\nnpx shadcn@latest build\n# Outputs to public\u002Fr\u002Fmy-component.json\n```\n\n### 3. Consume\n\n```bash\nnpx shadcn@latest add https:\u002F\u002Fyour-domain.com\u002Fr\u002Fmy-component.json\n```\n\n## Component Gotchas\n\n### `shadcn init` Breaks Geist Font in Next.js (Tailwind v4)\n\n`shadcn init` rewrites `globals.css` and may introduce `--font-sans: var(--font-sans)` — a circular self-reference that breaks font loading. Tailwind v4's `@theme inline` resolves CSS custom properties at **parse time**, not runtime — so even `var(--font-geist-sans)` won't work because Next.js injects that variable via className at runtime.\n\n**The fix**: Use literal font family names in `@theme inline`:\n\n```css\n\u002F* In @theme inline — CORRECT (literal names) *\u002F\n--font-sans: \"Geist\", \"Geist Fallback\", ui-sans-serif, system-ui, sans-serif;\n--font-mono: \"Geist Mono\", \"Geist Mono Fallback\", ui-monospace, monospace;\n\n\u002F* WRONG — circular, resolves to nothing *\u002F\n--font-sans: var(--font-sans);\n\n\u002F* ALSO WRONG — @theme inline can't resolve runtime CSS variables *\u002F\n--font-sans: var(--font-geist-sans);\n```\n\n**After running `shadcn init`**, always:\n1. Replace font declarations in `@theme inline` with literal Geist font names (as shown above)\n2. Move the font variable classNames from `\u003Cbody>` to `\u003Chtml>` in `layout.tsx`:\n\n```tsx\n\u002F\u002F layout.tsx — font variables on \u003Chtml>, not \u003Cbody>\n\u003Chtml lang=\"en\" className={`${geistSans.variable} ${geistMono.variable}`}>\n  \u003Cbody className=\"antialiased\">\n```\n\n### Avatar Has No `size` Prop\n\nThe shadcn Avatar component does **not** accept a `size` variant prop. Control size with Tailwind classes:\n\n```tsx\n\u002F\u002F WRONG — no size variant exists\n\u003CAvatar size=\"lg\" \u002F>  \u002F\u002F ❌ TypeScript error \u002F silently ignored\n\n\u002F\u002F CORRECT — use Tailwind\n\u003CAvatar className=\"h-12 w-12\">\n  \u003CAvatarImage src={user.image} \u002F>\n  \u003CAvatarFallback>JD\u003C\u002FAvatarFallback>\n\u003C\u002FAvatar>\n\n\u002F\u002F Small avatar\n\u003CAvatar className=\"h-6 w-6\"> ... \u003C\u002FAvatar>\n```\n\nThis applies to most shadcn components — they use Tailwind classes for sizing, not variant props. If you need reusable size variants, add them yourself via `cva` in the component source.\n\n## Common Patterns\n\n### cn() Utility\n\nAll shadcn components use the `cn()` utility for conditional class merging:\n\n```ts\nimport { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n```\n\n### Extending Components\n\nSince you own the source code, extend components directly:\n\n```tsx\n\u002F\u002F components\u002Fui\u002Fbutton.tsx — add your custom variant\nconst buttonVariants = cva('...', {\n  variants: {\n    variant: {\n      default: '...',\n      destructive: '...',\n      \u002F\u002F Add custom variants\n      success: 'bg-green-600 text-white hover:bg-green-700',\n      premium: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white',\n    },\n  },\n})\n```\n\n### Wrapping with TooltipProvider\n\nMany components require `TooltipProvider` at the root:\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx\nimport { TooltipProvider } from '@\u002Fcomponents\u002Fui\u002Ftooltip'\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml lang=\"en\" className=\"dark\">\n      \u003Cbody>\n        \u003CTooltipProvider>{children}\u003C\u002FTooltipProvider>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\n## Framework Support\n\n- **Next.js** — Full support (App Router + Pages Router)\n- **Vite** — Full support\n- **React Router** — Full support\n- **Astro** — Full support\n- **Laravel** — Full support (via Inertia)\n- **TanStack Start** — Full support\n\n## Presets (CLI v4)\n\nPresets bundle your entire design system config (colors, theme, icon library, fonts, radius) into a single shareable code. One string configures everything:\n\n```bash\n# Apply a preset during init\nnpx shadcn@latest init --preset \u003Ccode>\n\n# Switch presets in an existing project (reconfigures everything including components)\nnpx shadcn@latest init --preset \u003Ccode>\n```\n\nBuild custom presets on `shadcn\u002Fcreate` — preview how colors, fonts, and radius apply to real components before publishing.\n\n## RTL Support (2026)\n\nThe CLI handles RTL transformation at install time:\n\n```bash\nnpx shadcn@latest migrate rtl\n```\n\nConverts directional classes (`ml-4`, `left-2`) to logical properties (`ms-4`, `start-2`) automatically.\n\n## Official Documentation\n\n- [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com)\n- [Components](https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fcomponents)\n- [CLI](https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fcli)\n- [Theming](https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftheming)\n- [Custom Registry](https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fregistry)\n- [Registry Directory](https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fdirectory)\n- [GitHub: shadcn\u002Fui](https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui)\n",{"data":40,"body":61},{"name":4,"description":6,"metadata":41},{"priority":42,"docs":43,"pathPatterns":46,"bashPatterns":54},6,[44,45],"https:\u002F\u002Fui.shadcn.com\u002Fdocs","https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fcomponents",[47,48,49,50,51,52,53],"components.json","components\u002Fui\u002F**","src\u002Fcomponents\u002Fui\u002F**","apps\u002F*\u002Fcomponents\u002Fui\u002F**","apps\u002F*\u002Fsrc\u002Fcomponents\u002Fui\u002F**","packages\u002F*\u002Fcomponents\u002Fui\u002F**","packages\u002F*\u002Fsrc\u002Fcomponents\u002Fui\u002F**",[55,56,57,58,59,60],"\\bnpx\\s+shadcn\\b","\\bnpx\\s+shadcn@latest\\s+(init|add|build|search|list|migrate|info|docs|view)\\b","\\bnpx\\s+create-next-app\\b","\\bbunx\\s+create-next-app\\b","\\bpnpm\\s+create\\s+next-app\\b","\\bnpm\\s+create\\s+next-app\\b",{"type":62,"children":63},"root",[64,72,78,85,98,104,111,138,347,369,433,438,592,627,707,712,756,762,934,938,1007,1013,1062,1068,1122,1128,1249,1266,1272,1394,1400,1405,1416,1422,1451,1575,1603,1609,1621,1632,1637,1643,1654,2371,2377,2382,2630,2635,2667,2673,2679,2691,3272,3278,3298,3375,3380,3525,3531,3536,3731,3736,3856,3862,4203,4209,4214,4220,4386,4392,4754,4760,4909,4915,5032,5038,5043,5049,5120,5126,5469,5475,5505,5511,5538,5544,5555,5603,5619,5764,5779,5821,5966,5980,5999,6265,6278,6284,6290,6302,6498,6504,6509,6752,6758,6771,7034,7040,7100,7106,7111,7211,7224,7230,7235,7262,7297,7303,7375],{"type":65,"tag":66,"props":67,"children":69},"element","h1",{"id":68},"shadcnui",[70],{"type":71,"value":20},"text",{"type":65,"tag":73,"props":74,"children":75},"p",{},[76],{"type":71,"value":77},"You are an expert in shadcn\u002Fui — a collection of beautifully designed, accessible, and customizable React components built on Radix UI primitives and Tailwind CSS. Components are added directly to your codebase as source code, not installed as a dependency.",{"type":65,"tag":79,"props":80,"children":82},"h2",{"id":81},"key-concept",[83],{"type":71,"value":84},"Key Concept",{"type":65,"tag":73,"props":86,"children":87},{},[88,90,96],{"type":71,"value":89},"shadcn\u002Fui is ",{"type":65,"tag":91,"props":92,"children":93},"strong",{},[94],{"type":71,"value":95},"not a component library",{"type":71,"value":97}," in the traditional sense. You don't install it as a package. Instead, the CLI copies component source code into your project, giving you full ownership and customization ability.",{"type":65,"tag":79,"props":99,"children":101},{"id":100},"cli-commands",[102],{"type":71,"value":103},"CLI Commands",{"type":65,"tag":105,"props":106,"children":108},"h3",{"id":107},"initialize-non-interactive-always-use-this",[109],{"type":71,"value":110},"Initialize (non-interactive — ALWAYS use this)",{"type":65,"tag":73,"props":112,"children":113},{},[114,119,121,128,130,136],{"type":65,"tag":91,"props":115,"children":116},{},[117],{"type":71,"value":118},"IMPORTANT",{"type":71,"value":120},": ",{"type":65,"tag":122,"props":123,"children":125},"code",{"className":124},[],[126],{"type":71,"value":127},"shadcn init",{"type":71,"value":129}," is interactive by default. Always use ",{"type":65,"tag":122,"props":131,"children":133},{"className":132},[],[134],{"type":71,"value":135},"-d",{"type":71,"value":137}," (defaults) for non-interactive initialization:",{"type":65,"tag":139,"props":140,"children":145},"pre",{"className":141,"code":142,"language":143,"meta":144,"style":144},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Non-interactive init with defaults — USE THIS\nnpx shadcn@latest init -d\n\n# Non-interactive with a preset (recommended for consistent design systems)\nnpx shadcn@latest init --preset \u003Ccode> -f\n\n# Non-interactive with explicit base library choice\nnpx shadcn@latest init -d --base radix\nnpx shadcn@latest init -d --base base-ui\n\n# Scaffold a full project template (CLI v4)\n","bash","",[146],{"type":65,"tag":122,"props":147,"children":148},{"__ignoreMap":144},[149,161,187,197,206,254,261,270,301,330,338],{"type":65,"tag":150,"props":151,"children":154},"span",{"class":152,"line":153},"line",1,[155],{"type":65,"tag":150,"props":156,"children":158},{"style":157},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[159],{"type":71,"value":160},"# Non-interactive init with defaults — USE THIS\n",{"type":65,"tag":150,"props":162,"children":164},{"class":152,"line":163},2,[165,171,177,182],{"type":65,"tag":150,"props":166,"children":168},{"style":167},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[169],{"type":71,"value":170},"npx",{"type":65,"tag":150,"props":172,"children":174},{"style":173},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[175],{"type":71,"value":176}," shadcn@latest",{"type":65,"tag":150,"props":178,"children":179},{"style":173},[180],{"type":71,"value":181}," init",{"type":65,"tag":150,"props":183,"children":184},{"style":173},[185],{"type":71,"value":186}," -d\n",{"type":65,"tag":150,"props":188,"children":190},{"class":152,"line":189},3,[191],{"type":65,"tag":150,"props":192,"children":194},{"emptyLinePlaceholder":193},true,[195],{"type":71,"value":196},"\n",{"type":65,"tag":150,"props":198,"children":200},{"class":152,"line":199},4,[201],{"type":65,"tag":150,"props":202,"children":203},{"style":157},[204],{"type":71,"value":205},"# Non-interactive with a preset (recommended for consistent design systems)\n",{"type":65,"tag":150,"props":207,"children":209},{"class":152,"line":208},5,[210,214,218,222,227,233,238,244,249],{"type":65,"tag":150,"props":211,"children":212},{"style":167},[213],{"type":71,"value":170},{"type":65,"tag":150,"props":215,"children":216},{"style":173},[217],{"type":71,"value":176},{"type":65,"tag":150,"props":219,"children":220},{"style":173},[221],{"type":71,"value":181},{"type":65,"tag":150,"props":223,"children":224},{"style":173},[225],{"type":71,"value":226}," --preset",{"type":65,"tag":150,"props":228,"children":230},{"style":229},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[231],{"type":71,"value":232}," \u003C",{"type":65,"tag":150,"props":234,"children":235},{"style":173},[236],{"type":71,"value":237},"cod",{"type":65,"tag":150,"props":239,"children":241},{"style":240},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[242],{"type":71,"value":243},"e",{"type":65,"tag":150,"props":245,"children":246},{"style":229},[247],{"type":71,"value":248},">",{"type":65,"tag":150,"props":250,"children":251},{"style":173},[252],{"type":71,"value":253}," -f\n",{"type":65,"tag":150,"props":255,"children":256},{"class":152,"line":42},[257],{"type":65,"tag":150,"props":258,"children":259},{"emptyLinePlaceholder":193},[260],{"type":71,"value":196},{"type":65,"tag":150,"props":262,"children":264},{"class":152,"line":263},7,[265],{"type":65,"tag":150,"props":266,"children":267},{"style":157},[268],{"type":71,"value":269},"# Non-interactive with explicit base library choice\n",{"type":65,"tag":150,"props":271,"children":273},{"class":152,"line":272},8,[274,278,282,286,291,296],{"type":65,"tag":150,"props":275,"children":276},{"style":167},[277],{"type":71,"value":170},{"type":65,"tag":150,"props":279,"children":280},{"style":173},[281],{"type":71,"value":176},{"type":65,"tag":150,"props":283,"children":284},{"style":173},[285],{"type":71,"value":181},{"type":65,"tag":150,"props":287,"children":288},{"style":173},[289],{"type":71,"value":290}," -d",{"type":65,"tag":150,"props":292,"children":293},{"style":173},[294],{"type":71,"value":295}," --base",{"type":65,"tag":150,"props":297,"children":298},{"style":173},[299],{"type":71,"value":300}," radix\n",{"type":65,"tag":150,"props":302,"children":304},{"class":152,"line":303},9,[305,309,313,317,321,325],{"type":65,"tag":150,"props":306,"children":307},{"style":167},[308],{"type":71,"value":170},{"type":65,"tag":150,"props":310,"children":311},{"style":173},[312],{"type":71,"value":176},{"type":65,"tag":150,"props":314,"children":315},{"style":173},[316],{"type":71,"value":181},{"type":65,"tag":150,"props":318,"children":319},{"style":173},[320],{"type":71,"value":290},{"type":65,"tag":150,"props":322,"children":323},{"style":173},[324],{"type":71,"value":295},{"type":65,"tag":150,"props":326,"children":327},{"style":173},[328],{"type":71,"value":329}," base-ui\n",{"type":65,"tag":150,"props":331,"children":333},{"class":152,"line":332},10,[334],{"type":65,"tag":150,"props":335,"children":336},{"emptyLinePlaceholder":193},[337],{"type":71,"value":196},{"type":65,"tag":150,"props":339,"children":341},{"class":152,"line":340},11,[342],{"type":65,"tag":150,"props":343,"children":344},{"style":157},[345],{"type":71,"value":346},"# Scaffold a full project template (CLI v4)\n",{"type":65,"tag":348,"props":349,"children":350},"blockquote",{},[351],{"type":65,"tag":73,"props":352,"children":353},{},[354,359,361,367],{"type":65,"tag":91,"props":355,"children":356},{},[357],{"type":71,"value":358},"AI Elements compatibility",{"type":71,"value":360},": Always use ",{"type":65,"tag":122,"props":362,"children":364},{"className":363},[],[365],{"type":71,"value":366},"--base radix",{"type":71,"value":368}," (the default) when the project uses or may use AI Elements. AI Elements components rely on Radix APIs and have type errors with Base UI.",{"type":65,"tag":139,"props":370,"children":372},{"className":141,"code":371,"language":143,"meta":144,"style":144},"npx shadcn@latest init --template next -d\nnpx shadcn@latest init --template vite -d\n",[373],{"type":65,"tag":122,"props":374,"children":375},{"__ignoreMap":144},[376,405],{"type":65,"tag":150,"props":377,"children":378},{"class":152,"line":153},[379,383,387,391,396,401],{"type":65,"tag":150,"props":380,"children":381},{"style":167},[382],{"type":71,"value":170},{"type":65,"tag":150,"props":384,"children":385},{"style":173},[386],{"type":71,"value":176},{"type":65,"tag":150,"props":388,"children":389},{"style":173},[390],{"type":71,"value":181},{"type":65,"tag":150,"props":392,"children":393},{"style":173},[394],{"type":71,"value":395}," --template",{"type":65,"tag":150,"props":397,"children":398},{"style":173},[399],{"type":71,"value":400}," next",{"type":65,"tag":150,"props":402,"children":403},{"style":173},[404],{"type":71,"value":186},{"type":65,"tag":150,"props":406,"children":407},{"class":152,"line":163},[408,412,416,420,424,429],{"type":65,"tag":150,"props":409,"children":410},{"style":167},[411],{"type":71,"value":170},{"type":65,"tag":150,"props":413,"children":414},{"style":173},[415],{"type":71,"value":176},{"type":65,"tag":150,"props":417,"children":418},{"style":173},[419],{"type":71,"value":181},{"type":65,"tag":150,"props":421,"children":422},{"style":173},[423],{"type":71,"value":395},{"type":65,"tag":150,"props":425,"children":426},{"style":173},[427],{"type":71,"value":428}," vite",{"type":65,"tag":150,"props":430,"children":431},{"style":173},[432],{"type":71,"value":186},{"type":65,"tag":73,"props":434,"children":435},{},[436],{"type":71,"value":437},"Options:",{"type":65,"tag":439,"props":440,"children":441},"ul",{},[442,461,479,490,545,556,581],{"type":65,"tag":443,"props":444,"children":445},"li",{},[446,452,454,459],{"type":65,"tag":122,"props":447,"children":449},{"className":448},[],[450],{"type":71,"value":451},"-d, --defaults",{"type":71,"value":453}," — ",{"type":65,"tag":91,"props":455,"children":456},{},[457],{"type":71,"value":458},"Use default configuration, skip all interactive prompts",{"type":71,"value":460}," (REQUIRED for CI\u002Fagent use)",{"type":65,"tag":443,"props":462,"children":463},{},[464,470,472,477],{"type":65,"tag":122,"props":465,"children":467},{"className":466},[],[468],{"type":71,"value":469},"-y, --yes",{"type":71,"value":471}," — Skip confirmation prompts (does NOT skip library selection — use ",{"type":65,"tag":122,"props":473,"children":475},{"className":474},[],[476],{"type":71,"value":135},{"type":71,"value":478}," instead)",{"type":65,"tag":443,"props":480,"children":481},{},[482,488],{"type":65,"tag":122,"props":483,"children":485},{"className":484},[],[486],{"type":71,"value":487},"-f, --force",{"type":71,"value":489}," — Force overwrite existing configuration",{"type":65,"tag":443,"props":491,"children":492},{},[493,499,501,507,509,515,516,522,523,529,530,536,537,543],{"type":65,"tag":122,"props":494,"children":496},{"className":495},[],[497],{"type":71,"value":498},"-t, --template",{"type":71,"value":500}," — Scaffold full project template (",{"type":65,"tag":122,"props":502,"children":504},{"className":503},[],[505],{"type":71,"value":506},"next",{"type":71,"value":508},", ",{"type":65,"tag":122,"props":510,"children":512},{"className":511},[],[513],{"type":71,"value":514},"vite",{"type":71,"value":508},{"type":65,"tag":122,"props":517,"children":519},{"className":518},[],[520],{"type":71,"value":521},"react-router",{"type":71,"value":508},{"type":65,"tag":122,"props":524,"children":526},{"className":525},[],[527],{"type":71,"value":528},"astro",{"type":71,"value":508},{"type":65,"tag":122,"props":531,"children":533},{"className":532},[],[534],{"type":71,"value":535},"laravel",{"type":71,"value":508},{"type":65,"tag":122,"props":538,"children":540},{"className":539},[],[541],{"type":71,"value":542},"tanstack-start",{"type":71,"value":544},")",{"type":65,"tag":443,"props":546,"children":547},{},[548,554],{"type":65,"tag":122,"props":549,"children":551},{"className":550},[],[552],{"type":71,"value":553},"--preset",{"type":71,"value":555}," — Apply a design system preset (colors, theme, icons, fonts, radius) as a single shareable code",{"type":65,"tag":443,"props":557,"children":558},{},[559,565,567,573,575],{"type":65,"tag":122,"props":560,"children":562},{"className":561},[],[563],{"type":71,"value":564},"--base",{"type":71,"value":566}," — Choose primitive library: ",{"type":65,"tag":122,"props":568,"children":570},{"className":569},[],[571],{"type":71,"value":572},"radix",{"type":71,"value":574}," (default) or ",{"type":65,"tag":122,"props":576,"children":578},{"className":577},[],[579],{"type":71,"value":580},"base-ui",{"type":65,"tag":443,"props":582,"children":583},{},[584,590],{"type":65,"tag":122,"props":585,"children":587},{"className":586},[],[588],{"type":71,"value":589},"--monorepo",{"type":71,"value":591}," — Set up a monorepo structure",{"type":65,"tag":348,"props":593,"children":594},{},[595],{"type":65,"tag":73,"props":596,"children":597},{},[598,603,604,610,612,618,620,625],{"type":65,"tag":91,"props":599,"children":600},{},[601],{"type":71,"value":602},"WARNING",{"type":71,"value":120},{"type":65,"tag":122,"props":605,"children":607},{"className":606},[],[608],{"type":71,"value":609},"-y",{"type":71,"value":611},"\u002F",{"type":65,"tag":122,"props":613,"children":615},{"className":614},[],[616],{"type":71,"value":617},"--yes",{"type":71,"value":619}," alone does NOT make init fully non-interactive — it still prompts for component library selection. Always use ",{"type":65,"tag":122,"props":621,"children":623},{"className":622},[],[624],{"type":71,"value":135},{"type":71,"value":626}," to skip ALL prompts.",{"type":65,"tag":348,"props":628,"children":629},{},[630],{"type":65,"tag":73,"props":631,"children":632},{},[633,638,639,645,646,652,653,659,660,666,668,674,676,682,684,690,692,698,699,705],{"type":65,"tag":91,"props":634,"children":635},{},[636],{"type":71,"value":637},"Deprecated in CLI v4",{"type":71,"value":120},{"type":65,"tag":122,"props":640,"children":642},{"className":641},[],[643],{"type":71,"value":644},"--style",{"type":71,"value":508},{"type":65,"tag":122,"props":647,"children":649},{"className":648},[],[650],{"type":71,"value":651},"--base-color",{"type":71,"value":508},{"type":65,"tag":122,"props":654,"children":656},{"className":655},[],[657],{"type":71,"value":658},"--src-dir",{"type":71,"value":508},{"type":65,"tag":122,"props":661,"children":663},{"className":662},[],[664],{"type":71,"value":665},"--no-base-style",{"type":71,"value":667},", and ",{"type":65,"tag":122,"props":669,"children":671},{"className":670},[],[672],{"type":71,"value":673},"--css-variables",{"type":71,"value":675}," flags are removed and will error. The ",{"type":65,"tag":122,"props":677,"children":679},{"className":678},[],[680],{"type":71,"value":681},"registry:build",{"type":71,"value":683}," and ",{"type":65,"tag":122,"props":685,"children":687},{"className":686},[],[688],{"type":71,"value":689},"registry:mcp",{"type":71,"value":691}," registry types are also deprecated. Use ",{"type":65,"tag":122,"props":693,"children":695},{"className":694},[],[696],{"type":71,"value":697},"registry:base",{"type":71,"value":683},{"type":65,"tag":122,"props":700,"children":702},{"className":701},[],[703],{"type":71,"value":704},"registry:font",{"type":71,"value":706}," instead.",{"type":65,"tag":73,"props":708,"children":709},{},[710],{"type":71,"value":711},"The init command:",{"type":65,"tag":713,"props":714,"children":715},"ol",{},[716,721,726,738,751],{"type":65,"tag":443,"props":717,"children":718},{},[719],{"type":71,"value":720},"Detects your framework (Next.js, Vite, React Router, Astro, Laravel, TanStack Start)",{"type":65,"tag":443,"props":722,"children":723},{},[724],{"type":71,"value":725},"Installs required dependencies (Radix UI, tailwind-merge, class-variance-authority)",{"type":65,"tag":443,"props":727,"children":728},{},[729,731,736],{"type":71,"value":730},"Creates ",{"type":65,"tag":122,"props":732,"children":734},{"className":733},[],[735],{"type":71,"value":47},{"type":71,"value":737}," configuration",{"type":65,"tag":443,"props":739,"children":740},{},[741,743,749],{"type":71,"value":742},"Sets up the ",{"type":65,"tag":122,"props":744,"children":746},{"className":745},[],[747],{"type":71,"value":748},"cn()",{"type":71,"value":750}," utility function",{"type":65,"tag":443,"props":752,"children":753},{},[754],{"type":71,"value":755},"Configures CSS variables for theming",{"type":65,"tag":105,"props":757,"children":759},{"id":758},"add-components",[760],{"type":71,"value":761},"Add Components",{"type":65,"tag":139,"props":763,"children":765},{"className":141,"code":764,"language":143,"meta":144,"style":144},"# Add specific components\nnpx shadcn@latest add button dialog card\n\n# Add all available components\nnpx shadcn@latest add --all\n\n# Add from a custom registry\nnpx shadcn@latest add @v0\u002Fdashboard\nnpx shadcn@latest add @acme\u002Fcustom-button\n\n# Add from AI Elements registry\nnpx shadcn@latest add https:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry\u002Fall.json\n",[766],{"type":65,"tag":122,"props":767,"children":768},{"__ignoreMap":144},[769,777,808,815,823,843,850,858,878,898,905,913],{"type":65,"tag":150,"props":770,"children":771},{"class":152,"line":153},[772],{"type":65,"tag":150,"props":773,"children":774},{"style":157},[775],{"type":71,"value":776},"# Add specific components\n",{"type":65,"tag":150,"props":778,"children":779},{"class":152,"line":163},[780,784,788,793,798,803],{"type":65,"tag":150,"props":781,"children":782},{"style":167},[783],{"type":71,"value":170},{"type":65,"tag":150,"props":785,"children":786},{"style":173},[787],{"type":71,"value":176},{"type":65,"tag":150,"props":789,"children":790},{"style":173},[791],{"type":71,"value":792}," add",{"type":65,"tag":150,"props":794,"children":795},{"style":173},[796],{"type":71,"value":797}," button",{"type":65,"tag":150,"props":799,"children":800},{"style":173},[801],{"type":71,"value":802}," dialog",{"type":65,"tag":150,"props":804,"children":805},{"style":173},[806],{"type":71,"value":807}," card\n",{"type":65,"tag":150,"props":809,"children":810},{"class":152,"line":189},[811],{"type":65,"tag":150,"props":812,"children":813},{"emptyLinePlaceholder":193},[814],{"type":71,"value":196},{"type":65,"tag":150,"props":816,"children":817},{"class":152,"line":199},[818],{"type":65,"tag":150,"props":819,"children":820},{"style":157},[821],{"type":71,"value":822},"# Add all available components\n",{"type":65,"tag":150,"props":824,"children":825},{"class":152,"line":208},[826,830,834,838],{"type":65,"tag":150,"props":827,"children":828},{"style":167},[829],{"type":71,"value":170},{"type":65,"tag":150,"props":831,"children":832},{"style":173},[833],{"type":71,"value":176},{"type":65,"tag":150,"props":835,"children":836},{"style":173},[837],{"type":71,"value":792},{"type":65,"tag":150,"props":839,"children":840},{"style":173},[841],{"type":71,"value":842}," --all\n",{"type":65,"tag":150,"props":844,"children":845},{"class":152,"line":42},[846],{"type":65,"tag":150,"props":847,"children":848},{"emptyLinePlaceholder":193},[849],{"type":71,"value":196},{"type":65,"tag":150,"props":851,"children":852},{"class":152,"line":263},[853],{"type":65,"tag":150,"props":854,"children":855},{"style":157},[856],{"type":71,"value":857},"# Add from a custom registry\n",{"type":65,"tag":150,"props":859,"children":860},{"class":152,"line":272},[861,865,869,873],{"type":65,"tag":150,"props":862,"children":863},{"style":167},[864],{"type":71,"value":170},{"type":65,"tag":150,"props":866,"children":867},{"style":173},[868],{"type":71,"value":176},{"type":65,"tag":150,"props":870,"children":871},{"style":173},[872],{"type":71,"value":792},{"type":65,"tag":150,"props":874,"children":875},{"style":173},[876],{"type":71,"value":877}," @v0\u002Fdashboard\n",{"type":65,"tag":150,"props":879,"children":880},{"class":152,"line":303},[881,885,889,893],{"type":65,"tag":150,"props":882,"children":883},{"style":167},[884],{"type":71,"value":170},{"type":65,"tag":150,"props":886,"children":887},{"style":173},[888],{"type":71,"value":176},{"type":65,"tag":150,"props":890,"children":891},{"style":173},[892],{"type":71,"value":792},{"type":65,"tag":150,"props":894,"children":895},{"style":173},[896],{"type":71,"value":897}," @acme\u002Fcustom-button\n",{"type":65,"tag":150,"props":899,"children":900},{"class":152,"line":332},[901],{"type":65,"tag":150,"props":902,"children":903},{"emptyLinePlaceholder":193},[904],{"type":71,"value":196},{"type":65,"tag":150,"props":906,"children":907},{"class":152,"line":340},[908],{"type":65,"tag":150,"props":909,"children":910},{"style":157},[911],{"type":71,"value":912},"# Add from AI Elements registry\n",{"type":65,"tag":150,"props":914,"children":916},{"class":152,"line":915},12,[917,921,925,929],{"type":65,"tag":150,"props":918,"children":919},{"style":167},[920],{"type":71,"value":170},{"type":65,"tag":150,"props":922,"children":923},{"style":173},[924],{"type":71,"value":176},{"type":65,"tag":150,"props":926,"children":927},{"style":173},[928],{"type":71,"value":792},{"type":65,"tag":150,"props":930,"children":931},{"style":173},[932],{"type":71,"value":933}," https:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry\u002Fall.json\n",{"type":65,"tag":73,"props":935,"children":936},{},[937],{"type":71,"value":437},{"type":65,"tag":439,"props":939,"children":940},{},[941,952,963,974,985,996],{"type":65,"tag":443,"props":942,"children":943},{},[944,950],{"type":65,"tag":122,"props":945,"children":947},{"className":946},[],[948],{"type":71,"value":949},"-o, --overwrite",{"type":71,"value":951}," — Overwrite existing files",{"type":65,"tag":443,"props":953,"children":954},{},[955,961],{"type":65,"tag":122,"props":956,"children":958},{"className":957},[],[959],{"type":71,"value":960},"-p, --path",{"type":71,"value":962}," — Custom install path",{"type":65,"tag":443,"props":964,"children":965},{},[966,972],{"type":65,"tag":122,"props":967,"children":969},{"className":968},[],[970],{"type":71,"value":971},"-a, --all",{"type":71,"value":973}," — Install all components",{"type":65,"tag":443,"props":975,"children":976},{},[977,983],{"type":65,"tag":122,"props":978,"children":980},{"className":979},[],[981],{"type":71,"value":982},"--dry-run",{"type":71,"value":984}," — Preview what will be added without writing files",{"type":65,"tag":443,"props":986,"children":987},{},[988,994],{"type":65,"tag":122,"props":989,"children":991},{"className":990},[],[992],{"type":71,"value":993},"--diff",{"type":71,"value":995}," — Show diff of changes when updating existing components",{"type":65,"tag":443,"props":997,"children":998},{},[999,1005],{"type":65,"tag":122,"props":1000,"children":1002},{"className":1001},[],[1003],{"type":71,"value":1004},"--view",{"type":71,"value":1006}," — Display a registry item's source code inline",{"type":65,"tag":105,"props":1008,"children":1010},{"id":1009},"search-list",[1011],{"type":71,"value":1012},"Search & List",{"type":65,"tag":139,"props":1014,"children":1016},{"className":141,"code":1015,"language":143,"meta":144,"style":144},"npx shadcn@latest search button\nnpx shadcn@latest list @v0\n",[1017],{"type":65,"tag":122,"props":1018,"children":1019},{"__ignoreMap":144},[1020,1041],{"type":65,"tag":150,"props":1021,"children":1022},{"class":152,"line":153},[1023,1027,1031,1036],{"type":65,"tag":150,"props":1024,"children":1025},{"style":167},[1026],{"type":71,"value":170},{"type":65,"tag":150,"props":1028,"children":1029},{"style":173},[1030],{"type":71,"value":176},{"type":65,"tag":150,"props":1032,"children":1033},{"style":173},[1034],{"type":71,"value":1035}," search",{"type":65,"tag":150,"props":1037,"children":1038},{"style":173},[1039],{"type":71,"value":1040}," button\n",{"type":65,"tag":150,"props":1042,"children":1043},{"class":152,"line":163},[1044,1048,1052,1057],{"type":65,"tag":150,"props":1045,"children":1046},{"style":167},[1047],{"type":71,"value":170},{"type":65,"tag":150,"props":1049,"children":1050},{"style":173},[1051],{"type":71,"value":176},{"type":65,"tag":150,"props":1053,"children":1054},{"style":173},[1055],{"type":71,"value":1056}," list",{"type":65,"tag":150,"props":1058,"children":1059},{"style":173},[1060],{"type":71,"value":1061}," @v0\n",{"type":65,"tag":105,"props":1063,"children":1065},{"id":1064},"build-custom-registry",[1066],{"type":71,"value":1067},"Build (Custom Registry)",{"type":65,"tag":139,"props":1069,"children":1071},{"className":141,"code":1070,"language":143,"meta":144,"style":144},"npx shadcn@latest build\nnpx shadcn@latest build .\u002Fregistry.json -o .\u002Fpublic\u002Fr\n",[1072],{"type":65,"tag":122,"props":1073,"children":1074},{"__ignoreMap":144},[1075,1091],{"type":65,"tag":150,"props":1076,"children":1077},{"class":152,"line":153},[1078,1082,1086],{"type":65,"tag":150,"props":1079,"children":1080},{"style":167},[1081],{"type":71,"value":170},{"type":65,"tag":150,"props":1083,"children":1084},{"style":173},[1085],{"type":71,"value":176},{"type":65,"tag":150,"props":1087,"children":1088},{"style":173},[1089],{"type":71,"value":1090}," build\n",{"type":65,"tag":150,"props":1092,"children":1093},{"class":152,"line":163},[1094,1098,1102,1107,1112,1117],{"type":65,"tag":150,"props":1095,"children":1096},{"style":167},[1097],{"type":71,"value":170},{"type":65,"tag":150,"props":1099,"children":1100},{"style":173},[1101],{"type":71,"value":176},{"type":65,"tag":150,"props":1103,"children":1104},{"style":173},[1105],{"type":71,"value":1106}," build",{"type":65,"tag":150,"props":1108,"children":1109},{"style":173},[1110],{"type":71,"value":1111}," .\u002Fregistry.json",{"type":65,"tag":150,"props":1113,"children":1114},{"style":173},[1115],{"type":71,"value":1116}," -o",{"type":65,"tag":150,"props":1118,"children":1119},{"style":173},[1120],{"type":71,"value":1121}," .\u002Fpublic\u002Fr\n",{"type":65,"tag":105,"props":1123,"children":1125},{"id":1124},"view-info-docs-cli-v4",[1126],{"type":71,"value":1127},"View, Info & Docs (CLI v4)",{"type":65,"tag":139,"props":1129,"children":1131},{"className":141,"code":1130,"language":143,"meta":144,"style":144},"# View a registry item's source before installing\nnpx shadcn@latest view button\n\n# Show project diagnostics — config, installed components, dependencies\nnpx shadcn@latest info\n\n# Get docs, code, and examples for any component (agent-friendly output)\nnpx shadcn@latest docs button\nnpx shadcn@latest docs dialog\n",[1132],{"type":65,"tag":122,"props":1133,"children":1134},{"__ignoreMap":144},[1135,1143,1163,1170,1178,1194,1201,1209,1229],{"type":65,"tag":150,"props":1136,"children":1137},{"class":152,"line":153},[1138],{"type":65,"tag":150,"props":1139,"children":1140},{"style":157},[1141],{"type":71,"value":1142},"# View a registry item's source before installing\n",{"type":65,"tag":150,"props":1144,"children":1145},{"class":152,"line":163},[1146,1150,1154,1159],{"type":65,"tag":150,"props":1147,"children":1148},{"style":167},[1149],{"type":71,"value":170},{"type":65,"tag":150,"props":1151,"children":1152},{"style":173},[1153],{"type":71,"value":176},{"type":65,"tag":150,"props":1155,"children":1156},{"style":173},[1157],{"type":71,"value":1158}," view",{"type":65,"tag":150,"props":1160,"children":1161},{"style":173},[1162],{"type":71,"value":1040},{"type":65,"tag":150,"props":1164,"children":1165},{"class":152,"line":189},[1166],{"type":65,"tag":150,"props":1167,"children":1168},{"emptyLinePlaceholder":193},[1169],{"type":71,"value":196},{"type":65,"tag":150,"props":1171,"children":1172},{"class":152,"line":199},[1173],{"type":65,"tag":150,"props":1174,"children":1175},{"style":157},[1176],{"type":71,"value":1177},"# Show project diagnostics — config, installed components, dependencies\n",{"type":65,"tag":150,"props":1179,"children":1180},{"class":152,"line":208},[1181,1185,1189],{"type":65,"tag":150,"props":1182,"children":1183},{"style":167},[1184],{"type":71,"value":170},{"type":65,"tag":150,"props":1186,"children":1187},{"style":173},[1188],{"type":71,"value":176},{"type":65,"tag":150,"props":1190,"children":1191},{"style":173},[1192],{"type":71,"value":1193}," info\n",{"type":65,"tag":150,"props":1195,"children":1196},{"class":152,"line":42},[1197],{"type":65,"tag":150,"props":1198,"children":1199},{"emptyLinePlaceholder":193},[1200],{"type":71,"value":196},{"type":65,"tag":150,"props":1202,"children":1203},{"class":152,"line":263},[1204],{"type":65,"tag":150,"props":1205,"children":1206},{"style":157},[1207],{"type":71,"value":1208},"# Get docs, code, and examples for any component (agent-friendly output)\n",{"type":65,"tag":150,"props":1210,"children":1211},{"class":152,"line":272},[1212,1216,1220,1225],{"type":65,"tag":150,"props":1213,"children":1214},{"style":167},[1215],{"type":71,"value":170},{"type":65,"tag":150,"props":1217,"children":1218},{"style":173},[1219],{"type":71,"value":176},{"type":65,"tag":150,"props":1221,"children":1222},{"style":173},[1223],{"type":71,"value":1224}," docs",{"type":65,"tag":150,"props":1226,"children":1227},{"style":173},[1228],{"type":71,"value":1040},{"type":65,"tag":150,"props":1230,"children":1231},{"class":152,"line":303},[1232,1236,1240,1244],{"type":65,"tag":150,"props":1233,"children":1234},{"style":167},[1235],{"type":71,"value":170},{"type":65,"tag":150,"props":1237,"children":1238},{"style":173},[1239],{"type":71,"value":176},{"type":65,"tag":150,"props":1241,"children":1242},{"style":173},[1243],{"type":71,"value":1224},{"type":65,"tag":150,"props":1245,"children":1246},{"style":173},[1247],{"type":71,"value":1248}," dialog\n",{"type":65,"tag":348,"props":1250,"children":1251},{},[1252],{"type":65,"tag":73,"props":1253,"children":1254},{},[1255,1264],{"type":65,"tag":91,"props":1256,"children":1257},{},[1258],{"type":65,"tag":122,"props":1259,"children":1261},{"className":1260},[],[1262],{"type":71,"value":1263},"shadcn docs",{"type":71,"value":1265}," gives coding agents the context to use primitives correctly — returns code examples, API reference, and usage patterns inline.",{"type":65,"tag":105,"props":1267,"children":1269},{"id":1268},"migrate",[1270],{"type":71,"value":1271},"Migrate",{"type":65,"tag":139,"props":1273,"children":1275},{"className":141,"code":1274,"language":143,"meta":144,"style":144},"npx shadcn@latest migrate rtl    # RTL support migration\nnpx shadcn@latest migrate radix  # Migrate to unified radix-ui package\nnpx shadcn@latest migrate icons  # Icon library changes\n\n# Migrate components outside the default ui directory\nnpx shadcn@latest migrate radix src\u002Fcomponents\u002Fcustom\n",[1276],{"type":65,"tag":122,"props":1277,"children":1278},{"__ignoreMap":144},[1279,1305,1330,1355,1362,1370],{"type":65,"tag":150,"props":1280,"children":1281},{"class":152,"line":153},[1282,1286,1290,1295,1300],{"type":65,"tag":150,"props":1283,"children":1284},{"style":167},[1285],{"type":71,"value":170},{"type":65,"tag":150,"props":1287,"children":1288},{"style":173},[1289],{"type":71,"value":176},{"type":65,"tag":150,"props":1291,"children":1292},{"style":173},[1293],{"type":71,"value":1294}," migrate",{"type":65,"tag":150,"props":1296,"children":1297},{"style":173},[1298],{"type":71,"value":1299}," rtl",{"type":65,"tag":150,"props":1301,"children":1302},{"style":157},[1303],{"type":71,"value":1304},"    # RTL support migration\n",{"type":65,"tag":150,"props":1306,"children":1307},{"class":152,"line":163},[1308,1312,1316,1320,1325],{"type":65,"tag":150,"props":1309,"children":1310},{"style":167},[1311],{"type":71,"value":170},{"type":65,"tag":150,"props":1313,"children":1314},{"style":173},[1315],{"type":71,"value":176},{"type":65,"tag":150,"props":1317,"children":1318},{"style":173},[1319],{"type":71,"value":1294},{"type":65,"tag":150,"props":1321,"children":1322},{"style":173},[1323],{"type":71,"value":1324}," radix",{"type":65,"tag":150,"props":1326,"children":1327},{"style":157},[1328],{"type":71,"value":1329},"  # Migrate to unified radix-ui package\n",{"type":65,"tag":150,"props":1331,"children":1332},{"class":152,"line":189},[1333,1337,1341,1345,1350],{"type":65,"tag":150,"props":1334,"children":1335},{"style":167},[1336],{"type":71,"value":170},{"type":65,"tag":150,"props":1338,"children":1339},{"style":173},[1340],{"type":71,"value":176},{"type":65,"tag":150,"props":1342,"children":1343},{"style":173},[1344],{"type":71,"value":1294},{"type":65,"tag":150,"props":1346,"children":1347},{"style":173},[1348],{"type":71,"value":1349}," icons",{"type":65,"tag":150,"props":1351,"children":1352},{"style":157},[1353],{"type":71,"value":1354},"  # Icon library changes\n",{"type":65,"tag":150,"props":1356,"children":1357},{"class":152,"line":199},[1358],{"type":65,"tag":150,"props":1359,"children":1360},{"emptyLinePlaceholder":193},[1361],{"type":71,"value":196},{"type":65,"tag":150,"props":1363,"children":1364},{"class":152,"line":208},[1365],{"type":65,"tag":150,"props":1366,"children":1367},{"style":157},[1368],{"type":71,"value":1369},"# Migrate components outside the default ui directory\n",{"type":65,"tag":150,"props":1371,"children":1372},{"class":152,"line":42},[1373,1377,1381,1385,1389],{"type":65,"tag":150,"props":1374,"children":1375},{"style":167},[1376],{"type":71,"value":170},{"type":65,"tag":150,"props":1378,"children":1379},{"style":173},[1380],{"type":71,"value":176},{"type":65,"tag":150,"props":1382,"children":1383},{"style":173},[1384],{"type":71,"value":1294},{"type":65,"tag":150,"props":1386,"children":1387},{"style":173},[1388],{"type":71,"value":1324},{"type":65,"tag":150,"props":1390,"children":1391},{"style":173},[1392],{"type":71,"value":1393}," src\u002Fcomponents\u002Fcustom\n",{"type":65,"tag":79,"props":1395,"children":1397},{"id":1396},"shadcnskills-cli-v4",[1398],{"type":71,"value":1399},"shadcn\u002Fskills (CLI v4)",{"type":65,"tag":73,"props":1401,"children":1402},{},[1403],{"type":71,"value":1404},"shadcn\u002Fskills gives coding agents the context they need to work with components and registries correctly. It covers both Radix and Base UI primitives, updated APIs, component patterns, and registry workflows. The skill knows how to use the CLI, when to invoke it, and which flags to pass — so agents produce code that matches your design system.",{"type":65,"tag":73,"props":1406,"children":1407},{},[1408,1410],{"type":71,"value":1409},"Install: ",{"type":65,"tag":122,"props":1411,"children":1413},{"className":1412},[],[1414],{"type":71,"value":1415},"pnpm dlx skills add shadcn\u002Fui",{"type":65,"tag":79,"props":1417,"children":1419},{"id":1418},"unified-radix-ui-package-february-2026",[1420],{"type":71,"value":1421},"Unified Radix UI Package (February 2026)",{"type":65,"tag":73,"props":1423,"children":1424},{},[1425,1427,1433,1435,1441,1443,1449],{"type":71,"value":1426},"The ",{"type":65,"tag":122,"props":1428,"children":1430},{"className":1429},[],[1431],{"type":71,"value":1432},"new-york",{"type":71,"value":1434}," style now uses a single ",{"type":65,"tag":122,"props":1436,"children":1438},{"className":1437},[],[1439],{"type":71,"value":1440},"radix-ui",{"type":71,"value":1442}," package instead of individual ",{"type":65,"tag":122,"props":1444,"children":1446},{"className":1445},[],[1447],{"type":71,"value":1448},"@radix-ui\u002Freact-*",{"type":71,"value":1450}," packages:",{"type":65,"tag":139,"props":1452,"children":1456},{"className":1453,"code":1454,"language":1455,"meta":144,"style":144},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F OLD — individual packages\nimport * as DialogPrimitive from \"@radix-ui\u002Freact-dialog\"\n\n\u002F\u002F NEW — unified package\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n","tsx",[1457],{"type":65,"tag":122,"props":1458,"children":1459},{"__ignoreMap":144},[1460,1468,1512,1519,1527],{"type":65,"tag":150,"props":1461,"children":1462},{"class":152,"line":153},[1463],{"type":65,"tag":150,"props":1464,"children":1465},{"style":157},[1466],{"type":71,"value":1467},"\u002F\u002F OLD — individual packages\n",{"type":65,"tag":150,"props":1469,"children":1470},{"class":152,"line":163},[1471,1477,1482,1487,1492,1497,1502,1507],{"type":65,"tag":150,"props":1472,"children":1474},{"style":1473},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[1475],{"type":71,"value":1476},"import",{"type":65,"tag":150,"props":1478,"children":1479},{"style":229},[1480],{"type":71,"value":1481}," *",{"type":65,"tag":150,"props":1483,"children":1484},{"style":1473},[1485],{"type":71,"value":1486}," as",{"type":65,"tag":150,"props":1488,"children":1489},{"style":240},[1490],{"type":71,"value":1491}," DialogPrimitive ",{"type":65,"tag":150,"props":1493,"children":1494},{"style":1473},[1495],{"type":71,"value":1496},"from",{"type":65,"tag":150,"props":1498,"children":1499},{"style":229},[1500],{"type":71,"value":1501}," \"",{"type":65,"tag":150,"props":1503,"children":1504},{"style":173},[1505],{"type":71,"value":1506},"@radix-ui\u002Freact-dialog",{"type":65,"tag":150,"props":1508,"children":1509},{"style":229},[1510],{"type":71,"value":1511},"\"\n",{"type":65,"tag":150,"props":1513,"children":1514},{"class":152,"line":189},[1515],{"type":65,"tag":150,"props":1516,"children":1517},{"emptyLinePlaceholder":193},[1518],{"type":71,"value":196},{"type":65,"tag":150,"props":1520,"children":1521},{"class":152,"line":199},[1522],{"type":65,"tag":150,"props":1523,"children":1524},{"style":157},[1525],{"type":71,"value":1526},"\u002F\u002F NEW — unified package\n",{"type":65,"tag":150,"props":1528,"children":1529},{"class":152,"line":208},[1530,1534,1539,1544,1548,1553,1558,1563,1567,1571],{"type":65,"tag":150,"props":1531,"children":1532},{"style":1473},[1533],{"type":71,"value":1476},{"type":65,"tag":150,"props":1535,"children":1536},{"style":229},[1537],{"type":71,"value":1538}," {",{"type":65,"tag":150,"props":1540,"children":1541},{"style":240},[1542],{"type":71,"value":1543}," Dialog",{"type":65,"tag":150,"props":1545,"children":1546},{"style":1473},[1547],{"type":71,"value":1486},{"type":65,"tag":150,"props":1549,"children":1550},{"style":240},[1551],{"type":71,"value":1552}," DialogPrimitive",{"type":65,"tag":150,"props":1554,"children":1555},{"style":229},[1556],{"type":71,"value":1557}," }",{"type":65,"tag":150,"props":1559,"children":1560},{"style":1473},[1561],{"type":71,"value":1562}," from",{"type":65,"tag":150,"props":1564,"children":1565},{"style":229},[1566],{"type":71,"value":1501},{"type":65,"tag":150,"props":1568,"children":1569},{"style":173},[1570],{"type":71,"value":1440},{"type":65,"tag":150,"props":1572,"children":1573},{"style":229},[1574],{"type":71,"value":1511},{"type":65,"tag":73,"props":1576,"children":1577},{},[1578,1580,1586,1588,1593,1595,1601],{"type":71,"value":1579},"To migrate existing projects: ",{"type":65,"tag":122,"props":1581,"children":1583},{"className":1582},[],[1584],{"type":71,"value":1585},"npx shadcn@latest migrate radix",{"type":71,"value":1587},". After migration, remove unused ",{"type":65,"tag":122,"props":1589,"children":1591},{"className":1590},[],[1592],{"type":71,"value":1448},{"type":71,"value":1594}," packages from ",{"type":65,"tag":122,"props":1596,"children":1598},{"className":1597},[],[1599],{"type":71,"value":1600},"package.json",{"type":71,"value":1602},".",{"type":65,"tag":79,"props":1604,"children":1606},{"id":1605},"base-ui-support-january-2026",[1607],{"type":71,"value":1608},"Base UI Support (January 2026)",{"type":65,"tag":73,"props":1610,"children":1611},{},[1612,1614,1619],{"type":71,"value":1613},"shadcn\u002Fui now supports ",{"type":65,"tag":91,"props":1615,"children":1616},{},[1617],{"type":71,"value":1618},"Base UI",{"type":71,"value":1620}," as an alternative to Radix UI for the underlying primitive library. Components look and behave the same way regardless of which library you choose — only the underlying implementation changes.",{"type":65,"tag":73,"props":1622,"children":1623},{},[1624,1626],{"type":71,"value":1625},"Choose during init: ",{"type":65,"tag":122,"props":1627,"children":1629},{"className":1628},[],[1630],{"type":71,"value":1631},"npx shadcn@latest init --base base-ui",{"type":65,"tag":73,"props":1633,"children":1634},{},[1635],{"type":71,"value":1636},"The CLI pulls the correct component variant based on your project configuration automatically.",{"type":65,"tag":79,"props":1638,"children":1640},{"id":1639},"configuration-componentsjson",[1641],{"type":71,"value":1642},"Configuration (components.json)",{"type":65,"tag":73,"props":1644,"children":1645},{},[1646,1647,1652],{"type":71,"value":1426},{"type":65,"tag":122,"props":1648,"children":1650},{"className":1649},[],[1651],{"type":71,"value":47},{"type":71,"value":1653}," file configures how shadcn\u002Fui works in your project:",{"type":65,"tag":139,"props":1655,"children":1659},{"className":1656,"code":1657,"language":1658,"meta":144,"style":144},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"$schema\": \"https:\u002F\u002Fui.shadcn.com\u002Fschema.json\",\n  \"style\": \"new-york\",\n  \"rsc\": true,\n  \"tsx\": true,\n  \"tailwind\": {\n    \"config\": \"tailwind.config.ts\",\n    \"css\": \"src\u002Fapp\u002Fglobals.css\",\n    \"baseColor\": \"zinc\",  \u002F\u002F Options: gray, neutral, slate, stone, zinc, mauve, olive, mist, taupe\n    \"cssVariables\": true\n  },\n  \"aliases\": {\n    \"components\": \"@\u002Fcomponents\",\n    \"utils\": \"@\u002Flib\u002Futils\",\n    \"ui\": \"@\u002Fcomponents\u002Fui\",\n    \"lib\": \"@\u002Flib\",\n    \"hooks\": \"@\u002Fhooks\"\n  },\n  \"registries\": {\n    \"v0\": {\n      \"url\": \"https:\u002F\u002Fv0.dev\u002Fchat\u002Fapi\u002Fregistry\"\n    },\n    \"ai-elements\": {\n      \"url\": \"https:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry\"\n    }\n  }\n}\n","json",[1660],{"type":65,"tag":122,"props":1661,"children":1662},{"__ignoreMap":144},[1663,1671,1713,1749,1774,1797,1822,1860,1897,1940,1965,1973,1997,2035,2073,2111,2149,2183,2191,2216,2241,2277,2286,2311,2344,2353,2362],{"type":65,"tag":150,"props":1664,"children":1665},{"class":152,"line":153},[1666],{"type":65,"tag":150,"props":1667,"children":1668},{"style":229},[1669],{"type":71,"value":1670},"{\n",{"type":65,"tag":150,"props":1672,"children":1673},{"class":152,"line":163},[1674,1679,1685,1690,1695,1699,1704,1708],{"type":65,"tag":150,"props":1675,"children":1676},{"style":229},[1677],{"type":71,"value":1678},"  \"",{"type":65,"tag":150,"props":1680,"children":1682},{"style":1681},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1683],{"type":71,"value":1684},"$schema",{"type":65,"tag":150,"props":1686,"children":1687},{"style":229},[1688],{"type":71,"value":1689},"\"",{"type":65,"tag":150,"props":1691,"children":1692},{"style":229},[1693],{"type":71,"value":1694},":",{"type":65,"tag":150,"props":1696,"children":1697},{"style":229},[1698],{"type":71,"value":1501},{"type":65,"tag":150,"props":1700,"children":1701},{"style":173},[1702],{"type":71,"value":1703},"https:\u002F\u002Fui.shadcn.com\u002Fschema.json",{"type":65,"tag":150,"props":1705,"children":1706},{"style":229},[1707],{"type":71,"value":1689},{"type":65,"tag":150,"props":1709,"children":1710},{"style":229},[1711],{"type":71,"value":1712},",\n",{"type":65,"tag":150,"props":1714,"children":1715},{"class":152,"line":189},[1716,1720,1725,1729,1733,1737,1741,1745],{"type":65,"tag":150,"props":1717,"children":1718},{"style":229},[1719],{"type":71,"value":1678},{"type":65,"tag":150,"props":1721,"children":1722},{"style":1681},[1723],{"type":71,"value":1724},"style",{"type":65,"tag":150,"props":1726,"children":1727},{"style":229},[1728],{"type":71,"value":1689},{"type":65,"tag":150,"props":1730,"children":1731},{"style":229},[1732],{"type":71,"value":1694},{"type":65,"tag":150,"props":1734,"children":1735},{"style":229},[1736],{"type":71,"value":1501},{"type":65,"tag":150,"props":1738,"children":1739},{"style":173},[1740],{"type":71,"value":1432},{"type":65,"tag":150,"props":1742,"children":1743},{"style":229},[1744],{"type":71,"value":1689},{"type":65,"tag":150,"props":1746,"children":1747},{"style":229},[1748],{"type":71,"value":1712},{"type":65,"tag":150,"props":1750,"children":1751},{"class":152,"line":199},[1752,1756,1761,1765,1769],{"type":65,"tag":150,"props":1753,"children":1754},{"style":229},[1755],{"type":71,"value":1678},{"type":65,"tag":150,"props":1757,"children":1758},{"style":1681},[1759],{"type":71,"value":1760},"rsc",{"type":65,"tag":150,"props":1762,"children":1763},{"style":229},[1764],{"type":71,"value":1689},{"type":65,"tag":150,"props":1766,"children":1767},{"style":229},[1768],{"type":71,"value":1694},{"type":65,"tag":150,"props":1770,"children":1771},{"style":229},[1772],{"type":71,"value":1773}," true,\n",{"type":65,"tag":150,"props":1775,"children":1776},{"class":152,"line":208},[1777,1781,1785,1789,1793],{"type":65,"tag":150,"props":1778,"children":1779},{"style":229},[1780],{"type":71,"value":1678},{"type":65,"tag":150,"props":1782,"children":1783},{"style":1681},[1784],{"type":71,"value":1455},{"type":65,"tag":150,"props":1786,"children":1787},{"style":229},[1788],{"type":71,"value":1689},{"type":65,"tag":150,"props":1790,"children":1791},{"style":229},[1792],{"type":71,"value":1694},{"type":65,"tag":150,"props":1794,"children":1795},{"style":229},[1796],{"type":71,"value":1773},{"type":65,"tag":150,"props":1798,"children":1799},{"class":152,"line":42},[1800,1804,1809,1813,1817],{"type":65,"tag":150,"props":1801,"children":1802},{"style":229},[1803],{"type":71,"value":1678},{"type":65,"tag":150,"props":1805,"children":1806},{"style":1681},[1807],{"type":71,"value":1808},"tailwind",{"type":65,"tag":150,"props":1810,"children":1811},{"style":229},[1812],{"type":71,"value":1689},{"type":65,"tag":150,"props":1814,"children":1815},{"style":229},[1816],{"type":71,"value":1694},{"type":65,"tag":150,"props":1818,"children":1819},{"style":229},[1820],{"type":71,"value":1821}," {\n",{"type":65,"tag":150,"props":1823,"children":1824},{"class":152,"line":263},[1825,1830,1835,1839,1843,1847,1852,1856],{"type":65,"tag":150,"props":1826,"children":1827},{"style":229},[1828],{"type":71,"value":1829},"    \"",{"type":65,"tag":150,"props":1831,"children":1832},{"style":167},[1833],{"type":71,"value":1834},"config",{"type":65,"tag":150,"props":1836,"children":1837},{"style":229},[1838],{"type":71,"value":1689},{"type":65,"tag":150,"props":1840,"children":1841},{"style":229},[1842],{"type":71,"value":1694},{"type":65,"tag":150,"props":1844,"children":1845},{"style":229},[1846],{"type":71,"value":1501},{"type":65,"tag":150,"props":1848,"children":1849},{"style":173},[1850],{"type":71,"value":1851},"tailwind.config.ts",{"type":65,"tag":150,"props":1853,"children":1854},{"style":229},[1855],{"type":71,"value":1689},{"type":65,"tag":150,"props":1857,"children":1858},{"style":229},[1859],{"type":71,"value":1712},{"type":65,"tag":150,"props":1861,"children":1862},{"class":152,"line":272},[1863,1867,1872,1876,1880,1884,1889,1893],{"type":65,"tag":150,"props":1864,"children":1865},{"style":229},[1866],{"type":71,"value":1829},{"type":65,"tag":150,"props":1868,"children":1869},{"style":167},[1870],{"type":71,"value":1871},"css",{"type":65,"tag":150,"props":1873,"children":1874},{"style":229},[1875],{"type":71,"value":1689},{"type":65,"tag":150,"props":1877,"children":1878},{"style":229},[1879],{"type":71,"value":1694},{"type":65,"tag":150,"props":1881,"children":1882},{"style":229},[1883],{"type":71,"value":1501},{"type":65,"tag":150,"props":1885,"children":1886},{"style":173},[1887],{"type":71,"value":1888},"src\u002Fapp\u002Fglobals.css",{"type":65,"tag":150,"props":1890,"children":1891},{"style":229},[1892],{"type":71,"value":1689},{"type":65,"tag":150,"props":1894,"children":1895},{"style":229},[1896],{"type":71,"value":1712},{"type":65,"tag":150,"props":1898,"children":1899},{"class":152,"line":303},[1900,1904,1909,1913,1917,1921,1926,1930,1935],{"type":65,"tag":150,"props":1901,"children":1902},{"style":229},[1903],{"type":71,"value":1829},{"type":65,"tag":150,"props":1905,"children":1906},{"style":167},[1907],{"type":71,"value":1908},"baseColor",{"type":65,"tag":150,"props":1910,"children":1911},{"style":229},[1912],{"type":71,"value":1689},{"type":65,"tag":150,"props":1914,"children":1915},{"style":229},[1916],{"type":71,"value":1694},{"type":65,"tag":150,"props":1918,"children":1919},{"style":229},[1920],{"type":71,"value":1501},{"type":65,"tag":150,"props":1922,"children":1923},{"style":173},[1924],{"type":71,"value":1925},"zinc",{"type":65,"tag":150,"props":1927,"children":1928},{"style":229},[1929],{"type":71,"value":1689},{"type":65,"tag":150,"props":1931,"children":1932},{"style":229},[1933],{"type":71,"value":1934},",",{"type":65,"tag":150,"props":1936,"children":1937},{"style":157},[1938],{"type":71,"value":1939},"  \u002F\u002F Options: gray, neutral, slate, stone, zinc, mauve, olive, mist, taupe\n",{"type":65,"tag":150,"props":1941,"children":1942},{"class":152,"line":332},[1943,1947,1952,1956,1960],{"type":65,"tag":150,"props":1944,"children":1945},{"style":229},[1946],{"type":71,"value":1829},{"type":65,"tag":150,"props":1948,"children":1949},{"style":167},[1950],{"type":71,"value":1951},"cssVariables",{"type":65,"tag":150,"props":1953,"children":1954},{"style":229},[1955],{"type":71,"value":1689},{"type":65,"tag":150,"props":1957,"children":1958},{"style":229},[1959],{"type":71,"value":1694},{"type":65,"tag":150,"props":1961,"children":1962},{"style":229},[1963],{"type":71,"value":1964}," true\n",{"type":65,"tag":150,"props":1966,"children":1967},{"class":152,"line":340},[1968],{"type":65,"tag":150,"props":1969,"children":1970},{"style":229},[1971],{"type":71,"value":1972},"  },\n",{"type":65,"tag":150,"props":1974,"children":1975},{"class":152,"line":915},[1976,1980,1985,1989,1993],{"type":65,"tag":150,"props":1977,"children":1978},{"style":229},[1979],{"type":71,"value":1678},{"type":65,"tag":150,"props":1981,"children":1982},{"style":1681},[1983],{"type":71,"value":1984},"aliases",{"type":65,"tag":150,"props":1986,"children":1987},{"style":229},[1988],{"type":71,"value":1689},{"type":65,"tag":150,"props":1990,"children":1991},{"style":229},[1992],{"type":71,"value":1694},{"type":65,"tag":150,"props":1994,"children":1995},{"style":229},[1996],{"type":71,"value":1821},{"type":65,"tag":150,"props":1998,"children":2000},{"class":152,"line":1999},13,[2001,2005,2010,2014,2018,2022,2027,2031],{"type":65,"tag":150,"props":2002,"children":2003},{"style":229},[2004],{"type":71,"value":1829},{"type":65,"tag":150,"props":2006,"children":2007},{"style":167},[2008],{"type":71,"value":2009},"components",{"type":65,"tag":150,"props":2011,"children":2012},{"style":229},[2013],{"type":71,"value":1689},{"type":65,"tag":150,"props":2015,"children":2016},{"style":229},[2017],{"type":71,"value":1694},{"type":65,"tag":150,"props":2019,"children":2020},{"style":229},[2021],{"type":71,"value":1501},{"type":65,"tag":150,"props":2023,"children":2024},{"style":173},[2025],{"type":71,"value":2026},"@\u002Fcomponents",{"type":65,"tag":150,"props":2028,"children":2029},{"style":229},[2030],{"type":71,"value":1689},{"type":65,"tag":150,"props":2032,"children":2033},{"style":229},[2034],{"type":71,"value":1712},{"type":65,"tag":150,"props":2036,"children":2038},{"class":152,"line":2037},14,[2039,2043,2048,2052,2056,2060,2065,2069],{"type":65,"tag":150,"props":2040,"children":2041},{"style":229},[2042],{"type":71,"value":1829},{"type":65,"tag":150,"props":2044,"children":2045},{"style":167},[2046],{"type":71,"value":2047},"utils",{"type":65,"tag":150,"props":2049,"children":2050},{"style":229},[2051],{"type":71,"value":1689},{"type":65,"tag":150,"props":2053,"children":2054},{"style":229},[2055],{"type":71,"value":1694},{"type":65,"tag":150,"props":2057,"children":2058},{"style":229},[2059],{"type":71,"value":1501},{"type":65,"tag":150,"props":2061,"children":2062},{"style":173},[2063],{"type":71,"value":2064},"@\u002Flib\u002Futils",{"type":65,"tag":150,"props":2066,"children":2067},{"style":229},[2068],{"type":71,"value":1689},{"type":65,"tag":150,"props":2070,"children":2071},{"style":229},[2072],{"type":71,"value":1712},{"type":65,"tag":150,"props":2074,"children":2076},{"class":152,"line":2075},15,[2077,2081,2086,2090,2094,2098,2103,2107],{"type":65,"tag":150,"props":2078,"children":2079},{"style":229},[2080],{"type":71,"value":1829},{"type":65,"tag":150,"props":2082,"children":2083},{"style":167},[2084],{"type":71,"value":2085},"ui",{"type":65,"tag":150,"props":2087,"children":2088},{"style":229},[2089],{"type":71,"value":1689},{"type":65,"tag":150,"props":2091,"children":2092},{"style":229},[2093],{"type":71,"value":1694},{"type":65,"tag":150,"props":2095,"children":2096},{"style":229},[2097],{"type":71,"value":1501},{"type":65,"tag":150,"props":2099,"children":2100},{"style":173},[2101],{"type":71,"value":2102},"@\u002Fcomponents\u002Fui",{"type":65,"tag":150,"props":2104,"children":2105},{"style":229},[2106],{"type":71,"value":1689},{"type":65,"tag":150,"props":2108,"children":2109},{"style":229},[2110],{"type":71,"value":1712},{"type":65,"tag":150,"props":2112,"children":2114},{"class":152,"line":2113},16,[2115,2119,2124,2128,2132,2136,2141,2145],{"type":65,"tag":150,"props":2116,"children":2117},{"style":229},[2118],{"type":71,"value":1829},{"type":65,"tag":150,"props":2120,"children":2121},{"style":167},[2122],{"type":71,"value":2123},"lib",{"type":65,"tag":150,"props":2125,"children":2126},{"style":229},[2127],{"type":71,"value":1689},{"type":65,"tag":150,"props":2129,"children":2130},{"style":229},[2131],{"type":71,"value":1694},{"type":65,"tag":150,"props":2133,"children":2134},{"style":229},[2135],{"type":71,"value":1501},{"type":65,"tag":150,"props":2137,"children":2138},{"style":173},[2139],{"type":71,"value":2140},"@\u002Flib",{"type":65,"tag":150,"props":2142,"children":2143},{"style":229},[2144],{"type":71,"value":1689},{"type":65,"tag":150,"props":2146,"children":2147},{"style":229},[2148],{"type":71,"value":1712},{"type":65,"tag":150,"props":2150,"children":2152},{"class":152,"line":2151},17,[2153,2157,2162,2166,2170,2174,2179],{"type":65,"tag":150,"props":2154,"children":2155},{"style":229},[2156],{"type":71,"value":1829},{"type":65,"tag":150,"props":2158,"children":2159},{"style":167},[2160],{"type":71,"value":2161},"hooks",{"type":65,"tag":150,"props":2163,"children":2164},{"style":229},[2165],{"type":71,"value":1689},{"type":65,"tag":150,"props":2167,"children":2168},{"style":229},[2169],{"type":71,"value":1694},{"type":65,"tag":150,"props":2171,"children":2172},{"style":229},[2173],{"type":71,"value":1501},{"type":65,"tag":150,"props":2175,"children":2176},{"style":173},[2177],{"type":71,"value":2178},"@\u002Fhooks",{"type":65,"tag":150,"props":2180,"children":2181},{"style":229},[2182],{"type":71,"value":1511},{"type":65,"tag":150,"props":2184,"children":2186},{"class":152,"line":2185},18,[2187],{"type":65,"tag":150,"props":2188,"children":2189},{"style":229},[2190],{"type":71,"value":1972},{"type":65,"tag":150,"props":2192,"children":2194},{"class":152,"line":2193},19,[2195,2199,2204,2208,2212],{"type":65,"tag":150,"props":2196,"children":2197},{"style":229},[2198],{"type":71,"value":1678},{"type":65,"tag":150,"props":2200,"children":2201},{"style":1681},[2202],{"type":71,"value":2203},"registries",{"type":65,"tag":150,"props":2205,"children":2206},{"style":229},[2207],{"type":71,"value":1689},{"type":65,"tag":150,"props":2209,"children":2210},{"style":229},[2211],{"type":71,"value":1694},{"type":65,"tag":150,"props":2213,"children":2214},{"style":229},[2215],{"type":71,"value":1821},{"type":65,"tag":150,"props":2217,"children":2219},{"class":152,"line":2218},20,[2220,2224,2229,2233,2237],{"type":65,"tag":150,"props":2221,"children":2222},{"style":229},[2223],{"type":71,"value":1829},{"type":65,"tag":150,"props":2225,"children":2226},{"style":167},[2227],{"type":71,"value":2228},"v0",{"type":65,"tag":150,"props":2230,"children":2231},{"style":229},[2232],{"type":71,"value":1689},{"type":65,"tag":150,"props":2234,"children":2235},{"style":229},[2236],{"type":71,"value":1694},{"type":65,"tag":150,"props":2238,"children":2239},{"style":229},[2240],{"type":71,"value":1821},{"type":65,"tag":150,"props":2242,"children":2244},{"class":152,"line":2243},21,[2245,2250,2256,2260,2264,2268,2273],{"type":65,"tag":150,"props":2246,"children":2247},{"style":229},[2248],{"type":71,"value":2249},"      \"",{"type":65,"tag":150,"props":2251,"children":2253},{"style":2252},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[2254],{"type":71,"value":2255},"url",{"type":65,"tag":150,"props":2257,"children":2258},{"style":229},[2259],{"type":71,"value":1689},{"type":65,"tag":150,"props":2261,"children":2262},{"style":229},[2263],{"type":71,"value":1694},{"type":65,"tag":150,"props":2265,"children":2266},{"style":229},[2267],{"type":71,"value":1501},{"type":65,"tag":150,"props":2269,"children":2270},{"style":173},[2271],{"type":71,"value":2272},"https:\u002F\u002Fv0.dev\u002Fchat\u002Fapi\u002Fregistry",{"type":65,"tag":150,"props":2274,"children":2275},{"style":229},[2276],{"type":71,"value":1511},{"type":65,"tag":150,"props":2278,"children":2280},{"class":152,"line":2279},22,[2281],{"type":65,"tag":150,"props":2282,"children":2283},{"style":229},[2284],{"type":71,"value":2285},"    },\n",{"type":65,"tag":150,"props":2287,"children":2289},{"class":152,"line":2288},23,[2290,2294,2299,2303,2307],{"type":65,"tag":150,"props":2291,"children":2292},{"style":229},[2293],{"type":71,"value":1829},{"type":65,"tag":150,"props":2295,"children":2296},{"style":167},[2297],{"type":71,"value":2298},"ai-elements",{"type":65,"tag":150,"props":2300,"children":2301},{"style":229},[2302],{"type":71,"value":1689},{"type":65,"tag":150,"props":2304,"children":2305},{"style":229},[2306],{"type":71,"value":1694},{"type":65,"tag":150,"props":2308,"children":2309},{"style":229},[2310],{"type":71,"value":1821},{"type":65,"tag":150,"props":2312,"children":2314},{"class":152,"line":2313},24,[2315,2319,2323,2327,2331,2335,2340],{"type":65,"tag":150,"props":2316,"children":2317},{"style":229},[2318],{"type":71,"value":2249},{"type":65,"tag":150,"props":2320,"children":2321},{"style":2252},[2322],{"type":71,"value":2255},{"type":65,"tag":150,"props":2324,"children":2325},{"style":229},[2326],{"type":71,"value":1689},{"type":65,"tag":150,"props":2328,"children":2329},{"style":229},[2330],{"type":71,"value":1694},{"type":65,"tag":150,"props":2332,"children":2333},{"style":229},[2334],{"type":71,"value":1501},{"type":65,"tag":150,"props":2336,"children":2337},{"style":173},[2338],{"type":71,"value":2339},"https:\u002F\u002Felements.ai-sdk.dev\u002Fapi\u002Fregistry",{"type":65,"tag":150,"props":2341,"children":2342},{"style":229},[2343],{"type":71,"value":1511},{"type":65,"tag":150,"props":2345,"children":2347},{"class":152,"line":2346},25,[2348],{"type":65,"tag":150,"props":2349,"children":2350},{"style":229},[2351],{"type":71,"value":2352},"    }\n",{"type":65,"tag":150,"props":2354,"children":2356},{"class":152,"line":2355},26,[2357],{"type":65,"tag":150,"props":2358,"children":2359},{"style":229},[2360],{"type":71,"value":2361},"  }\n",{"type":65,"tag":150,"props":2363,"children":2365},{"class":152,"line":2364},27,[2366],{"type":65,"tag":150,"props":2367,"children":2368},{"style":229},[2369],{"type":71,"value":2370},"}\n",{"type":65,"tag":105,"props":2372,"children":2374},{"id":2373},"namespaced-registries",[2375],{"type":71,"value":2376},"Namespaced Registries",{"type":65,"tag":73,"props":2378,"children":2379},{},[2380],{"type":71,"value":2381},"Configure multiple registries for your project:",{"type":65,"tag":139,"props":2383,"children":2385},{"className":1656,"code":2384,"language":1658,"meta":144,"style":144},"{\n  \"registries\": {\n    \"acme\": {\n      \"url\": \"https:\u002F\u002Facme.com\u002Fregistry\u002F{name}.json\"\n    },\n    \"private\": {\n      \"url\": \"https:\u002F\u002Finternal.company.com\u002Fregistry\u002F{name}.json\",\n      \"headers\": {\n        \"Authorization\": \"Bearer ${REGISTRY_TOKEN}\"\n      }\n    }\n  }\n}\n",[2386],{"type":65,"tag":122,"props":2387,"children":2388},{"__ignoreMap":144},[2389,2396,2419,2443,2475,2482,2506,2542,2566,2601,2609,2616,2623],{"type":65,"tag":150,"props":2390,"children":2391},{"class":152,"line":153},[2392],{"type":65,"tag":150,"props":2393,"children":2394},{"style":229},[2395],{"type":71,"value":1670},{"type":65,"tag":150,"props":2397,"children":2398},{"class":152,"line":163},[2399,2403,2407,2411,2415],{"type":65,"tag":150,"props":2400,"children":2401},{"style":229},[2402],{"type":71,"value":1678},{"type":65,"tag":150,"props":2404,"children":2405},{"style":1681},[2406],{"type":71,"value":2203},{"type":65,"tag":150,"props":2408,"children":2409},{"style":229},[2410],{"type":71,"value":1689},{"type":65,"tag":150,"props":2412,"children":2413},{"style":229},[2414],{"type":71,"value":1694},{"type":65,"tag":150,"props":2416,"children":2417},{"style":229},[2418],{"type":71,"value":1821},{"type":65,"tag":150,"props":2420,"children":2421},{"class":152,"line":189},[2422,2426,2431,2435,2439],{"type":65,"tag":150,"props":2423,"children":2424},{"style":229},[2425],{"type":71,"value":1829},{"type":65,"tag":150,"props":2427,"children":2428},{"style":167},[2429],{"type":71,"value":2430},"acme",{"type":65,"tag":150,"props":2432,"children":2433},{"style":229},[2434],{"type":71,"value":1689},{"type":65,"tag":150,"props":2436,"children":2437},{"style":229},[2438],{"type":71,"value":1694},{"type":65,"tag":150,"props":2440,"children":2441},{"style":229},[2442],{"type":71,"value":1821},{"type":65,"tag":150,"props":2444,"children":2445},{"class":152,"line":199},[2446,2450,2454,2458,2462,2466,2471],{"type":65,"tag":150,"props":2447,"children":2448},{"style":229},[2449],{"type":71,"value":2249},{"type":65,"tag":150,"props":2451,"children":2452},{"style":2252},[2453],{"type":71,"value":2255},{"type":65,"tag":150,"props":2455,"children":2456},{"style":229},[2457],{"type":71,"value":1689},{"type":65,"tag":150,"props":2459,"children":2460},{"style":229},[2461],{"type":71,"value":1694},{"type":65,"tag":150,"props":2463,"children":2464},{"style":229},[2465],{"type":71,"value":1501},{"type":65,"tag":150,"props":2467,"children":2468},{"style":173},[2469],{"type":71,"value":2470},"https:\u002F\u002Facme.com\u002Fregistry\u002F{name}.json",{"type":65,"tag":150,"props":2472,"children":2473},{"style":229},[2474],{"type":71,"value":1511},{"type":65,"tag":150,"props":2476,"children":2477},{"class":152,"line":208},[2478],{"type":65,"tag":150,"props":2479,"children":2480},{"style":229},[2481],{"type":71,"value":2285},{"type":65,"tag":150,"props":2483,"children":2484},{"class":152,"line":42},[2485,2489,2494,2498,2502],{"type":65,"tag":150,"props":2486,"children":2487},{"style":229},[2488],{"type":71,"value":1829},{"type":65,"tag":150,"props":2490,"children":2491},{"style":167},[2492],{"type":71,"value":2493},"private",{"type":65,"tag":150,"props":2495,"children":2496},{"style":229},[2497],{"type":71,"value":1689},{"type":65,"tag":150,"props":2499,"children":2500},{"style":229},[2501],{"type":71,"value":1694},{"type":65,"tag":150,"props":2503,"children":2504},{"style":229},[2505],{"type":71,"value":1821},{"type":65,"tag":150,"props":2507,"children":2508},{"class":152,"line":263},[2509,2513,2517,2521,2525,2529,2534,2538],{"type":65,"tag":150,"props":2510,"children":2511},{"style":229},[2512],{"type":71,"value":2249},{"type":65,"tag":150,"props":2514,"children":2515},{"style":2252},[2516],{"type":71,"value":2255},{"type":65,"tag":150,"props":2518,"children":2519},{"style":229},[2520],{"type":71,"value":1689},{"type":65,"tag":150,"props":2522,"children":2523},{"style":229},[2524],{"type":71,"value":1694},{"type":65,"tag":150,"props":2526,"children":2527},{"style":229},[2528],{"type":71,"value":1501},{"type":65,"tag":150,"props":2530,"children":2531},{"style":173},[2532],{"type":71,"value":2533},"https:\u002F\u002Finternal.company.com\u002Fregistry\u002F{name}.json",{"type":65,"tag":150,"props":2535,"children":2536},{"style":229},[2537],{"type":71,"value":1689},{"type":65,"tag":150,"props":2539,"children":2540},{"style":229},[2541],{"type":71,"value":1712},{"type":65,"tag":150,"props":2543,"children":2544},{"class":152,"line":272},[2545,2549,2554,2558,2562],{"type":65,"tag":150,"props":2546,"children":2547},{"style":229},[2548],{"type":71,"value":2249},{"type":65,"tag":150,"props":2550,"children":2551},{"style":2252},[2552],{"type":71,"value":2553},"headers",{"type":65,"tag":150,"props":2555,"children":2556},{"style":229},[2557],{"type":71,"value":1689},{"type":65,"tag":150,"props":2559,"children":2560},{"style":229},[2561],{"type":71,"value":1694},{"type":65,"tag":150,"props":2563,"children":2564},{"style":229},[2565],{"type":71,"value":1821},{"type":65,"tag":150,"props":2567,"children":2568},{"class":152,"line":303},[2569,2574,2580,2584,2588,2592,2597],{"type":65,"tag":150,"props":2570,"children":2571},{"style":229},[2572],{"type":71,"value":2573},"        \"",{"type":65,"tag":150,"props":2575,"children":2577},{"style":2576},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[2578],{"type":71,"value":2579},"Authorization",{"type":65,"tag":150,"props":2581,"children":2582},{"style":229},[2583],{"type":71,"value":1689},{"type":65,"tag":150,"props":2585,"children":2586},{"style":229},[2587],{"type":71,"value":1694},{"type":65,"tag":150,"props":2589,"children":2590},{"style":229},[2591],{"type":71,"value":1501},{"type":65,"tag":150,"props":2593,"children":2594},{"style":173},[2595],{"type":71,"value":2596},"Bearer ${REGISTRY_TOKEN}",{"type":65,"tag":150,"props":2598,"children":2599},{"style":229},[2600],{"type":71,"value":1511},{"type":65,"tag":150,"props":2602,"children":2603},{"class":152,"line":332},[2604],{"type":65,"tag":150,"props":2605,"children":2606},{"style":229},[2607],{"type":71,"value":2608},"      }\n",{"type":65,"tag":150,"props":2610,"children":2611},{"class":152,"line":340},[2612],{"type":65,"tag":150,"props":2613,"children":2614},{"style":229},[2615],{"type":71,"value":2352},{"type":65,"tag":150,"props":2617,"children":2618},{"class":152,"line":915},[2619],{"type":65,"tag":150,"props":2620,"children":2621},{"style":229},[2622],{"type":71,"value":2361},{"type":65,"tag":150,"props":2624,"children":2625},{"class":152,"line":1999},[2626],{"type":65,"tag":150,"props":2627,"children":2628},{"style":229},[2629],{"type":71,"value":2370},{"type":65,"tag":73,"props":2631,"children":2632},{},[2633],{"type":71,"value":2634},"Install using namespace syntax:",{"type":65,"tag":139,"props":2636,"children":2638},{"className":141,"code":2637,"language":143,"meta":144,"style":144},"npx shadcn@latest add @acme\u002Fheader @private\u002Fauth-form\n",[2639],{"type":65,"tag":122,"props":2640,"children":2641},{"__ignoreMap":144},[2642],{"type":65,"tag":150,"props":2643,"children":2644},{"class":152,"line":153},[2645,2649,2653,2657,2662],{"type":65,"tag":150,"props":2646,"children":2647},{"style":167},[2648],{"type":71,"value":170},{"type":65,"tag":150,"props":2650,"children":2651},{"style":173},[2652],{"type":71,"value":176},{"type":65,"tag":150,"props":2654,"children":2655},{"style":173},[2656],{"type":71,"value":792},{"type":65,"tag":150,"props":2658,"children":2659},{"style":173},[2660],{"type":71,"value":2661}," @acme\u002Fheader",{"type":65,"tag":150,"props":2663,"children":2664},{"style":173},[2665],{"type":71,"value":2666}," @private\u002Fauth-form\n",{"type":65,"tag":79,"props":2668,"children":2670},{"id":2669},"theming",[2671],{"type":71,"value":2672},"Theming",{"type":65,"tag":105,"props":2674,"children":2676},{"id":2675},"css-variables",[2677],{"type":71,"value":2678},"CSS Variables",{"type":65,"tag":73,"props":2680,"children":2681},{},[2682,2684,2690],{"type":71,"value":2683},"shadcn\u002Fui uses CSS custom properties for theming, defined in ",{"type":65,"tag":122,"props":2685,"children":2687},{"className":2686},[],[2688],{"type":71,"value":2689},"globals.css",{"type":71,"value":1694},{"type":65,"tag":139,"props":2692,"children":2695},{"className":2693,"code":2694,"language":1871,"meta":144,"style":144},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@theme inline {\n  --color-background: oklch(0.145 0 0);\n  --color-foreground: oklch(0.985 0 0);\n  --color-card: oklch(0.205 0 0);\n  --color-card-foreground: oklch(0.985 0 0);\n  --color-primary: oklch(0.488 0.243 264.376);\n  --color-primary-foreground: oklch(0.985 0 0);\n  --color-secondary: oklch(0.269 0 0);\n  --color-secondary-foreground: oklch(0.985 0 0);\n  --color-muted: oklch(0.269 0 0);\n  --color-muted-foreground: oklch(0.708 0 0);\n  --color-accent: oklch(0.269 0 0);\n  --color-accent-foreground: oklch(0.985 0 0);\n  --color-destructive: oklch(0.396 0.141 25.723);\n  --color-border: oklch(0.269 0 0);\n  --color-input: oklch(0.269 0 0);\n  --color-ring: oklch(0.488 0.243 264.376);\n  --radius: 0.625rem;\n  \u002F* CLI v4: radius tokens use multiplicative calc instead of additive *\u002F\n  --radius-xs: calc(var(--radius) * 0.5);\n  --radius-sm: calc(var(--radius) * 0.75);\n  --radius-md: calc(var(--radius) * 0.875);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) * 1.5);\n}\n",[2696],{"type":65,"tag":122,"props":2697,"children":2698},{"__ignoreMap":144},[2699,2716,2738,2759,2780,2800,2850,2870,2891,2911,2931,2952,2972,2992,3040,3060,3080,3124,3132,3140,3170,3199,3228,3236,3265],{"type":65,"tag":150,"props":2700,"children":2701},{"class":152,"line":153},[2702,2707,2712],{"type":65,"tag":150,"props":2703,"children":2704},{"style":1473},[2705],{"type":71,"value":2706},"@theme",{"type":65,"tag":150,"props":2708,"children":2709},{"style":240},[2710],{"type":71,"value":2711}," inline ",{"type":65,"tag":150,"props":2713,"children":2714},{"style":229},[2715],{"type":71,"value":1670},{"type":65,"tag":150,"props":2717,"children":2718},{"class":152,"line":163},[2719,2724,2728,2733],{"type":65,"tag":150,"props":2720,"children":2721},{"style":240},[2722],{"type":71,"value":2723},"  --color-background: oklch(0",{"type":65,"tag":150,"props":2725,"children":2726},{"style":229},[2727],{"type":71,"value":1602},{"type":65,"tag":150,"props":2729,"children":2730},{"style":167},[2731],{"type":71,"value":2732},"145",{"type":65,"tag":150,"props":2734,"children":2735},{"style":240},[2736],{"type":71,"value":2737}," 0 0);\n",{"type":65,"tag":150,"props":2739,"children":2740},{"class":152,"line":189},[2741,2746,2750,2755],{"type":65,"tag":150,"props":2742,"children":2743},{"style":240},[2744],{"type":71,"value":2745},"  --color-foreground: oklch(0",{"type":65,"tag":150,"props":2747,"children":2748},{"style":229},[2749],{"type":71,"value":1602},{"type":65,"tag":150,"props":2751,"children":2752},{"style":167},[2753],{"type":71,"value":2754},"985",{"type":65,"tag":150,"props":2756,"children":2757},{"style":240},[2758],{"type":71,"value":2737},{"type":65,"tag":150,"props":2760,"children":2761},{"class":152,"line":199},[2762,2767,2771,2776],{"type":65,"tag":150,"props":2763,"children":2764},{"style":240},[2765],{"type":71,"value":2766},"  --color-card: oklch(0",{"type":65,"tag":150,"props":2768,"children":2769},{"style":229},[2770],{"type":71,"value":1602},{"type":65,"tag":150,"props":2772,"children":2773},{"style":167},[2774],{"type":71,"value":2775},"205",{"type":65,"tag":150,"props":2777,"children":2778},{"style":240},[2779],{"type":71,"value":2737},{"type":65,"tag":150,"props":2781,"children":2782},{"class":152,"line":208},[2783,2788,2792,2796],{"type":65,"tag":150,"props":2784,"children":2785},{"style":240},[2786],{"type":71,"value":2787},"  --color-card-foreground: oklch(0",{"type":65,"tag":150,"props":2789,"children":2790},{"style":229},[2791],{"type":71,"value":1602},{"type":65,"tag":150,"props":2793,"children":2794},{"style":167},[2795],{"type":71,"value":2754},{"type":65,"tag":150,"props":2797,"children":2798},{"style":240},[2799],{"type":71,"value":2737},{"type":65,"tag":150,"props":2801,"children":2802},{"class":152,"line":42},[2803,2808,2812,2817,2822,2826,2831,2836,2840,2845],{"type":65,"tag":150,"props":2804,"children":2805},{"style":240},[2806],{"type":71,"value":2807},"  --color-primary: oklch(0",{"type":65,"tag":150,"props":2809,"children":2810},{"style":229},[2811],{"type":71,"value":1602},{"type":65,"tag":150,"props":2813,"children":2814},{"style":167},[2815],{"type":71,"value":2816},"488",{"type":65,"tag":150,"props":2818,"children":2819},{"style":240},[2820],{"type":71,"value":2821}," 0",{"type":65,"tag":150,"props":2823,"children":2824},{"style":229},[2825],{"type":71,"value":1602},{"type":65,"tag":150,"props":2827,"children":2828},{"style":167},[2829],{"type":71,"value":2830},"243",{"type":65,"tag":150,"props":2832,"children":2833},{"style":240},[2834],{"type":71,"value":2835}," 264",{"type":65,"tag":150,"props":2837,"children":2838},{"style":229},[2839],{"type":71,"value":1602},{"type":65,"tag":150,"props":2841,"children":2842},{"style":167},[2843],{"type":71,"value":2844},"376",{"type":65,"tag":150,"props":2846,"children":2847},{"style":240},[2848],{"type":71,"value":2849},");\n",{"type":65,"tag":150,"props":2851,"children":2852},{"class":152,"line":263},[2853,2858,2862,2866],{"type":65,"tag":150,"props":2854,"children":2855},{"style":240},[2856],{"type":71,"value":2857},"  --color-primary-foreground: oklch(0",{"type":65,"tag":150,"props":2859,"children":2860},{"style":229},[2861],{"type":71,"value":1602},{"type":65,"tag":150,"props":2863,"children":2864},{"style":167},[2865],{"type":71,"value":2754},{"type":65,"tag":150,"props":2867,"children":2868},{"style":240},[2869],{"type":71,"value":2737},{"type":65,"tag":150,"props":2871,"children":2872},{"class":152,"line":272},[2873,2878,2882,2887],{"type":65,"tag":150,"props":2874,"children":2875},{"style":240},[2876],{"type":71,"value":2877},"  --color-secondary: oklch(0",{"type":65,"tag":150,"props":2879,"children":2880},{"style":229},[2881],{"type":71,"value":1602},{"type":65,"tag":150,"props":2883,"children":2884},{"style":167},[2885],{"type":71,"value":2886},"269",{"type":65,"tag":150,"props":2888,"children":2889},{"style":240},[2890],{"type":71,"value":2737},{"type":65,"tag":150,"props":2892,"children":2893},{"class":152,"line":303},[2894,2899,2903,2907],{"type":65,"tag":150,"props":2895,"children":2896},{"style":240},[2897],{"type":71,"value":2898},"  --color-secondary-foreground: oklch(0",{"type":65,"tag":150,"props":2900,"children":2901},{"style":229},[2902],{"type":71,"value":1602},{"type":65,"tag":150,"props":2904,"children":2905},{"style":167},[2906],{"type":71,"value":2754},{"type":65,"tag":150,"props":2908,"children":2909},{"style":240},[2910],{"type":71,"value":2737},{"type":65,"tag":150,"props":2912,"children":2913},{"class":152,"line":332},[2914,2919,2923,2927],{"type":65,"tag":150,"props":2915,"children":2916},{"style":240},[2917],{"type":71,"value":2918},"  --color-muted: oklch(0",{"type":65,"tag":150,"props":2920,"children":2921},{"style":229},[2922],{"type":71,"value":1602},{"type":65,"tag":150,"props":2924,"children":2925},{"style":167},[2926],{"type":71,"value":2886},{"type":65,"tag":150,"props":2928,"children":2929},{"style":240},[2930],{"type":71,"value":2737},{"type":65,"tag":150,"props":2932,"children":2933},{"class":152,"line":340},[2934,2939,2943,2948],{"type":65,"tag":150,"props":2935,"children":2936},{"style":240},[2937],{"type":71,"value":2938},"  --color-muted-foreground: oklch(0",{"type":65,"tag":150,"props":2940,"children":2941},{"style":229},[2942],{"type":71,"value":1602},{"type":65,"tag":150,"props":2944,"children":2945},{"style":167},[2946],{"type":71,"value":2947},"708",{"type":65,"tag":150,"props":2949,"children":2950},{"style":240},[2951],{"type":71,"value":2737},{"type":65,"tag":150,"props":2953,"children":2954},{"class":152,"line":915},[2955,2960,2964,2968],{"type":65,"tag":150,"props":2956,"children":2957},{"style":240},[2958],{"type":71,"value":2959},"  --color-accent: oklch(0",{"type":65,"tag":150,"props":2961,"children":2962},{"style":229},[2963],{"type":71,"value":1602},{"type":65,"tag":150,"props":2965,"children":2966},{"style":167},[2967],{"type":71,"value":2886},{"type":65,"tag":150,"props":2969,"children":2970},{"style":240},[2971],{"type":71,"value":2737},{"type":65,"tag":150,"props":2973,"children":2974},{"class":152,"line":1999},[2975,2980,2984,2988],{"type":65,"tag":150,"props":2976,"children":2977},{"style":240},[2978],{"type":71,"value":2979},"  --color-accent-foreground: oklch(0",{"type":65,"tag":150,"props":2981,"children":2982},{"style":229},[2983],{"type":71,"value":1602},{"type":65,"tag":150,"props":2985,"children":2986},{"style":167},[2987],{"type":71,"value":2754},{"type":65,"tag":150,"props":2989,"children":2990},{"style":240},[2991],{"type":71,"value":2737},{"type":65,"tag":150,"props":2993,"children":2994},{"class":152,"line":2037},[2995,3000,3004,3009,3013,3017,3022,3027,3031,3036],{"type":65,"tag":150,"props":2996,"children":2997},{"style":240},[2998],{"type":71,"value":2999},"  --color-destructive: oklch(0",{"type":65,"tag":150,"props":3001,"children":3002},{"style":229},[3003],{"type":71,"value":1602},{"type":65,"tag":150,"props":3005,"children":3006},{"style":167},[3007],{"type":71,"value":3008},"396",{"type":65,"tag":150,"props":3010,"children":3011},{"style":240},[3012],{"type":71,"value":2821},{"type":65,"tag":150,"props":3014,"children":3015},{"style":229},[3016],{"type":71,"value":1602},{"type":65,"tag":150,"props":3018,"children":3019},{"style":167},[3020],{"type":71,"value":3021},"141",{"type":65,"tag":150,"props":3023,"children":3024},{"style":240},[3025],{"type":71,"value":3026}," 25",{"type":65,"tag":150,"props":3028,"children":3029},{"style":229},[3030],{"type":71,"value":1602},{"type":65,"tag":150,"props":3032,"children":3033},{"style":167},[3034],{"type":71,"value":3035},"723",{"type":65,"tag":150,"props":3037,"children":3038},{"style":240},[3039],{"type":71,"value":2849},{"type":65,"tag":150,"props":3041,"children":3042},{"class":152,"line":2075},[3043,3048,3052,3056],{"type":65,"tag":150,"props":3044,"children":3045},{"style":240},[3046],{"type":71,"value":3047},"  --color-border: oklch(0",{"type":65,"tag":150,"props":3049,"children":3050},{"style":229},[3051],{"type":71,"value":1602},{"type":65,"tag":150,"props":3053,"children":3054},{"style":167},[3055],{"type":71,"value":2886},{"type":65,"tag":150,"props":3057,"children":3058},{"style":240},[3059],{"type":71,"value":2737},{"type":65,"tag":150,"props":3061,"children":3062},{"class":152,"line":2113},[3063,3068,3072,3076],{"type":65,"tag":150,"props":3064,"children":3065},{"style":240},[3066],{"type":71,"value":3067},"  --color-input: oklch(0",{"type":65,"tag":150,"props":3069,"children":3070},{"style":229},[3071],{"type":71,"value":1602},{"type":65,"tag":150,"props":3073,"children":3074},{"style":167},[3075],{"type":71,"value":2886},{"type":65,"tag":150,"props":3077,"children":3078},{"style":240},[3079],{"type":71,"value":2737},{"type":65,"tag":150,"props":3081,"children":3082},{"class":152,"line":2151},[3083,3088,3092,3096,3100,3104,3108,3112,3116,3120],{"type":65,"tag":150,"props":3084,"children":3085},{"style":240},[3086],{"type":71,"value":3087},"  --color-ring: oklch(0",{"type":65,"tag":150,"props":3089,"children":3090},{"style":229},[3091],{"type":71,"value":1602},{"type":65,"tag":150,"props":3093,"children":3094},{"style":167},[3095],{"type":71,"value":2816},{"type":65,"tag":150,"props":3097,"children":3098},{"style":240},[3099],{"type":71,"value":2821},{"type":65,"tag":150,"props":3101,"children":3102},{"style":229},[3103],{"type":71,"value":1602},{"type":65,"tag":150,"props":3105,"children":3106},{"style":167},[3107],{"type":71,"value":2830},{"type":65,"tag":150,"props":3109,"children":3110},{"style":240},[3111],{"type":71,"value":2835},{"type":65,"tag":150,"props":3113,"children":3114},{"style":229},[3115],{"type":71,"value":1602},{"type":65,"tag":150,"props":3117,"children":3118},{"style":167},[3119],{"type":71,"value":2844},{"type":65,"tag":150,"props":3121,"children":3122},{"style":240},[3123],{"type":71,"value":2849},{"type":65,"tag":150,"props":3125,"children":3126},{"class":152,"line":2185},[3127],{"type":65,"tag":150,"props":3128,"children":3129},{"style":240},[3130],{"type":71,"value":3131},"  --radius: 0.625rem;\n",{"type":65,"tag":150,"props":3133,"children":3134},{"class":152,"line":2193},[3135],{"type":65,"tag":150,"props":3136,"children":3137},{"style":157},[3138],{"type":71,"value":3139},"  \u002F* CLI v4: radius tokens use multiplicative calc instead of additive *\u002F\n",{"type":65,"tag":150,"props":3141,"children":3142},{"class":152,"line":2218},[3143,3148,3153,3157,3161,3166],{"type":65,"tag":150,"props":3144,"children":3145},{"style":240},[3146],{"type":71,"value":3147},"  --radius-xs: calc(var(--radius) ",{"type":65,"tag":150,"props":3149,"children":3150},{"style":167},[3151],{"type":71,"value":3152},"*",{"type":65,"tag":150,"props":3154,"children":3155},{"style":240},[3156],{"type":71,"value":2821},{"type":65,"tag":150,"props":3158,"children":3159},{"style":229},[3160],{"type":71,"value":1602},{"type":65,"tag":150,"props":3162,"children":3163},{"style":167},[3164],{"type":71,"value":3165},"5",{"type":65,"tag":150,"props":3167,"children":3168},{"style":240},[3169],{"type":71,"value":2849},{"type":65,"tag":150,"props":3171,"children":3172},{"class":152,"line":2243},[3173,3178,3182,3186,3190,3195],{"type":65,"tag":150,"props":3174,"children":3175},{"style":240},[3176],{"type":71,"value":3177},"  --radius-sm: calc(var(--radius) ",{"type":65,"tag":150,"props":3179,"children":3180},{"style":167},[3181],{"type":71,"value":3152},{"type":65,"tag":150,"props":3183,"children":3184},{"style":240},[3185],{"type":71,"value":2821},{"type":65,"tag":150,"props":3187,"children":3188},{"style":229},[3189],{"type":71,"value":1602},{"type":65,"tag":150,"props":3191,"children":3192},{"style":167},[3193],{"type":71,"value":3194},"75",{"type":65,"tag":150,"props":3196,"children":3197},{"style":240},[3198],{"type":71,"value":2849},{"type":65,"tag":150,"props":3200,"children":3201},{"class":152,"line":2279},[3202,3207,3211,3215,3219,3224],{"type":65,"tag":150,"props":3203,"children":3204},{"style":240},[3205],{"type":71,"value":3206},"  --radius-md: calc(var(--radius) ",{"type":65,"tag":150,"props":3208,"children":3209},{"style":167},[3210],{"type":71,"value":3152},{"type":65,"tag":150,"props":3212,"children":3213},{"style":240},[3214],{"type":71,"value":2821},{"type":65,"tag":150,"props":3216,"children":3217},{"style":229},[3218],{"type":71,"value":1602},{"type":65,"tag":150,"props":3220,"children":3221},{"style":167},[3222],{"type":71,"value":3223},"875",{"type":65,"tag":150,"props":3225,"children":3226},{"style":240},[3227],{"type":71,"value":2849},{"type":65,"tag":150,"props":3229,"children":3230},{"class":152,"line":2288},[3231],{"type":65,"tag":150,"props":3232,"children":3233},{"style":240},[3234],{"type":71,"value":3235},"  --radius-lg: var(--radius);\n",{"type":65,"tag":150,"props":3237,"children":3238},{"class":152,"line":2313},[3239,3244,3248,3253,3257,3261],{"type":65,"tag":150,"props":3240,"children":3241},{"style":240},[3242],{"type":71,"value":3243},"  --radius-xl: calc(var(--radius) ",{"type":65,"tag":150,"props":3245,"children":3246},{"style":167},[3247],{"type":71,"value":3152},{"type":65,"tag":150,"props":3249,"children":3250},{"style":240},[3251],{"type":71,"value":3252}," 1",{"type":65,"tag":150,"props":3254,"children":3255},{"style":229},[3256],{"type":71,"value":1602},{"type":65,"tag":150,"props":3258,"children":3259},{"style":167},[3260],{"type":71,"value":3165},{"type":65,"tag":150,"props":3262,"children":3263},{"style":240},[3264],{"type":71,"value":2849},{"type":65,"tag":150,"props":3266,"children":3267},{"class":152,"line":2346},[3268],{"type":65,"tag":150,"props":3269,"children":3270},{"style":229},[3271],{"type":71,"value":2370},{"type":65,"tag":105,"props":3273,"children":3275},{"id":3274},"dark-mode",[3276],{"type":71,"value":3277},"Dark Mode",{"type":65,"tag":73,"props":3279,"children":3280},{},[3281,3283,3289,3291,3297],{"type":71,"value":3282},"For dark mode, use the ",{"type":65,"tag":122,"props":3284,"children":3286},{"className":3285},[],[3287],{"type":71,"value":3288},"dark",{"type":71,"value":3290}," class on ",{"type":65,"tag":122,"props":3292,"children":3294},{"className":3293},[],[3295],{"type":71,"value":3296},"\u003Chtml>",{"type":71,"value":1694},{"type":65,"tag":139,"props":3299,"children":3301},{"className":1453,"code":3300,"language":1455,"meta":144,"style":144},"\u002F\u002F app\u002Flayout.tsx\n\u003Chtml lang=\"en\" className=\"dark\">\n",[3302],{"type":65,"tag":122,"props":3303,"children":3304},{"__ignoreMap":144},[3305,3313],{"type":65,"tag":150,"props":3306,"children":3307},{"class":152,"line":153},[3308],{"type":65,"tag":150,"props":3309,"children":3310},{"style":157},[3311],{"type":71,"value":3312},"\u002F\u002F app\u002Flayout.tsx\n",{"type":65,"tag":150,"props":3314,"children":3315},{"class":152,"line":163},[3316,3321,3326,3331,3336,3340,3345,3349,3354,3358,3362,3366,3370],{"type":65,"tag":150,"props":3317,"children":3318},{"style":229},[3319],{"type":71,"value":3320},"\u003C",{"type":65,"tag":150,"props":3322,"children":3323},{"style":2576},[3324],{"type":71,"value":3325},"html",{"type":65,"tag":150,"props":3327,"children":3328},{"style":1681},[3329],{"type":71,"value":3330}," lang",{"type":65,"tag":150,"props":3332,"children":3333},{"style":229},[3334],{"type":71,"value":3335},"=",{"type":65,"tag":150,"props":3337,"children":3338},{"style":229},[3339],{"type":71,"value":1689},{"type":65,"tag":150,"props":3341,"children":3342},{"style":173},[3343],{"type":71,"value":3344},"en",{"type":65,"tag":150,"props":3346,"children":3347},{"style":229},[3348],{"type":71,"value":1689},{"type":65,"tag":150,"props":3350,"children":3351},{"style":1681},[3352],{"type":71,"value":3353}," className",{"type":65,"tag":150,"props":3355,"children":3356},{"style":229},[3357],{"type":71,"value":3335},{"type":65,"tag":150,"props":3359,"children":3360},{"style":229},[3361],{"type":71,"value":1689},{"type":65,"tag":150,"props":3363,"children":3364},{"style":173},[3365],{"type":71,"value":3288},{"type":65,"tag":150,"props":3367,"children":3368},{"style":229},[3369],{"type":71,"value":1689},{"type":65,"tag":150,"props":3371,"children":3372},{"style":229},[3373],{"type":71,"value":3374},">\n",{"type":65,"tag":73,"props":3376,"children":3377},{},[3378],{"type":71,"value":3379},"Or use next-themes for toggling:",{"type":65,"tag":139,"props":3381,"children":3383},{"className":1453,"code":3382,"language":1455,"meta":144,"style":144},"import { ThemeProvider } from 'next-themes'\n\n\u003CThemeProvider attribute=\"class\" defaultTheme=\"dark\">\n  {children}\n\u003C\u002FThemeProvider>\n",[3384],{"type":65,"tag":122,"props":3385,"children":3386},{"__ignoreMap":144},[3387,3426,3433,3492,3509],{"type":65,"tag":150,"props":3388,"children":3389},{"class":152,"line":153},[3390,3394,3398,3403,3407,3411,3416,3421],{"type":65,"tag":150,"props":3391,"children":3392},{"style":1473},[3393],{"type":71,"value":1476},{"type":65,"tag":150,"props":3395,"children":3396},{"style":229},[3397],{"type":71,"value":1538},{"type":65,"tag":150,"props":3399,"children":3400},{"style":240},[3401],{"type":71,"value":3402}," ThemeProvider",{"type":65,"tag":150,"props":3404,"children":3405},{"style":229},[3406],{"type":71,"value":1557},{"type":65,"tag":150,"props":3408,"children":3409},{"style":1473},[3410],{"type":71,"value":1562},{"type":65,"tag":150,"props":3412,"children":3413},{"style":229},[3414],{"type":71,"value":3415}," '",{"type":65,"tag":150,"props":3417,"children":3418},{"style":173},[3419],{"type":71,"value":3420},"next-themes",{"type":65,"tag":150,"props":3422,"children":3423},{"style":229},[3424],{"type":71,"value":3425},"'\n",{"type":65,"tag":150,"props":3427,"children":3428},{"class":152,"line":163},[3429],{"type":65,"tag":150,"props":3430,"children":3431},{"emptyLinePlaceholder":193},[3432],{"type":71,"value":196},{"type":65,"tag":150,"props":3434,"children":3435},{"class":152,"line":189},[3436,3440,3445,3450,3454,3458,3463,3467,3472,3476,3480,3484,3488],{"type":65,"tag":150,"props":3437,"children":3438},{"style":229},[3439],{"type":71,"value":3320},{"type":65,"tag":150,"props":3441,"children":3442},{"style":167},[3443],{"type":71,"value":3444},"ThemeProvider",{"type":65,"tag":150,"props":3446,"children":3447},{"style":1681},[3448],{"type":71,"value":3449}," attribute",{"type":65,"tag":150,"props":3451,"children":3452},{"style":229},[3453],{"type":71,"value":3335},{"type":65,"tag":150,"props":3455,"children":3456},{"style":229},[3457],{"type":71,"value":1689},{"type":65,"tag":150,"props":3459,"children":3460},{"style":173},[3461],{"type":71,"value":3462},"class",{"type":65,"tag":150,"props":3464,"children":3465},{"style":229},[3466],{"type":71,"value":1689},{"type":65,"tag":150,"props":3468,"children":3469},{"style":1681},[3470],{"type":71,"value":3471}," defaultTheme",{"type":65,"tag":150,"props":3473,"children":3474},{"style":229},[3475],{"type":71,"value":3335},{"type":65,"tag":150,"props":3477,"children":3478},{"style":229},[3479],{"type":71,"value":1689},{"type":65,"tag":150,"props":3481,"children":3482},{"style":173},[3483],{"type":71,"value":3288},{"type":65,"tag":150,"props":3485,"children":3486},{"style":229},[3487],{"type":71,"value":1689},{"type":65,"tag":150,"props":3489,"children":3490},{"style":229},[3491],{"type":71,"value":3374},{"type":65,"tag":150,"props":3493,"children":3494},{"class":152,"line":199},[3495,3500,3505],{"type":65,"tag":150,"props":3496,"children":3497},{"style":229},[3498],{"type":71,"value":3499},"  {",{"type":65,"tag":150,"props":3501,"children":3502},{"style":240},[3503],{"type":71,"value":3504},"children",{"type":65,"tag":150,"props":3506,"children":3507},{"style":229},[3508],{"type":71,"value":2370},{"type":65,"tag":150,"props":3510,"children":3511},{"class":152,"line":208},[3512,3517,3521],{"type":65,"tag":150,"props":3513,"children":3514},{"style":229},[3515],{"type":71,"value":3516},"\u003C\u002F",{"type":65,"tag":150,"props":3518,"children":3519},{"style":167},[3520],{"type":71,"value":3444},{"type":65,"tag":150,"props":3522,"children":3523},{"style":229},[3524],{"type":71,"value":3374},{"type":65,"tag":105,"props":3526,"children":3528},{"id":3527},"custom-colors",[3529],{"type":71,"value":3530},"Custom Colors",{"type":65,"tag":73,"props":3532,"children":3533},{},[3534],{"type":71,"value":3535},"Add application-specific colors alongside shadcn defaults:",{"type":65,"tag":139,"props":3537,"children":3539},{"className":2693,"code":3538,"language":1871,"meta":144,"style":144},"@theme inline {\n  \u002F* shadcn defaults above... *\u002F\n\n  \u002F* Custom app colors *\u002F\n  --color-priority-urgent: oklch(0.637 0.237 15.163);\n  --color-priority-high: oklch(0.705 0.213 47.604);\n  --color-status-done: oklch(0.723 0.219 149.579);\n}\n",[3540],{"type":65,"tag":122,"props":3541,"children":3542},{"__ignoreMap":144},[3543,3558,3566,3573,3581,3629,3677,3724],{"type":65,"tag":150,"props":3544,"children":3545},{"class":152,"line":153},[3546,3550,3554],{"type":65,"tag":150,"props":3547,"children":3548},{"style":1473},[3549],{"type":71,"value":2706},{"type":65,"tag":150,"props":3551,"children":3552},{"style":240},[3553],{"type":71,"value":2711},{"type":65,"tag":150,"props":3555,"children":3556},{"style":229},[3557],{"type":71,"value":1670},{"type":65,"tag":150,"props":3559,"children":3560},{"class":152,"line":163},[3561],{"type":65,"tag":150,"props":3562,"children":3563},{"style":157},[3564],{"type":71,"value":3565},"  \u002F* shadcn defaults above... *\u002F\n",{"type":65,"tag":150,"props":3567,"children":3568},{"class":152,"line":189},[3569],{"type":65,"tag":150,"props":3570,"children":3571},{"emptyLinePlaceholder":193},[3572],{"type":71,"value":196},{"type":65,"tag":150,"props":3574,"children":3575},{"class":152,"line":199},[3576],{"type":65,"tag":150,"props":3577,"children":3578},{"style":157},[3579],{"type":71,"value":3580},"  \u002F* Custom app colors *\u002F\n",{"type":65,"tag":150,"props":3582,"children":3583},{"class":152,"line":208},[3584,3589,3593,3598,3602,3606,3611,3616,3620,3625],{"type":65,"tag":150,"props":3585,"children":3586},{"style":240},[3587],{"type":71,"value":3588},"  --color-priority-urgent: oklch(0",{"type":65,"tag":150,"props":3590,"children":3591},{"style":229},[3592],{"type":71,"value":1602},{"type":65,"tag":150,"props":3594,"children":3595},{"style":167},[3596],{"type":71,"value":3597},"637",{"type":65,"tag":150,"props":3599,"children":3600},{"style":240},[3601],{"type":71,"value":2821},{"type":65,"tag":150,"props":3603,"children":3604},{"style":229},[3605],{"type":71,"value":1602},{"type":65,"tag":150,"props":3607,"children":3608},{"style":167},[3609],{"type":71,"value":3610},"237",{"type":65,"tag":150,"props":3612,"children":3613},{"style":240},[3614],{"type":71,"value":3615}," 15",{"type":65,"tag":150,"props":3617,"children":3618},{"style":229},[3619],{"type":71,"value":1602},{"type":65,"tag":150,"props":3621,"children":3622},{"style":167},[3623],{"type":71,"value":3624},"163",{"type":65,"tag":150,"props":3626,"children":3627},{"style":240},[3628],{"type":71,"value":2849},{"type":65,"tag":150,"props":3630,"children":3631},{"class":152,"line":42},[3632,3637,3641,3646,3650,3654,3659,3664,3668,3673],{"type":65,"tag":150,"props":3633,"children":3634},{"style":240},[3635],{"type":71,"value":3636},"  --color-priority-high: oklch(0",{"type":65,"tag":150,"props":3638,"children":3639},{"style":229},[3640],{"type":71,"value":1602},{"type":65,"tag":150,"props":3642,"children":3643},{"style":167},[3644],{"type":71,"value":3645},"705",{"type":65,"tag":150,"props":3647,"children":3648},{"style":240},[3649],{"type":71,"value":2821},{"type":65,"tag":150,"props":3651,"children":3652},{"style":229},[3653],{"type":71,"value":1602},{"type":65,"tag":150,"props":3655,"children":3656},{"style":167},[3657],{"type":71,"value":3658},"213",{"type":65,"tag":150,"props":3660,"children":3661},{"style":240},[3662],{"type":71,"value":3663}," 47",{"type":65,"tag":150,"props":3665,"children":3666},{"style":229},[3667],{"type":71,"value":1602},{"type":65,"tag":150,"props":3669,"children":3670},{"style":167},[3671],{"type":71,"value":3672},"604",{"type":65,"tag":150,"props":3674,"children":3675},{"style":240},[3676],{"type":71,"value":2849},{"type":65,"tag":150,"props":3678,"children":3679},{"class":152,"line":263},[3680,3685,3689,3693,3697,3701,3706,3711,3715,3720],{"type":65,"tag":150,"props":3681,"children":3682},{"style":240},[3683],{"type":71,"value":3684},"  --color-status-done: oklch(0",{"type":65,"tag":150,"props":3686,"children":3687},{"style":229},[3688],{"type":71,"value":1602},{"type":65,"tag":150,"props":3690,"children":3691},{"style":167},[3692],{"type":71,"value":3035},{"type":65,"tag":150,"props":3694,"children":3695},{"style":240},[3696],{"type":71,"value":2821},{"type":65,"tag":150,"props":3698,"children":3699},{"style":229},[3700],{"type":71,"value":1602},{"type":65,"tag":150,"props":3702,"children":3703},{"style":167},[3704],{"type":71,"value":3705},"219",{"type":65,"tag":150,"props":3707,"children":3708},{"style":240},[3709],{"type":71,"value":3710}," 149",{"type":65,"tag":150,"props":3712,"children":3713},{"style":229},[3714],{"type":71,"value":1602},{"type":65,"tag":150,"props":3716,"children":3717},{"style":167},[3718],{"type":71,"value":3719},"579",{"type":65,"tag":150,"props":3721,"children":3722},{"style":240},[3723],{"type":71,"value":2849},{"type":65,"tag":150,"props":3725,"children":3726},{"class":152,"line":272},[3727],{"type":65,"tag":150,"props":3728,"children":3729},{"style":229},[3730],{"type":71,"value":2370},{"type":65,"tag":73,"props":3732,"children":3733},{},[3734],{"type":71,"value":3735},"Use in components:",{"type":65,"tag":139,"props":3737,"children":3739},{"className":1453,"code":3738,"language":1455,"meta":144,"style":144},"\u003Cspan className=\"text-[var(--color-priority-urgent)]\">Urgent\u003C\u002Fspan>\n\u002F\u002F Or with Tailwind v4 theme():\n\u003Cspan className=\"text-priority-urgent\">Urgent\u003C\u002Fspan>\n",[3740],{"type":65,"tag":122,"props":3741,"children":3742},{"__ignoreMap":144},[3743,3796,3804],{"type":65,"tag":150,"props":3744,"children":3745},{"class":152,"line":153},[3746,3750,3754,3758,3762,3766,3771,3775,3779,3784,3788,3792],{"type":65,"tag":150,"props":3747,"children":3748},{"style":229},[3749],{"type":71,"value":3320},{"type":65,"tag":150,"props":3751,"children":3752},{"style":2576},[3753],{"type":71,"value":150},{"type":65,"tag":150,"props":3755,"children":3756},{"style":1681},[3757],{"type":71,"value":3353},{"type":65,"tag":150,"props":3759,"children":3760},{"style":229},[3761],{"type":71,"value":3335},{"type":65,"tag":150,"props":3763,"children":3764},{"style":229},[3765],{"type":71,"value":1689},{"type":65,"tag":150,"props":3767,"children":3768},{"style":173},[3769],{"type":71,"value":3770},"text-[var(--color-priority-urgent)]",{"type":65,"tag":150,"props":3772,"children":3773},{"style":229},[3774],{"type":71,"value":1689},{"type":65,"tag":150,"props":3776,"children":3777},{"style":229},[3778],{"type":71,"value":248},{"type":65,"tag":150,"props":3780,"children":3781},{"style":240},[3782],{"type":71,"value":3783},"Urgent",{"type":65,"tag":150,"props":3785,"children":3786},{"style":229},[3787],{"type":71,"value":3516},{"type":65,"tag":150,"props":3789,"children":3790},{"style":2576},[3791],{"type":71,"value":150},{"type":65,"tag":150,"props":3793,"children":3794},{"style":229},[3795],{"type":71,"value":3374},{"type":65,"tag":150,"props":3797,"children":3798},{"class":152,"line":163},[3799],{"type":65,"tag":150,"props":3800,"children":3801},{"style":157},[3802],{"type":71,"value":3803},"\u002F\u002F Or with Tailwind v4 theme():\n",{"type":65,"tag":150,"props":3805,"children":3806},{"class":152,"line":189},[3807,3811,3815,3819,3823,3827,3832,3836,3840,3844,3848,3852],{"type":65,"tag":150,"props":3808,"children":3809},{"style":229},[3810],{"type":71,"value":3320},{"type":65,"tag":150,"props":3812,"children":3813},{"style":2576},[3814],{"type":71,"value":150},{"type":65,"tag":150,"props":3816,"children":3817},{"style":1681},[3818],{"type":71,"value":3353},{"type":65,"tag":150,"props":3820,"children":3821},{"style":229},[3822],{"type":71,"value":3335},{"type":65,"tag":150,"props":3824,"children":3825},{"style":229},[3826],{"type":71,"value":1689},{"type":65,"tag":150,"props":3828,"children":3829},{"style":173},[3830],{"type":71,"value":3831},"text-priority-urgent",{"type":65,"tag":150,"props":3833,"children":3834},{"style":229},[3835],{"type":71,"value":1689},{"type":65,"tag":150,"props":3837,"children":3838},{"style":229},[3839],{"type":71,"value":248},{"type":65,"tag":150,"props":3841,"children":3842},{"style":240},[3843],{"type":71,"value":3783},{"type":65,"tag":150,"props":3845,"children":3846},{"style":229},[3847],{"type":71,"value":3516},{"type":65,"tag":150,"props":3849,"children":3850},{"style":2576},[3851],{"type":71,"value":150},{"type":65,"tag":150,"props":3853,"children":3854},{"style":229},[3855],{"type":71,"value":3374},{"type":65,"tag":79,"props":3857,"children":3859},{"id":3858},"most-common-components",[3860],{"type":71,"value":3861},"Most Common Components",{"type":65,"tag":3863,"props":3864,"children":3865},"table",{},[3866,3885],{"type":65,"tag":3867,"props":3868,"children":3869},"thead",{},[3870],{"type":65,"tag":3871,"props":3872,"children":3873},"tr",{},[3874,3880],{"type":65,"tag":3875,"props":3876,"children":3877},"th",{},[3878],{"type":71,"value":3879},"Component",{"type":65,"tag":3875,"props":3881,"children":3882},{},[3883],{"type":71,"value":3884},"Use Case",{"type":65,"tag":3886,"props":3887,"children":3888},"tbody",{},[3889,3907,3924,3941,3966,3983,3999,4016,4033,4050,4067,4084,4101,4118,4135,4152,4169,4186],{"type":65,"tag":3871,"props":3890,"children":3891},{},[3892,3902],{"type":65,"tag":3893,"props":3894,"children":3895},"td",{},[3896],{"type":65,"tag":122,"props":3897,"children":3899},{"className":3898},[],[3900],{"type":71,"value":3901},"button",{"type":65,"tag":3893,"props":3903,"children":3904},{},[3905],{"type":71,"value":3906},"Actions, form submission",{"type":65,"tag":3871,"props":3908,"children":3909},{},[3910,3919],{"type":65,"tag":3893,"props":3911,"children":3912},{},[3913],{"type":65,"tag":122,"props":3914,"children":3916},{"className":3915},[],[3917],{"type":71,"value":3918},"card",{"type":65,"tag":3893,"props":3920,"children":3921},{},[3922],{"type":71,"value":3923},"Content containers",{"type":65,"tag":3871,"props":3925,"children":3926},{},[3927,3936],{"type":65,"tag":3893,"props":3928,"children":3929},{},[3930],{"type":65,"tag":122,"props":3931,"children":3933},{"className":3932},[],[3934],{"type":71,"value":3935},"dialog",{"type":65,"tag":3893,"props":3937,"children":3938},{},[3939],{"type":71,"value":3940},"Modals, confirmation prompts",{"type":65,"tag":3871,"props":3942,"children":3943},{},[3944,3961],{"type":65,"tag":3893,"props":3945,"children":3946},{},[3947,3953,3955],{"type":65,"tag":122,"props":3948,"children":3950},{"className":3949},[],[3951],{"type":71,"value":3952},"input",{"type":71,"value":3954}," \u002F ",{"type":65,"tag":122,"props":3956,"children":3958},{"className":3957},[],[3959],{"type":71,"value":3960},"textarea",{"type":65,"tag":3893,"props":3962,"children":3963},{},[3964],{"type":71,"value":3965},"Form fields",{"type":65,"tag":3871,"props":3967,"children":3968},{},[3969,3978],{"type":65,"tag":3893,"props":3970,"children":3971},{},[3972],{"type":65,"tag":122,"props":3973,"children":3975},{"className":3974},[],[3976],{"type":71,"value":3977},"select",{"type":65,"tag":3893,"props":3979,"children":3980},{},[3981],{"type":71,"value":3982},"Dropdowns",{"type":65,"tag":3871,"props":3984,"children":3985},{},[3986,3994],{"type":65,"tag":3893,"props":3987,"children":3988},{},[3989],{"type":65,"tag":122,"props":3990,"children":3992},{"className":3991},[],[3993],{"type":71,"value":3863},{"type":65,"tag":3893,"props":3995,"children":3996},{},[3997],{"type":71,"value":3998},"Data display",{"type":65,"tag":3871,"props":4000,"children":4001},{},[4002,4011],{"type":65,"tag":3893,"props":4003,"children":4004},{},[4005],{"type":65,"tag":122,"props":4006,"children":4008},{"className":4007},[],[4009],{"type":71,"value":4010},"tabs",{"type":65,"tag":3893,"props":4012,"children":4013},{},[4014],{"type":71,"value":4015},"View switching",{"type":65,"tag":3871,"props":4017,"children":4018},{},[4019,4028],{"type":65,"tag":3893,"props":4020,"children":4021},{},[4022],{"type":65,"tag":122,"props":4023,"children":4025},{"className":4024},[],[4026],{"type":71,"value":4027},"command",{"type":65,"tag":3893,"props":4029,"children":4030},{},[4031],{"type":71,"value":4032},"Command palette (Cmd+K)",{"type":65,"tag":3871,"props":4034,"children":4035},{},[4036,4045],{"type":65,"tag":3893,"props":4037,"children":4038},{},[4039],{"type":65,"tag":122,"props":4040,"children":4042},{"className":4041},[],[4043],{"type":71,"value":4044},"dropdown-menu",{"type":65,"tag":3893,"props":4046,"children":4047},{},[4048],{"type":71,"value":4049},"Context menus",{"type":65,"tag":3871,"props":4051,"children":4052},{},[4053,4062],{"type":65,"tag":3893,"props":4054,"children":4055},{},[4056],{"type":65,"tag":122,"props":4057,"children":4059},{"className":4058},[],[4060],{"type":71,"value":4061},"popover",{"type":65,"tag":3893,"props":4063,"children":4064},{},[4065],{"type":71,"value":4066},"Floating content",{"type":65,"tag":3871,"props":4068,"children":4069},{},[4070,4079],{"type":65,"tag":3893,"props":4071,"children":4072},{},[4073],{"type":65,"tag":122,"props":4074,"children":4076},{"className":4075},[],[4077],{"type":71,"value":4078},"tooltip",{"type":65,"tag":3893,"props":4080,"children":4081},{},[4082],{"type":71,"value":4083},"Hover hints",{"type":65,"tag":3871,"props":4085,"children":4086},{},[4087,4096],{"type":65,"tag":3893,"props":4088,"children":4089},{},[4090],{"type":65,"tag":122,"props":4091,"children":4093},{"className":4092},[],[4094],{"type":71,"value":4095},"badge",{"type":65,"tag":3893,"props":4097,"children":4098},{},[4099],{"type":71,"value":4100},"Status indicators",{"type":65,"tag":3871,"props":4102,"children":4103},{},[4104,4113],{"type":65,"tag":3893,"props":4105,"children":4106},{},[4107],{"type":65,"tag":122,"props":4108,"children":4110},{"className":4109},[],[4111],{"type":71,"value":4112},"avatar",{"type":65,"tag":3893,"props":4114,"children":4115},{},[4116],{"type":71,"value":4117},"User profile images",{"type":65,"tag":3871,"props":4119,"children":4120},{},[4121,4130],{"type":65,"tag":3893,"props":4122,"children":4123},{},[4124],{"type":65,"tag":122,"props":4125,"children":4127},{"className":4126},[],[4128],{"type":71,"value":4129},"scroll-area",{"type":65,"tag":3893,"props":4131,"children":4132},{},[4133],{"type":71,"value":4134},"Scrollable containers",{"type":65,"tag":3871,"props":4136,"children":4137},{},[4138,4147],{"type":65,"tag":3893,"props":4139,"children":4140},{},[4141],{"type":65,"tag":122,"props":4142,"children":4144},{"className":4143},[],[4145],{"type":71,"value":4146},"separator",{"type":65,"tag":3893,"props":4148,"children":4149},{},[4150],{"type":71,"value":4151},"Visual dividers",{"type":65,"tag":3871,"props":4153,"children":4154},{},[4155,4164],{"type":65,"tag":3893,"props":4156,"children":4157},{},[4158],{"type":65,"tag":122,"props":4159,"children":4161},{"className":4160},[],[4162],{"type":71,"value":4163},"label",{"type":65,"tag":3893,"props":4165,"children":4166},{},[4167],{"type":71,"value":4168},"Form labels",{"type":65,"tag":3871,"props":4170,"children":4171},{},[4172,4181],{"type":65,"tag":3893,"props":4173,"children":4174},{},[4175],{"type":65,"tag":122,"props":4176,"children":4178},{"className":4177},[],[4179],{"type":71,"value":4180},"sheet",{"type":65,"tag":3893,"props":4182,"children":4183},{},[4184],{"type":71,"value":4185},"Slide-out panels",{"type":65,"tag":3871,"props":4187,"children":4188},{},[4189,4198],{"type":65,"tag":3893,"props":4190,"children":4191},{},[4192],{"type":65,"tag":122,"props":4193,"children":4195},{"className":4194},[],[4196],{"type":71,"value":4197},"skeleton",{"type":65,"tag":3893,"props":4199,"children":4200},{},[4201],{"type":71,"value":4202},"Loading placeholders",{"type":65,"tag":79,"props":4204,"children":4206},{"id":4205},"design-direction-for-shadcn-on-vercel",[4207],{"type":71,"value":4208},"Design Direction for shadcn on Vercel",{"type":65,"tag":73,"props":4210,"children":4211},{},[4212],{"type":71,"value":4213},"shadcn\u002Fui is not only a component source generator. In the Vercel stack it is the default interface language. Do not stop at \"the component works.\" Compose pages that feel deliberate, high-signal, and consistent.",{"type":65,"tag":105,"props":4215,"children":4217},{"id":4216},"default-aesthetic-for-product-ui",[4218],{"type":71,"value":4219},"Default aesthetic for product UI",{"type":65,"tag":439,"props":4221,"children":4222},{},[4223,4235,4240,4245,4257,4305,4318,4366],{"type":65,"tag":443,"props":4224,"children":4225},{},[4226,4228,4233],{"type":71,"value":4227},"Prefer style: ",{"type":65,"tag":122,"props":4229,"children":4231},{"className":4230},[],[4232],{"type":71,"value":1432},{"type":71,"value":4234}," for product, dashboard, AI, and admin surfaces.",{"type":65,"tag":443,"props":4236,"children":4237},{},[4238],{"type":71,"value":4239},"Default to dark mode for dashboards, AI apps, internal tools, settings, and developer-facing products. Use light mode only when the product is clearly content-first or editorial.",{"type":65,"tag":443,"props":4241,"children":4242},{},[4243],{"type":71,"value":4244},"Use Geist Sans for interface text and Geist Mono for code, metrics, IDs, timestamps, commands.",{"type":65,"tag":443,"props":4246,"children":4247},{},[4248,4250,4256],{"type":71,"value":4249},"Prefer zinc, neutral, or slate as the base palette. Use one accent color through ",{"type":65,"tag":122,"props":4251,"children":4253},{"className":4252},[],[4254],{"type":71,"value":4255},"--color-primary",{"type":71,"value":1602},{"type":65,"tag":443,"props":4258,"children":4259},{},[4260,4262,4268,4269,4275,4276,4282,4283,4289,4290,4296,4297,4303],{"type":71,"value":4261},"Build core surfaces from tokens: ",{"type":65,"tag":122,"props":4263,"children":4265},{"className":4264},[],[4266],{"type":71,"value":4267},"bg-background",{"type":71,"value":508},{"type":65,"tag":122,"props":4270,"children":4272},{"className":4271},[],[4273],{"type":71,"value":4274},"bg-card",{"type":71,"value":508},{"type":65,"tag":122,"props":4277,"children":4279},{"className":4278},[],[4280],{"type":71,"value":4281},"text-foreground",{"type":71,"value":508},{"type":65,"tag":122,"props":4284,"children":4286},{"className":4285},[],[4287],{"type":71,"value":4288},"text-muted-foreground",{"type":71,"value":508},{"type":65,"tag":122,"props":4291,"children":4293},{"className":4292},[],[4294],{"type":71,"value":4295},"border-border",{"type":71,"value":508},{"type":65,"tag":122,"props":4298,"children":4300},{"className":4299},[],[4301],{"type":71,"value":4302},"ring-ring",{"type":71,"value":4304},". Avoid ad-hoc hex values.",{"type":65,"tag":443,"props":4306,"children":4307},{},[4308,4310,4316],{"type":71,"value":4309},"Keep radius consistent. The default ",{"type":65,"tag":122,"props":4311,"children":4313},{"className":4312},[],[4314],{"type":71,"value":4315},"--radius: 0.625rem",{"type":71,"value":4317}," is a strong baseline.",{"type":65,"tag":443,"props":4319,"children":4320},{},[4321,4323,4329,4330,4336,4337,4343,4345,4351,4352,4358,4359,4364],{"type":71,"value":4322},"Use one density system per page: comfortable (",{"type":65,"tag":122,"props":4324,"children":4326},{"className":4325},[],[4327],{"type":71,"value":4328},"gap-6",{"type":71,"value":3954},{"type":65,"tag":122,"props":4331,"children":4333},{"className":4332},[],[4334],{"type":71,"value":4335},"p-6",{"type":71,"value":3954},{"type":65,"tag":122,"props":4338,"children":4340},{"className":4339},[],[4341],{"type":71,"value":4342},"text-sm",{"type":71,"value":4344},") or compact (",{"type":65,"tag":122,"props":4346,"children":4348},{"className":4347},[],[4349],{"type":71,"value":4350},"gap-4",{"type":71,"value":3954},{"type":65,"tag":122,"props":4353,"children":4355},{"className":4354},[],[4356],{"type":71,"value":4357},"p-4",{"type":71,"value":3954},{"type":65,"tag":122,"props":4360,"children":4362},{"className":4361},[],[4363],{"type":71,"value":4342},{"type":71,"value":4365},").",{"type":65,"tag":443,"props":4367,"children":4368},{},[4369,4371,4377,4379,4385],{"type":71,"value":4370},"Keep icons quiet and consistent. Lucide icons at ",{"type":65,"tag":122,"props":4372,"children":4374},{"className":4373},[],[4375],{"type":71,"value":4376},"h-4 w-4",{"type":71,"value":4378}," or ",{"type":65,"tag":122,"props":4380,"children":4382},{"className":4381},[],[4383],{"type":71,"value":4384},"h-5 w-5",{"type":71,"value":1602},{"type":65,"tag":105,"props":4387,"children":4389},{"id":4388},"reach-for-this-first",[4390],{"type":71,"value":4391},"Reach for this first",{"type":65,"tag":3863,"props":4393,"children":4394},{},[4395,4415],{"type":65,"tag":3867,"props":4396,"children":4397},{},[4398],{"type":65,"tag":3871,"props":4399,"children":4400},{},[4401,4406,4410],{"type":65,"tag":3875,"props":4402,"children":4403},{},[4404],{"type":71,"value":4405},"Use case",{"type":65,"tag":3875,"props":4407,"children":4408},{},[4409],{"type":71,"value":4391},{"type":65,"tag":3875,"props":4411,"children":4412},{},[4413],{"type":71,"value":4414},"Why",{"type":65,"tag":3886,"props":4416,"children":4417},{},[4418,4455,4497,4538,4587,4616,4650,4685,4720],{"type":65,"tag":3871,"props":4419,"children":4420},{},[4421,4426,4450],{"type":65,"tag":3893,"props":4422,"children":4423},{},[4424],{"type":71,"value":4425},"Settings page",{"type":65,"tag":3893,"props":4427,"children":4428},{},[4429,4435,4437,4443,4444],{"type":65,"tag":122,"props":4430,"children":4432},{"className":4431},[],[4433],{"type":71,"value":4434},"Tabs",{"type":71,"value":4436}," + ",{"type":65,"tag":122,"props":4438,"children":4440},{"className":4439},[],[4441],{"type":71,"value":4442},"Card",{"type":71,"value":4436},{"type":65,"tag":122,"props":4445,"children":4447},{"className":4446},[],[4448],{"type":71,"value":4449},"Form",{"type":65,"tag":3893,"props":4451,"children":4452},{},[4453],{"type":71,"value":4454},"Clear information grouping with predictable save flows",{"type":65,"tag":3871,"props":4456,"children":4457},{},[4458,4463,4492],{"type":65,"tag":3893,"props":4459,"children":4460},{},[4461],{"type":71,"value":4462},"Data dashboard",{"type":65,"tag":3893,"props":4464,"children":4465},{},[4466,4471,4472,4478,4479,4485,4486],{"type":65,"tag":122,"props":4467,"children":4469},{"className":4468},[],[4470],{"type":71,"value":4442},{"type":71,"value":4436},{"type":65,"tag":122,"props":4473,"children":4475},{"className":4474},[],[4476],{"type":71,"value":4477},"Badge",{"type":71,"value":4436},{"type":65,"tag":122,"props":4480,"children":4482},{"className":4481},[],[4483],{"type":71,"value":4484},"Table",{"type":71,"value":4436},{"type":65,"tag":122,"props":4487,"children":4489},{"className":4488},[],[4490],{"type":71,"value":4491},"DropdownMenu",{"type":65,"tag":3893,"props":4493,"children":4494},{},[4495],{"type":71,"value":4496},"Covers summary, status, dense data, and row actions without custom shells",{"type":65,"tag":3871,"props":4498,"children":4499},{},[4500,4505,4533],{"type":65,"tag":3893,"props":4501,"children":4502},{},[4503],{"type":71,"value":4504},"CRUD table",{"type":65,"tag":3893,"props":4506,"children":4507},{},[4508,4513,4514,4519,4520,4526,4527],{"type":65,"tag":122,"props":4509,"children":4511},{"className":4510},[],[4512],{"type":71,"value":4484},{"type":71,"value":4436},{"type":65,"tag":122,"props":4515,"children":4517},{"className":4516},[],[4518],{"type":71,"value":4491},{"type":71,"value":4436},{"type":65,"tag":122,"props":4521,"children":4523},{"className":4522},[],[4524],{"type":71,"value":4525},"Sheet",{"type":71,"value":4436},{"type":65,"tag":122,"props":4528,"children":4530},{"className":4529},[],[4531],{"type":71,"value":4532},"AlertDialog",{"type":65,"tag":3893,"props":4534,"children":4535},{},[4536],{"type":71,"value":4537},"Supports browse, act, edit, and destructive confirmation in a standard pattern",{"type":65,"tag":3871,"props":4539,"children":4540},{},[4541,4546,4582],{"type":65,"tag":3893,"props":4542,"children":4543},{},[4544],{"type":71,"value":4545},"Auth screen",{"type":65,"tag":3893,"props":4547,"children":4548},{},[4549,4554,4555,4561,4562,4568,4569,4575,4576],{"type":65,"tag":122,"props":4550,"children":4552},{"className":4551},[],[4553],{"type":71,"value":4442},{"type":71,"value":4436},{"type":65,"tag":122,"props":4556,"children":4558},{"className":4557},[],[4559],{"type":71,"value":4560},"Label",{"type":71,"value":4436},{"type":65,"tag":122,"props":4563,"children":4565},{"className":4564},[],[4566],{"type":71,"value":4567},"Input",{"type":71,"value":4436},{"type":65,"tag":122,"props":4570,"children":4572},{"className":4571},[],[4573],{"type":71,"value":4574},"Button",{"type":71,"value":4436},{"type":65,"tag":122,"props":4577,"children":4579},{"className":4578},[],[4580],{"type":71,"value":4581},"Alert",{"type":65,"tag":3893,"props":4583,"children":4584},{},[4585],{"type":71,"value":4586},"Keeps entry flows focused and gives errors a proper treatment",{"type":65,"tag":3871,"props":4588,"children":4589},{},[4590,4595,4611],{"type":65,"tag":3893,"props":4591,"children":4592},{},[4593],{"type":71,"value":4594},"Global search",{"type":65,"tag":3893,"props":4596,"children":4597},{},[4598,4604,4605],{"type":65,"tag":122,"props":4599,"children":4601},{"className":4600},[],[4602],{"type":71,"value":4603},"Command",{"type":71,"value":4436},{"type":65,"tag":122,"props":4606,"children":4608},{"className":4607},[],[4609],{"type":71,"value":4610},"Dialog",{"type":65,"tag":3893,"props":4612,"children":4613},{},[4614],{"type":71,"value":4615},"Fast keyboard-first discovery with an established interaction model",{"type":65,"tag":3871,"props":4617,"children":4618},{},[4619,4624,4645],{"type":65,"tag":3893,"props":4620,"children":4621},{},[4622],{"type":71,"value":4623},"Mobile nav",{"type":65,"tag":3893,"props":4625,"children":4626},{},[4627,4632,4633,4638,4639],{"type":65,"tag":122,"props":4628,"children":4630},{"className":4629},[],[4631],{"type":71,"value":4525},{"type":71,"value":4436},{"type":65,"tag":122,"props":4634,"children":4636},{"className":4635},[],[4637],{"type":71,"value":4574},{"type":71,"value":4436},{"type":65,"tag":122,"props":4640,"children":4642},{"className":4641},[],[4643],{"type":71,"value":4644},"Separator",{"type":65,"tag":3893,"props":4646,"children":4647},{},[4648],{"type":71,"value":4649},"Provides a compact navigation shell that adapts cleanly to small screens",{"type":65,"tag":3871,"props":4651,"children":4652},{},[4653,4658,4680],{"type":65,"tag":3893,"props":4654,"children":4655},{},[4656],{"type":71,"value":4657},"Detail page",{"type":65,"tag":3893,"props":4659,"children":4660},{},[4661,4663,4668,4669,4674,4675],{"type":71,"value":4662},"header + ",{"type":65,"tag":122,"props":4664,"children":4666},{"className":4665},[],[4667],{"type":71,"value":4477},{"type":71,"value":4436},{"type":65,"tag":122,"props":4670,"children":4672},{"className":4671},[],[4673],{"type":71,"value":4644},{"type":71,"value":4436},{"type":65,"tag":122,"props":4676,"children":4678},{"className":4677},[],[4679],{"type":71,"value":4442},{"type":65,"tag":3893,"props":4681,"children":4682},{},[4683],{"type":71,"value":4684},"Balances hierarchy, metadata, and supporting content without over-nesting",{"type":65,"tag":3871,"props":4686,"children":4687},{},[4688,4693,4715],{"type":65,"tag":3893,"props":4689,"children":4690},{},[4691],{"type":71,"value":4692},"Filters",{"type":65,"tag":3893,"props":4694,"children":4695},{},[4696,4701,4703,4708,4709],{"type":65,"tag":122,"props":4697,"children":4699},{"className":4698},[],[4700],{"type":71,"value":4442},{"type":71,"value":4702}," sidebar + ",{"type":65,"tag":122,"props":4704,"children":4706},{"className":4705},[],[4707],{"type":71,"value":4525},{"type":71,"value":4436},{"type":65,"tag":122,"props":4710,"children":4712},{"className":4711},[],[4713],{"type":71,"value":4714},"Select",{"type":65,"tag":3893,"props":4716,"children":4717},{},[4718],{"type":71,"value":4719},"Works for persistent desktop filters and collapsible mobile controls",{"type":65,"tag":3871,"props":4721,"children":4722},{},[4723,4728,4749],{"type":65,"tag":3893,"props":4724,"children":4725},{},[4726],{"type":71,"value":4727},"Empty\u002Floading\u002Ferror states",{"type":65,"tag":3893,"props":4729,"children":4730},{},[4731,4736,4737,4743,4744],{"type":65,"tag":122,"props":4732,"children":4734},{"className":4733},[],[4735],{"type":71,"value":4442},{"type":71,"value":4436},{"type":65,"tag":122,"props":4738,"children":4740},{"className":4739},[],[4741],{"type":71,"value":4742},"Skeleton",{"type":71,"value":4436},{"type":65,"tag":122,"props":4745,"children":4747},{"className":4746},[],[4748],{"type":71,"value":4581},{"type":65,"tag":3893,"props":4750,"children":4751},{},[4752],{"type":71,"value":4753},"Gives non-happy paths a designed surface instead of placeholder text",{"type":65,"tag":105,"props":4755,"children":4757},{"id":4756},"composition-recipes",[4758],{"type":71,"value":4759},"Composition recipes",{"type":65,"tag":439,"props":4761,"children":4762},{},[4763,4788,4805,4837,4864,4890],{"type":65,"tag":443,"props":4764,"children":4765},{},[4766,4768,4773,4774,4779,4781,4786],{"type":71,"value":4767},"Settings page: ",{"type":65,"tag":122,"props":4769,"children":4771},{"className":4770},[],[4772],{"type":71,"value":4434},{"type":71,"value":4436},{"type":65,"tag":122,"props":4775,"children":4777},{"className":4776},[],[4778],{"type":71,"value":4442},{"type":71,"value":4780}," per group + ",{"type":65,"tag":122,"props":4782,"children":4784},{"className":4783},[],[4785],{"type":71,"value":4644},{"type":71,"value":4787}," + save action",{"type":65,"tag":443,"props":4789,"children":4790},{},[4791,4793,4798,4800],{"type":71,"value":4792},"Admin dashboard: summary ",{"type":65,"tag":122,"props":4794,"children":4796},{"className":4795},[],[4797],{"type":71,"value":4442},{"type":71,"value":4799},"s + filter bar + ",{"type":65,"tag":122,"props":4801,"children":4803},{"className":4802},[],[4804],{"type":71,"value":4484},{"type":65,"tag":443,"props":4806,"children":4807},{},[4808,4810,4815,4817,4822,4824,4829,4830,4835],{"type":71,"value":4809},"Entity detail: header + status ",{"type":65,"tag":122,"props":4811,"children":4813},{"className":4812},[],[4814],{"type":71,"value":4477},{"type":71,"value":4816}," + main ",{"type":65,"tag":122,"props":4818,"children":4820},{"className":4819},[],[4821],{"type":71,"value":4442},{"type":71,"value":4823}," + side ",{"type":65,"tag":122,"props":4825,"children":4827},{"className":4826},[],[4828],{"type":71,"value":4442},{"type":71,"value":4436},{"type":65,"tag":122,"props":4831,"children":4833},{"className":4832},[],[4834],{"type":71,"value":4532},{"type":71,"value":4836}," for destructive",{"type":65,"tag":443,"props":4838,"children":4839},{},[4840,4842,4847,4849,4855,4857,4862],{"type":71,"value":4841},"Search-heavy: ",{"type":65,"tag":122,"props":4843,"children":4845},{"className":4844},[],[4846],{"type":71,"value":4603},{"type":71,"value":4848}," for quick find, ",{"type":65,"tag":122,"props":4850,"children":4852},{"className":4851},[],[4853],{"type":71,"value":4854},"Popover",{"type":71,"value":4856}," for pickers, ",{"type":65,"tag":122,"props":4858,"children":4860},{"className":4859},[],[4861],{"type":71,"value":4525},{"type":71,"value":4863}," for mobile filters",{"type":65,"tag":443,"props":4865,"children":4866},{},[4867,4869,4874,4876,4881,4883,4888],{"type":71,"value":4868},"Auth\u002Fonboarding: centered ",{"type":65,"tag":122,"props":4870,"children":4872},{"className":4871},[],[4873],{"type":71,"value":4442},{"type":71,"value":4875}," + social ",{"type":65,"tag":122,"props":4877,"children":4879},{"className":4878},[],[4880],{"type":71,"value":4644},{"type":71,"value":4882}," + inline ",{"type":65,"tag":122,"props":4884,"children":4886},{"className":4885},[],[4887],{"type":71,"value":4581},{"type":71,"value":4889}," for errors",{"type":65,"tag":443,"props":4891,"children":4892},{},[4893,4895,4900,4902,4907],{"type":71,"value":4894},"Destructive flows: ",{"type":65,"tag":122,"props":4896,"children":4898},{"className":4897},[],[4899],{"type":71,"value":4532},{"type":71,"value":4901}," (not ",{"type":65,"tag":122,"props":4903,"children":4905},{"className":4904},[],[4906],{"type":71,"value":4610},{"type":71,"value":4908},") for confirmation",{"type":65,"tag":105,"props":4910,"children":4912},{"id":4911},"anti-patterns-to-avoid",[4913],{"type":71,"value":4914},"Anti-patterns to avoid",{"type":65,"tag":439,"props":4916,"children":4917},{},[4918,4949,4985,4990,4995,5000,5005,5022,5027],{"type":65,"tag":443,"props":4919,"children":4920},{},[4921,4923,4928,4929,4934,4935,4940,4941,4947],{"type":71,"value":4922},"Raw ",{"type":65,"tag":122,"props":4924,"children":4926},{"className":4925},[],[4927],{"type":71,"value":3901},{"type":71,"value":3954},{"type":65,"tag":122,"props":4930,"children":4932},{"className":4931},[],[4933],{"type":71,"value":3952},{"type":71,"value":3954},{"type":65,"tag":122,"props":4936,"children":4938},{"className":4937},[],[4939],{"type":71,"value":3977},{"type":71,"value":3954},{"type":65,"tag":122,"props":4942,"children":4944},{"className":4943},[],[4945],{"type":71,"value":4946},"div",{"type":71,"value":4948}," when shadcn primitives exist",{"type":65,"tag":443,"props":4950,"children":4951},{},[4952,4954,4960,4962,4967,4968,4973,4974,4979,4980],{"type":71,"value":4953},"Repeated ",{"type":65,"tag":122,"props":4955,"children":4957},{"className":4956},[],[4958],{"type":71,"value":4959},"div rounded-xl border p-6",{"type":71,"value":4961}," instead of ",{"type":65,"tag":122,"props":4963,"children":4965},{"className":4964},[],[4966],{"type":71,"value":4434},{"type":71,"value":3954},{"type":65,"tag":122,"props":4969,"children":4971},{"className":4970},[],[4972],{"type":71,"value":4484},{"type":71,"value":3954},{"type":65,"tag":122,"props":4975,"children":4977},{"className":4976},[],[4978],{"type":71,"value":4525},{"type":71,"value":3954},{"type":65,"tag":122,"props":4981,"children":4983},{"className":4982},[],[4984],{"type":71,"value":4610},{"type":65,"tag":443,"props":4986,"children":4987},{},[4988],{"type":71,"value":4989},"Multiple accent colors fighting each other",{"type":65,"tag":443,"props":4991,"children":4992},{},[4993],{"type":71,"value":4994},"Nested cards inside cards inside cards",{"type":65,"tag":443,"props":4996,"children":4997},{},[4998],{"type":71,"value":4999},"Large gradient backgrounds and glassmorphism on every surface",{"type":65,"tag":443,"props":5001,"children":5002},{},[5003],{"type":71,"value":5004},"Mixing arbitrary spacing and radius values",{"type":65,"tag":443,"props":5006,"children":5007},{},[5008,5010,5015,5017],{"type":71,"value":5009},"Using ",{"type":65,"tag":122,"props":5011,"children":5013},{"className":5012},[],[5014],{"type":71,"value":4610},{"type":71,"value":5016}," for destructive confirmation instead of ",{"type":65,"tag":122,"props":5018,"children":5020},{"className":5019},[],[5021],{"type":71,"value":4532},{"type":65,"tag":443,"props":5023,"children":5024},{},[5025],{"type":71,"value":5026},"Shipping empty\u002Floading\u002Ferror states without design treatment",{"type":65,"tag":443,"props":5028,"children":5029},{},[5030],{"type":71,"value":5031},"Using ad-hoc Tailwind palette classes for foundational surfaces instead of theme tokens",{"type":65,"tag":79,"props":5033,"children":5035},{"id":5034},"building-a-custom-registry",[5036],{"type":71,"value":5037},"Building a Custom Registry",{"type":65,"tag":73,"props":5039,"children":5040},{},[5041],{"type":71,"value":5042},"Create your own component registry to share across projects:",{"type":65,"tag":105,"props":5044,"children":5046},{"id":5045},"registry-types-cli-v4",[5047],{"type":71,"value":5048},"Registry Types (CLI v4)",{"type":65,"tag":3863,"props":5050,"children":5051},{},[5052,5068],{"type":65,"tag":3867,"props":5053,"children":5054},{},[5055],{"type":65,"tag":3871,"props":5056,"children":5057},{},[5058,5063],{"type":65,"tag":3875,"props":5059,"children":5060},{},[5061],{"type":71,"value":5062},"Type",{"type":65,"tag":3875,"props":5064,"children":5065},{},[5066],{"type":71,"value":5067},"Purpose",{"type":65,"tag":3886,"props":5069,"children":5070},{},[5071,5088,5104],{"type":65,"tag":3871,"props":5072,"children":5073},{},[5074,5083],{"type":65,"tag":3893,"props":5075,"children":5076},{},[5077],{"type":65,"tag":122,"props":5078,"children":5080},{"className":5079},[],[5081],{"type":71,"value":5082},"registry:ui",{"type":65,"tag":3893,"props":5084,"children":5085},{},[5086],{"type":71,"value":5087},"Individual UI components",{"type":65,"tag":3871,"props":5089,"children":5090},{},[5091,5099],{"type":65,"tag":3893,"props":5092,"children":5093},{},[5094],{"type":65,"tag":122,"props":5095,"children":5097},{"className":5096},[],[5098],{"type":71,"value":697},{"type":65,"tag":3893,"props":5100,"children":5101},{},[5102],{"type":71,"value":5103},"Full design system payload — components, deps, CSS vars, fonts, config",{"type":65,"tag":3871,"props":5105,"children":5106},{},[5107,5115],{"type":65,"tag":3893,"props":5108,"children":5109},{},[5110],{"type":65,"tag":122,"props":5111,"children":5113},{"className":5112},[],[5114],{"type":71,"value":704},{"type":65,"tag":3893,"props":5116,"children":5117},{},[5118],{"type":71,"value":5119},"Font configuration as a first-class registry item",{"type":65,"tag":105,"props":5121,"children":5123},{"id":5122},"_1-define-registryjson",[5124],{"type":71,"value":5125},"1. Define registry.json",{"type":65,"tag":139,"props":5127,"children":5129},{"className":1656,"code":5128,"language":1658,"meta":144,"style":144},"[\n  {\n    \"name\": \"my-component\",\n    \"type\": \"registry:ui\",\n    \"title\": \"My Component\",\n    \"description\": \"A custom component\",\n    \"files\": [\n      {\n        \"path\": \"components\u002Fmy-component.tsx\",\n        \"type\": \"registry:ui\"\n      }\n    ],\n    \"dependencies\": [\"lucide-react\"]\n  }\n]\n",[5130],{"type":65,"tag":122,"props":5131,"children":5132},{"__ignoreMap":144},[5133,5141,5149,5186,5222,5259,5296,5321,5329,5366,5397,5404,5412,5455,5462],{"type":65,"tag":150,"props":5134,"children":5135},{"class":152,"line":153},[5136],{"type":65,"tag":150,"props":5137,"children":5138},{"style":229},[5139],{"type":71,"value":5140},"[\n",{"type":65,"tag":150,"props":5142,"children":5143},{"class":152,"line":163},[5144],{"type":65,"tag":150,"props":5145,"children":5146},{"style":229},[5147],{"type":71,"value":5148},"  {\n",{"type":65,"tag":150,"props":5150,"children":5151},{"class":152,"line":189},[5152,5156,5161,5165,5169,5173,5178,5182],{"type":65,"tag":150,"props":5153,"children":5154},{"style":229},[5155],{"type":71,"value":1829},{"type":65,"tag":150,"props":5157,"children":5158},{"style":1681},[5159],{"type":71,"value":5160},"name",{"type":65,"tag":150,"props":5162,"children":5163},{"style":229},[5164],{"type":71,"value":1689},{"type":65,"tag":150,"props":5166,"children":5167},{"style":229},[5168],{"type":71,"value":1694},{"type":65,"tag":150,"props":5170,"children":5171},{"style":229},[5172],{"type":71,"value":1501},{"type":65,"tag":150,"props":5174,"children":5175},{"style":173},[5176],{"type":71,"value":5177},"my-component",{"type":65,"tag":150,"props":5179,"children":5180},{"style":229},[5181],{"type":71,"value":1689},{"type":65,"tag":150,"props":5183,"children":5184},{"style":229},[5185],{"type":71,"value":1712},{"type":65,"tag":150,"props":5187,"children":5188},{"class":152,"line":199},[5189,5193,5198,5202,5206,5210,5214,5218],{"type":65,"tag":150,"props":5190,"children":5191},{"style":229},[5192],{"type":71,"value":1829},{"type":65,"tag":150,"props":5194,"children":5195},{"style":1681},[5196],{"type":71,"value":5197},"type",{"type":65,"tag":150,"props":5199,"children":5200},{"style":229},[5201],{"type":71,"value":1689},{"type":65,"tag":150,"props":5203,"children":5204},{"style":229},[5205],{"type":71,"value":1694},{"type":65,"tag":150,"props":5207,"children":5208},{"style":229},[5209],{"type":71,"value":1501},{"type":65,"tag":150,"props":5211,"children":5212},{"style":173},[5213],{"type":71,"value":5082},{"type":65,"tag":150,"props":5215,"children":5216},{"style":229},[5217],{"type":71,"value":1689},{"type":65,"tag":150,"props":5219,"children":5220},{"style":229},[5221],{"type":71,"value":1712},{"type":65,"tag":150,"props":5223,"children":5224},{"class":152,"line":208},[5225,5229,5234,5238,5242,5246,5251,5255],{"type":65,"tag":150,"props":5226,"children":5227},{"style":229},[5228],{"type":71,"value":1829},{"type":65,"tag":150,"props":5230,"children":5231},{"style":1681},[5232],{"type":71,"value":5233},"title",{"type":65,"tag":150,"props":5235,"children":5236},{"style":229},[5237],{"type":71,"value":1689},{"type":65,"tag":150,"props":5239,"children":5240},{"style":229},[5241],{"type":71,"value":1694},{"type":65,"tag":150,"props":5243,"children":5244},{"style":229},[5245],{"type":71,"value":1501},{"type":65,"tag":150,"props":5247,"children":5248},{"style":173},[5249],{"type":71,"value":5250},"My Component",{"type":65,"tag":150,"props":5252,"children":5253},{"style":229},[5254],{"type":71,"value":1689},{"type":65,"tag":150,"props":5256,"children":5257},{"style":229},[5258],{"type":71,"value":1712},{"type":65,"tag":150,"props":5260,"children":5261},{"class":152,"line":42},[5262,5266,5271,5275,5279,5283,5288,5292],{"type":65,"tag":150,"props":5263,"children":5264},{"style":229},[5265],{"type":71,"value":1829},{"type":65,"tag":150,"props":5267,"children":5268},{"style":1681},[5269],{"type":71,"value":5270},"description",{"type":65,"tag":150,"props":5272,"children":5273},{"style":229},[5274],{"type":71,"value":1689},{"type":65,"tag":150,"props":5276,"children":5277},{"style":229},[5278],{"type":71,"value":1694},{"type":65,"tag":150,"props":5280,"children":5281},{"style":229},[5282],{"type":71,"value":1501},{"type":65,"tag":150,"props":5284,"children":5285},{"style":173},[5286],{"type":71,"value":5287},"A custom component",{"type":65,"tag":150,"props":5289,"children":5290},{"style":229},[5291],{"type":71,"value":1689},{"type":65,"tag":150,"props":5293,"children":5294},{"style":229},[5295],{"type":71,"value":1712},{"type":65,"tag":150,"props":5297,"children":5298},{"class":152,"line":263},[5299,5303,5308,5312,5316],{"type":65,"tag":150,"props":5300,"children":5301},{"style":229},[5302],{"type":71,"value":1829},{"type":65,"tag":150,"props":5304,"children":5305},{"style":1681},[5306],{"type":71,"value":5307},"files",{"type":65,"tag":150,"props":5309,"children":5310},{"style":229},[5311],{"type":71,"value":1689},{"type":65,"tag":150,"props":5313,"children":5314},{"style":229},[5315],{"type":71,"value":1694},{"type":65,"tag":150,"props":5317,"children":5318},{"style":229},[5319],{"type":71,"value":5320}," [\n",{"type":65,"tag":150,"props":5322,"children":5323},{"class":152,"line":272},[5324],{"type":65,"tag":150,"props":5325,"children":5326},{"style":229},[5327],{"type":71,"value":5328},"      {\n",{"type":65,"tag":150,"props":5330,"children":5331},{"class":152,"line":303},[5332,5336,5341,5345,5349,5353,5358,5362],{"type":65,"tag":150,"props":5333,"children":5334},{"style":229},[5335],{"type":71,"value":2573},{"type":65,"tag":150,"props":5337,"children":5338},{"style":167},[5339],{"type":71,"value":5340},"path",{"type":65,"tag":150,"props":5342,"children":5343},{"style":229},[5344],{"type":71,"value":1689},{"type":65,"tag":150,"props":5346,"children":5347},{"style":229},[5348],{"type":71,"value":1694},{"type":65,"tag":150,"props":5350,"children":5351},{"style":229},[5352],{"type":71,"value":1501},{"type":65,"tag":150,"props":5354,"children":5355},{"style":173},[5356],{"type":71,"value":5357},"components\u002Fmy-component.tsx",{"type":65,"tag":150,"props":5359,"children":5360},{"style":229},[5361],{"type":71,"value":1689},{"type":65,"tag":150,"props":5363,"children":5364},{"style":229},[5365],{"type":71,"value":1712},{"type":65,"tag":150,"props":5367,"children":5368},{"class":152,"line":332},[5369,5373,5377,5381,5385,5389,5393],{"type":65,"tag":150,"props":5370,"children":5371},{"style":229},[5372],{"type":71,"value":2573},{"type":65,"tag":150,"props":5374,"children":5375},{"style":167},[5376],{"type":71,"value":5197},{"type":65,"tag":150,"props":5378,"children":5379},{"style":229},[5380],{"type":71,"value":1689},{"type":65,"tag":150,"props":5382,"children":5383},{"style":229},[5384],{"type":71,"value":1694},{"type":65,"tag":150,"props":5386,"children":5387},{"style":229},[5388],{"type":71,"value":1501},{"type":65,"tag":150,"props":5390,"children":5391},{"style":173},[5392],{"type":71,"value":5082},{"type":65,"tag":150,"props":5394,"children":5395},{"style":229},[5396],{"type":71,"value":1511},{"type":65,"tag":150,"props":5398,"children":5399},{"class":152,"line":340},[5400],{"type":65,"tag":150,"props":5401,"children":5402},{"style":229},[5403],{"type":71,"value":2608},{"type":65,"tag":150,"props":5405,"children":5406},{"class":152,"line":915},[5407],{"type":65,"tag":150,"props":5408,"children":5409},{"style":229},[5410],{"type":71,"value":5411},"    ],\n",{"type":65,"tag":150,"props":5413,"children":5414},{"class":152,"line":1999},[5415,5419,5424,5428,5432,5437,5441,5446,5450],{"type":65,"tag":150,"props":5416,"children":5417},{"style":229},[5418],{"type":71,"value":1829},{"type":65,"tag":150,"props":5420,"children":5421},{"style":1681},[5422],{"type":71,"value":5423},"dependencies",{"type":65,"tag":150,"props":5425,"children":5426},{"style":229},[5427],{"type":71,"value":1689},{"type":65,"tag":150,"props":5429,"children":5430},{"style":229},[5431],{"type":71,"value":1694},{"type":65,"tag":150,"props":5433,"children":5434},{"style":229},[5435],{"type":71,"value":5436}," [",{"type":65,"tag":150,"props":5438,"children":5439},{"style":229},[5440],{"type":71,"value":1689},{"type":65,"tag":150,"props":5442,"children":5443},{"style":173},[5444],{"type":71,"value":5445},"lucide-react",{"type":65,"tag":150,"props":5447,"children":5448},{"style":229},[5449],{"type":71,"value":1689},{"type":65,"tag":150,"props":5451,"children":5452},{"style":229},[5453],{"type":71,"value":5454},"]\n",{"type":65,"tag":150,"props":5456,"children":5457},{"class":152,"line":2037},[5458],{"type":65,"tag":150,"props":5459,"children":5460},{"style":229},[5461],{"type":71,"value":2361},{"type":65,"tag":150,"props":5463,"children":5464},{"class":152,"line":2075},[5465],{"type":65,"tag":150,"props":5466,"children":5467},{"style":229},[5468],{"type":71,"value":5454},{"type":65,"tag":105,"props":5470,"children":5472},{"id":5471},"_2-build",[5473],{"type":71,"value":5474},"2. Build",{"type":65,"tag":139,"props":5476,"children":5478},{"className":141,"code":5477,"language":143,"meta":144,"style":144},"npx shadcn@latest build\n# Outputs to public\u002Fr\u002Fmy-component.json\n",[5479],{"type":65,"tag":122,"props":5480,"children":5481},{"__ignoreMap":144},[5482,5497],{"type":65,"tag":150,"props":5483,"children":5484},{"class":152,"line":153},[5485,5489,5493],{"type":65,"tag":150,"props":5486,"children":5487},{"style":167},[5488],{"type":71,"value":170},{"type":65,"tag":150,"props":5490,"children":5491},{"style":173},[5492],{"type":71,"value":176},{"type":65,"tag":150,"props":5494,"children":5495},{"style":173},[5496],{"type":71,"value":1090},{"type":65,"tag":150,"props":5498,"children":5499},{"class":152,"line":163},[5500],{"type":65,"tag":150,"props":5501,"children":5502},{"style":157},[5503],{"type":71,"value":5504},"# Outputs to public\u002Fr\u002Fmy-component.json\n",{"type":65,"tag":105,"props":5506,"children":5508},{"id":5507},"_3-consume",[5509],{"type":71,"value":5510},"3. Consume",{"type":65,"tag":139,"props":5512,"children":5514},{"className":141,"code":5513,"language":143,"meta":144,"style":144},"npx shadcn@latest add https:\u002F\u002Fyour-domain.com\u002Fr\u002Fmy-component.json\n",[5515],{"type":65,"tag":122,"props":5516,"children":5517},{"__ignoreMap":144},[5518],{"type":65,"tag":150,"props":5519,"children":5520},{"class":152,"line":153},[5521,5525,5529,5533],{"type":65,"tag":150,"props":5522,"children":5523},{"style":167},[5524],{"type":71,"value":170},{"type":65,"tag":150,"props":5526,"children":5527},{"style":173},[5528],{"type":71,"value":176},{"type":65,"tag":150,"props":5530,"children":5531},{"style":173},[5532],{"type":71,"value":792},{"type":65,"tag":150,"props":5534,"children":5535},{"style":173},[5536],{"type":71,"value":5537}," https:\u002F\u002Fyour-domain.com\u002Fr\u002Fmy-component.json\n",{"type":65,"tag":79,"props":5539,"children":5541},{"id":5540},"component-gotchas",[5542],{"type":71,"value":5543},"Component Gotchas",{"type":65,"tag":105,"props":5545,"children":5547},{"id":5546},"shadcn-init-breaks-geist-font-in-nextjs-tailwind-v4",[5548,5553],{"type":65,"tag":122,"props":5549,"children":5551},{"className":5550},[],[5552],{"type":71,"value":127},{"type":71,"value":5554}," Breaks Geist Font in Next.js (Tailwind v4)",{"type":65,"tag":73,"props":5556,"children":5557},{},[5558,5563,5565,5570,5572,5578,5580,5586,5588,5593,5595,5601],{"type":65,"tag":122,"props":5559,"children":5561},{"className":5560},[],[5562],{"type":71,"value":127},{"type":71,"value":5564}," rewrites ",{"type":65,"tag":122,"props":5566,"children":5568},{"className":5567},[],[5569],{"type":71,"value":2689},{"type":71,"value":5571}," and may introduce ",{"type":65,"tag":122,"props":5573,"children":5575},{"className":5574},[],[5576],{"type":71,"value":5577},"--font-sans: var(--font-sans)",{"type":71,"value":5579}," — a circular self-reference that breaks font loading. Tailwind v4's ",{"type":65,"tag":122,"props":5581,"children":5583},{"className":5582},[],[5584],{"type":71,"value":5585},"@theme inline",{"type":71,"value":5587}," resolves CSS custom properties at ",{"type":65,"tag":91,"props":5589,"children":5590},{},[5591],{"type":71,"value":5592},"parse time",{"type":71,"value":5594},", not runtime — so even ",{"type":65,"tag":122,"props":5596,"children":5598},{"className":5597},[],[5599],{"type":71,"value":5600},"var(--font-geist-sans)",{"type":71,"value":5602}," won't work because Next.js injects that variable via className at runtime.",{"type":65,"tag":73,"props":5604,"children":5605},{},[5606,5611,5613,5618],{"type":65,"tag":91,"props":5607,"children":5608},{},[5609],{"type":71,"value":5610},"The fix",{"type":71,"value":5612},": Use literal font family names in ",{"type":65,"tag":122,"props":5614,"children":5616},{"className":5615},[],[5617],{"type":71,"value":5585},{"type":71,"value":1694},{"type":65,"tag":139,"props":5620,"children":5622},{"className":2693,"code":5621,"language":1871,"meta":144,"style":144},"\u002F* In @theme inline — CORRECT (literal names) *\u002F\n--font-sans: \"Geist\", \"Geist Fallback\", ui-sans-serif, system-ui, sans-serif;\n--font-mono: \"Geist Mono\", \"Geist Mono Fallback\", ui-monospace, monospace;\n\n\u002F* WRONG — circular, resolves to nothing *\u002F\n--font-sans: var(--font-sans);\n\n\u002F* ALSO WRONG — @theme inline can't resolve runtime CSS variables *\u002F\n--font-sans: var(--font-geist-sans);\n",[5623],{"type":65,"tag":122,"props":5624,"children":5625},{"__ignoreMap":144},[5626,5634,5683,5718,5725,5733,5741,5748,5756],{"type":65,"tag":150,"props":5627,"children":5628},{"class":152,"line":153},[5629],{"type":65,"tag":150,"props":5630,"children":5631},{"style":157},[5632],{"type":71,"value":5633},"\u002F* In @theme inline — CORRECT (literal names) *\u002F\n",{"type":65,"tag":150,"props":5635,"children":5636},{"class":152,"line":163},[5637,5642,5646,5651,5655,5660,5664,5669,5673,5678],{"type":65,"tag":150,"props":5638,"children":5639},{"style":240},[5640],{"type":71,"value":5641},"--font-sans: \"Geist\"",{"type":65,"tag":150,"props":5643,"children":5644},{"style":229},[5645],{"type":71,"value":1934},{"type":65,"tag":150,"props":5647,"children":5648},{"style":240},[5649],{"type":71,"value":5650}," \"Geist Fallback\"",{"type":65,"tag":150,"props":5652,"children":5653},{"style":229},[5654],{"type":71,"value":1934},{"type":65,"tag":150,"props":5656,"children":5657},{"style":167},[5658],{"type":71,"value":5659}," ui-sans-serif",{"type":65,"tag":150,"props":5661,"children":5662},{"style":229},[5663],{"type":71,"value":1934},{"type":65,"tag":150,"props":5665,"children":5666},{"style":167},[5667],{"type":71,"value":5668}," system-ui",{"type":65,"tag":150,"props":5670,"children":5671},{"style":229},[5672],{"type":71,"value":1934},{"type":65,"tag":150,"props":5674,"children":5675},{"style":167},[5676],{"type":71,"value":5677}," sans-serif",{"type":65,"tag":150,"props":5679,"children":5680},{"style":240},[5681],{"type":71,"value":5682},";\n",{"type":65,"tag":150,"props":5684,"children":5685},{"class":152,"line":189},[5686,5691,5695,5700,5704,5709,5713],{"type":65,"tag":150,"props":5687,"children":5688},{"style":240},[5689],{"type":71,"value":5690},"--font-mono: \"Geist Mono\"",{"type":65,"tag":150,"props":5692,"children":5693},{"style":229},[5694],{"type":71,"value":1934},{"type":65,"tag":150,"props":5696,"children":5697},{"style":240},[5698],{"type":71,"value":5699}," \"Geist Mono Fallback\"",{"type":65,"tag":150,"props":5701,"children":5702},{"style":229},[5703],{"type":71,"value":1934},{"type":65,"tag":150,"props":5705,"children":5706},{"style":167},[5707],{"type":71,"value":5708}," ui-monospace",{"type":65,"tag":150,"props":5710,"children":5711},{"style":229},[5712],{"type":71,"value":1934},{"type":65,"tag":150,"props":5714,"children":5715},{"style":240},[5716],{"type":71,"value":5717}," monospace;\n",{"type":65,"tag":150,"props":5719,"children":5720},{"class":152,"line":199},[5721],{"type":65,"tag":150,"props":5722,"children":5723},{"emptyLinePlaceholder":193},[5724],{"type":71,"value":196},{"type":65,"tag":150,"props":5726,"children":5727},{"class":152,"line":208},[5728],{"type":65,"tag":150,"props":5729,"children":5730},{"style":157},[5731],{"type":71,"value":5732},"\u002F* WRONG — circular, resolves to nothing *\u002F\n",{"type":65,"tag":150,"props":5734,"children":5735},{"class":152,"line":42},[5736],{"type":65,"tag":150,"props":5737,"children":5738},{"style":240},[5739],{"type":71,"value":5740},"--font-sans: var(--font-sans);\n",{"type":65,"tag":150,"props":5742,"children":5743},{"class":152,"line":263},[5744],{"type":65,"tag":150,"props":5745,"children":5746},{"emptyLinePlaceholder":193},[5747],{"type":71,"value":196},{"type":65,"tag":150,"props":5749,"children":5750},{"class":152,"line":272},[5751],{"type":65,"tag":150,"props":5752,"children":5753},{"style":157},[5754],{"type":71,"value":5755},"\u002F* ALSO WRONG — @theme inline can't resolve runtime CSS variables *\u002F\n",{"type":65,"tag":150,"props":5757,"children":5758},{"class":152,"line":303},[5759],{"type":65,"tag":150,"props":5760,"children":5761},{"style":240},[5762],{"type":71,"value":5763},"--font-sans: var(--font-geist-sans);\n",{"type":65,"tag":73,"props":5765,"children":5766},{},[5767,5777],{"type":65,"tag":91,"props":5768,"children":5769},{},[5770,5772],{"type":71,"value":5771},"After running ",{"type":65,"tag":122,"props":5773,"children":5775},{"className":5774},[],[5776],{"type":71,"value":127},{"type":71,"value":5778},", always:",{"type":65,"tag":713,"props":5780,"children":5781},{},[5782,5794],{"type":65,"tag":443,"props":5783,"children":5784},{},[5785,5787,5792],{"type":71,"value":5786},"Replace font declarations in ",{"type":65,"tag":122,"props":5788,"children":5790},{"className":5789},[],[5791],{"type":71,"value":5585},{"type":71,"value":5793}," with literal Geist font names (as shown above)",{"type":65,"tag":443,"props":5795,"children":5796},{},[5797,5799,5805,5807,5812,5814,5820],{"type":71,"value":5798},"Move the font variable classNames from ",{"type":65,"tag":122,"props":5800,"children":5802},{"className":5801},[],[5803],{"type":71,"value":5804},"\u003Cbody>",{"type":71,"value":5806}," to ",{"type":65,"tag":122,"props":5808,"children":5810},{"className":5809},[],[5811],{"type":71,"value":3296},{"type":71,"value":5813}," in ",{"type":65,"tag":122,"props":5815,"children":5817},{"className":5816},[],[5818],{"type":71,"value":5819},"layout.tsx",{"type":71,"value":1694},{"type":65,"tag":139,"props":5822,"children":5824},{"className":1453,"code":5823,"language":1455,"meta":144,"style":144},"\u002F\u002F layout.tsx — font variables on \u003Chtml>, not \u003Cbody>\n\u003Chtml lang=\"en\" className={`${geistSans.variable} ${geistMono.variable}`}>\n  \u003Cbody className=\"antialiased\">\n",[5825],{"type":65,"tag":122,"props":5826,"children":5827},{"__ignoreMap":144},[5828,5836,5928],{"type":65,"tag":150,"props":5829,"children":5830},{"class":152,"line":153},[5831],{"type":65,"tag":150,"props":5832,"children":5833},{"style":157},[5834],{"type":71,"value":5835},"\u002F\u002F layout.tsx — font variables on \u003Chtml>, not \u003Cbody>\n",{"type":65,"tag":150,"props":5837,"children":5838},{"class":152,"line":163},[5839,5843,5847,5851,5855,5859,5863,5867,5871,5876,5881,5886,5890,5895,5900,5905,5910,5914,5918,5923],{"type":65,"tag":150,"props":5840,"children":5841},{"style":229},[5842],{"type":71,"value":3320},{"type":65,"tag":150,"props":5844,"children":5845},{"style":2576},[5846],{"type":71,"value":3325},{"type":65,"tag":150,"props":5848,"children":5849},{"style":1681},[5850],{"type":71,"value":3330},{"type":65,"tag":150,"props":5852,"children":5853},{"style":229},[5854],{"type":71,"value":3335},{"type":65,"tag":150,"props":5856,"children":5857},{"style":229},[5858],{"type":71,"value":1689},{"type":65,"tag":150,"props":5860,"children":5861},{"style":173},[5862],{"type":71,"value":3344},{"type":65,"tag":150,"props":5864,"children":5865},{"style":229},[5866],{"type":71,"value":1689},{"type":65,"tag":150,"props":5868,"children":5869},{"style":1681},[5870],{"type":71,"value":3353},{"type":65,"tag":150,"props":5872,"children":5873},{"style":229},[5874],{"type":71,"value":5875},"={",{"type":65,"tag":150,"props":5877,"children":5878},{"style":229},[5879],{"type":71,"value":5880},"`${",{"type":65,"tag":150,"props":5882,"children":5883},{"style":240},[5884],{"type":71,"value":5885},"geistSans",{"type":65,"tag":150,"props":5887,"children":5888},{"style":229},[5889],{"type":71,"value":1602},{"type":65,"tag":150,"props":5891,"children":5892},{"style":240},[5893],{"type":71,"value":5894},"variable",{"type":65,"tag":150,"props":5896,"children":5897},{"style":229},[5898],{"type":71,"value":5899},"}",{"type":65,"tag":150,"props":5901,"children":5902},{"style":229},[5903],{"type":71,"value":5904}," ${",{"type":65,"tag":150,"props":5906,"children":5907},{"style":240},[5908],{"type":71,"value":5909},"geistMono",{"type":65,"tag":150,"props":5911,"children":5912},{"style":229},[5913],{"type":71,"value":1602},{"type":65,"tag":150,"props":5915,"children":5916},{"style":240},[5917],{"type":71,"value":5894},{"type":65,"tag":150,"props":5919,"children":5920},{"style":229},[5921],{"type":71,"value":5922},"}`",{"type":65,"tag":150,"props":5924,"children":5925},{"style":229},[5926],{"type":71,"value":5927},"}>\n",{"type":65,"tag":150,"props":5929,"children":5930},{"class":152,"line":189},[5931,5936,5941,5945,5949,5953,5958,5962],{"type":65,"tag":150,"props":5932,"children":5933},{"style":229},[5934],{"type":71,"value":5935},"  \u003C",{"type":65,"tag":150,"props":5937,"children":5938},{"style":2576},[5939],{"type":71,"value":5940},"body",{"type":65,"tag":150,"props":5942,"children":5943},{"style":1681},[5944],{"type":71,"value":3353},{"type":65,"tag":150,"props":5946,"children":5947},{"style":229},[5948],{"type":71,"value":3335},{"type":65,"tag":150,"props":5950,"children":5951},{"style":229},[5952],{"type":71,"value":1689},{"type":65,"tag":150,"props":5954,"children":5955},{"style":173},[5956],{"type":71,"value":5957},"antialiased",{"type":65,"tag":150,"props":5959,"children":5960},{"style":229},[5961],{"type":71,"value":1689},{"type":65,"tag":150,"props":5963,"children":5964},{"style":229},[5965],{"type":71,"value":3374},{"type":65,"tag":105,"props":5967,"children":5969},{"id":5968},"avatar-has-no-size-prop",[5970,5972,5978],{"type":71,"value":5971},"Avatar Has No ",{"type":65,"tag":122,"props":5973,"children":5975},{"className":5974},[],[5976],{"type":71,"value":5977},"size",{"type":71,"value":5979}," Prop",{"type":65,"tag":73,"props":5981,"children":5982},{},[5983,5985,5990,5992,5997],{"type":71,"value":5984},"The shadcn Avatar component does ",{"type":65,"tag":91,"props":5986,"children":5987},{},[5988],{"type":71,"value":5989},"not",{"type":71,"value":5991}," accept a ",{"type":65,"tag":122,"props":5993,"children":5995},{"className":5994},[],[5996],{"type":71,"value":5977},{"type":71,"value":5998}," variant prop. Control size with Tailwind classes:",{"type":65,"tag":139,"props":6000,"children":6002},{"className":1453,"code":6001,"language":1455,"meta":144,"style":144},"\u002F\u002F WRONG — no size variant exists\n\u003CAvatar size=\"lg\" \u002F>  \u002F\u002F ❌ TypeScript error \u002F silently ignored\n\n\u002F\u002F CORRECT — use Tailwind\n\u003CAvatar className=\"h-12 w-12\">\n  \u003CAvatarImage src={user.image} \u002F>\n  \u003CAvatarFallback>JD\u003C\u002FAvatarFallback>\n\u003C\u002FAvatar>\n\n\u002F\u002F Small avatar\n\u003CAvatar className=\"h-6 w-6\"> ... \u003C\u002FAvatar>\n",[6003],{"type":65,"tag":122,"props":6004,"children":6005},{"__ignoreMap":144},[6006,6014,6058,6065,6073,6109,6149,6182,6197,6204,6212],{"type":65,"tag":150,"props":6007,"children":6008},{"class":152,"line":153},[6009],{"type":65,"tag":150,"props":6010,"children":6011},{"style":157},[6012],{"type":71,"value":6013},"\u002F\u002F WRONG — no size variant exists\n",{"type":65,"tag":150,"props":6015,"children":6016},{"class":152,"line":163},[6017,6021,6026,6031,6035,6039,6044,6048,6053],{"type":65,"tag":150,"props":6018,"children":6019},{"style":229},[6020],{"type":71,"value":3320},{"type":65,"tag":150,"props":6022,"children":6023},{"style":167},[6024],{"type":71,"value":6025},"Avatar",{"type":65,"tag":150,"props":6027,"children":6028},{"style":1681},[6029],{"type":71,"value":6030}," size",{"type":65,"tag":150,"props":6032,"children":6033},{"style":229},[6034],{"type":71,"value":3335},{"type":65,"tag":150,"props":6036,"children":6037},{"style":229},[6038],{"type":71,"value":1689},{"type":65,"tag":150,"props":6040,"children":6041},{"style":173},[6042],{"type":71,"value":6043},"lg",{"type":65,"tag":150,"props":6045,"children":6046},{"style":229},[6047],{"type":71,"value":1689},{"type":65,"tag":150,"props":6049,"children":6050},{"style":229},[6051],{"type":71,"value":6052}," \u002F>",{"type":65,"tag":150,"props":6054,"children":6055},{"style":157},[6056],{"type":71,"value":6057},"  \u002F\u002F ❌ TypeScript error \u002F silently ignored\n",{"type":65,"tag":150,"props":6059,"children":6060},{"class":152,"line":189},[6061],{"type":65,"tag":150,"props":6062,"children":6063},{"emptyLinePlaceholder":193},[6064],{"type":71,"value":196},{"type":65,"tag":150,"props":6066,"children":6067},{"class":152,"line":199},[6068],{"type":65,"tag":150,"props":6069,"children":6070},{"style":157},[6071],{"type":71,"value":6072},"\u002F\u002F CORRECT — use Tailwind\n",{"type":65,"tag":150,"props":6074,"children":6075},{"class":152,"line":208},[6076,6080,6084,6088,6092,6096,6101,6105],{"type":65,"tag":150,"props":6077,"children":6078},{"style":229},[6079],{"type":71,"value":3320},{"type":65,"tag":150,"props":6081,"children":6082},{"style":167},[6083],{"type":71,"value":6025},{"type":65,"tag":150,"props":6085,"children":6086},{"style":1681},[6087],{"type":71,"value":3353},{"type":65,"tag":150,"props":6089,"children":6090},{"style":229},[6091],{"type":71,"value":3335},{"type":65,"tag":150,"props":6093,"children":6094},{"style":229},[6095],{"type":71,"value":1689},{"type":65,"tag":150,"props":6097,"children":6098},{"style":173},[6099],{"type":71,"value":6100},"h-12 w-12",{"type":65,"tag":150,"props":6102,"children":6103},{"style":229},[6104],{"type":71,"value":1689},{"type":65,"tag":150,"props":6106,"children":6107},{"style":229},[6108],{"type":71,"value":3374},{"type":65,"tag":150,"props":6110,"children":6111},{"class":152,"line":42},[6112,6116,6121,6126,6130,6135,6139,6144],{"type":65,"tag":150,"props":6113,"children":6114},{"style":229},[6115],{"type":71,"value":5935},{"type":65,"tag":150,"props":6117,"children":6118},{"style":167},[6119],{"type":71,"value":6120},"AvatarImage",{"type":65,"tag":150,"props":6122,"children":6123},{"style":1681},[6124],{"type":71,"value":6125}," src",{"type":65,"tag":150,"props":6127,"children":6128},{"style":229},[6129],{"type":71,"value":5875},{"type":65,"tag":150,"props":6131,"children":6132},{"style":240},[6133],{"type":71,"value":6134},"user",{"type":65,"tag":150,"props":6136,"children":6137},{"style":229},[6138],{"type":71,"value":1602},{"type":65,"tag":150,"props":6140,"children":6141},{"style":240},[6142],{"type":71,"value":6143},"image",{"type":65,"tag":150,"props":6145,"children":6146},{"style":229},[6147],{"type":71,"value":6148},"} \u002F>\n",{"type":65,"tag":150,"props":6150,"children":6151},{"class":152,"line":263},[6152,6156,6161,6165,6170,6174,6178],{"type":65,"tag":150,"props":6153,"children":6154},{"style":229},[6155],{"type":71,"value":5935},{"type":65,"tag":150,"props":6157,"children":6158},{"style":167},[6159],{"type":71,"value":6160},"AvatarFallback",{"type":65,"tag":150,"props":6162,"children":6163},{"style":229},[6164],{"type":71,"value":248},{"type":65,"tag":150,"props":6166,"children":6167},{"style":240},[6168],{"type":71,"value":6169},"JD",{"type":65,"tag":150,"props":6171,"children":6172},{"style":229},[6173],{"type":71,"value":3516},{"type":65,"tag":150,"props":6175,"children":6176},{"style":167},[6177],{"type":71,"value":6160},{"type":65,"tag":150,"props":6179,"children":6180},{"style":229},[6181],{"type":71,"value":3374},{"type":65,"tag":150,"props":6183,"children":6184},{"class":152,"line":272},[6185,6189,6193],{"type":65,"tag":150,"props":6186,"children":6187},{"style":229},[6188],{"type":71,"value":3516},{"type":65,"tag":150,"props":6190,"children":6191},{"style":167},[6192],{"type":71,"value":6025},{"type":65,"tag":150,"props":6194,"children":6195},{"style":229},[6196],{"type":71,"value":3374},{"type":65,"tag":150,"props":6198,"children":6199},{"class":152,"line":303},[6200],{"type":65,"tag":150,"props":6201,"children":6202},{"emptyLinePlaceholder":193},[6203],{"type":71,"value":196},{"type":65,"tag":150,"props":6205,"children":6206},{"class":152,"line":332},[6207],{"type":65,"tag":150,"props":6208,"children":6209},{"style":157},[6210],{"type":71,"value":6211},"\u002F\u002F Small avatar\n",{"type":65,"tag":150,"props":6213,"children":6214},{"class":152,"line":340},[6215,6219,6223,6227,6231,6235,6240,6244,6248,6253,6257,6261],{"type":65,"tag":150,"props":6216,"children":6217},{"style":229},[6218],{"type":71,"value":3320},{"type":65,"tag":150,"props":6220,"children":6221},{"style":167},[6222],{"type":71,"value":6025},{"type":65,"tag":150,"props":6224,"children":6225},{"style":1681},[6226],{"type":71,"value":3353},{"type":65,"tag":150,"props":6228,"children":6229},{"style":229},[6230],{"type":71,"value":3335},{"type":65,"tag":150,"props":6232,"children":6233},{"style":229},[6234],{"type":71,"value":1689},{"type":65,"tag":150,"props":6236,"children":6237},{"style":173},[6238],{"type":71,"value":6239},"h-6 w-6",{"type":65,"tag":150,"props":6241,"children":6242},{"style":229},[6243],{"type":71,"value":1689},{"type":65,"tag":150,"props":6245,"children":6246},{"style":229},[6247],{"type":71,"value":248},{"type":65,"tag":150,"props":6249,"children":6250},{"style":240},[6251],{"type":71,"value":6252}," ... ",{"type":65,"tag":150,"props":6254,"children":6255},{"style":229},[6256],{"type":71,"value":3516},{"type":65,"tag":150,"props":6258,"children":6259},{"style":167},[6260],{"type":71,"value":6025},{"type":65,"tag":150,"props":6262,"children":6263},{"style":229},[6264],{"type":71,"value":3374},{"type":65,"tag":73,"props":6266,"children":6267},{},[6268,6270,6276],{"type":71,"value":6269},"This applies to most shadcn components — they use Tailwind classes for sizing, not variant props. If you need reusable size variants, add them yourself via ",{"type":65,"tag":122,"props":6271,"children":6273},{"className":6272},[],[6274],{"type":71,"value":6275},"cva",{"type":71,"value":6277}," in the component source.",{"type":65,"tag":79,"props":6279,"children":6281},{"id":6280},"common-patterns",[6282],{"type":71,"value":6283},"Common Patterns",{"type":65,"tag":105,"props":6285,"children":6287},{"id":6286},"cn-utility",[6288],{"type":71,"value":6289},"cn() Utility",{"type":65,"tag":73,"props":6291,"children":6292},{},[6293,6295,6300],{"type":71,"value":6294},"All shadcn components use the ",{"type":65,"tag":122,"props":6296,"children":6298},{"className":6297},[],[6299],{"type":71,"value":748},{"type":71,"value":6301}," utility for conditional class merging:",{"type":65,"tag":139,"props":6303,"children":6307},{"className":6304,"code":6305,"language":6306,"meta":144,"style":144},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","ts",[6308],{"type":65,"tag":122,"props":6309,"children":6310},{"__ignoreMap":144},[6311,6362,6399,6406,6457,6491],{"type":65,"tag":150,"props":6312,"children":6313},{"class":152,"line":153},[6314,6318,6322,6327,6331,6336,6341,6345,6349,6353,6358],{"type":65,"tag":150,"props":6315,"children":6316},{"style":1473},[6317],{"type":71,"value":1476},{"type":65,"tag":150,"props":6319,"children":6320},{"style":229},[6321],{"type":71,"value":1538},{"type":65,"tag":150,"props":6323,"children":6324},{"style":240},[6325],{"type":71,"value":6326}," clsx",{"type":65,"tag":150,"props":6328,"children":6329},{"style":229},[6330],{"type":71,"value":1934},{"type":65,"tag":150,"props":6332,"children":6333},{"style":1473},[6334],{"type":71,"value":6335}," type",{"type":65,"tag":150,"props":6337,"children":6338},{"style":240},[6339],{"type":71,"value":6340}," ClassValue",{"type":65,"tag":150,"props":6342,"children":6343},{"style":229},[6344],{"type":71,"value":1557},{"type":65,"tag":150,"props":6346,"children":6347},{"style":1473},[6348],{"type":71,"value":1562},{"type":65,"tag":150,"props":6350,"children":6351},{"style":229},[6352],{"type":71,"value":3415},{"type":65,"tag":150,"props":6354,"children":6355},{"style":173},[6356],{"type":71,"value":6357},"clsx",{"type":65,"tag":150,"props":6359,"children":6360},{"style":229},[6361],{"type":71,"value":3425},{"type":65,"tag":150,"props":6363,"children":6364},{"class":152,"line":163},[6365,6369,6373,6378,6382,6386,6390,6395],{"type":65,"tag":150,"props":6366,"children":6367},{"style":1473},[6368],{"type":71,"value":1476},{"type":65,"tag":150,"props":6370,"children":6371},{"style":229},[6372],{"type":71,"value":1538},{"type":65,"tag":150,"props":6374,"children":6375},{"style":240},[6376],{"type":71,"value":6377}," twMerge",{"type":65,"tag":150,"props":6379,"children":6380},{"style":229},[6381],{"type":71,"value":1557},{"type":65,"tag":150,"props":6383,"children":6384},{"style":1473},[6385],{"type":71,"value":1562},{"type":65,"tag":150,"props":6387,"children":6388},{"style":229},[6389],{"type":71,"value":3415},{"type":65,"tag":150,"props":6391,"children":6392},{"style":173},[6393],{"type":71,"value":6394},"tailwind-merge",{"type":65,"tag":150,"props":6396,"children":6397},{"style":229},[6398],{"type":71,"value":3425},{"type":65,"tag":150,"props":6400,"children":6401},{"class":152,"line":189},[6402],{"type":65,"tag":150,"props":6403,"children":6404},{"emptyLinePlaceholder":193},[6405],{"type":71,"value":196},{"type":65,"tag":150,"props":6407,"children":6408},{"class":152,"line":199},[6409,6414,6419,6425,6430,6436,6440,6444,6449,6453],{"type":65,"tag":150,"props":6410,"children":6411},{"style":1473},[6412],{"type":71,"value":6413},"export",{"type":65,"tag":150,"props":6415,"children":6416},{"style":1681},[6417],{"type":71,"value":6418}," function",{"type":65,"tag":150,"props":6420,"children":6422},{"style":6421},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[6423],{"type":71,"value":6424}," cn",{"type":65,"tag":150,"props":6426,"children":6427},{"style":229},[6428],{"type":71,"value":6429},"(...",{"type":65,"tag":150,"props":6431,"children":6433},{"style":6432},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[6434],{"type":71,"value":6435},"inputs",{"type":65,"tag":150,"props":6437,"children":6438},{"style":229},[6439],{"type":71,"value":1694},{"type":65,"tag":150,"props":6441,"children":6442},{"style":167},[6443],{"type":71,"value":6340},{"type":65,"tag":150,"props":6445,"children":6446},{"style":240},[6447],{"type":71,"value":6448},"[]",{"type":65,"tag":150,"props":6450,"children":6451},{"style":229},[6452],{"type":71,"value":544},{"type":65,"tag":150,"props":6454,"children":6455},{"style":229},[6456],{"type":71,"value":1821},{"type":65,"tag":150,"props":6458,"children":6459},{"class":152,"line":208},[6460,6465,6469,6474,6478,6482,6486],{"type":65,"tag":150,"props":6461,"children":6462},{"style":1473},[6463],{"type":71,"value":6464},"  return",{"type":65,"tag":150,"props":6466,"children":6467},{"style":6421},[6468],{"type":71,"value":6377},{"type":65,"tag":150,"props":6470,"children":6471},{"style":2576},[6472],{"type":71,"value":6473},"(",{"type":65,"tag":150,"props":6475,"children":6476},{"style":6421},[6477],{"type":71,"value":6357},{"type":65,"tag":150,"props":6479,"children":6480},{"style":2576},[6481],{"type":71,"value":6473},{"type":65,"tag":150,"props":6483,"children":6484},{"style":240},[6485],{"type":71,"value":6435},{"type":65,"tag":150,"props":6487,"children":6488},{"style":2576},[6489],{"type":71,"value":6490},"))\n",{"type":65,"tag":150,"props":6492,"children":6493},{"class":152,"line":42},[6494],{"type":65,"tag":150,"props":6495,"children":6496},{"style":229},[6497],{"type":71,"value":2370},{"type":65,"tag":105,"props":6499,"children":6501},{"id":6500},"extending-components",[6502],{"type":71,"value":6503},"Extending Components",{"type":65,"tag":73,"props":6505,"children":6506},{},[6507],{"type":71,"value":6508},"Since you own the source code, extend components directly:",{"type":65,"tag":139,"props":6510,"children":6512},{"className":1453,"code":6511,"language":1455,"meta":144,"style":144},"\u002F\u002F components\u002Fui\u002Fbutton.tsx — add your custom variant\nconst buttonVariants = cva('...', {\n  variants: {\n    variant: {\n      default: '...',\n      destructive: '...',\n      \u002F\u002F Add custom variants\n      success: 'bg-green-600 text-white hover:bg-green-700',\n      premium: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white',\n    },\n  },\n})\n",[6513],{"type":65,"tag":122,"props":6514,"children":6515},{"__ignoreMap":144},[6516,6524,6572,6588,6604,6632,6660,6668,6697,6726,6733,6740],{"type":65,"tag":150,"props":6517,"children":6518},{"class":152,"line":153},[6519],{"type":65,"tag":150,"props":6520,"children":6521},{"style":157},[6522],{"type":71,"value":6523},"\u002F\u002F components\u002Fui\u002Fbutton.tsx — add your custom variant\n",{"type":65,"tag":150,"props":6525,"children":6526},{"class":152,"line":163},[6527,6532,6537,6541,6546,6550,6555,6560,6564,6568],{"type":65,"tag":150,"props":6528,"children":6529},{"style":1681},[6530],{"type":71,"value":6531},"const",{"type":65,"tag":150,"props":6533,"children":6534},{"style":240},[6535],{"type":71,"value":6536}," buttonVariants ",{"type":65,"tag":150,"props":6538,"children":6539},{"style":229},[6540],{"type":71,"value":3335},{"type":65,"tag":150,"props":6542,"children":6543},{"style":6421},[6544],{"type":71,"value":6545}," cva",{"type":65,"tag":150,"props":6547,"children":6548},{"style":240},[6549],{"type":71,"value":6473},{"type":65,"tag":150,"props":6551,"children":6552},{"style":229},[6553],{"type":71,"value":6554},"'",{"type":65,"tag":150,"props":6556,"children":6557},{"style":173},[6558],{"type":71,"value":6559},"...",{"type":65,"tag":150,"props":6561,"children":6562},{"style":229},[6563],{"type":71,"value":6554},{"type":65,"tag":150,"props":6565,"children":6566},{"style":229},[6567],{"type":71,"value":1934},{"type":65,"tag":150,"props":6569,"children":6570},{"style":229},[6571],{"type":71,"value":1821},{"type":65,"tag":150,"props":6573,"children":6574},{"class":152,"line":189},[6575,6580,6584],{"type":65,"tag":150,"props":6576,"children":6577},{"style":2576},[6578],{"type":71,"value":6579},"  variants",{"type":65,"tag":150,"props":6581,"children":6582},{"style":229},[6583],{"type":71,"value":1694},{"type":65,"tag":150,"props":6585,"children":6586},{"style":229},[6587],{"type":71,"value":1821},{"type":65,"tag":150,"props":6589,"children":6590},{"class":152,"line":199},[6591,6596,6600],{"type":65,"tag":150,"props":6592,"children":6593},{"style":2576},[6594],{"type":71,"value":6595},"    variant",{"type":65,"tag":150,"props":6597,"children":6598},{"style":229},[6599],{"type":71,"value":1694},{"type":65,"tag":150,"props":6601,"children":6602},{"style":229},[6603],{"type":71,"value":1821},{"type":65,"tag":150,"props":6605,"children":6606},{"class":152,"line":208},[6607,6612,6616,6620,6624,6628],{"type":65,"tag":150,"props":6608,"children":6609},{"style":2576},[6610],{"type":71,"value":6611},"      default",{"type":65,"tag":150,"props":6613,"children":6614},{"style":229},[6615],{"type":71,"value":1694},{"type":65,"tag":150,"props":6617,"children":6618},{"style":229},[6619],{"type":71,"value":3415},{"type":65,"tag":150,"props":6621,"children":6622},{"style":173},[6623],{"type":71,"value":6559},{"type":65,"tag":150,"props":6625,"children":6626},{"style":229},[6627],{"type":71,"value":6554},{"type":65,"tag":150,"props":6629,"children":6630},{"style":229},[6631],{"type":71,"value":1712},{"type":65,"tag":150,"props":6633,"children":6634},{"class":152,"line":42},[6635,6640,6644,6648,6652,6656],{"type":65,"tag":150,"props":6636,"children":6637},{"style":2576},[6638],{"type":71,"value":6639},"      destructive",{"type":65,"tag":150,"props":6641,"children":6642},{"style":229},[6643],{"type":71,"value":1694},{"type":65,"tag":150,"props":6645,"children":6646},{"style":229},[6647],{"type":71,"value":3415},{"type":65,"tag":150,"props":6649,"children":6650},{"style":173},[6651],{"type":71,"value":6559},{"type":65,"tag":150,"props":6653,"children":6654},{"style":229},[6655],{"type":71,"value":6554},{"type":65,"tag":150,"props":6657,"children":6658},{"style":229},[6659],{"type":71,"value":1712},{"type":65,"tag":150,"props":6661,"children":6662},{"class":152,"line":263},[6663],{"type":65,"tag":150,"props":6664,"children":6665},{"style":157},[6666],{"type":71,"value":6667},"      \u002F\u002F Add custom variants\n",{"type":65,"tag":150,"props":6669,"children":6670},{"class":152,"line":272},[6671,6676,6680,6684,6689,6693],{"type":65,"tag":150,"props":6672,"children":6673},{"style":2576},[6674],{"type":71,"value":6675},"      success",{"type":65,"tag":150,"props":6677,"children":6678},{"style":229},[6679],{"type":71,"value":1694},{"type":65,"tag":150,"props":6681,"children":6682},{"style":229},[6683],{"type":71,"value":3415},{"type":65,"tag":150,"props":6685,"children":6686},{"style":173},[6687],{"type":71,"value":6688},"bg-green-600 text-white hover:bg-green-700",{"type":65,"tag":150,"props":6690,"children":6691},{"style":229},[6692],{"type":71,"value":6554},{"type":65,"tag":150,"props":6694,"children":6695},{"style":229},[6696],{"type":71,"value":1712},{"type":65,"tag":150,"props":6698,"children":6699},{"class":152,"line":303},[6700,6705,6709,6713,6718,6722],{"type":65,"tag":150,"props":6701,"children":6702},{"style":2576},[6703],{"type":71,"value":6704},"      premium",{"type":65,"tag":150,"props":6706,"children":6707},{"style":229},[6708],{"type":71,"value":1694},{"type":65,"tag":150,"props":6710,"children":6711},{"style":229},[6712],{"type":71,"value":3415},{"type":65,"tag":150,"props":6714,"children":6715},{"style":173},[6716],{"type":71,"value":6717},"bg-gradient-to-r from-purple-500 to-pink-500 text-white",{"type":65,"tag":150,"props":6719,"children":6720},{"style":229},[6721],{"type":71,"value":6554},{"type":65,"tag":150,"props":6723,"children":6724},{"style":229},[6725],{"type":71,"value":1712},{"type":65,"tag":150,"props":6727,"children":6728},{"class":152,"line":332},[6729],{"type":65,"tag":150,"props":6730,"children":6731},{"style":229},[6732],{"type":71,"value":2285},{"type":65,"tag":150,"props":6734,"children":6735},{"class":152,"line":340},[6736],{"type":65,"tag":150,"props":6737,"children":6738},{"style":229},[6739],{"type":71,"value":1972},{"type":65,"tag":150,"props":6741,"children":6742},{"class":152,"line":915},[6743,6747],{"type":65,"tag":150,"props":6744,"children":6745},{"style":229},[6746],{"type":71,"value":5899},{"type":65,"tag":150,"props":6748,"children":6749},{"style":240},[6750],{"type":71,"value":6751},")\n",{"type":65,"tag":105,"props":6753,"children":6755},{"id":6754},"wrapping-with-tooltipprovider",[6756],{"type":71,"value":6757},"Wrapping with TooltipProvider",{"type":65,"tag":73,"props":6759,"children":6760},{},[6761,6763,6769],{"type":71,"value":6762},"Many components require ",{"type":65,"tag":122,"props":6764,"children":6766},{"className":6765},[],[6767],{"type":71,"value":6768},"TooltipProvider",{"type":71,"value":6770}," at the root:",{"type":65,"tag":139,"props":6772,"children":6774},{"className":1453,"code":6773,"language":1455,"meta":144,"style":144},"\u002F\u002F app\u002Flayout.tsx\nimport { TooltipProvider } from '@\u002Fcomponents\u002Fui\u002Ftooltip'\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml lang=\"en\" className=\"dark\">\n      \u003Cbody>\n        \u003CTooltipProvider>{children}\u003C\u002FTooltipProvider>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n",[6775],{"type":65,"tag":122,"props":6776,"children":6777},{"__ignoreMap":144},[6778,6785,6822,6829,6869,6881,6937,6953,6987,7003,7019,7027],{"type":65,"tag":150,"props":6779,"children":6780},{"class":152,"line":153},[6781],{"type":65,"tag":150,"props":6782,"children":6783},{"style":157},[6784],{"type":71,"value":3312},{"type":65,"tag":150,"props":6786,"children":6787},{"class":152,"line":163},[6788,6792,6796,6801,6805,6809,6813,6818],{"type":65,"tag":150,"props":6789,"children":6790},{"style":1473},[6791],{"type":71,"value":1476},{"type":65,"tag":150,"props":6793,"children":6794},{"style":229},[6795],{"type":71,"value":1538},{"type":65,"tag":150,"props":6797,"children":6798},{"style":240},[6799],{"type":71,"value":6800}," TooltipProvider",{"type":65,"tag":150,"props":6802,"children":6803},{"style":229},[6804],{"type":71,"value":1557},{"type":65,"tag":150,"props":6806,"children":6807},{"style":1473},[6808],{"type":71,"value":1562},{"type":65,"tag":150,"props":6810,"children":6811},{"style":229},[6812],{"type":71,"value":3415},{"type":65,"tag":150,"props":6814,"children":6815},{"style":173},[6816],{"type":71,"value":6817},"@\u002Fcomponents\u002Fui\u002Ftooltip",{"type":65,"tag":150,"props":6819,"children":6820},{"style":229},[6821],{"type":71,"value":3425},{"type":65,"tag":150,"props":6823,"children":6824},{"class":152,"line":189},[6825],{"type":65,"tag":150,"props":6826,"children":6827},{"emptyLinePlaceholder":193},[6828],{"type":71,"value":196},{"type":65,"tag":150,"props":6830,"children":6831},{"class":152,"line":199},[6832,6836,6841,6845,6850,6855,6860,6865],{"type":65,"tag":150,"props":6833,"children":6834},{"style":1473},[6835],{"type":71,"value":6413},{"type":65,"tag":150,"props":6837,"children":6838},{"style":1473},[6839],{"type":71,"value":6840}," default",{"type":65,"tag":150,"props":6842,"children":6843},{"style":1681},[6844],{"type":71,"value":6418},{"type":65,"tag":150,"props":6846,"children":6847},{"style":6421},[6848],{"type":71,"value":6849}," RootLayout",{"type":65,"tag":150,"props":6851,"children":6852},{"style":229},[6853],{"type":71,"value":6854},"({",{"type":65,"tag":150,"props":6856,"children":6857},{"style":6432},[6858],{"type":71,"value":6859}," children",{"type":65,"tag":150,"props":6861,"children":6862},{"style":229},[6863],{"type":71,"value":6864}," })",{"type":65,"tag":150,"props":6866,"children":6867},{"style":229},[6868],{"type":71,"value":1821},{"type":65,"tag":150,"props":6870,"children":6871},{"class":152,"line":208},[6872,6876],{"type":65,"tag":150,"props":6873,"children":6874},{"style":1473},[6875],{"type":71,"value":6464},{"type":65,"tag":150,"props":6877,"children":6878},{"style":2576},[6879],{"type":71,"value":6880}," (\n",{"type":65,"tag":150,"props":6882,"children":6883},{"class":152,"line":42},[6884,6889,6893,6897,6901,6905,6909,6913,6917,6921,6925,6929,6933],{"type":65,"tag":150,"props":6885,"children":6886},{"style":229},[6887],{"type":71,"value":6888},"    \u003C",{"type":65,"tag":150,"props":6890,"children":6891},{"style":2576},[6892],{"type":71,"value":3325},{"type":65,"tag":150,"props":6894,"children":6895},{"style":1681},[6896],{"type":71,"value":3330},{"type":65,"tag":150,"props":6898,"children":6899},{"style":229},[6900],{"type":71,"value":3335},{"type":65,"tag":150,"props":6902,"children":6903},{"style":229},[6904],{"type":71,"value":1689},{"type":65,"tag":150,"props":6906,"children":6907},{"style":173},[6908],{"type":71,"value":3344},{"type":65,"tag":150,"props":6910,"children":6911},{"style":229},[6912],{"type":71,"value":1689},{"type":65,"tag":150,"props":6914,"children":6915},{"style":1681},[6916],{"type":71,"value":3353},{"type":65,"tag":150,"props":6918,"children":6919},{"style":229},[6920],{"type":71,"value":3335},{"type":65,"tag":150,"props":6922,"children":6923},{"style":229},[6924],{"type":71,"value":1689},{"type":65,"tag":150,"props":6926,"children":6927},{"style":173},[6928],{"type":71,"value":3288},{"type":65,"tag":150,"props":6930,"children":6931},{"style":229},[6932],{"type":71,"value":1689},{"type":65,"tag":150,"props":6934,"children":6935},{"style":229},[6936],{"type":71,"value":3374},{"type":65,"tag":150,"props":6938,"children":6939},{"class":152,"line":263},[6940,6945,6949],{"type":65,"tag":150,"props":6941,"children":6942},{"style":229},[6943],{"type":71,"value":6944},"      \u003C",{"type":65,"tag":150,"props":6946,"children":6947},{"style":2576},[6948],{"type":71,"value":5940},{"type":65,"tag":150,"props":6950,"children":6951},{"style":229},[6952],{"type":71,"value":3374},{"type":65,"tag":150,"props":6954,"children":6955},{"class":152,"line":272},[6956,6961,6965,6970,6974,6979,6983],{"type":65,"tag":150,"props":6957,"children":6958},{"style":229},[6959],{"type":71,"value":6960},"        \u003C",{"type":65,"tag":150,"props":6962,"children":6963},{"style":167},[6964],{"type":71,"value":6768},{"type":65,"tag":150,"props":6966,"children":6967},{"style":229},[6968],{"type":71,"value":6969},">{",{"type":65,"tag":150,"props":6971,"children":6972},{"style":240},[6973],{"type":71,"value":3504},{"type":65,"tag":150,"props":6975,"children":6976},{"style":229},[6977],{"type":71,"value":6978},"}\u003C\u002F",{"type":65,"tag":150,"props":6980,"children":6981},{"style":167},[6982],{"type":71,"value":6768},{"type":65,"tag":150,"props":6984,"children":6985},{"style":229},[6986],{"type":71,"value":3374},{"type":65,"tag":150,"props":6988,"children":6989},{"class":152,"line":303},[6990,6995,6999],{"type":65,"tag":150,"props":6991,"children":6992},{"style":229},[6993],{"type":71,"value":6994},"      \u003C\u002F",{"type":65,"tag":150,"props":6996,"children":6997},{"style":2576},[6998],{"type":71,"value":5940},{"type":65,"tag":150,"props":7000,"children":7001},{"style":229},[7002],{"type":71,"value":3374},{"type":65,"tag":150,"props":7004,"children":7005},{"class":152,"line":332},[7006,7011,7015],{"type":65,"tag":150,"props":7007,"children":7008},{"style":229},[7009],{"type":71,"value":7010},"    \u003C\u002F",{"type":65,"tag":150,"props":7012,"children":7013},{"style":2576},[7014],{"type":71,"value":3325},{"type":65,"tag":150,"props":7016,"children":7017},{"style":229},[7018],{"type":71,"value":3374},{"type":65,"tag":150,"props":7020,"children":7021},{"class":152,"line":340},[7022],{"type":65,"tag":150,"props":7023,"children":7024},{"style":2576},[7025],{"type":71,"value":7026},"  )\n",{"type":65,"tag":150,"props":7028,"children":7029},{"class":152,"line":915},[7030],{"type":65,"tag":150,"props":7031,"children":7032},{"style":229},[7033],{"type":71,"value":2370},{"type":65,"tag":79,"props":7035,"children":7037},{"id":7036},"framework-support",[7038],{"type":71,"value":7039},"Framework Support",{"type":65,"tag":439,"props":7041,"children":7042},{},[7043,7053,7063,7072,7081,7091],{"type":65,"tag":443,"props":7044,"children":7045},{},[7046,7051],{"type":65,"tag":91,"props":7047,"children":7048},{},[7049],{"type":71,"value":7050},"Next.js",{"type":71,"value":7052}," — Full support (App Router + Pages Router)",{"type":65,"tag":443,"props":7054,"children":7055},{},[7056,7061],{"type":65,"tag":91,"props":7057,"children":7058},{},[7059],{"type":71,"value":7060},"Vite",{"type":71,"value":7062}," — Full support",{"type":65,"tag":443,"props":7064,"children":7065},{},[7066,7071],{"type":65,"tag":91,"props":7067,"children":7068},{},[7069],{"type":71,"value":7070},"React Router",{"type":71,"value":7062},{"type":65,"tag":443,"props":7073,"children":7074},{},[7075,7080],{"type":65,"tag":91,"props":7076,"children":7077},{},[7078],{"type":71,"value":7079},"Astro",{"type":71,"value":7062},{"type":65,"tag":443,"props":7082,"children":7083},{},[7084,7089],{"type":65,"tag":91,"props":7085,"children":7086},{},[7087],{"type":71,"value":7088},"Laravel",{"type":71,"value":7090}," — Full support (via Inertia)",{"type":65,"tag":443,"props":7092,"children":7093},{},[7094,7099],{"type":65,"tag":91,"props":7095,"children":7096},{},[7097],{"type":71,"value":7098},"TanStack Start",{"type":71,"value":7062},{"type":65,"tag":79,"props":7101,"children":7103},{"id":7102},"presets-cli-v4",[7104],{"type":71,"value":7105},"Presets (CLI v4)",{"type":65,"tag":73,"props":7107,"children":7108},{},[7109],{"type":71,"value":7110},"Presets bundle your entire design system config (colors, theme, icon library, fonts, radius) into a single shareable code. One string configures everything:",{"type":65,"tag":139,"props":7112,"children":7114},{"className":141,"code":7113,"language":143,"meta":144,"style":144},"# Apply a preset during init\nnpx shadcn@latest init --preset \u003Ccode>\n\n# Switch presets in an existing project (reconfigures everything including components)\nnpx shadcn@latest init --preset \u003Ccode>\n",[7115],{"type":65,"tag":122,"props":7116,"children":7117},{"__ignoreMap":144},[7118,7126,7161,7168,7176],{"type":65,"tag":150,"props":7119,"children":7120},{"class":152,"line":153},[7121],{"type":65,"tag":150,"props":7122,"children":7123},{"style":157},[7124],{"type":71,"value":7125},"# Apply a preset during init\n",{"type":65,"tag":150,"props":7127,"children":7128},{"class":152,"line":163},[7129,7133,7137,7141,7145,7149,7153,7157],{"type":65,"tag":150,"props":7130,"children":7131},{"style":167},[7132],{"type":71,"value":170},{"type":65,"tag":150,"props":7134,"children":7135},{"style":173},[7136],{"type":71,"value":176},{"type":65,"tag":150,"props":7138,"children":7139},{"style":173},[7140],{"type":71,"value":181},{"type":65,"tag":150,"props":7142,"children":7143},{"style":173},[7144],{"type":71,"value":226},{"type":65,"tag":150,"props":7146,"children":7147},{"style":229},[7148],{"type":71,"value":232},{"type":65,"tag":150,"props":7150,"children":7151},{"style":173},[7152],{"type":71,"value":237},{"type":65,"tag":150,"props":7154,"children":7155},{"style":240},[7156],{"type":71,"value":243},{"type":65,"tag":150,"props":7158,"children":7159},{"style":229},[7160],{"type":71,"value":3374},{"type":65,"tag":150,"props":7162,"children":7163},{"class":152,"line":189},[7164],{"type":65,"tag":150,"props":7165,"children":7166},{"emptyLinePlaceholder":193},[7167],{"type":71,"value":196},{"type":65,"tag":150,"props":7169,"children":7170},{"class":152,"line":199},[7171],{"type":65,"tag":150,"props":7172,"children":7173},{"style":157},[7174],{"type":71,"value":7175},"# Switch presets in an existing project (reconfigures everything including components)\n",{"type":65,"tag":150,"props":7177,"children":7178},{"class":152,"line":208},[7179,7183,7187,7191,7195,7199,7203,7207],{"type":65,"tag":150,"props":7180,"children":7181},{"style":167},[7182],{"type":71,"value":170},{"type":65,"tag":150,"props":7184,"children":7185},{"style":173},[7186],{"type":71,"value":176},{"type":65,"tag":150,"props":7188,"children":7189},{"style":173},[7190],{"type":71,"value":181},{"type":65,"tag":150,"props":7192,"children":7193},{"style":173},[7194],{"type":71,"value":226},{"type":65,"tag":150,"props":7196,"children":7197},{"style":229},[7198],{"type":71,"value":232},{"type":65,"tag":150,"props":7200,"children":7201},{"style":173},[7202],{"type":71,"value":237},{"type":65,"tag":150,"props":7204,"children":7205},{"style":240},[7206],{"type":71,"value":243},{"type":65,"tag":150,"props":7208,"children":7209},{"style":229},[7210],{"type":71,"value":3374},{"type":65,"tag":73,"props":7212,"children":7213},{},[7214,7216,7222],{"type":71,"value":7215},"Build custom presets on ",{"type":65,"tag":122,"props":7217,"children":7219},{"className":7218},[],[7220],{"type":71,"value":7221},"shadcn\u002Fcreate",{"type":71,"value":7223}," — preview how colors, fonts, and radius apply to real components before publishing.",{"type":65,"tag":79,"props":7225,"children":7227},{"id":7226},"rtl-support-2026",[7228],{"type":71,"value":7229},"RTL Support (2026)",{"type":65,"tag":73,"props":7231,"children":7232},{},[7233],{"type":71,"value":7234},"The CLI handles RTL transformation at install time:",{"type":65,"tag":139,"props":7236,"children":7238},{"className":141,"code":7237,"language":143,"meta":144,"style":144},"npx shadcn@latest migrate rtl\n",[7239],{"type":65,"tag":122,"props":7240,"children":7241},{"__ignoreMap":144},[7242],{"type":65,"tag":150,"props":7243,"children":7244},{"class":152,"line":153},[7245,7249,7253,7257],{"type":65,"tag":150,"props":7246,"children":7247},{"style":167},[7248],{"type":71,"value":170},{"type":65,"tag":150,"props":7250,"children":7251},{"style":173},[7252],{"type":71,"value":176},{"type":65,"tag":150,"props":7254,"children":7255},{"style":173},[7256],{"type":71,"value":1294},{"type":65,"tag":150,"props":7258,"children":7259},{"style":173},[7260],{"type":71,"value":7261}," rtl\n",{"type":65,"tag":73,"props":7263,"children":7264},{},[7265,7267,7273,7274,7280,7282,7288,7289,7295],{"type":71,"value":7266},"Converts directional classes (",{"type":65,"tag":122,"props":7268,"children":7270},{"className":7269},[],[7271],{"type":71,"value":7272},"ml-4",{"type":71,"value":508},{"type":65,"tag":122,"props":7275,"children":7277},{"className":7276},[],[7278],{"type":71,"value":7279},"left-2",{"type":71,"value":7281},") to logical properties (",{"type":65,"tag":122,"props":7283,"children":7285},{"className":7284},[],[7286],{"type":71,"value":7287},"ms-4",{"type":71,"value":508},{"type":65,"tag":122,"props":7290,"children":7292},{"className":7291},[],[7293],{"type":71,"value":7294},"start-2",{"type":71,"value":7296},") automatically.",{"type":65,"tag":79,"props":7298,"children":7300},{"id":7299},"official-documentation",[7301],{"type":71,"value":7302},"Official Documentation",{"type":65,"tag":439,"props":7304,"children":7305},{},[7306,7317,7326,7336,7345,7355,7365],{"type":65,"tag":443,"props":7307,"children":7308},{},[7309],{"type":65,"tag":7310,"props":7311,"children":7315},"a",{"href":7312,"rel":7313},"https:\u002F\u002Fui.shadcn.com",[7314],"nofollow",[7316],{"type":71,"value":20},{"type":65,"tag":443,"props":7318,"children":7319},{},[7320],{"type":65,"tag":7310,"props":7321,"children":7323},{"href":45,"rel":7322},[7314],[7324],{"type":71,"value":7325},"Components",{"type":65,"tag":443,"props":7327,"children":7328},{},[7329],{"type":65,"tag":7310,"props":7330,"children":7333},{"href":7331,"rel":7332},"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fcli",[7314],[7334],{"type":71,"value":7335},"CLI",{"type":65,"tag":443,"props":7337,"children":7338},{},[7339],{"type":65,"tag":7310,"props":7340,"children":7343},{"href":7341,"rel":7342},"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Ftheming",[7314],[7344],{"type":71,"value":2672},{"type":65,"tag":443,"props":7346,"children":7347},{},[7348],{"type":65,"tag":7310,"props":7349,"children":7352},{"href":7350,"rel":7351},"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fregistry",[7314],[7353],{"type":71,"value":7354},"Custom Registry",{"type":65,"tag":443,"props":7356,"children":7357},{},[7358],{"type":65,"tag":7310,"props":7359,"children":7362},{"href":7360,"rel":7361},"https:\u002F\u002Fui.shadcn.com\u002Fdocs\u002Fdirectory",[7314],[7363],{"type":71,"value":7364},"Registry Directory",{"type":65,"tag":443,"props":7366,"children":7367},{},[7368],{"type":65,"tag":7310,"props":7369,"children":7372},{"href":7370,"rel":7371},"https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui",[7314],[7373],{"type":71,"value":7374},"GitHub: shadcn\u002Fui",{"type":65,"tag":1724,"props":7376,"children":7377},{},[7378],{"type":71,"value":7379},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":7381,"total":7494},[7382,7401,7417,7429,7449,7462,7482],{"slug":7383,"name":7383,"fn":7384,"description":7385,"org":7386,"tags":7387,"stars":28,"repoUrl":29,"updatedAt":7400},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7388,7391,7394,7397],{"name":7389,"slug":7390,"type":15},"Accessibility","accessibility",{"name":7392,"slug":7393,"type":15},"Charts","charts",{"name":7395,"slug":7396,"type":15},"Data Visualization","data-visualization",{"name":7398,"slug":7399,"type":15},"Design","design","2026-06-30T19:00:57.102",{"slug":7402,"name":7402,"fn":7403,"description":7404,"org":7405,"tags":7406,"stars":28,"repoUrl":29,"updatedAt":7416},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7407,7410,7413],{"name":7408,"slug":7409,"type":15},"Agents","agents",{"name":7411,"slug":7412,"type":15},"Browser Automation","browser-automation",{"name":7414,"slug":7415,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":7418,"name":7418,"fn":7419,"description":7420,"org":7421,"tags":7422,"stars":28,"repoUrl":29,"updatedAt":7428},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7423,7424,7427],{"name":7411,"slug":7412,"type":15},{"name":7425,"slug":7426,"type":15},"Local Development","local-development",{"name":7414,"slug":7415,"type":15},"2026-04-06T18:41:17.526867",{"slug":7430,"name":7430,"fn":7431,"description":7432,"org":7433,"tags":7434,"stars":28,"repoUrl":29,"updatedAt":7448},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7435,7436,7439,7442,7445],{"name":7408,"slug":7409,"type":15},{"name":7437,"slug":7438,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":7440,"slug":7441,"type":15},"SDK","sdk",{"name":7443,"slug":7444,"type":15},"Serverless","serverless",{"name":7446,"slug":7447,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":2298,"name":2298,"fn":7450,"description":7451,"org":7452,"tags":7453,"stars":28,"repoUrl":29,"updatedAt":7461},"build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7454,7455,7456,7457,7458],{"name":26,"slug":27,"type":15},{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15},{"name":23,"slug":24,"type":15},{"name":7459,"slug":7460,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":7463,"name":7463,"fn":7464,"description":7465,"org":7466,"tags":7467,"stars":28,"repoUrl":29,"updatedAt":7481},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7468,7471,7474,7477,7480],{"name":7469,"slug":7470,"type":15},"AI Infrastructure","ai-infrastructure",{"name":7472,"slug":7473,"type":15},"Cost Optimization","cost-optimization",{"name":7475,"slug":7476,"type":15},"LLM","llm",{"name":7478,"slug":7479,"type":15},"Performance","performance",{"name":7459,"slug":7460,"type":15},"2026-04-06T18:40:44.377464",{"slug":7483,"name":7483,"fn":7484,"description":7485,"org":7486,"tags":7487,"stars":28,"repoUrl":29,"updatedAt":7493},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7488,7489,7492],{"name":7472,"slug":7473,"type":15},{"name":7490,"slug":7491,"type":15},"Database","database",{"name":7475,"slug":7476,"type":15},"2026-04-06T18:41:08.513425",600,{"items":7496,"total":7692},[7497,7518,7541,7558,7573,7590,7609,7621,7635,7649,7661,7676],{"slug":7498,"name":7498,"fn":7499,"description":7500,"org":7501,"tags":7502,"stars":7515,"repoUrl":7516,"updatedAt":7517},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7503,7506,7509,7512],{"name":7504,"slug":7505,"type":15},"Documents","documents",{"name":7507,"slug":7508,"type":15},"Healthcare","healthcare",{"name":7510,"slug":7511,"type":15},"Insurance","insurance",{"name":7513,"slug":7514,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":7519,"name":7519,"fn":7520,"description":7521,"org":7522,"tags":7523,"stars":7538,"repoUrl":7539,"updatedAt":7540},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7524,7527,7529,7532,7535],{"name":7525,"slug":7526,"type":15},".NET","dotnet",{"name":7528,"slug":7519,"type":15},"ASP.NET Core",{"name":7530,"slug":7531,"type":15},"Blazor","blazor",{"name":7533,"slug":7534,"type":15},"C#","csharp",{"name":7536,"slug":7537,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":7542,"name":7542,"fn":7543,"description":7544,"org":7545,"tags":7546,"stars":7538,"repoUrl":7539,"updatedAt":7557},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7547,7550,7553,7556],{"name":7548,"slug":7549,"type":15},"Apps SDK","apps-sdk",{"name":7551,"slug":7552,"type":15},"ChatGPT","chatgpt",{"name":7554,"slug":7555,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":7559,"name":7559,"fn":7560,"description":7561,"org":7562,"tags":7563,"stars":7538,"repoUrl":7539,"updatedAt":7572},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7564,7567,7569],{"name":7565,"slug":7566,"type":15},"API Development","api-development",{"name":7335,"slug":7568,"type":15},"cli",{"name":7570,"slug":7571,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":7574,"name":7574,"fn":7575,"description":7576,"org":7577,"tags":7578,"stars":7538,"repoUrl":7539,"updatedAt":7589},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7579,7582,7585,7586],{"name":7580,"slug":7581,"type":15},"Cloudflare","cloudflare",{"name":7583,"slug":7584,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":7437,"slug":7438,"type":15},{"name":7587,"slug":7588,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":7591,"name":7591,"fn":7592,"description":7593,"org":7594,"tags":7595,"stars":7538,"repoUrl":7539,"updatedAt":7608},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7596,7599,7602,7605],{"name":7597,"slug":7598,"type":15},"Productivity","productivity",{"name":7600,"slug":7601,"type":15},"Project Management","project-management",{"name":7603,"slug":7604,"type":15},"Strategy","strategy",{"name":7606,"slug":7607,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":7610,"name":7610,"fn":7611,"description":7612,"org":7613,"tags":7614,"stars":7538,"repoUrl":7539,"updatedAt":7620},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7615,7616,7618,7619],{"name":7398,"slug":7399,"type":15},{"name":7617,"slug":7610,"type":15},"Figma",{"name":26,"slug":27,"type":15},{"name":7554,"slug":7555,"type":15},"2026-04-12T05:06:47.939943",{"slug":7622,"name":7622,"fn":7623,"description":7624,"org":7625,"tags":7626,"stars":7538,"repoUrl":7539,"updatedAt":7634},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7627,7628,7631,7632,7633],{"name":7398,"slug":7399,"type":15},{"name":7629,"slug":7630,"type":15},"Design System","design-system",{"name":7617,"slug":7610,"type":15},{"name":26,"slug":27,"type":15},{"name":23,"slug":24,"type":15},"2026-05-10T05:59:52.971881",{"slug":7636,"name":7636,"fn":7637,"description":7638,"org":7639,"tags":7640,"stars":7538,"repoUrl":7539,"updatedAt":7648},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7641,7642,7643,7646,7647],{"name":7398,"slug":7399,"type":15},{"name":7629,"slug":7630,"type":15},{"name":7644,"slug":7645,"type":15},"Documentation","documentation",{"name":7617,"slug":7610,"type":15},{"name":26,"slug":27,"type":15},"2026-05-16T06:07:47.821474",{"slug":7650,"name":7650,"fn":7651,"description":7652,"org":7653,"tags":7654,"stars":7538,"repoUrl":7539,"updatedAt":7660},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7655,7656,7657,7658,7659],{"name":7398,"slug":7399,"type":15},{"name":7617,"slug":7610,"type":15},{"name":26,"slug":27,"type":15},{"name":23,"slug":24,"type":15},{"name":7536,"slug":7537,"type":15},"2026-05-16T06:07:40.583615",{"slug":7662,"name":7662,"fn":7663,"description":7664,"org":7665,"tags":7666,"stars":7538,"repoUrl":7539,"updatedAt":7675},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7667,7670,7671,7674],{"name":7668,"slug":7669,"type":15},"Animation","animation",{"name":7570,"slug":7571,"type":15},{"name":7672,"slug":7673,"type":15},"Creative","creative",{"name":7398,"slug":7399,"type":15},"2026-05-02T05:31:48.48485",{"slug":7677,"name":7677,"fn":7678,"description":7679,"org":7680,"tags":7681,"stars":7538,"repoUrl":7539,"updatedAt":7691},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[7682,7683,7684,7687,7690],{"name":7672,"slug":7673,"type":15},{"name":7398,"slug":7399,"type":15},{"name":7685,"slug":7686,"type":15},"Image Generation","image-generation",{"name":7688,"slug":7689,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]