[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-shadcn-ui-shadcn":3,"mdc--s057mk-key":43,"related-org-shadcn-ui-shadcn":5206,"related-repo-shadcn-ui-shadcn":5229},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":38,"sourceUrl":41,"mdContent":42},"shadcn","manage shadcn\u002Fui components and projects","Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn\u002Fui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for \"shadcn init\", \"create an app with --preset\", or \"switch to --preset\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"shadcn-ui","shadcn\u002Fui","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fshadcn-ui.png",[12,16,17,20],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},"UI Components","ui-components",{"name":21,"slug":22,"type":15},"Frontend","frontend",118955,"https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui","2026-07-26T05:50:08.026115",null,9487,[29,30,31,32,33,14,4,34,35,36,37],"base-ui","components","laravel","nextjs","radix-ui","tailwindcss","tanstack","ui","vite",{"repoUrl":24,"stars":23,"forks":27,"topics":39,"description":40},[29,30,31,32,33,14,4,34,35,36,37],"A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.","https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui\u002Ftree\u002FHEAD\u002Fskills\u002Fshadcn","---\nname: shadcn\ndescription: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn\u002Fui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for \"shadcn init\", \"create an app with --preset\", or \"switch to --preset\".\nuser-invocable: false\nallowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)\n---\n\n# shadcn\u002Fui\n\nA framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.\n\n> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.\n\n## Current Project Context\n\n```json\n!`npx shadcn@latest info --json`\n```\n\nThe JSON above contains the project config and installed components. Use `npx shadcn@latest docs \u003Ccomponent>` to get documentation and example URLs for any component.\n\n## Principles\n\n1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.\n2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.\n3. **Use built-in variants before custom styles.** `variant=\"outline\"`, `size=\"sm\"`, etc.\n4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.\n\n## Critical Rules\n\nThese rules are **always enforced**. Each links to a file with Incorrect\u002FCorrect code pairs.\n\n### Styling & Tailwind → [styling.md](.\u002Frules\u002Fstyling.md)\n\n- **`className` for layout, not styling.** Never override component colors or typography.\n- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.\n- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.\n- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.\n- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).\n- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.\n- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.\n\n### Forms & Inputs → [forms.md](.\u002Frules\u002Fforms.md)\n\n- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.\n- **`InputGroup` uses `InputGroupInput`\u002F`InputGroupTextarea`.** Never raw `Input`\u002F`Textarea` inside `InputGroup`.\n- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**\n- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.\n- **`FieldSet` + `FieldLegend` for grouping related checkboxes\u002Fradios.** Don't use a `div` with a heading.\n- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.\n\n### Component Structure → [composition.md](.\u002Frules\u002Fcomposition.md)\n\n- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.\n- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](.\u002Frules\u002Fbase-vs-radix.md)\n- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className=\"sr-only\"` if visually hidden.\n- **Use full Card composition.** `CardHeader`\u002F`CardTitle`\u002F`CardDescription`\u002F`CardContent`\u002F`CardFooter`. Don't dump everything in `CardContent`.\n- **Button has no `isPending`\u002F`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`.\n- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`.\n- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load.\n\n### Use Components, Not Custom Markup → [composition.md](.\u002Frules\u002Fcomposition.md)\n\n- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.\n- **Callouts use `Alert`.** Don't build custom styled divs.\n- **Empty states use `Empty`.** Don't build custom empty state markup.\n- **Toast follows the project base.** Use `toast` from the `toast` component for\n  Base UI projects. Use `toast()` from `sonner` for Radix and React Aria\n  projects.\n- **Use `Separator`** instead of `\u003Chr>` or `\u003Cdiv className=\"border-t\">`.\n- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.\n- **Use `Badge`** instead of custom styled spans.\n\n### Icons → [icons.md](.\u002Frules\u002Ficons.md)\n\n- **Icons in `Button` use `data-icon`.** `data-icon=\"inline-start\"` or `data-icon=\"inline-end\"` on the icon.\n- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.\n- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup.\n\n### Chat & Messaging → [chat.md](.\u002Frules\u002Fchat.md)\n\n- **Chat UI composes the chat primitives.** Conversations use `MessageScroller`, rows use `Message`, surfaces use `Bubble`. Never hand-rolled bubble `div`s or a raw scroll container.\n- **`MessageScroller` owns scroll behavior.** Streaming follow, anchoring, and jump-to-latest (`MessageScrollerButton`) are built in. Don't write a `useStickToBottom`\u002F`ResizeObserver` hook.\n- **Attachments use `Attachment`; system notes and dividers use `Marker`.** Not `Item` cards or `Separator` + a label.\n\n### CLI\n\n- **Never decode preset codes or build preset URLs manually.** Use `npx shadcn@latest preset decode \u003Ccode>`, `preset url \u003Ccode>`, or `preset open \u003Ccode>`. For project-aware preset detection, use `npx shadcn@latest preset resolve`.\n- **Apply preset codes directly with the CLI.** Use `npx shadcn@latest apply \u003Ccode>` for existing projects, or `npx shadcn@latest init --preset \u003Ccode>` when initializing.\n\n## Key Patterns\n\nThese are the most common patterns that differentiate correct shadcn\u002Fui code. For edge cases, see the linked rule files above.\n\n```tsx\n\u002F\u002F Form layout: FieldGroup + Field, not div + Label.\n\u003CFieldGroup>\n  \u003CField>\n    \u003CFieldLabel htmlFor=\"email\">Email\u003C\u002FFieldLabel>\n    \u003CInput id=\"email\" \u002F>\n  \u003C\u002FField>\n\u003C\u002FFieldGroup>\n\n\u002F\u002F Validation: data-invalid on Field, aria-invalid on the control.\n\u003CField data-invalid>\n  \u003CFieldLabel>Email\u003C\u002FFieldLabel>\n  \u003CInput aria-invalid \u002F>\n  \u003CFieldDescription>Invalid email.\u003C\u002FFieldDescription>\n\u003C\u002FField>\n\n\u002F\u002F Icons in buttons: data-icon, no sizing classes.\n\u003CButton>\n  \u003CSearchIcon data-icon=\"inline-start\" \u002F>\n  Search\n\u003C\u002FButton>\n\n\u002F\u002F Spacing: gap-*, not space-y-*.\n\u003Cdiv className=\"flex flex-col gap-4\">  \u002F\u002F correct\n\u003Cdiv className=\"space-y-4\">           \u002F\u002F wrong\n\n\u002F\u002F Equal dimensions: size-*, not w-* h-*.\n\u003CAvatar className=\"size-10\">   \u002F\u002F correct\n\u003CAvatar className=\"w-10 h-10\"> \u002F\u002F wrong\n\n\u002F\u002F Status colors: Badge variants or semantic tokens, not raw colors.\n\u003CBadge variant=\"secondary\">+20.1%\u003C\u002FBadge>    \u002F\u002F correct\n\u003Cspan className=\"text-emerald-600\">+20.1%\u003C\u002Fspan> \u002F\u002F wrong\n```\n\n## Component Selection\n\n| Need                       | Use                                                                                                 |\n| -------------------------- | --------------------------------------------------------------------------------------------------- |\n| Button\u002Faction              | `Button` with appropriate variant                                                                   |\n| Form inputs                | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |\n| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem`                                                                   |\n| Data display               | `Table`, `Card`, `Badge`, `Avatar`                                                                  |\n| Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination`                                     |\n| Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)       |\n| Feedback                   | `toast` (Base UI), `sonner` (Radix\u002FAria), `Alert`, `Progress`, `Skeleton`, `Spinner`                 |\n| Command palette            | `Command` inside `Dialog`                                                                           |\n| Charts                     | `Chart` (wraps Recharts)                                                                            |\n| Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`                          |\n| Empty states               | `Empty`                                                                                             |\n| Menus                      | `DropdownMenu`, `ContextMenu`, `Menubar`                                                            |\n| Tooltips\u002Finfo              | `Tooltip`, `HoverCard`, `Popover`                                                                   |\n| Chat \u002F conversation UI     | `MessageScroller`, `Message`, `Bubble`, `Attachment`, `Marker`                                      |\n\n## Key Fields\n\nThe injected project context contains these key fields:\n\n- **`aliases`** → use the actual alias prefix for imports (e.g. `@\u002F`, `~\u002F`), never hardcode.\n- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `\"use client\"` at the top of the file. Always reference this field when advising on the directive.\n- **`tailwindVersion`** → `\"v4\"` uses `@theme inline` blocks; `\"v3\"` uses `tailwind.config.js`.\n- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.\n- **`style`** → component visual treatment (e.g. `nova`, `vega`).\n- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props.\n- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler\u002Ficons-react` for `tabler`, etc. Never assume `lucide-react`.\n- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc.\n- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA).\n- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`).\n- **`preset`** → resolved preset code and values for the current project. Use `npx shadcn@latest preset resolve --json` when you only need preset information.\n\nSee [cli.md — `info` command](.\u002Fcli.md) for the full field reference.\n\n## Component Docs, Examples, and Usage\n\nRun `npx shadcn@latest docs \u003Ccomponent>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.\n\n```bash\nnpx shadcn@latest docs button dialog select\n```\n\n**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing.\n\n## Workflow\n\n1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh.\n2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed.\n3. **Find components** — `npx shadcn@latest search`.\n4. **Get docs and examples** — run `npx shadcn@latest docs \u003Ccomponent>` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`.\n5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below).\n6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@\u002Fcomponents\u002Fui\u002F...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace\u002Fui\u002Fcomponents`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.\n7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on.\n8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says \"add a login block\" without specifying `@shadcn`, `@tailark`, `owner\u002Frepo`, etc.), ask which registry to use. Never default to a registry on behalf of the user.\n9. **Switching presets** — Ask the user first: **overwrite**, **partial**, **merge**, or **skip**?\n   - **Inspect current preset**: `npx shadcn@latest preset resolve`. Use `--json` when you need structured values.\n   - **Inspect incoming preset**: `npx shadcn@latest preset decode \u003Ccode>`. Use `preset url \u003Ccode>` or `preset open \u003Ccode>` to share or open the preset builder.\n   - **Overwrite**: `npx shadcn@latest apply \u003Ccode>`. Overwrites detected components, fonts, and CSS variables.\n   - **Partial**: `npx shadcn@latest apply \u003Ccode> --only theme,font`. Updates only the selected preset parts without reinstalling UI components. Supported values are `theme` and `font`; comma-separated combinations are allowed. `icon` is intentionally not supported, because icon changes may require full component reinstall and transforms.\n   - **Merge**: `npx shadcn@latest init --preset \u003Ccode> --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually.\n   - **Skip**: `npx shadcn@latest init --preset \u003Ccode> --force --no-reinstall`. Only updates config and CSS, leaves components as-is.\n   - **Important**: Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch\u002Ftemp directory (e.g. for `--dry-run` comparisons), pass `--base \u003Ccurrent-base>` explicitly — preset codes do not encode the base.\n\n## Updating Components\n\nWhen the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.**\n\n1. Run `npx shadcn@latest add \u003Ccomponent> --dry-run` to see all files that would be affected.\n2. For each file, run `npx shadcn@latest add \u003Ccomponent> --diff \u003Cfile>` to see what changed upstream vs local.\n3. Decide per file based on the diff:\n   - No local changes → safe to overwrite.\n   - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.\n   - User says \"just update everything\" → use `--overwrite`, but confirm first.\n4. **Never use `--overwrite` without the user's explicit approval.**\n\n## Quick Reference\n\n```bash\n# Create a new project.\nnpx shadcn@latest init --name my-app --preset base-nova\nnpx shadcn@latest init --name my-app --preset a2r6bw --template vite\n\n# Create a monorepo project.\nnpx shadcn@latest init --name my-app --preset base-nova --monorepo\nnpx shadcn@latest init --name my-app --preset base-nova --template next --monorepo\n\n# Initialize existing project.\nnpx shadcn@latest init --preset base-nova\nnpx shadcn@latest init --defaults  # shortcut: --template=next --preset=nova (base style implied)\n\n# Apply a preset to an existing project.\nnpx shadcn@latest apply a2r6bw\nnpx shadcn@latest apply a2r6bw --only theme\nnpx shadcn@latest apply a2r6bw --only font\nnpx shadcn@latest apply a2r6bw --only theme,font\n\n# Inspect preset codes and project preset state.\nnpx shadcn@latest preset decode a2r6bw\nnpx shadcn@latest preset url a2r6bw\nnpx shadcn@latest preset open a2r6bw\nnpx shadcn@latest preset resolve\nnpx shadcn@latest preset resolve --json\n\n# Add components.\nnpx shadcn@latest add button card dialog\nnpx shadcn@latest add @magicui\u002Fshimmer-button\nnpx shadcn@latest add owner\u002Frepo\u002Fitem\nnpx shadcn@latest add --all\n\n# Preview changes before adding\u002Fupdating.\nnpx shadcn@latest add button --dry-run\nnpx shadcn@latest add button --diff button.tsx\nnpx shadcn@latest add @acme\u002Fform --view button.tsx\nnpx shadcn@latest add owner\u002Frepo\u002Fitem --dry-run\n\n# Search registries.\nnpx shadcn@latest search @shadcn -q \"sidebar\"\nnpx shadcn@latest search @tailark -q \"stats\"\nnpx shadcn@latest search owner\u002Frepo -q \"login\"\nnpx shadcn@latest search                          # all configured registries\nnpx shadcn@latest search @shadcn -q \"menu\" -t ui  # filter by item type\n\n# Get component docs and example URLs.\nnpx shadcn@latest docs button dialog select\n\n# View registry item details (for items not yet installed).\nnpx shadcn@latest view @shadcn\u002Fbutton\nnpx shadcn@latest view owner\u002Frepo\u002Fitem\n```\n\n**Named presets:** `nova`, `vega`, `maia`, `lyra`, `mira`, `luma`\n**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo)\n**Preset codes:** Version-prefixed base62 strings (e.g. `a2r6bw` or `b0`), from [ui.shadcn.com](https:\u002F\u002Fui.shadcn.com).\n\n## Detailed References\n\n- [rules\u002Fforms.md](.\u002Frules\u002Fforms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states\n- [rules\u002Fcomposition.md](.\u002Frules\u002Fcomposition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading\n- [rules\u002Fchat.md](.\u002Frules\u002Fchat.md) — MessageScroller, Message, Bubble, Attachment, Marker; streaming, anchoring, jump-to-latest\n- [rules\u002Ficons.md](.\u002Frules\u002Ficons.md) — data-icon, icon sizing, passing icons as objects\n- [rules\u002Fstyling.md](.\u002Frules\u002Fstyling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index\n- [rules\u002Fbase-vs-radix.md](.\u002Frules\u002Fbase-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion\n- [cli.md](.\u002Fcli.md) — Commands, flags, presets, templates\n- [registry.md](.\u002Fregistry.md) — Authoring source registries, `include`, item definitions, dependencies, GitHub registry rules\n- [customization.md](.\u002Fcustomization.md) — Theming, CSS variables, extending components\n",{"data":44,"body":47},{"name":4,"description":6,"user-invocable":45,"allowed-tools":46},false,"Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)",{"type":48,"children":49},"root",[50,58,64,119,126,148,161,167,257,263,275,289,478,490,731,743,1033,1043,1203,1215,1296,1308,1429,1435,1501,1507,1512,2277,2283,2805,2811,2816,3132,3153,3159,3171,3213,3231,3237,3801,3806,3829,3903,3909,4957,5092,5098,5201],{"type":51,"tag":52,"props":53,"children":55},"element","h1",{"id":54},"shadcnui",[56],{"type":57,"value":9},"text",{"type":51,"tag":59,"props":60,"children":61},"p",{},[62],{"type":57,"value":63},"A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.",{"type":51,"tag":65,"props":66,"children":67},"blockquote",{},[68],{"type":51,"tag":59,"props":69,"children":70},{},[71,77,79,86,88,94,96,102,104,110,112,117],{"type":51,"tag":72,"props":73,"children":74},"strong",{},[75],{"type":57,"value":76},"IMPORTANT:",{"type":57,"value":78}," Run all CLI commands using the project's package runner: ",{"type":51,"tag":80,"props":81,"children":83},"code",{"className":82},[],[84],{"type":57,"value":85},"npx shadcn@latest",{"type":57,"value":87},", ",{"type":51,"tag":80,"props":89,"children":91},{"className":90},[],[92],{"type":57,"value":93},"pnpm dlx shadcn@latest",{"type":57,"value":95},", or ",{"type":51,"tag":80,"props":97,"children":99},{"className":98},[],[100],{"type":57,"value":101},"bunx --bun shadcn@latest",{"type":57,"value":103}," — based on the project's ",{"type":51,"tag":80,"props":105,"children":107},{"className":106},[],[108],{"type":57,"value":109},"packageManager",{"type":57,"value":111},". Examples below use ",{"type":51,"tag":80,"props":113,"children":115},{"className":114},[],[116],{"type":57,"value":85},{"type":57,"value":118}," but substitute the correct runner for the project.",{"type":51,"tag":120,"props":121,"children":123},"h2",{"id":122},"current-project-context",[124],{"type":57,"value":125},"Current Project Context",{"type":51,"tag":127,"props":128,"children":133},"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","!`npx shadcn@latest info --json`\n","json","",[134],{"type":51,"tag":80,"props":135,"children":136},{"__ignoreMap":132},[137],{"type":51,"tag":138,"props":139,"children":142},"span",{"class":140,"line":141},"line",1,[143],{"type":51,"tag":138,"props":144,"children":146},{"style":145},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[147],{"type":57,"value":130},{"type":51,"tag":59,"props":149,"children":150},{},[151,153,159],{"type":57,"value":152},"The JSON above contains the project config and installed components. Use ",{"type":51,"tag":80,"props":154,"children":156},{"className":155},[],[157],{"type":57,"value":158},"npx shadcn@latest docs \u003Ccomponent>",{"type":57,"value":160}," to get documentation and example URLs for any component.",{"type":51,"tag":120,"props":162,"children":164},{"id":163},"principles",[165],{"type":57,"value":166},"Principles",{"type":51,"tag":168,"props":169,"children":170},"ol",{},[171,190,200,225],{"type":51,"tag":172,"props":173,"children":174},"li",{},[175,180,182,188],{"type":51,"tag":72,"props":176,"children":177},{},[178],{"type":57,"value":179},"Use existing components first.",{"type":57,"value":181}," Use ",{"type":51,"tag":80,"props":183,"children":185},{"className":184},[],[186],{"type":57,"value":187},"npx shadcn@latest search",{"type":57,"value":189}," to check registries before writing custom UI. Check community registries too.",{"type":51,"tag":172,"props":191,"children":192},{},[193,198],{"type":51,"tag":72,"props":194,"children":195},{},[196],{"type":57,"value":197},"Compose, don't reinvent.",{"type":57,"value":199}," Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.",{"type":51,"tag":172,"props":201,"children":202},{},[203,208,210,216,217,223],{"type":51,"tag":72,"props":204,"children":205},{},[206],{"type":57,"value":207},"Use built-in variants before custom styles.",{"type":57,"value":209}," ",{"type":51,"tag":80,"props":211,"children":213},{"className":212},[],[214],{"type":57,"value":215},"variant=\"outline\"",{"type":57,"value":87},{"type":51,"tag":80,"props":218,"children":220},{"className":219},[],[221],{"type":57,"value":222},"size=\"sm\"",{"type":57,"value":224},", etc.",{"type":51,"tag":172,"props":226,"children":227},{},[228,233,234,240,241,247,249,255],{"type":51,"tag":72,"props":229,"children":230},{},[231],{"type":57,"value":232},"Use semantic colors.",{"type":57,"value":209},{"type":51,"tag":80,"props":235,"children":237},{"className":236},[],[238],{"type":57,"value":239},"bg-primary",{"type":57,"value":87},{"type":51,"tag":80,"props":242,"children":244},{"className":243},[],[245],{"type":57,"value":246},"text-muted-foreground",{"type":57,"value":248}," — never raw values like ",{"type":51,"tag":80,"props":250,"children":252},{"className":251},[],[253],{"type":57,"value":254},"bg-blue-500",{"type":57,"value":256},".",{"type":51,"tag":120,"props":258,"children":260},{"id":259},"critical-rules",[261],{"type":57,"value":262},"Critical Rules",{"type":51,"tag":59,"props":264,"children":265},{},[266,268,273],{"type":57,"value":267},"These rules are ",{"type":51,"tag":72,"props":269,"children":270},{},[271],{"type":57,"value":272},"always enforced",{"type":57,"value":274},". Each links to a file with Incorrect\u002FCorrect code pairs.",{"type":51,"tag":276,"props":277,"children":279},"h3",{"id":278},"styling-tailwind-stylingmd",[280,282],{"type":57,"value":281},"Styling & Tailwind → ",{"type":51,"tag":283,"props":284,"children":286},"a",{"href":285},".\u002Frules\u002Fstyling.md",[287],{"type":57,"value":288},"styling.md",{"type":51,"tag":290,"props":291,"children":292},"ul",{},[293,309,356,388,412,444,461],{"type":51,"tag":172,"props":294,"children":295},{},[296,307],{"type":51,"tag":72,"props":297,"children":298},{},[299,305],{"type":51,"tag":80,"props":300,"children":302},{"className":301},[],[303],{"type":57,"value":304},"className",{"type":57,"value":306}," for layout, not styling.",{"type":57,"value":308}," Never override component colors or typography.",{"type":51,"tag":172,"props":310,"children":311},{},[312,332,333,339,341,347,349,355],{"type":51,"tag":72,"props":313,"children":314},{},[315,317,323,325,331],{"type":57,"value":316},"No ",{"type":51,"tag":80,"props":318,"children":320},{"className":319},[],[321],{"type":57,"value":322},"space-x-*",{"type":57,"value":324}," or ",{"type":51,"tag":80,"props":326,"children":328},{"className":327},[],[329],{"type":57,"value":330},"space-y-*",{"type":57,"value":256},{"type":57,"value":181},{"type":51,"tag":80,"props":334,"children":336},{"className":335},[],[337],{"type":57,"value":338},"flex",{"type":57,"value":340}," with ",{"type":51,"tag":80,"props":342,"children":344},{"className":343},[],[345],{"type":57,"value":346},"gap-*",{"type":57,"value":348},". For vertical stacks, ",{"type":51,"tag":80,"props":350,"children":352},{"className":351},[],[353],{"type":57,"value":354},"flex flex-col gap-*",{"type":57,"value":256},{"type":51,"tag":172,"props":357,"children":358},{},[359,372,373,379,381,387],{"type":51,"tag":72,"props":360,"children":361},{},[362,364,370],{"type":57,"value":363},"Use ",{"type":51,"tag":80,"props":365,"children":367},{"className":366},[],[368],{"type":57,"value":369},"size-*",{"type":57,"value":371}," when width and height are equal.",{"type":57,"value":209},{"type":51,"tag":80,"props":374,"children":376},{"className":375},[],[377],{"type":57,"value":378},"size-10",{"type":57,"value":380}," not ",{"type":51,"tag":80,"props":382,"children":384},{"className":383},[],[385],{"type":57,"value":386},"w-10 h-10",{"type":57,"value":256},{"type":51,"tag":172,"props":389,"children":390},{},[391,403,405,411],{"type":51,"tag":72,"props":392,"children":393},{},[394,395,401],{"type":57,"value":363},{"type":51,"tag":80,"props":396,"children":398},{"className":397},[],[399],{"type":57,"value":400},"truncate",{"type":57,"value":402}," shorthand.",{"type":57,"value":404}," Not ",{"type":51,"tag":80,"props":406,"children":408},{"className":407},[],[409],{"type":57,"value":410},"overflow-hidden text-ellipsis whitespace-nowrap",{"type":57,"value":256},{"type":51,"tag":172,"props":413,"children":414},{},[415,428,430,436,437,442],{"type":51,"tag":72,"props":416,"children":417},{},[418,420,426],{"type":57,"value":419},"No manual ",{"type":51,"tag":80,"props":421,"children":423},{"className":422},[],[424],{"type":57,"value":425},"dark:",{"type":57,"value":427}," color overrides.",{"type":57,"value":429}," Use semantic tokens (",{"type":51,"tag":80,"props":431,"children":433},{"className":432},[],[434],{"type":57,"value":435},"bg-background",{"type":57,"value":87},{"type":51,"tag":80,"props":438,"children":440},{"className":439},[],[441],{"type":57,"value":246},{"type":57,"value":443},").",{"type":51,"tag":172,"props":445,"children":446},{},[447,459],{"type":51,"tag":72,"props":448,"children":449},{},[450,451,457],{"type":57,"value":363},{"type":51,"tag":80,"props":452,"children":454},{"className":453},[],[455],{"type":57,"value":456},"cn()",{"type":57,"value":458}," for conditional classes.",{"type":57,"value":460}," Don't write manual template literal ternaries.",{"type":51,"tag":172,"props":462,"children":463},{},[464,476],{"type":51,"tag":72,"props":465,"children":466},{},[467,468,474],{"type":57,"value":419},{"type":51,"tag":80,"props":469,"children":471},{"className":470},[],[472],{"type":57,"value":473},"z-index",{"type":57,"value":475}," on overlay components.",{"type":57,"value":477}," Dialog, Sheet, Popover, etc. handle their own stacking.",{"type":51,"tag":276,"props":479,"children":481},{"id":480},"forms-inputs-formsmd",[482,484],{"type":57,"value":483},"Forms & Inputs → ",{"type":51,"tag":283,"props":485,"children":487},{"href":486},".\u002Frules\u002Fforms.md",[488],{"type":57,"value":489},"forms.md",{"type":51,"tag":290,"props":491,"children":492},{},[493,539,591,612,637,667],{"type":51,"tag":172,"props":494,"children":495},{},[496,516,518,524,525,530,531,537],{"type":51,"tag":72,"props":497,"children":498},{},[499,501,507,509,515],{"type":57,"value":500},"Forms use ",{"type":51,"tag":80,"props":502,"children":504},{"className":503},[],[505],{"type":57,"value":506},"FieldGroup",{"type":57,"value":508}," + ",{"type":51,"tag":80,"props":510,"children":512},{"className":511},[],[513],{"type":57,"value":514},"Field",{"type":57,"value":256},{"type":57,"value":517}," Never use raw ",{"type":51,"tag":80,"props":519,"children":521},{"className":520},[],[522],{"type":57,"value":523},"div",{"type":57,"value":340},{"type":51,"tag":80,"props":526,"children":528},{"className":527},[],[529],{"type":57,"value":330},{"type":57,"value":324},{"type":51,"tag":80,"props":532,"children":534},{"className":533},[],[535],{"type":57,"value":536},"grid gap-*",{"type":57,"value":538}," for form layout.",{"type":51,"tag":172,"props":540,"children":541},{},[542,568,570,576,577,583,585,590],{"type":51,"tag":72,"props":543,"children":544},{},[545,551,553,559,561,567],{"type":51,"tag":80,"props":546,"children":548},{"className":547},[],[549],{"type":57,"value":550},"InputGroup",{"type":57,"value":552}," uses ",{"type":51,"tag":80,"props":554,"children":556},{"className":555},[],[557],{"type":57,"value":558},"InputGroupInput",{"type":57,"value":560},"\u002F",{"type":51,"tag":80,"props":562,"children":564},{"className":563},[],[565],{"type":57,"value":566},"InputGroupTextarea",{"type":57,"value":256},{"type":57,"value":569}," Never raw ",{"type":51,"tag":80,"props":571,"children":573},{"className":572},[],[574],{"type":57,"value":575},"Input",{"type":57,"value":560},{"type":51,"tag":80,"props":578,"children":580},{"className":579},[],[581],{"type":57,"value":582},"Textarea",{"type":57,"value":584}," inside ",{"type":51,"tag":80,"props":586,"children":588},{"className":587},[],[589],{"type":57,"value":550},{"type":57,"value":256},{"type":51,"tag":172,"props":592,"children":593},{},[594],{"type":51,"tag":72,"props":595,"children":596},{},[597,599,604,605,611],{"type":57,"value":598},"Buttons inside inputs use ",{"type":51,"tag":80,"props":600,"children":602},{"className":601},[],[603],{"type":57,"value":550},{"type":57,"value":508},{"type":51,"tag":80,"props":606,"children":608},{"className":607},[],[609],{"type":57,"value":610},"InputGroupAddon",{"type":57,"value":256},{"type":51,"tag":172,"props":613,"children":614},{},[615,627,629,635],{"type":51,"tag":72,"props":616,"children":617},{},[618,620,626],{"type":57,"value":619},"Option sets (2–7 choices) use ",{"type":51,"tag":80,"props":621,"children":623},{"className":622},[],[624],{"type":57,"value":625},"ToggleGroup",{"type":57,"value":256},{"type":57,"value":628}," Don't loop ",{"type":51,"tag":80,"props":630,"children":632},{"className":631},[],[633],{"type":57,"value":634},"Button",{"type":57,"value":636}," with manual active state.",{"type":51,"tag":172,"props":638,"children":639},{},[640,658,660,665],{"type":51,"tag":72,"props":641,"children":642},{},[643,649,650,656],{"type":51,"tag":80,"props":644,"children":646},{"className":645},[],[647],{"type":57,"value":648},"FieldSet",{"type":57,"value":508},{"type":51,"tag":80,"props":651,"children":653},{"className":652},[],[654],{"type":57,"value":655},"FieldLegend",{"type":57,"value":657}," for grouping related checkboxes\u002Fradios.",{"type":57,"value":659}," Don't use a ",{"type":51,"tag":80,"props":661,"children":663},{"className":662},[],[664],{"type":57,"value":523},{"type":57,"value":666}," with a heading.",{"type":51,"tag":172,"props":668,"children":669},{},[670,689,690,695,697,702,703,708,710,716,717,722,723,729],{"type":51,"tag":72,"props":671,"children":672},{},[673,675,681,682,688],{"type":57,"value":674},"Field validation uses ",{"type":51,"tag":80,"props":676,"children":678},{"className":677},[],[679],{"type":57,"value":680},"data-invalid",{"type":57,"value":508},{"type":51,"tag":80,"props":683,"children":685},{"className":684},[],[686],{"type":57,"value":687},"aria-invalid",{"type":57,"value":256},{"type":57,"value":209},{"type":51,"tag":80,"props":691,"children":693},{"className":692},[],[694],{"type":57,"value":680},{"type":57,"value":696}," on ",{"type":51,"tag":80,"props":698,"children":700},{"className":699},[],[701],{"type":57,"value":514},{"type":57,"value":87},{"type":51,"tag":80,"props":704,"children":706},{"className":705},[],[707],{"type":57,"value":687},{"type":57,"value":709}," on the control. For disabled: ",{"type":51,"tag":80,"props":711,"children":713},{"className":712},[],[714],{"type":57,"value":715},"data-disabled",{"type":57,"value":696},{"type":51,"tag":80,"props":718,"children":720},{"className":719},[],[721],{"type":57,"value":514},{"type":57,"value":87},{"type":51,"tag":80,"props":724,"children":726},{"className":725},[],[727],{"type":57,"value":728},"disabled",{"type":57,"value":730}," on the control.",{"type":51,"tag":276,"props":732,"children":734},{"id":733},"component-structure-compositionmd",[735,737],{"type":57,"value":736},"Component Structure → ",{"type":51,"tag":283,"props":738,"children":740},{"href":739},".\u002Frules\u002Fcomposition.md",[741],{"type":57,"value":742},"composition.md",{"type":51,"tag":290,"props":744,"children":745},{},[746,799,846,885,936,980,1010],{"type":51,"tag":172,"props":747,"children":748},{},[749,754,755,761,763,769,771,777,778,784,785,791,792,798],{"type":51,"tag":72,"props":750,"children":751},{},[752],{"type":57,"value":753},"Items always inside their Group.",{"type":57,"value":209},{"type":51,"tag":80,"props":756,"children":758},{"className":757},[],[759],{"type":57,"value":760},"SelectItem",{"type":57,"value":762}," → ",{"type":51,"tag":80,"props":764,"children":766},{"className":765},[],[767],{"type":57,"value":768},"SelectGroup",{"type":57,"value":770},". ",{"type":51,"tag":80,"props":772,"children":774},{"className":773},[],[775],{"type":57,"value":776},"DropdownMenuItem",{"type":57,"value":762},{"type":51,"tag":80,"props":779,"children":781},{"className":780},[],[782],{"type":57,"value":783},"DropdownMenuGroup",{"type":57,"value":770},{"type":51,"tag":80,"props":786,"children":788},{"className":787},[],[789],{"type":57,"value":790},"CommandItem",{"type":57,"value":762},{"type":51,"tag":80,"props":793,"children":795},{"className":794},[],[796],{"type":57,"value":797},"CommandGroup",{"type":57,"value":256},{"type":51,"tag":172,"props":800,"children":801},{},[802,822,824,830,832,838,840],{"type":51,"tag":72,"props":803,"children":804},{},[805,806,812,814,820],{"type":57,"value":363},{"type":51,"tag":80,"props":807,"children":809},{"className":808},[],[810],{"type":57,"value":811},"asChild",{"type":57,"value":813}," (radix) or ",{"type":51,"tag":80,"props":815,"children":817},{"className":816},[],[818],{"type":57,"value":819},"render",{"type":57,"value":821}," (base) for custom triggers.",{"type":57,"value":823}," Check ",{"type":51,"tag":80,"props":825,"children":827},{"className":826},[],[828],{"type":57,"value":829},"base",{"type":57,"value":831}," field from ",{"type":51,"tag":80,"props":833,"children":835},{"className":834},[],[836],{"type":57,"value":837},"npx shadcn@latest info",{"type":57,"value":839},". → ",{"type":51,"tag":283,"props":841,"children":843},{"href":842},".\u002Frules\u002Fbase-vs-radix.md",[844],{"type":57,"value":845},"base-vs-radix.md",{"type":51,"tag":172,"props":847,"children":848},{},[849,854,855,861,862,868,869,875,877,883],{"type":51,"tag":72,"props":850,"children":851},{},[852],{"type":57,"value":853},"Dialog, Sheet, and Drawer always need a Title.",{"type":57,"value":209},{"type":51,"tag":80,"props":856,"children":858},{"className":857},[],[859],{"type":57,"value":860},"DialogTitle",{"type":57,"value":87},{"type":51,"tag":80,"props":863,"children":865},{"className":864},[],[866],{"type":57,"value":867},"SheetTitle",{"type":57,"value":87},{"type":51,"tag":80,"props":870,"children":872},{"className":871},[],[873],{"type":57,"value":874},"DrawerTitle",{"type":57,"value":876}," required for accessibility. Use ",{"type":51,"tag":80,"props":878,"children":880},{"className":879},[],[881],{"type":57,"value":882},"className=\"sr-only\"",{"type":57,"value":884}," if visually hidden.",{"type":51,"tag":172,"props":886,"children":887},{},[888,893,894,900,901,907,908,914,915,921,922,928,930,935],{"type":51,"tag":72,"props":889,"children":890},{},[891],{"type":57,"value":892},"Use full Card composition.",{"type":57,"value":209},{"type":51,"tag":80,"props":895,"children":897},{"className":896},[],[898],{"type":57,"value":899},"CardHeader",{"type":57,"value":560},{"type":51,"tag":80,"props":902,"children":904},{"className":903},[],[905],{"type":57,"value":906},"CardTitle",{"type":57,"value":560},{"type":51,"tag":80,"props":909,"children":911},{"className":910},[],[912],{"type":57,"value":913},"CardDescription",{"type":57,"value":560},{"type":51,"tag":80,"props":916,"children":918},{"className":917},[],[919],{"type":57,"value":920},"CardContent",{"type":57,"value":560},{"type":51,"tag":80,"props":923,"children":925},{"className":924},[],[926],{"type":57,"value":927},"CardFooter",{"type":57,"value":929},". Don't dump everything in ",{"type":51,"tag":80,"props":931,"children":933},{"className":932},[],[934],{"type":57,"value":920},{"type":57,"value":256},{"type":51,"tag":172,"props":937,"children":938},{},[939,958,960,966,967,973,974,979],{"type":51,"tag":72,"props":940,"children":941},{},[942,944,950,951,957],{"type":57,"value":943},"Button has no ",{"type":51,"tag":80,"props":945,"children":947},{"className":946},[],[948],{"type":57,"value":949},"isPending",{"type":57,"value":560},{"type":51,"tag":80,"props":952,"children":954},{"className":953},[],[955],{"type":57,"value":956},"isLoading",{"type":57,"value":256},{"type":57,"value":959}," Compose with ",{"type":51,"tag":80,"props":961,"children":963},{"className":962},[],[964],{"type":57,"value":965},"Spinner",{"type":57,"value":508},{"type":51,"tag":80,"props":968,"children":970},{"className":969},[],[971],{"type":57,"value":972},"data-icon",{"type":57,"value":508},{"type":51,"tag":80,"props":975,"children":977},{"className":976},[],[978],{"type":57,"value":728},{"type":57,"value":256},{"type":51,"tag":172,"props":981,"children":982},{},[983,1001,1003,1009],{"type":51,"tag":72,"props":984,"children":985},{},[986,992,994,1000],{"type":51,"tag":80,"props":987,"children":989},{"className":988},[],[990],{"type":57,"value":991},"TabsTrigger",{"type":57,"value":993}," must be inside ",{"type":51,"tag":80,"props":995,"children":997},{"className":996},[],[998],{"type":57,"value":999},"TabsList",{"type":57,"value":256},{"type":57,"value":1002}," Never render triggers directly in ",{"type":51,"tag":80,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":57,"value":1008},"Tabs",{"type":57,"value":256},{"type":51,"tag":172,"props":1011,"children":1012},{},[1013,1031],{"type":51,"tag":72,"props":1014,"children":1015},{},[1016,1022,1024,1030],{"type":51,"tag":80,"props":1017,"children":1019},{"className":1018},[],[1020],{"type":57,"value":1021},"Avatar",{"type":57,"value":1023}," always needs ",{"type":51,"tag":80,"props":1025,"children":1027},{"className":1026},[],[1028],{"type":57,"value":1029},"AvatarFallback",{"type":57,"value":256},{"type":57,"value":1032}," For when the image fails to load.",{"type":51,"tag":276,"props":1034,"children":1036},{"id":1035},"use-components-not-custom-markup-compositionmd",[1037,1039],{"type":57,"value":1038},"Use Components, Not Custom Markup → ",{"type":51,"tag":283,"props":1040,"children":1041},{"href":739},[1042],{"type":57,"value":742},{"type":51,"tag":290,"props":1044,"children":1045},{},[1046,1062,1079,1096,1136,1165,1188],{"type":51,"tag":172,"props":1047,"children":1048},{},[1049,1054,1056,1061],{"type":51,"tag":72,"props":1050,"children":1051},{},[1052],{"type":57,"value":1053},"Use existing components before custom markup.",{"type":57,"value":1055}," Check if a component exists before writing a styled ",{"type":51,"tag":80,"props":1057,"children":1059},{"className":1058},[],[1060],{"type":57,"value":523},{"type":57,"value":256},{"type":51,"tag":172,"props":1063,"children":1064},{},[1065,1077],{"type":51,"tag":72,"props":1066,"children":1067},{},[1068,1070,1076],{"type":57,"value":1069},"Callouts use ",{"type":51,"tag":80,"props":1071,"children":1073},{"className":1072},[],[1074],{"type":57,"value":1075},"Alert",{"type":57,"value":256},{"type":57,"value":1078}," Don't build custom styled divs.",{"type":51,"tag":172,"props":1080,"children":1081},{},[1082,1094],{"type":51,"tag":72,"props":1083,"children":1084},{},[1085,1087,1093],{"type":57,"value":1086},"Empty states use ",{"type":51,"tag":80,"props":1088,"children":1090},{"className":1089},[],[1091],{"type":57,"value":1092},"Empty",{"type":57,"value":256},{"type":57,"value":1095}," Don't build custom empty state markup.",{"type":51,"tag":172,"props":1097,"children":1098},{},[1099,1104,1105,1111,1113,1118,1120,1126,1128,1134],{"type":51,"tag":72,"props":1100,"children":1101},{},[1102],{"type":57,"value":1103},"Toast follows the project base.",{"type":57,"value":181},{"type":51,"tag":80,"props":1106,"children":1108},{"className":1107},[],[1109],{"type":57,"value":1110},"toast",{"type":57,"value":1112}," from the ",{"type":51,"tag":80,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":57,"value":1110},{"type":57,"value":1119}," component for\nBase UI projects. Use ",{"type":51,"tag":80,"props":1121,"children":1123},{"className":1122},[],[1124],{"type":57,"value":1125},"toast()",{"type":57,"value":1127}," from ",{"type":51,"tag":80,"props":1129,"children":1131},{"className":1130},[],[1132],{"type":57,"value":1133},"sonner",{"type":57,"value":1135}," for Radix and React Aria\nprojects.",{"type":51,"tag":172,"props":1137,"children":1138},{},[1139,1149,1151,1157,1158,1164],{"type":51,"tag":72,"props":1140,"children":1141},{},[1142,1143],{"type":57,"value":363},{"type":51,"tag":80,"props":1144,"children":1146},{"className":1145},[],[1147],{"type":57,"value":1148},"Separator",{"type":57,"value":1150}," instead of ",{"type":51,"tag":80,"props":1152,"children":1154},{"className":1153},[],[1155],{"type":57,"value":1156},"\u003Chr>",{"type":57,"value":324},{"type":51,"tag":80,"props":1159,"children":1161},{"className":1160},[],[1162],{"type":57,"value":1163},"\u003Cdiv className=\"border-t\">",{"type":57,"value":256},{"type":51,"tag":172,"props":1166,"children":1167},{},[1168,1178,1180,1186],{"type":51,"tag":72,"props":1169,"children":1170},{},[1171,1172],{"type":57,"value":363},{"type":51,"tag":80,"props":1173,"children":1175},{"className":1174},[],[1176],{"type":57,"value":1177},"Skeleton",{"type":57,"value":1179}," for loading placeholders. No custom ",{"type":51,"tag":80,"props":1181,"children":1183},{"className":1182},[],[1184],{"type":57,"value":1185},"animate-pulse",{"type":57,"value":1187}," divs.",{"type":51,"tag":172,"props":1189,"children":1190},{},[1191,1201],{"type":51,"tag":72,"props":1192,"children":1193},{},[1194,1195],{"type":57,"value":363},{"type":51,"tag":80,"props":1196,"children":1198},{"className":1197},[],[1199],{"type":57,"value":1200},"Badge",{"type":57,"value":1202}," instead of custom styled spans.",{"type":51,"tag":276,"props":1204,"children":1206},{"id":1205},"icons-iconsmd",[1207,1209],{"type":57,"value":1208},"Icons → ",{"type":51,"tag":283,"props":1210,"children":1212},{"href":1211},".\u002Frules\u002Ficons.md",[1213],{"type":57,"value":1214},"icons.md",{"type":51,"tag":290,"props":1216,"children":1217},{},[1218,1255,1279],{"type":51,"tag":172,"props":1219,"children":1220},{},[1221,1239,1240,1246,1247,1253],{"type":51,"tag":72,"props":1222,"children":1223},{},[1224,1226,1231,1233,1238],{"type":57,"value":1225},"Icons in ",{"type":51,"tag":80,"props":1227,"children":1229},{"className":1228},[],[1230],{"type":57,"value":634},{"type":57,"value":1232}," use ",{"type":51,"tag":80,"props":1234,"children":1236},{"className":1235},[],[1237],{"type":57,"value":972},{"type":57,"value":256},{"type":57,"value":209},{"type":51,"tag":80,"props":1241,"children":1243},{"className":1242},[],[1244],{"type":57,"value":1245},"data-icon=\"inline-start\"",{"type":57,"value":324},{"type":51,"tag":80,"props":1248,"children":1250},{"className":1249},[],[1251],{"type":57,"value":1252},"data-icon=\"inline-end\"",{"type":57,"value":1254}," on the icon.",{"type":51,"tag":172,"props":1256,"children":1257},{},[1258,1263,1265,1271,1272,1278],{"type":51,"tag":72,"props":1259,"children":1260},{},[1261],{"type":57,"value":1262},"No sizing classes on icons inside components.",{"type":57,"value":1264}," Components handle icon sizing via CSS. No ",{"type":51,"tag":80,"props":1266,"children":1268},{"className":1267},[],[1269],{"type":57,"value":1270},"size-4",{"type":57,"value":324},{"type":51,"tag":80,"props":1273,"children":1275},{"className":1274},[],[1276],{"type":57,"value":1277},"w-4 h-4",{"type":57,"value":256},{"type":51,"tag":172,"props":1280,"children":1281},{},[1282,1287,1288,1294],{"type":51,"tag":72,"props":1283,"children":1284},{},[1285],{"type":57,"value":1286},"Pass icons as objects, not string keys.",{"type":57,"value":209},{"type":51,"tag":80,"props":1289,"children":1291},{"className":1290},[],[1292],{"type":57,"value":1293},"icon={CheckIcon}",{"type":57,"value":1295},", not a string lookup.",{"type":51,"tag":276,"props":1297,"children":1299},{"id":1298},"chat-messaging-chatmd",[1300,1302],{"type":57,"value":1301},"Chat & Messaging → ",{"type":51,"tag":283,"props":1303,"children":1305},{"href":1304},".\u002Frules\u002Fchat.md",[1306],{"type":57,"value":1307},"chat.md",{"type":51,"tag":290,"props":1309,"children":1310},{},[1311,1352,1390],{"type":51,"tag":172,"props":1312,"children":1313},{},[1314,1319,1321,1327,1329,1335,1337,1343,1345,1350],{"type":51,"tag":72,"props":1315,"children":1316},{},[1317],{"type":57,"value":1318},"Chat UI composes the chat primitives.",{"type":57,"value":1320}," Conversations use ",{"type":51,"tag":80,"props":1322,"children":1324},{"className":1323},[],[1325],{"type":57,"value":1326},"MessageScroller",{"type":57,"value":1328},", rows use ",{"type":51,"tag":80,"props":1330,"children":1332},{"className":1331},[],[1333],{"type":57,"value":1334},"Message",{"type":57,"value":1336},", surfaces use ",{"type":51,"tag":80,"props":1338,"children":1340},{"className":1339},[],[1341],{"type":57,"value":1342},"Bubble",{"type":57,"value":1344},". Never hand-rolled bubble ",{"type":51,"tag":80,"props":1346,"children":1348},{"className":1347},[],[1349],{"type":57,"value":523},{"type":57,"value":1351},"s or a raw scroll container.",{"type":51,"tag":172,"props":1353,"children":1354},{},[1355,1365,1367,1373,1375,1381,1382,1388],{"type":51,"tag":72,"props":1356,"children":1357},{},[1358,1363],{"type":51,"tag":80,"props":1359,"children":1361},{"className":1360},[],[1362],{"type":57,"value":1326},{"type":57,"value":1364}," owns scroll behavior.",{"type":57,"value":1366}," Streaming follow, anchoring, and jump-to-latest (",{"type":51,"tag":80,"props":1368,"children":1370},{"className":1369},[],[1371],{"type":57,"value":1372},"MessageScrollerButton",{"type":57,"value":1374},") are built in. Don't write a ",{"type":51,"tag":80,"props":1376,"children":1378},{"className":1377},[],[1379],{"type":57,"value":1380},"useStickToBottom",{"type":57,"value":560},{"type":51,"tag":80,"props":1383,"children":1385},{"className":1384},[],[1386],{"type":57,"value":1387},"ResizeObserver",{"type":57,"value":1389}," hook.",{"type":51,"tag":172,"props":1391,"children":1392},{},[1393,1413,1414,1420,1422,1427],{"type":51,"tag":72,"props":1394,"children":1395},{},[1396,1398,1404,1406,1412],{"type":57,"value":1397},"Attachments use ",{"type":51,"tag":80,"props":1399,"children":1401},{"className":1400},[],[1402],{"type":57,"value":1403},"Attachment",{"type":57,"value":1405},"; system notes and dividers use ",{"type":51,"tag":80,"props":1407,"children":1409},{"className":1408},[],[1410],{"type":57,"value":1411},"Marker",{"type":57,"value":256},{"type":57,"value":404},{"type":51,"tag":80,"props":1415,"children":1417},{"className":1416},[],[1418],{"type":57,"value":1419},"Item",{"type":57,"value":1421}," cards or ",{"type":51,"tag":80,"props":1423,"children":1425},{"className":1424},[],[1426],{"type":57,"value":1148},{"type":57,"value":1428}," + a label.",{"type":51,"tag":276,"props":1430,"children":1432},{"id":1431},"cli",[1433],{"type":57,"value":1434},"CLI",{"type":51,"tag":290,"props":1436,"children":1437},{},[1438,1476],{"type":51,"tag":172,"props":1439,"children":1440},{},[1441,1446,1447,1453,1454,1460,1461,1467,1469,1475],{"type":51,"tag":72,"props":1442,"children":1443},{},[1444],{"type":57,"value":1445},"Never decode preset codes or build preset URLs manually.",{"type":57,"value":181},{"type":51,"tag":80,"props":1448,"children":1450},{"className":1449},[],[1451],{"type":57,"value":1452},"npx shadcn@latest preset decode \u003Ccode>",{"type":57,"value":87},{"type":51,"tag":80,"props":1455,"children":1457},{"className":1456},[],[1458],{"type":57,"value":1459},"preset url \u003Ccode>",{"type":57,"value":95},{"type":51,"tag":80,"props":1462,"children":1464},{"className":1463},[],[1465],{"type":57,"value":1466},"preset open \u003Ccode>",{"type":57,"value":1468},". For project-aware preset detection, use ",{"type":51,"tag":80,"props":1470,"children":1472},{"className":1471},[],[1473],{"type":57,"value":1474},"npx shadcn@latest preset resolve",{"type":57,"value":256},{"type":51,"tag":172,"props":1477,"children":1478},{},[1479,1484,1485,1491,1493,1499],{"type":51,"tag":72,"props":1480,"children":1481},{},[1482],{"type":57,"value":1483},"Apply preset codes directly with the CLI.",{"type":57,"value":181},{"type":51,"tag":80,"props":1486,"children":1488},{"className":1487},[],[1489],{"type":57,"value":1490},"npx shadcn@latest apply \u003Ccode>",{"type":57,"value":1492}," for existing projects, or ",{"type":51,"tag":80,"props":1494,"children":1496},{"className":1495},[],[1497],{"type":57,"value":1498},"npx shadcn@latest init --preset \u003Ccode>",{"type":57,"value":1500}," when initializing.",{"type":51,"tag":120,"props":1502,"children":1504},{"id":1503},"key-patterns",[1505],{"type":57,"value":1506},"Key Patterns",{"type":51,"tag":59,"props":1508,"children":1509},{},[1510],{"type":57,"value":1511},"These are the most common patterns that differentiate correct shadcn\u002Fui code. For edge cases, see the linked rule files above.",{"type":51,"tag":127,"props":1513,"children":1517},{"className":1514,"code":1515,"language":1516,"meta":132,"style":132},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Form layout: FieldGroup + Field, not div + Label.\n\u003CFieldGroup>\n  \u003CField>\n    \u003CFieldLabel htmlFor=\"email\">Email\u003C\u002FFieldLabel>\n    \u003CInput id=\"email\" \u002F>\n  \u003C\u002FField>\n\u003C\u002FFieldGroup>\n\n\u002F\u002F Validation: data-invalid on Field, aria-invalid on the control.\n\u003CField data-invalid>\n  \u003CFieldLabel>Email\u003C\u002FFieldLabel>\n  \u003CInput aria-invalid \u002F>\n  \u003CFieldDescription>Invalid email.\u003C\u002FFieldDescription>\n\u003C\u002FField>\n\n\u002F\u002F Icons in buttons: data-icon, no sizing classes.\n\u003CButton>\n  \u003CSearchIcon data-icon=\"inline-start\" \u002F>\n  Search\n\u003C\u002FButton>\n\n\u002F\u002F Spacing: gap-*, not space-y-*.\n\u003Cdiv className=\"flex flex-col gap-4\">  \u002F\u002F correct\n\u003Cdiv className=\"space-y-4\">           \u002F\u002F wrong\n\n\u002F\u002F Equal dimensions: size-*, not w-* h-*.\n\u003CAvatar className=\"size-10\">   \u002F\u002F correct\n\u003CAvatar className=\"w-10 h-10\"> \u002F\u002F wrong\n\n\u002F\u002F Status colors: Badge variants or semantic tokens, not raw colors.\n\u003CBadge variant=\"secondary\">+20.1%\u003C\u002FBadge>    \u002F\u002F correct\n\u003Cspan className=\"text-emerald-600\">+20.1%\u003C\u002Fspan> \u002F\u002F wrong\n","tsx",[1518],{"type":51,"tag":80,"props":1519,"children":1520},{"__ignoreMap":132},[1521,1530,1550,1567,1630,1668,1685,1701,1711,1720,1741,1773,1794,1828,1844,1852,1861,1877,1916,1925,1941,1949,1958,2002,2044,2052,2061,2102,2143,2151,2160,2220],{"type":51,"tag":138,"props":1522,"children":1523},{"class":140,"line":141},[1524],{"type":51,"tag":138,"props":1525,"children":1527},{"style":1526},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1528],{"type":57,"value":1529},"\u002F\u002F Form layout: FieldGroup + Field, not div + Label.\n",{"type":51,"tag":138,"props":1531,"children":1533},{"class":140,"line":1532},2,[1534,1540,1545],{"type":51,"tag":138,"props":1535,"children":1537},{"style":1536},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1538],{"type":57,"value":1539},"\u003C",{"type":51,"tag":138,"props":1541,"children":1543},{"style":1542},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1544],{"type":57,"value":506},{"type":51,"tag":138,"props":1546,"children":1547},{"style":1536},[1548],{"type":57,"value":1549},">\n",{"type":51,"tag":138,"props":1551,"children":1553},{"class":140,"line":1552},3,[1554,1559,1563],{"type":51,"tag":138,"props":1555,"children":1556},{"style":1536},[1557],{"type":57,"value":1558},"  \u003C",{"type":51,"tag":138,"props":1560,"children":1561},{"style":1542},[1562],{"type":57,"value":514},{"type":51,"tag":138,"props":1564,"children":1565},{"style":1536},[1566],{"type":57,"value":1549},{"type":51,"tag":138,"props":1568,"children":1570},{"class":140,"line":1569},4,[1571,1576,1581,1587,1592,1597,1603,1607,1612,1617,1622,1626],{"type":51,"tag":138,"props":1572,"children":1573},{"style":1536},[1574],{"type":57,"value":1575},"    \u003C",{"type":51,"tag":138,"props":1577,"children":1578},{"style":1542},[1579],{"type":57,"value":1580},"FieldLabel",{"type":51,"tag":138,"props":1582,"children":1584},{"style":1583},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1585],{"type":57,"value":1586}," htmlFor",{"type":51,"tag":138,"props":1588,"children":1589},{"style":1536},[1590],{"type":57,"value":1591},"=",{"type":51,"tag":138,"props":1593,"children":1594},{"style":1536},[1595],{"type":57,"value":1596},"\"",{"type":51,"tag":138,"props":1598,"children":1600},{"style":1599},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1601],{"type":57,"value":1602},"email",{"type":51,"tag":138,"props":1604,"children":1605},{"style":1536},[1606],{"type":57,"value":1596},{"type":51,"tag":138,"props":1608,"children":1609},{"style":1536},[1610],{"type":57,"value":1611},">",{"type":51,"tag":138,"props":1613,"children":1614},{"style":145},[1615],{"type":57,"value":1616},"Email",{"type":51,"tag":138,"props":1618,"children":1619},{"style":1536},[1620],{"type":57,"value":1621},"\u003C\u002F",{"type":51,"tag":138,"props":1623,"children":1624},{"style":1542},[1625],{"type":57,"value":1580},{"type":51,"tag":138,"props":1627,"children":1628},{"style":1536},[1629],{"type":57,"value":1549},{"type":51,"tag":138,"props":1631,"children":1633},{"class":140,"line":1632},5,[1634,1638,1642,1647,1651,1655,1659,1663],{"type":51,"tag":138,"props":1635,"children":1636},{"style":1536},[1637],{"type":57,"value":1575},{"type":51,"tag":138,"props":1639,"children":1640},{"style":1542},[1641],{"type":57,"value":575},{"type":51,"tag":138,"props":1643,"children":1644},{"style":1583},[1645],{"type":57,"value":1646}," id",{"type":51,"tag":138,"props":1648,"children":1649},{"style":1536},[1650],{"type":57,"value":1591},{"type":51,"tag":138,"props":1652,"children":1653},{"style":1536},[1654],{"type":57,"value":1596},{"type":51,"tag":138,"props":1656,"children":1657},{"style":1599},[1658],{"type":57,"value":1602},{"type":51,"tag":138,"props":1660,"children":1661},{"style":1536},[1662],{"type":57,"value":1596},{"type":51,"tag":138,"props":1664,"children":1665},{"style":1536},[1666],{"type":57,"value":1667}," \u002F>\n",{"type":51,"tag":138,"props":1669,"children":1671},{"class":140,"line":1670},6,[1672,1677,1681],{"type":51,"tag":138,"props":1673,"children":1674},{"style":1536},[1675],{"type":57,"value":1676},"  \u003C\u002F",{"type":51,"tag":138,"props":1678,"children":1679},{"style":1542},[1680],{"type":57,"value":514},{"type":51,"tag":138,"props":1682,"children":1683},{"style":1536},[1684],{"type":57,"value":1549},{"type":51,"tag":138,"props":1686,"children":1688},{"class":140,"line":1687},7,[1689,1693,1697],{"type":51,"tag":138,"props":1690,"children":1691},{"style":1536},[1692],{"type":57,"value":1621},{"type":51,"tag":138,"props":1694,"children":1695},{"style":1542},[1696],{"type":57,"value":506},{"type":51,"tag":138,"props":1698,"children":1699},{"style":1536},[1700],{"type":57,"value":1549},{"type":51,"tag":138,"props":1702,"children":1704},{"class":140,"line":1703},8,[1705],{"type":51,"tag":138,"props":1706,"children":1708},{"emptyLinePlaceholder":1707},true,[1709],{"type":57,"value":1710},"\n",{"type":51,"tag":138,"props":1712,"children":1714},{"class":140,"line":1713},9,[1715],{"type":51,"tag":138,"props":1716,"children":1717},{"style":1526},[1718],{"type":57,"value":1719},"\u002F\u002F Validation: data-invalid on Field, aria-invalid on the control.\n",{"type":51,"tag":138,"props":1721,"children":1723},{"class":140,"line":1722},10,[1724,1728,1732,1737],{"type":51,"tag":138,"props":1725,"children":1726},{"style":1536},[1727],{"type":57,"value":1539},{"type":51,"tag":138,"props":1729,"children":1730},{"style":1542},[1731],{"type":57,"value":514},{"type":51,"tag":138,"props":1733,"children":1734},{"style":1583},[1735],{"type":57,"value":1736}," data-invalid",{"type":51,"tag":138,"props":1738,"children":1739},{"style":1536},[1740],{"type":57,"value":1549},{"type":51,"tag":138,"props":1742,"children":1744},{"class":140,"line":1743},11,[1745,1749,1753,1757,1761,1765,1769],{"type":51,"tag":138,"props":1746,"children":1747},{"style":1536},[1748],{"type":57,"value":1558},{"type":51,"tag":138,"props":1750,"children":1751},{"style":1542},[1752],{"type":57,"value":1580},{"type":51,"tag":138,"props":1754,"children":1755},{"style":1536},[1756],{"type":57,"value":1611},{"type":51,"tag":138,"props":1758,"children":1759},{"style":145},[1760],{"type":57,"value":1616},{"type":51,"tag":138,"props":1762,"children":1763},{"style":1536},[1764],{"type":57,"value":1621},{"type":51,"tag":138,"props":1766,"children":1767},{"style":1542},[1768],{"type":57,"value":1580},{"type":51,"tag":138,"props":1770,"children":1771},{"style":1536},[1772],{"type":57,"value":1549},{"type":51,"tag":138,"props":1774,"children":1776},{"class":140,"line":1775},12,[1777,1781,1785,1790],{"type":51,"tag":138,"props":1778,"children":1779},{"style":1536},[1780],{"type":57,"value":1558},{"type":51,"tag":138,"props":1782,"children":1783},{"style":1542},[1784],{"type":57,"value":575},{"type":51,"tag":138,"props":1786,"children":1787},{"style":1583},[1788],{"type":57,"value":1789}," aria-invalid",{"type":51,"tag":138,"props":1791,"children":1792},{"style":1536},[1793],{"type":57,"value":1667},{"type":51,"tag":138,"props":1795,"children":1797},{"class":140,"line":1796},13,[1798,1802,1807,1811,1816,1820,1824],{"type":51,"tag":138,"props":1799,"children":1800},{"style":1536},[1801],{"type":57,"value":1558},{"type":51,"tag":138,"props":1803,"children":1804},{"style":1542},[1805],{"type":57,"value":1806},"FieldDescription",{"type":51,"tag":138,"props":1808,"children":1809},{"style":1536},[1810],{"type":57,"value":1611},{"type":51,"tag":138,"props":1812,"children":1813},{"style":145},[1814],{"type":57,"value":1815},"Invalid email.",{"type":51,"tag":138,"props":1817,"children":1818},{"style":1536},[1819],{"type":57,"value":1621},{"type":51,"tag":138,"props":1821,"children":1822},{"style":1542},[1823],{"type":57,"value":1806},{"type":51,"tag":138,"props":1825,"children":1826},{"style":1536},[1827],{"type":57,"value":1549},{"type":51,"tag":138,"props":1829,"children":1831},{"class":140,"line":1830},14,[1832,1836,1840],{"type":51,"tag":138,"props":1833,"children":1834},{"style":1536},[1835],{"type":57,"value":1621},{"type":51,"tag":138,"props":1837,"children":1838},{"style":1542},[1839],{"type":57,"value":514},{"type":51,"tag":138,"props":1841,"children":1842},{"style":1536},[1843],{"type":57,"value":1549},{"type":51,"tag":138,"props":1845,"children":1847},{"class":140,"line":1846},15,[1848],{"type":51,"tag":138,"props":1849,"children":1850},{"emptyLinePlaceholder":1707},[1851],{"type":57,"value":1710},{"type":51,"tag":138,"props":1853,"children":1855},{"class":140,"line":1854},16,[1856],{"type":51,"tag":138,"props":1857,"children":1858},{"style":1526},[1859],{"type":57,"value":1860},"\u002F\u002F Icons in buttons: data-icon, no sizing classes.\n",{"type":51,"tag":138,"props":1862,"children":1864},{"class":140,"line":1863},17,[1865,1869,1873],{"type":51,"tag":138,"props":1866,"children":1867},{"style":1536},[1868],{"type":57,"value":1539},{"type":51,"tag":138,"props":1870,"children":1871},{"style":1542},[1872],{"type":57,"value":634},{"type":51,"tag":138,"props":1874,"children":1875},{"style":1536},[1876],{"type":57,"value":1549},{"type":51,"tag":138,"props":1878,"children":1880},{"class":140,"line":1879},18,[1881,1885,1890,1895,1899,1903,1908,1912],{"type":51,"tag":138,"props":1882,"children":1883},{"style":1536},[1884],{"type":57,"value":1558},{"type":51,"tag":138,"props":1886,"children":1887},{"style":1542},[1888],{"type":57,"value":1889},"SearchIcon",{"type":51,"tag":138,"props":1891,"children":1892},{"style":1583},[1893],{"type":57,"value":1894}," data-icon",{"type":51,"tag":138,"props":1896,"children":1897},{"style":1536},[1898],{"type":57,"value":1591},{"type":51,"tag":138,"props":1900,"children":1901},{"style":1536},[1902],{"type":57,"value":1596},{"type":51,"tag":138,"props":1904,"children":1905},{"style":1599},[1906],{"type":57,"value":1907},"inline-start",{"type":51,"tag":138,"props":1909,"children":1910},{"style":1536},[1911],{"type":57,"value":1596},{"type":51,"tag":138,"props":1913,"children":1914},{"style":1536},[1915],{"type":57,"value":1667},{"type":51,"tag":138,"props":1917,"children":1919},{"class":140,"line":1918},19,[1920],{"type":51,"tag":138,"props":1921,"children":1922},{"style":145},[1923],{"type":57,"value":1924},"  Search\n",{"type":51,"tag":138,"props":1926,"children":1928},{"class":140,"line":1927},20,[1929,1933,1937],{"type":51,"tag":138,"props":1930,"children":1931},{"style":1536},[1932],{"type":57,"value":1621},{"type":51,"tag":138,"props":1934,"children":1935},{"style":1542},[1936],{"type":57,"value":634},{"type":51,"tag":138,"props":1938,"children":1939},{"style":1536},[1940],{"type":57,"value":1549},{"type":51,"tag":138,"props":1942,"children":1944},{"class":140,"line":1943},21,[1945],{"type":51,"tag":138,"props":1946,"children":1947},{"emptyLinePlaceholder":1707},[1948],{"type":57,"value":1710},{"type":51,"tag":138,"props":1950,"children":1952},{"class":140,"line":1951},22,[1953],{"type":51,"tag":138,"props":1954,"children":1955},{"style":1526},[1956],{"type":57,"value":1957},"\u002F\u002F Spacing: gap-*, not space-y-*.\n",{"type":51,"tag":138,"props":1959,"children":1961},{"class":140,"line":1960},23,[1962,1966,1971,1976,1980,1984,1989,1993,1997],{"type":51,"tag":138,"props":1963,"children":1964},{"style":1536},[1965],{"type":57,"value":1539},{"type":51,"tag":138,"props":1967,"children":1969},{"style":1968},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1970],{"type":57,"value":523},{"type":51,"tag":138,"props":1972,"children":1973},{"style":1583},[1974],{"type":57,"value":1975}," className",{"type":51,"tag":138,"props":1977,"children":1978},{"style":1536},[1979],{"type":57,"value":1591},{"type":51,"tag":138,"props":1981,"children":1982},{"style":1536},[1983],{"type":57,"value":1596},{"type":51,"tag":138,"props":1985,"children":1986},{"style":1599},[1987],{"type":57,"value":1988},"flex flex-col gap-4",{"type":51,"tag":138,"props":1990,"children":1991},{"style":1536},[1992],{"type":57,"value":1596},{"type":51,"tag":138,"props":1994,"children":1995},{"style":1536},[1996],{"type":57,"value":1611},{"type":51,"tag":138,"props":1998,"children":1999},{"style":145},[2000],{"type":57,"value":2001},"  \u002F\u002F correct\n",{"type":51,"tag":138,"props":2003,"children":2005},{"class":140,"line":2004},24,[2006,2010,2014,2018,2022,2026,2031,2035,2039],{"type":51,"tag":138,"props":2007,"children":2008},{"style":1536},[2009],{"type":57,"value":1539},{"type":51,"tag":138,"props":2011,"children":2012},{"style":1968},[2013],{"type":57,"value":523},{"type":51,"tag":138,"props":2015,"children":2016},{"style":1583},[2017],{"type":57,"value":1975},{"type":51,"tag":138,"props":2019,"children":2020},{"style":1536},[2021],{"type":57,"value":1591},{"type":51,"tag":138,"props":2023,"children":2024},{"style":1536},[2025],{"type":57,"value":1596},{"type":51,"tag":138,"props":2027,"children":2028},{"style":1599},[2029],{"type":57,"value":2030},"space-y-4",{"type":51,"tag":138,"props":2032,"children":2033},{"style":1536},[2034],{"type":57,"value":1596},{"type":51,"tag":138,"props":2036,"children":2037},{"style":1536},[2038],{"type":57,"value":1611},{"type":51,"tag":138,"props":2040,"children":2041},{"style":145},[2042],{"type":57,"value":2043},"           \u002F\u002F wrong\n",{"type":51,"tag":138,"props":2045,"children":2047},{"class":140,"line":2046},25,[2048],{"type":51,"tag":138,"props":2049,"children":2050},{"emptyLinePlaceholder":1707},[2051],{"type":57,"value":1710},{"type":51,"tag":138,"props":2053,"children":2055},{"class":140,"line":2054},26,[2056],{"type":51,"tag":138,"props":2057,"children":2058},{"style":145},[2059],{"type":57,"value":2060},"\u002F\u002F Equal dimensions: size-*, not w-* h-*.\n",{"type":51,"tag":138,"props":2062,"children":2064},{"class":140,"line":2063},27,[2065,2069,2073,2077,2081,2085,2089,2093,2097],{"type":51,"tag":138,"props":2066,"children":2067},{"style":1536},[2068],{"type":57,"value":1539},{"type":51,"tag":138,"props":2070,"children":2071},{"style":1542},[2072],{"type":57,"value":1021},{"type":51,"tag":138,"props":2074,"children":2075},{"style":1583},[2076],{"type":57,"value":1975},{"type":51,"tag":138,"props":2078,"children":2079},{"style":1536},[2080],{"type":57,"value":1591},{"type":51,"tag":138,"props":2082,"children":2083},{"style":1536},[2084],{"type":57,"value":1596},{"type":51,"tag":138,"props":2086,"children":2087},{"style":1599},[2088],{"type":57,"value":378},{"type":51,"tag":138,"props":2090,"children":2091},{"style":1536},[2092],{"type":57,"value":1596},{"type":51,"tag":138,"props":2094,"children":2095},{"style":1536},[2096],{"type":57,"value":1611},{"type":51,"tag":138,"props":2098,"children":2099},{"style":145},[2100],{"type":57,"value":2101},"   \u002F\u002F correct\n",{"type":51,"tag":138,"props":2103,"children":2105},{"class":140,"line":2104},28,[2106,2110,2114,2118,2122,2126,2130,2134,2138],{"type":51,"tag":138,"props":2107,"children":2108},{"style":1536},[2109],{"type":57,"value":1539},{"type":51,"tag":138,"props":2111,"children":2112},{"style":1542},[2113],{"type":57,"value":1021},{"type":51,"tag":138,"props":2115,"children":2116},{"style":1583},[2117],{"type":57,"value":1975},{"type":51,"tag":138,"props":2119,"children":2120},{"style":1536},[2121],{"type":57,"value":1591},{"type":51,"tag":138,"props":2123,"children":2124},{"style":1536},[2125],{"type":57,"value":1596},{"type":51,"tag":138,"props":2127,"children":2128},{"style":1599},[2129],{"type":57,"value":386},{"type":51,"tag":138,"props":2131,"children":2132},{"style":1536},[2133],{"type":57,"value":1596},{"type":51,"tag":138,"props":2135,"children":2136},{"style":1536},[2137],{"type":57,"value":1611},{"type":51,"tag":138,"props":2139,"children":2140},{"style":145},[2141],{"type":57,"value":2142}," \u002F\u002F wrong\n",{"type":51,"tag":138,"props":2144,"children":2146},{"class":140,"line":2145},29,[2147],{"type":51,"tag":138,"props":2148,"children":2149},{"emptyLinePlaceholder":1707},[2150],{"type":57,"value":1710},{"type":51,"tag":138,"props":2152,"children":2154},{"class":140,"line":2153},30,[2155],{"type":51,"tag":138,"props":2156,"children":2157},{"style":145},[2158],{"type":57,"value":2159},"\u002F\u002F Status colors: Badge variants or semantic tokens, not raw colors.\n",{"type":51,"tag":138,"props":2161,"children":2163},{"class":140,"line":2162},31,[2164,2168,2172,2177,2181,2185,2190,2194,2198,2203,2207,2211,2215],{"type":51,"tag":138,"props":2165,"children":2166},{"style":1536},[2167],{"type":57,"value":1539},{"type":51,"tag":138,"props":2169,"children":2170},{"style":1542},[2171],{"type":57,"value":1200},{"type":51,"tag":138,"props":2173,"children":2174},{"style":1583},[2175],{"type":57,"value":2176}," variant",{"type":51,"tag":138,"props":2178,"children":2179},{"style":1536},[2180],{"type":57,"value":1591},{"type":51,"tag":138,"props":2182,"children":2183},{"style":1536},[2184],{"type":57,"value":1596},{"type":51,"tag":138,"props":2186,"children":2187},{"style":1599},[2188],{"type":57,"value":2189},"secondary",{"type":51,"tag":138,"props":2191,"children":2192},{"style":1536},[2193],{"type":57,"value":1596},{"type":51,"tag":138,"props":2195,"children":2196},{"style":1536},[2197],{"type":57,"value":1611},{"type":51,"tag":138,"props":2199,"children":2200},{"style":145},[2201],{"type":57,"value":2202},"+20.1%",{"type":51,"tag":138,"props":2204,"children":2205},{"style":1536},[2206],{"type":57,"value":1621},{"type":51,"tag":138,"props":2208,"children":2209},{"style":1542},[2210],{"type":57,"value":1200},{"type":51,"tag":138,"props":2212,"children":2213},{"style":1536},[2214],{"type":57,"value":1611},{"type":51,"tag":138,"props":2216,"children":2217},{"style":145},[2218],{"type":57,"value":2219},"    \u002F\u002F correct\n",{"type":51,"tag":138,"props":2221,"children":2223},{"class":140,"line":2222},32,[2224,2228,2232,2236,2240,2244,2249,2253,2257,2261,2265,2269,2273],{"type":51,"tag":138,"props":2225,"children":2226},{"style":1536},[2227],{"type":57,"value":1539},{"type":51,"tag":138,"props":2229,"children":2230},{"style":1968},[2231],{"type":57,"value":138},{"type":51,"tag":138,"props":2233,"children":2234},{"style":1583},[2235],{"type":57,"value":1975},{"type":51,"tag":138,"props":2237,"children":2238},{"style":1536},[2239],{"type":57,"value":1591},{"type":51,"tag":138,"props":2241,"children":2242},{"style":1536},[2243],{"type":57,"value":1596},{"type":51,"tag":138,"props":2245,"children":2246},{"style":1599},[2247],{"type":57,"value":2248},"text-emerald-600",{"type":51,"tag":138,"props":2250,"children":2251},{"style":1536},[2252],{"type":57,"value":1596},{"type":51,"tag":138,"props":2254,"children":2255},{"style":1536},[2256],{"type":57,"value":1611},{"type":51,"tag":138,"props":2258,"children":2259},{"style":145},[2260],{"type":57,"value":2202},{"type":51,"tag":138,"props":2262,"children":2263},{"style":1536},[2264],{"type":57,"value":1621},{"type":51,"tag":138,"props":2266,"children":2267},{"style":1968},[2268],{"type":57,"value":138},{"type":51,"tag":138,"props":2270,"children":2271},{"style":1536},[2272],{"type":57,"value":1611},{"type":51,"tag":138,"props":2274,"children":2275},{"style":145},[2276],{"type":57,"value":2142},{"type":51,"tag":120,"props":2278,"children":2280},{"id":2279},"component-selection",[2281],{"type":57,"value":2282},"Component Selection",{"type":51,"tag":2284,"props":2285,"children":2286},"table",{},[2287,2306],{"type":51,"tag":2288,"props":2289,"children":2290},"thead",{},[2291],{"type":51,"tag":2292,"props":2293,"children":2294},"tr",{},[2295,2301],{"type":51,"tag":2296,"props":2297,"children":2298},"th",{},[2299],{"type":57,"value":2300},"Need",{"type":51,"tag":2296,"props":2302,"children":2303},{},[2304],{"type":57,"value":2305},"Use",{"type":51,"tag":2307,"props":2308,"children":2309},"tbody",{},[2310,2329,2400,2423,2459,2503,2546,2595,2618,2637,2687,2703,2734,2765],{"type":51,"tag":2292,"props":2311,"children":2312},{},[2313,2319],{"type":51,"tag":2314,"props":2315,"children":2316},"td",{},[2317],{"type":57,"value":2318},"Button\u002Faction",{"type":51,"tag":2314,"props":2320,"children":2321},{},[2322,2327],{"type":51,"tag":80,"props":2323,"children":2325},{"className":2324},[],[2326],{"type":57,"value":634},{"type":57,"value":2328}," with appropriate variant",{"type":51,"tag":2292,"props":2330,"children":2331},{},[2332,2337],{"type":51,"tag":2314,"props":2333,"children":2334},{},[2335],{"type":57,"value":2336},"Form inputs",{"type":51,"tag":2314,"props":2338,"children":2339},{},[2340,2345,2346,2352,2353,2359,2360,2366,2367,2373,2374,2380,2381,2386,2387,2393,2394],{"type":51,"tag":80,"props":2341,"children":2343},{"className":2342},[],[2344],{"type":57,"value":575},{"type":57,"value":87},{"type":51,"tag":80,"props":2347,"children":2349},{"className":2348},[],[2350],{"type":57,"value":2351},"Select",{"type":57,"value":87},{"type":51,"tag":80,"props":2354,"children":2356},{"className":2355},[],[2357],{"type":57,"value":2358},"Combobox",{"type":57,"value":87},{"type":51,"tag":80,"props":2361,"children":2363},{"className":2362},[],[2364],{"type":57,"value":2365},"Switch",{"type":57,"value":87},{"type":51,"tag":80,"props":2368,"children":2370},{"className":2369},[],[2371],{"type":57,"value":2372},"Checkbox",{"type":57,"value":87},{"type":51,"tag":80,"props":2375,"children":2377},{"className":2376},[],[2378],{"type":57,"value":2379},"RadioGroup",{"type":57,"value":87},{"type":51,"tag":80,"props":2382,"children":2384},{"className":2383},[],[2385],{"type":57,"value":582},{"type":57,"value":87},{"type":51,"tag":80,"props":2388,"children":2390},{"className":2389},[],[2391],{"type":57,"value":2392},"InputOTP",{"type":57,"value":87},{"type":51,"tag":80,"props":2395,"children":2397},{"className":2396},[],[2398],{"type":57,"value":2399},"Slider",{"type":51,"tag":2292,"props":2401,"children":2402},{},[2403,2408],{"type":51,"tag":2314,"props":2404,"children":2405},{},[2406],{"type":57,"value":2407},"Toggle between 2–5 options",{"type":51,"tag":2314,"props":2409,"children":2410},{},[2411,2416,2417],{"type":51,"tag":80,"props":2412,"children":2414},{"className":2413},[],[2415],{"type":57,"value":625},{"type":57,"value":508},{"type":51,"tag":80,"props":2418,"children":2420},{"className":2419},[],[2421],{"type":57,"value":2422},"ToggleGroupItem",{"type":51,"tag":2292,"props":2424,"children":2425},{},[2426,2431],{"type":51,"tag":2314,"props":2427,"children":2428},{},[2429],{"type":57,"value":2430},"Data display",{"type":51,"tag":2314,"props":2432,"children":2433},{},[2434,2440,2441,2447,2448,2453,2454],{"type":51,"tag":80,"props":2435,"children":2437},{"className":2436},[],[2438],{"type":57,"value":2439},"Table",{"type":57,"value":87},{"type":51,"tag":80,"props":2442,"children":2444},{"className":2443},[],[2445],{"type":57,"value":2446},"Card",{"type":57,"value":87},{"type":51,"tag":80,"props":2449,"children":2451},{"className":2450},[],[2452],{"type":57,"value":1200},{"type":57,"value":87},{"type":51,"tag":80,"props":2455,"children":2457},{"className":2456},[],[2458],{"type":57,"value":1021},{"type":51,"tag":2292,"props":2460,"children":2461},{},[2462,2467],{"type":51,"tag":2314,"props":2463,"children":2464},{},[2465],{"type":57,"value":2466},"Navigation",{"type":51,"tag":2314,"props":2468,"children":2469},{},[2470,2476,2477,2483,2484,2490,2491,2496,2497],{"type":51,"tag":80,"props":2471,"children":2473},{"className":2472},[],[2474],{"type":57,"value":2475},"Sidebar",{"type":57,"value":87},{"type":51,"tag":80,"props":2478,"children":2480},{"className":2479},[],[2481],{"type":57,"value":2482},"NavigationMenu",{"type":57,"value":87},{"type":51,"tag":80,"props":2485,"children":2487},{"className":2486},[],[2488],{"type":57,"value":2489},"Breadcrumb",{"type":57,"value":87},{"type":51,"tag":80,"props":2492,"children":2494},{"className":2493},[],[2495],{"type":57,"value":1008},{"type":57,"value":87},{"type":51,"tag":80,"props":2498,"children":2500},{"className":2499},[],[2501],{"type":57,"value":2502},"Pagination",{"type":51,"tag":2292,"props":2504,"children":2505},{},[2506,2511],{"type":51,"tag":2314,"props":2507,"children":2508},{},[2509],{"type":57,"value":2510},"Overlays",{"type":51,"tag":2314,"props":2512,"children":2513},{},[2514,2520,2522,2528,2530,2536,2538,2544],{"type":51,"tag":80,"props":2515,"children":2517},{"className":2516},[],[2518],{"type":57,"value":2519},"Dialog",{"type":57,"value":2521}," (modal), ",{"type":51,"tag":80,"props":2523,"children":2525},{"className":2524},[],[2526],{"type":57,"value":2527},"Sheet",{"type":57,"value":2529}," (side panel), ",{"type":51,"tag":80,"props":2531,"children":2533},{"className":2532},[],[2534],{"type":57,"value":2535},"Drawer",{"type":57,"value":2537}," (bottom sheet), ",{"type":51,"tag":80,"props":2539,"children":2541},{"className":2540},[],[2542],{"type":57,"value":2543},"AlertDialog",{"type":57,"value":2545}," (confirmation)",{"type":51,"tag":2292,"props":2547,"children":2548},{},[2549,2554],{"type":51,"tag":2314,"props":2550,"children":2551},{},[2552],{"type":57,"value":2553},"Feedback",{"type":51,"tag":2314,"props":2555,"children":2556},{},[2557,2562,2564,2569,2571,2576,2577,2583,2584,2589,2590],{"type":51,"tag":80,"props":2558,"children":2560},{"className":2559},[],[2561],{"type":57,"value":1110},{"type":57,"value":2563}," (Base UI), ",{"type":51,"tag":80,"props":2565,"children":2567},{"className":2566},[],[2568],{"type":57,"value":1133},{"type":57,"value":2570}," (Radix\u002FAria), ",{"type":51,"tag":80,"props":2572,"children":2574},{"className":2573},[],[2575],{"type":57,"value":1075},{"type":57,"value":87},{"type":51,"tag":80,"props":2578,"children":2580},{"className":2579},[],[2581],{"type":57,"value":2582},"Progress",{"type":57,"value":87},{"type":51,"tag":80,"props":2585,"children":2587},{"className":2586},[],[2588],{"type":57,"value":1177},{"type":57,"value":87},{"type":51,"tag":80,"props":2591,"children":2593},{"className":2592},[],[2594],{"type":57,"value":965},{"type":51,"tag":2292,"props":2596,"children":2597},{},[2598,2603],{"type":51,"tag":2314,"props":2599,"children":2600},{},[2601],{"type":57,"value":2602},"Command palette",{"type":51,"tag":2314,"props":2604,"children":2605},{},[2606,2612,2613],{"type":51,"tag":80,"props":2607,"children":2609},{"className":2608},[],[2610],{"type":57,"value":2611},"Command",{"type":57,"value":584},{"type":51,"tag":80,"props":2614,"children":2616},{"className":2615},[],[2617],{"type":57,"value":2519},{"type":51,"tag":2292,"props":2619,"children":2620},{},[2621,2626],{"type":51,"tag":2314,"props":2622,"children":2623},{},[2624],{"type":57,"value":2625},"Charts",{"type":51,"tag":2314,"props":2627,"children":2628},{},[2629,2635],{"type":51,"tag":80,"props":2630,"children":2632},{"className":2631},[],[2633],{"type":57,"value":2634},"Chart",{"type":57,"value":2636}," (wraps Recharts)",{"type":51,"tag":2292,"props":2638,"children":2639},{},[2640,2645],{"type":51,"tag":2314,"props":2641,"children":2642},{},[2643],{"type":57,"value":2644},"Layout",{"type":51,"tag":2314,"props":2646,"children":2647},{},[2648,2653,2654,2659,2660,2666,2667,2673,2674,2680,2681],{"type":51,"tag":80,"props":2649,"children":2651},{"className":2650},[],[2652],{"type":57,"value":2446},{"type":57,"value":87},{"type":51,"tag":80,"props":2655,"children":2657},{"className":2656},[],[2658],{"type":57,"value":1148},{"type":57,"value":87},{"type":51,"tag":80,"props":2661,"children":2663},{"className":2662},[],[2664],{"type":57,"value":2665},"Resizable",{"type":57,"value":87},{"type":51,"tag":80,"props":2668,"children":2670},{"className":2669},[],[2671],{"type":57,"value":2672},"ScrollArea",{"type":57,"value":87},{"type":51,"tag":80,"props":2675,"children":2677},{"className":2676},[],[2678],{"type":57,"value":2679},"Accordion",{"type":57,"value":87},{"type":51,"tag":80,"props":2682,"children":2684},{"className":2683},[],[2685],{"type":57,"value":2686},"Collapsible",{"type":51,"tag":2292,"props":2688,"children":2689},{},[2690,2695],{"type":51,"tag":2314,"props":2691,"children":2692},{},[2693],{"type":57,"value":2694},"Empty states",{"type":51,"tag":2314,"props":2696,"children":2697},{},[2698],{"type":51,"tag":80,"props":2699,"children":2701},{"className":2700},[],[2702],{"type":57,"value":1092},{"type":51,"tag":2292,"props":2704,"children":2705},{},[2706,2711],{"type":51,"tag":2314,"props":2707,"children":2708},{},[2709],{"type":57,"value":2710},"Menus",{"type":51,"tag":2314,"props":2712,"children":2713},{},[2714,2720,2721,2727,2728],{"type":51,"tag":80,"props":2715,"children":2717},{"className":2716},[],[2718],{"type":57,"value":2719},"DropdownMenu",{"type":57,"value":87},{"type":51,"tag":80,"props":2722,"children":2724},{"className":2723},[],[2725],{"type":57,"value":2726},"ContextMenu",{"type":57,"value":87},{"type":51,"tag":80,"props":2729,"children":2731},{"className":2730},[],[2732],{"type":57,"value":2733},"Menubar",{"type":51,"tag":2292,"props":2735,"children":2736},{},[2737,2742],{"type":51,"tag":2314,"props":2738,"children":2739},{},[2740],{"type":57,"value":2741},"Tooltips\u002Finfo",{"type":51,"tag":2314,"props":2743,"children":2744},{},[2745,2751,2752,2758,2759],{"type":51,"tag":80,"props":2746,"children":2748},{"className":2747},[],[2749],{"type":57,"value":2750},"Tooltip",{"type":57,"value":87},{"type":51,"tag":80,"props":2753,"children":2755},{"className":2754},[],[2756],{"type":57,"value":2757},"HoverCard",{"type":57,"value":87},{"type":51,"tag":80,"props":2760,"children":2762},{"className":2761},[],[2763],{"type":57,"value":2764},"Popover",{"type":51,"tag":2292,"props":2766,"children":2767},{},[2768,2773],{"type":51,"tag":2314,"props":2769,"children":2770},{},[2771],{"type":57,"value":2772},"Chat \u002F conversation UI",{"type":51,"tag":2314,"props":2774,"children":2775},{},[2776,2781,2782,2787,2788,2793,2794,2799,2800],{"type":51,"tag":80,"props":2777,"children":2779},{"className":2778},[],[2780],{"type":57,"value":1326},{"type":57,"value":87},{"type":51,"tag":80,"props":2783,"children":2785},{"className":2784},[],[2786],{"type":57,"value":1334},{"type":57,"value":87},{"type":51,"tag":80,"props":2789,"children":2791},{"className":2790},[],[2792],{"type":57,"value":1342},{"type":57,"value":87},{"type":51,"tag":80,"props":2795,"children":2797},{"className":2796},[],[2798],{"type":57,"value":1403},{"type":57,"value":87},{"type":51,"tag":80,"props":2801,"children":2803},{"className":2802},[],[2804],{"type":57,"value":1411},{"type":51,"tag":120,"props":2806,"children":2808},{"id":2807},"key-fields",[2809],{"type":57,"value":2810},"Key Fields",{"type":51,"tag":59,"props":2812,"children":2813},{},[2814],{"type":57,"value":2815},"The injected project context contains these key fields:",{"type":51,"tag":290,"props":2817,"children":2818},{},[2819,2848,2893,2935,2949,2977,3004,3054,3068,3082,3110],{"type":51,"tag":172,"props":2820,"children":2821},{},[2822,2831,2833,2839,2840,2846],{"type":51,"tag":72,"props":2823,"children":2824},{},[2825],{"type":51,"tag":80,"props":2826,"children":2828},{"className":2827},[],[2829],{"type":57,"value":2830},"aliases",{"type":57,"value":2832}," → use the actual alias prefix for imports (e.g. ",{"type":51,"tag":80,"props":2834,"children":2836},{"className":2835},[],[2837],{"type":57,"value":2838},"@\u002F",{"type":57,"value":87},{"type":51,"tag":80,"props":2841,"children":2843},{"className":2842},[],[2844],{"type":57,"value":2845},"~\u002F",{"type":57,"value":2847},"), never hardcode.",{"type":51,"tag":172,"props":2849,"children":2850},{},[2851,2860,2862,2868,2870,2876,2877,2883,2885,2891],{"type":51,"tag":72,"props":2852,"children":2853},{},[2854],{"type":51,"tag":80,"props":2855,"children":2857},{"className":2856},[],[2858],{"type":57,"value":2859},"isRSC",{"type":57,"value":2861}," → when ",{"type":51,"tag":80,"props":2863,"children":2865},{"className":2864},[],[2866],{"type":57,"value":2867},"true",{"type":57,"value":2869},", components using ",{"type":51,"tag":80,"props":2871,"children":2873},{"className":2872},[],[2874],{"type":57,"value":2875},"useState",{"type":57,"value":87},{"type":51,"tag":80,"props":2878,"children":2880},{"className":2879},[],[2881],{"type":57,"value":2882},"useEffect",{"type":57,"value":2884},", event handlers, or browser APIs need ",{"type":51,"tag":80,"props":2886,"children":2888},{"className":2887},[],[2889],{"type":57,"value":2890},"\"use client\"",{"type":57,"value":2892}," at the top of the file. Always reference this field when advising on the directive.",{"type":51,"tag":172,"props":2894,"children":2895},{},[2896,2905,2906,2912,2913,2919,2921,2927,2928,2934],{"type":51,"tag":72,"props":2897,"children":2898},{},[2899],{"type":51,"tag":80,"props":2900,"children":2902},{"className":2901},[],[2903],{"type":57,"value":2904},"tailwindVersion",{"type":57,"value":762},{"type":51,"tag":80,"props":2907,"children":2909},{"className":2908},[],[2910],{"type":57,"value":2911},"\"v4\"",{"type":57,"value":552},{"type":51,"tag":80,"props":2914,"children":2916},{"className":2915},[],[2917],{"type":57,"value":2918},"@theme inline",{"type":57,"value":2920}," blocks; ",{"type":51,"tag":80,"props":2922,"children":2924},{"className":2923},[],[2925],{"type":57,"value":2926},"\"v3\"",{"type":57,"value":552},{"type":51,"tag":80,"props":2929,"children":2931},{"className":2930},[],[2932],{"type":57,"value":2933},"tailwind.config.js",{"type":57,"value":256},{"type":51,"tag":172,"props":2936,"children":2937},{},[2938,2947],{"type":51,"tag":72,"props":2939,"children":2940},{},[2941],{"type":51,"tag":80,"props":2942,"children":2944},{"className":2943},[],[2945],{"type":57,"value":2946},"tailwindCssFile",{"type":57,"value":2948}," → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.",{"type":51,"tag":172,"props":2950,"children":2951},{},[2952,2961,2963,2969,2970,2976],{"type":51,"tag":72,"props":2953,"children":2954},{},[2955],{"type":51,"tag":80,"props":2956,"children":2958},{"className":2957},[],[2959],{"type":57,"value":2960},"style",{"type":57,"value":2962}," → component visual treatment (e.g. ",{"type":51,"tag":80,"props":2964,"children":2966},{"className":2965},[],[2967],{"type":57,"value":2968},"nova",{"type":57,"value":87},{"type":51,"tag":80,"props":2971,"children":2973},{"className":2972},[],[2974],{"type":57,"value":2975},"vega",{"type":57,"value":443},{"type":51,"tag":172,"props":2978,"children":2979},{},[2980,2988,2990,2996,2997,3002],{"type":51,"tag":72,"props":2981,"children":2982},{},[2983],{"type":51,"tag":80,"props":2984,"children":2986},{"className":2985},[],[2987],{"type":57,"value":829},{"type":57,"value":2989}," → primitive library (",{"type":51,"tag":80,"props":2991,"children":2993},{"className":2992},[],[2994],{"type":57,"value":2995},"radix",{"type":57,"value":324},{"type":51,"tag":80,"props":2998,"children":3000},{"className":2999},[],[3001],{"type":57,"value":829},{"type":57,"value":3003},"). Affects component APIs and available props.",{"type":51,"tag":172,"props":3005,"children":3006},{},[3007,3016,3018,3024,3026,3032,3033,3039,3040,3046,3048,3053],{"type":51,"tag":72,"props":3008,"children":3009},{},[3010],{"type":51,"tag":80,"props":3011,"children":3013},{"className":3012},[],[3014],{"type":57,"value":3015},"iconLibrary",{"type":57,"value":3017}," → determines icon imports. Use ",{"type":51,"tag":80,"props":3019,"children":3021},{"className":3020},[],[3022],{"type":57,"value":3023},"lucide-react",{"type":57,"value":3025}," for ",{"type":51,"tag":80,"props":3027,"children":3029},{"className":3028},[],[3030],{"type":57,"value":3031},"lucide",{"type":57,"value":87},{"type":51,"tag":80,"props":3034,"children":3036},{"className":3035},[],[3037],{"type":57,"value":3038},"@tabler\u002Ficons-react",{"type":57,"value":3025},{"type":51,"tag":80,"props":3041,"children":3043},{"className":3042},[],[3044],{"type":57,"value":3045},"tabler",{"type":57,"value":3047},", etc. Never assume ",{"type":51,"tag":80,"props":3049,"children":3051},{"className":3050},[],[3052],{"type":57,"value":3023},{"type":57,"value":256},{"type":51,"tag":172,"props":3055,"children":3056},{},[3057,3066],{"type":51,"tag":72,"props":3058,"children":3059},{},[3060],{"type":51,"tag":80,"props":3061,"children":3063},{"className":3062},[],[3064],{"type":57,"value":3065},"resolvedPaths",{"type":57,"value":3067}," → exact file-system destinations for components, utils, hooks, etc.",{"type":51,"tag":172,"props":3069,"children":3070},{},[3071,3080],{"type":51,"tag":72,"props":3072,"children":3073},{},[3074],{"type":51,"tag":80,"props":3075,"children":3077},{"className":3076},[],[3078],{"type":57,"value":3079},"framework",{"type":57,"value":3081}," → routing and file conventions (e.g. Next.js App Router vs Vite SPA).",{"type":51,"tag":172,"props":3083,"children":3084},{},[3085,3093,3095,3101,3103,3109],{"type":51,"tag":72,"props":3086,"children":3087},{},[3088],{"type":51,"tag":80,"props":3089,"children":3091},{"className":3090},[],[3092],{"type":57,"value":109},{"type":57,"value":3094}," → use this for any non-shadcn dependency installs (e.g. ",{"type":51,"tag":80,"props":3096,"children":3098},{"className":3097},[],[3099],{"type":57,"value":3100},"pnpm add date-fns",{"type":57,"value":3102}," vs ",{"type":51,"tag":80,"props":3104,"children":3106},{"className":3105},[],[3107],{"type":57,"value":3108},"npm install date-fns",{"type":57,"value":443},{"type":51,"tag":172,"props":3111,"children":3112},{},[3113,3122,3124,3130],{"type":51,"tag":72,"props":3114,"children":3115},{},[3116],{"type":51,"tag":80,"props":3117,"children":3119},{"className":3118},[],[3120],{"type":57,"value":3121},"preset",{"type":57,"value":3123}," → resolved preset code and values for the current project. Use ",{"type":51,"tag":80,"props":3125,"children":3127},{"className":3126},[],[3128],{"type":57,"value":3129},"npx shadcn@latest preset resolve --json",{"type":57,"value":3131}," when you only need preset information.",{"type":51,"tag":59,"props":3133,"children":3134},{},[3135,3137,3151],{"type":57,"value":3136},"See ",{"type":51,"tag":283,"props":3138,"children":3140},{"href":3139},".\u002Fcli.md",[3141,3143,3149],{"type":57,"value":3142},"cli.md — ",{"type":51,"tag":80,"props":3144,"children":3146},{"className":3145},[],[3147],{"type":57,"value":3148},"info",{"type":57,"value":3150}," command",{"type":57,"value":3152}," for the full field reference.",{"type":51,"tag":120,"props":3154,"children":3156},{"id":3155},"component-docs-examples-and-usage",[3157],{"type":57,"value":3158},"Component Docs, Examples, and Usage",{"type":51,"tag":59,"props":3160,"children":3161},{},[3162,3164,3169],{"type":57,"value":3163},"Run ",{"type":51,"tag":80,"props":3165,"children":3167},{"className":3166},[],[3168],{"type":57,"value":158},{"type":57,"value":3170}," to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.",{"type":51,"tag":127,"props":3172,"children":3176},{"className":3173,"code":3174,"language":3175,"meta":132,"style":132},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx shadcn@latest docs button dialog select\n","bash",[3177],{"type":51,"tag":80,"props":3178,"children":3179},{"__ignoreMap":132},[3180],{"type":51,"tag":138,"props":3181,"children":3182},{"class":140,"line":141},[3183,3188,3193,3198,3203,3208],{"type":51,"tag":138,"props":3184,"children":3185},{"style":1542},[3186],{"type":57,"value":3187},"npx",{"type":51,"tag":138,"props":3189,"children":3190},{"style":1599},[3191],{"type":57,"value":3192}," shadcn@latest",{"type":51,"tag":138,"props":3194,"children":3195},{"style":1599},[3196],{"type":57,"value":3197}," docs",{"type":51,"tag":138,"props":3199,"children":3200},{"style":1599},[3201],{"type":57,"value":3202}," button",{"type":51,"tag":138,"props":3204,"children":3205},{"style":1599},[3206],{"type":57,"value":3207}," dialog",{"type":51,"tag":138,"props":3209,"children":3210},{"style":1599},[3211],{"type":57,"value":3212}," select\n",{"type":51,"tag":59,"props":3214,"children":3215},{},[3216,3229],{"type":51,"tag":72,"props":3217,"children":3218},{},[3219,3221,3227],{"type":57,"value":3220},"When creating, fixing, debugging, or using a component, always run ",{"type":51,"tag":80,"props":3222,"children":3224},{"className":3223},[],[3225],{"type":57,"value":3226},"npx shadcn@latest docs",{"type":57,"value":3228}," and fetch the URLs first.",{"type":57,"value":3230}," This ensures you're working with the correct API and usage patterns rather than guessing.",{"type":51,"tag":120,"props":3232,"children":3234},{"id":3233},"workflow",[3235],{"type":57,"value":3236},"Workflow",{"type":51,"tag":168,"props":3238,"children":3239},{},[3240,3257,3290,3306,3338,3379,3434,3494,3533],{"type":51,"tag":172,"props":3241,"children":3242},{},[3243,3248,3250,3255],{"type":51,"tag":72,"props":3244,"children":3245},{},[3246],{"type":57,"value":3247},"Get project context",{"type":57,"value":3249}," — already injected above. Run ",{"type":51,"tag":80,"props":3251,"children":3253},{"className":3252},[],[3254],{"type":57,"value":837},{"type":57,"value":3256}," again if you need to refresh.",{"type":51,"tag":172,"props":3258,"children":3259},{},[3260,3265,3267,3273,3275,3280,3282,3288],{"type":51,"tag":72,"props":3261,"children":3262},{},[3263],{"type":57,"value":3264},"Check installed components first",{"type":57,"value":3266}," — before running ",{"type":51,"tag":80,"props":3268,"children":3270},{"className":3269},[],[3271],{"type":57,"value":3272},"add",{"type":57,"value":3274},", always check the ",{"type":51,"tag":80,"props":3276,"children":3278},{"className":3277},[],[3279],{"type":57,"value":30},{"type":57,"value":3281}," list from project context or list the ",{"type":51,"tag":80,"props":3283,"children":3285},{"className":3284},[],[3286],{"type":57,"value":3287},"resolvedPaths.ui",{"type":57,"value":3289}," directory. Don't import components that haven't been added, and don't re-add ones already installed.",{"type":51,"tag":172,"props":3291,"children":3292},{},[3293,3298,3300,3305],{"type":51,"tag":72,"props":3294,"children":3295},{},[3296],{"type":57,"value":3297},"Find components",{"type":57,"value":3299}," — ",{"type":51,"tag":80,"props":3301,"children":3303},{"className":3302},[],[3304],{"type":57,"value":187},{"type":57,"value":256},{"type":51,"tag":172,"props":3307,"children":3308},{},[3309,3314,3316,3321,3323,3329,3331,3337],{"type":51,"tag":72,"props":3310,"children":3311},{},[3312],{"type":57,"value":3313},"Get docs and examples",{"type":57,"value":3315}," — run ",{"type":51,"tag":80,"props":3317,"children":3319},{"className":3318},[],[3320],{"type":57,"value":158},{"type":57,"value":3322}," to get URLs, then fetch them. Use ",{"type":51,"tag":80,"props":3324,"children":3326},{"className":3325},[],[3327],{"type":57,"value":3328},"npx shadcn@latest view",{"type":57,"value":3330}," to browse registry items you haven't installed. To preview changes to installed components, use ",{"type":51,"tag":80,"props":3332,"children":3334},{"className":3333},[],[3335],{"type":57,"value":3336},"npx shadcn@latest add --diff",{"type":57,"value":256},{"type":51,"tag":172,"props":3339,"children":3340},{},[3341,3346,3347,3353,3355,3361,3363,3369,3371,3377],{"type":51,"tag":72,"props":3342,"children":3343},{},[3344],{"type":57,"value":3345},"Install or update",{"type":57,"value":3299},{"type":51,"tag":80,"props":3348,"children":3350},{"className":3349},[],[3351],{"type":57,"value":3352},"npx shadcn@latest add",{"type":57,"value":3354},". When updating existing components, use ",{"type":51,"tag":80,"props":3356,"children":3358},{"className":3357},[],[3359],{"type":57,"value":3360},"--dry-run",{"type":57,"value":3362}," and ",{"type":51,"tag":80,"props":3364,"children":3366},{"className":3365},[],[3367],{"type":57,"value":3368},"--diff",{"type":57,"value":3370}," to preview changes first (see ",{"type":51,"tag":283,"props":3372,"children":3374},{"href":3373},"#updating-components",[3375],{"type":57,"value":3376},"Updating Components",{"type":57,"value":3378}," below).",{"type":51,"tag":172,"props":3380,"children":3381},{},[3382,3387,3389,3395,3396,3402,3404,3410,3412,3417,3419,3424,3426,3432],{"type":51,"tag":72,"props":3383,"children":3384},{},[3385],{"type":57,"value":3386},"Fix imports in third-party components",{"type":57,"value":3388}," — After adding components from community registries (e.g. ",{"type":51,"tag":80,"props":3390,"children":3392},{"className":3391},[],[3393],{"type":57,"value":3394},"@bundui",{"type":57,"value":87},{"type":51,"tag":80,"props":3397,"children":3399},{"className":3398},[],[3400],{"type":57,"value":3401},"@magicui",{"type":57,"value":3403},"), check the added non-UI files for hardcoded import paths like ",{"type":51,"tag":80,"props":3405,"children":3407},{"className":3406},[],[3408],{"type":57,"value":3409},"@\u002Fcomponents\u002Fui\u002F...",{"type":57,"value":3411},". These won't match the project's actual aliases. Use ",{"type":51,"tag":80,"props":3413,"children":3415},{"className":3414},[],[3416],{"type":57,"value":837},{"type":57,"value":3418}," to get the correct ",{"type":51,"tag":80,"props":3420,"children":3422},{"className":3421},[],[3423],{"type":57,"value":36},{"type":57,"value":3425}," alias (e.g. ",{"type":51,"tag":80,"props":3427,"children":3429},{"className":3428},[],[3430],{"type":57,"value":3431},"@workspace\u002Fui\u002Fcomponents",{"type":57,"value":3433},") and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.",{"type":51,"tag":172,"props":3435,"children":3436},{},[3437,3442,3444,3449,3451,3456,3458,3463,3465,3470,3472,3477,3479,3484,3486,3492],{"type":51,"tag":72,"props":3438,"children":3439},{},[3440],{"type":57,"value":3441},"Review added components",{"type":57,"value":3443}," — After adding a component or block from any registry, ",{"type":51,"tag":72,"props":3445,"children":3446},{},[3447],{"type":57,"value":3448},"always read the added files and verify they are correct",{"type":57,"value":3450},". Check for missing sub-components (e.g. ",{"type":51,"tag":80,"props":3452,"children":3454},{"className":3453},[],[3455],{"type":57,"value":760},{"type":57,"value":3457}," without ",{"type":51,"tag":80,"props":3459,"children":3461},{"className":3460},[],[3462],{"type":57,"value":768},{"type":57,"value":3464},"), missing imports, incorrect composition, or violations of the ",{"type":51,"tag":283,"props":3466,"children":3468},{"href":3467},"#critical-rules",[3469],{"type":57,"value":262},{"type":57,"value":3471},". Also replace any icon imports with the project's ",{"type":51,"tag":80,"props":3473,"children":3475},{"className":3474},[],[3476],{"type":57,"value":3015},{"type":57,"value":3478}," from the project context (e.g. if the registry item uses ",{"type":51,"tag":80,"props":3480,"children":3482},{"className":3481},[],[3483],{"type":57,"value":3023},{"type":57,"value":3485}," but the project uses ",{"type":51,"tag":80,"props":3487,"children":3489},{"className":3488},[],[3490],{"type":57,"value":3491},"hugeicons",{"type":57,"value":3493},", swap the imports and icon names accordingly). Fix all issues before moving on.",{"type":51,"tag":172,"props":3495,"children":3496},{},[3497,3502,3504,3509,3511,3517,3518,3524,3525,3531],{"type":51,"tag":72,"props":3498,"children":3499},{},[3500],{"type":57,"value":3501},"Registry must be explicit",{"type":57,"value":3503}," — When the user asks to add a block or component, ",{"type":51,"tag":72,"props":3505,"children":3506},{},[3507],{"type":57,"value":3508},"do not guess the registry",{"type":57,"value":3510},". If no registry is specified (e.g. user says \"add a login block\" without specifying ",{"type":51,"tag":80,"props":3512,"children":3514},{"className":3513},[],[3515],{"type":57,"value":3516},"@shadcn",{"type":57,"value":87},{"type":51,"tag":80,"props":3519,"children":3521},{"className":3520},[],[3522],{"type":57,"value":3523},"@tailark",{"type":57,"value":87},{"type":51,"tag":80,"props":3526,"children":3528},{"className":3527},[],[3529],{"type":57,"value":3530},"owner\u002Frepo",{"type":57,"value":3532},", etc.), ask which registry to use. Never default to a registry on behalf of the user.",{"type":51,"tag":172,"props":3534,"children":3535},{},[3536,3541,3543,3548,3549,3554,3555,3560,3561,3566,3568],{"type":51,"tag":72,"props":3537,"children":3538},{},[3539],{"type":57,"value":3540},"Switching presets",{"type":57,"value":3542}," — Ask the user first: ",{"type":51,"tag":72,"props":3544,"children":3545},{},[3546],{"type":57,"value":3547},"overwrite",{"type":57,"value":87},{"type":51,"tag":72,"props":3550,"children":3551},{},[3552],{"type":57,"value":3553},"partial",{"type":57,"value":87},{"type":51,"tag":72,"props":3556,"children":3557},{},[3558],{"type":57,"value":3559},"merge",{"type":57,"value":95},{"type":51,"tag":72,"props":3562,"children":3563},{},[3564],{"type":57,"value":3565},"skip",{"type":57,"value":3567},"?\n",{"type":51,"tag":290,"props":3569,"children":3570},{},[3571,3596,3624,3640,3680,3724,3740],{"type":51,"tag":172,"props":3572,"children":3573},{},[3574,3579,3581,3586,3588,3594],{"type":51,"tag":72,"props":3575,"children":3576},{},[3577],{"type":57,"value":3578},"Inspect current preset",{"type":57,"value":3580},": ",{"type":51,"tag":80,"props":3582,"children":3584},{"className":3583},[],[3585],{"type":57,"value":1474},{"type":57,"value":3587},". Use ",{"type":51,"tag":80,"props":3589,"children":3591},{"className":3590},[],[3592],{"type":57,"value":3593},"--json",{"type":57,"value":3595}," when you need structured values.",{"type":51,"tag":172,"props":3597,"children":3598},{},[3599,3604,3605,3610,3611,3616,3617,3622],{"type":51,"tag":72,"props":3600,"children":3601},{},[3602],{"type":57,"value":3603},"Inspect incoming preset",{"type":57,"value":3580},{"type":51,"tag":80,"props":3606,"children":3608},{"className":3607},[],[3609],{"type":57,"value":1452},{"type":57,"value":3587},{"type":51,"tag":80,"props":3612,"children":3614},{"className":3613},[],[3615],{"type":57,"value":1459},{"type":57,"value":324},{"type":51,"tag":80,"props":3618,"children":3620},{"className":3619},[],[3621],{"type":57,"value":1466},{"type":57,"value":3623}," to share or open the preset builder.",{"type":51,"tag":172,"props":3625,"children":3626},{},[3627,3632,3633,3638],{"type":51,"tag":72,"props":3628,"children":3629},{},[3630],{"type":57,"value":3631},"Overwrite",{"type":57,"value":3580},{"type":51,"tag":80,"props":3634,"children":3636},{"className":3635},[],[3637],{"type":57,"value":1490},{"type":57,"value":3639},". Overwrites detected components, fonts, and CSS variables.",{"type":51,"tag":172,"props":3641,"children":3642},{},[3643,3648,3649,3655,3657,3663,3664,3670,3672,3678],{"type":51,"tag":72,"props":3644,"children":3645},{},[3646],{"type":57,"value":3647},"Partial",{"type":57,"value":3580},{"type":51,"tag":80,"props":3650,"children":3652},{"className":3651},[],[3653],{"type":57,"value":3654},"npx shadcn@latest apply \u003Ccode> --only theme,font",{"type":57,"value":3656},". Updates only the selected preset parts without reinstalling UI components. Supported values are ",{"type":51,"tag":80,"props":3658,"children":3660},{"className":3659},[],[3661],{"type":57,"value":3662},"theme",{"type":57,"value":3362},{"type":51,"tag":80,"props":3665,"children":3667},{"className":3666},[],[3668],{"type":57,"value":3669},"font",{"type":57,"value":3671},"; comma-separated combinations are allowed. ",{"type":51,"tag":80,"props":3673,"children":3675},{"className":3674},[],[3676],{"type":57,"value":3677},"icon",{"type":57,"value":3679}," is intentionally not supported, because icon changes may require full component reinstall and transforms.",{"type":51,"tag":172,"props":3681,"children":3682},{},[3683,3688,3689,3695,3697,3702,3704,3709,3710,3715,3717,3722],{"type":51,"tag":72,"props":3684,"children":3685},{},[3686],{"type":57,"value":3687},"Merge",{"type":57,"value":3580},{"type":51,"tag":80,"props":3690,"children":3692},{"className":3691},[],[3693],{"type":57,"value":3694},"npx shadcn@latest init --preset \u003Ccode> --force --no-reinstall",{"type":57,"value":3696},", then run ",{"type":51,"tag":80,"props":3698,"children":3700},{"className":3699},[],[3701],{"type":57,"value":837},{"type":57,"value":3703}," to list installed components, then for each installed component use ",{"type":51,"tag":80,"props":3705,"children":3707},{"className":3706},[],[3708],{"type":57,"value":3360},{"type":57,"value":3362},{"type":51,"tag":80,"props":3711,"children":3713},{"className":3712},[],[3714],{"type":57,"value":3368},{"type":57,"value":3716}," to ",{"type":51,"tag":283,"props":3718,"children":3719},{"href":3373},[3720],{"type":57,"value":3721},"smart merge",{"type":57,"value":3723}," it individually.",{"type":51,"tag":172,"props":3725,"children":3726},{},[3727,3732,3733,3738],{"type":51,"tag":72,"props":3728,"children":3729},{},[3730],{"type":57,"value":3731},"Skip",{"type":57,"value":3580},{"type":51,"tag":80,"props":3734,"children":3736},{"className":3735},[],[3737],{"type":57,"value":3694},{"type":57,"value":3739},". Only updates config and CSS, leaves components as-is.",{"type":51,"tag":172,"props":3741,"children":3742},{},[3743,3748,3750,3756,3758,3764,3766,3771,3772,3777,3779,3784,3786,3791,3793,3799],{"type":51,"tag":72,"props":3744,"children":3745},{},[3746],{"type":57,"value":3747},"Important",{"type":57,"value":3749},": Always run preset commands inside the user's project directory. ",{"type":51,"tag":80,"props":3751,"children":3753},{"className":3752},[],[3754],{"type":57,"value":3755},"apply",{"type":57,"value":3757}," only works in an existing project with a ",{"type":51,"tag":80,"props":3759,"children":3761},{"className":3760},[],[3762],{"type":57,"value":3763},"components.json",{"type":57,"value":3765}," file. The CLI automatically preserves the current base (",{"type":51,"tag":80,"props":3767,"children":3769},{"className":3768},[],[3770],{"type":57,"value":829},{"type":57,"value":3102},{"type":51,"tag":80,"props":3773,"children":3775},{"className":3774},[],[3776],{"type":57,"value":2995},{"type":57,"value":3778},") from ",{"type":51,"tag":80,"props":3780,"children":3782},{"className":3781},[],[3783],{"type":57,"value":3763},{"type":57,"value":3785},". If you must use a scratch\u002Ftemp directory (e.g. for ",{"type":51,"tag":80,"props":3787,"children":3789},{"className":3788},[],[3790],{"type":57,"value":3360},{"type":57,"value":3792}," comparisons), pass ",{"type":51,"tag":80,"props":3794,"children":3796},{"className":3795},[],[3797],{"type":57,"value":3798},"--base \u003Ccurrent-base>",{"type":57,"value":3800}," explicitly — preset codes do not encode the base.",{"type":51,"tag":120,"props":3802,"children":3804},{"id":3803},"updating-components",[3805],{"type":57,"value":3376},{"type":51,"tag":59,"props":3807,"children":3808},{},[3809,3811,3816,3817,3822,3824],{"type":57,"value":3810},"When the user asks to update a component from upstream while keeping their local changes, use ",{"type":51,"tag":80,"props":3812,"children":3814},{"className":3813},[],[3815],{"type":57,"value":3360},{"type":57,"value":3362},{"type":51,"tag":80,"props":3818,"children":3820},{"className":3819},[],[3821],{"type":57,"value":3368},{"type":57,"value":3823}," to intelligently merge. ",{"type":51,"tag":72,"props":3825,"children":3826},{},[3827],{"type":57,"value":3828},"NEVER fetch raw files from GitHub manually — always use the CLI.",{"type":51,"tag":168,"props":3830,"children":3831},{},[3832,3844,3857,3888],{"type":51,"tag":172,"props":3833,"children":3834},{},[3835,3836,3842],{"type":57,"value":3163},{"type":51,"tag":80,"props":3837,"children":3839},{"className":3838},[],[3840],{"type":57,"value":3841},"npx shadcn@latest add \u003Ccomponent> --dry-run",{"type":57,"value":3843}," to see all files that would be affected.",{"type":51,"tag":172,"props":3845,"children":3846},{},[3847,3849,3855],{"type":57,"value":3848},"For each file, run ",{"type":51,"tag":80,"props":3850,"children":3852},{"className":3851},[],[3853],{"type":57,"value":3854},"npx shadcn@latest add \u003Ccomponent> --diff \u003Cfile>",{"type":57,"value":3856}," to see what changed upstream vs local.",{"type":51,"tag":172,"props":3858,"children":3859},{},[3860,3862],{"type":57,"value":3861},"Decide per file based on the diff:\n",{"type":51,"tag":290,"props":3863,"children":3864},{},[3865,3870,3875],{"type":51,"tag":172,"props":3866,"children":3867},{},[3868],{"type":57,"value":3869},"No local changes → safe to overwrite.",{"type":51,"tag":172,"props":3871,"children":3872},{},[3873],{"type":57,"value":3874},"Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.",{"type":51,"tag":172,"props":3876,"children":3877},{},[3878,3880,3886],{"type":57,"value":3879},"User says \"just update everything\" → use ",{"type":51,"tag":80,"props":3881,"children":3883},{"className":3882},[],[3884],{"type":57,"value":3885},"--overwrite",{"type":57,"value":3887},", but confirm first.",{"type":51,"tag":172,"props":3889,"children":3890},{},[3891],{"type":51,"tag":72,"props":3892,"children":3893},{},[3894,3896,3901],{"type":57,"value":3895},"Never use ",{"type":51,"tag":80,"props":3897,"children":3899},{"className":3898},[],[3900],{"type":57,"value":3885},{"type":57,"value":3902}," without the user's explicit approval.",{"type":51,"tag":120,"props":3904,"children":3906},{"id":3905},"quick-reference",[3907],{"type":57,"value":3908},"Quick Reference",{"type":51,"tag":127,"props":3910,"children":3912},{"className":3173,"code":3911,"language":3175,"meta":132,"style":132},"# Create a new project.\nnpx shadcn@latest init --name my-app --preset base-nova\nnpx shadcn@latest init --name my-app --preset a2r6bw --template vite\n\n# Create a monorepo project.\nnpx shadcn@latest init --name my-app --preset base-nova --monorepo\nnpx shadcn@latest init --name my-app --preset base-nova --template next --monorepo\n\n# Initialize existing project.\nnpx shadcn@latest init --preset base-nova\nnpx shadcn@latest init --defaults  # shortcut: --template=next --preset=nova (base style implied)\n\n# Apply a preset to an existing project.\nnpx shadcn@latest apply a2r6bw\nnpx shadcn@latest apply a2r6bw --only theme\nnpx shadcn@latest apply a2r6bw --only font\nnpx shadcn@latest apply a2r6bw --only theme,font\n\n# Inspect preset codes and project preset state.\nnpx shadcn@latest preset decode a2r6bw\nnpx shadcn@latest preset url a2r6bw\nnpx shadcn@latest preset open a2r6bw\nnpx shadcn@latest preset resolve\nnpx shadcn@latest preset resolve --json\n\n# Add components.\nnpx shadcn@latest add button card dialog\nnpx shadcn@latest add @magicui\u002Fshimmer-button\nnpx shadcn@latest add owner\u002Frepo\u002Fitem\nnpx shadcn@latest add --all\n\n# Preview changes before adding\u002Fupdating.\nnpx shadcn@latest add button --dry-run\nnpx shadcn@latest add button --diff button.tsx\nnpx shadcn@latest add @acme\u002Fform --view button.tsx\nnpx shadcn@latest add owner\u002Frepo\u002Fitem --dry-run\n\n# Search registries.\nnpx shadcn@latest search @shadcn -q \"sidebar\"\nnpx shadcn@latest search @tailark -q \"stats\"\nnpx shadcn@latest search owner\u002Frepo -q \"login\"\nnpx shadcn@latest search                          # all configured registries\nnpx shadcn@latest search @shadcn -q \"menu\" -t ui  # filter by item type\n\n# Get component docs and example URLs.\nnpx shadcn@latest docs button dialog select\n\n# View registry item details (for items not yet installed).\nnpx shadcn@latest view @shadcn\u002Fbutton\nnpx shadcn@latest view owner\u002Frepo\u002Fitem\n",[3913],{"type":51,"tag":80,"props":3914,"children":3915},{"__ignoreMap":132},[3916,3924,3960,4002,4009,4017,4054,4098,4105,4113,4136,4161,4168,4176,4197,4226,4254,4282,4289,4297,4322,4346,4370,4390,4415,4422,4430,4460,4480,4500,4520,4527,4535,4560,4590,4620,4645,4653,4662,4704,4742,4780,4801,4853,4861,4870,4898,4906,4915,4937],{"type":51,"tag":138,"props":3917,"children":3918},{"class":140,"line":141},[3919],{"type":51,"tag":138,"props":3920,"children":3921},{"style":1526},[3922],{"type":57,"value":3923},"# Create a new project.\n",{"type":51,"tag":138,"props":3925,"children":3926},{"class":140,"line":1532},[3927,3931,3935,3940,3945,3950,3955],{"type":51,"tag":138,"props":3928,"children":3929},{"style":1542},[3930],{"type":57,"value":3187},{"type":51,"tag":138,"props":3932,"children":3933},{"style":1599},[3934],{"type":57,"value":3192},{"type":51,"tag":138,"props":3936,"children":3937},{"style":1599},[3938],{"type":57,"value":3939}," init",{"type":51,"tag":138,"props":3941,"children":3942},{"style":1599},[3943],{"type":57,"value":3944}," --name",{"type":51,"tag":138,"props":3946,"children":3947},{"style":1599},[3948],{"type":57,"value":3949}," my-app",{"type":51,"tag":138,"props":3951,"children":3952},{"style":1599},[3953],{"type":57,"value":3954}," --preset",{"type":51,"tag":138,"props":3956,"children":3957},{"style":1599},[3958],{"type":57,"value":3959}," base-nova\n",{"type":51,"tag":138,"props":3961,"children":3962},{"class":140,"line":1552},[3963,3967,3971,3975,3979,3983,3987,3992,3997],{"type":51,"tag":138,"props":3964,"children":3965},{"style":1542},[3966],{"type":57,"value":3187},{"type":51,"tag":138,"props":3968,"children":3969},{"style":1599},[3970],{"type":57,"value":3192},{"type":51,"tag":138,"props":3972,"children":3973},{"style":1599},[3974],{"type":57,"value":3939},{"type":51,"tag":138,"props":3976,"children":3977},{"style":1599},[3978],{"type":57,"value":3944},{"type":51,"tag":138,"props":3980,"children":3981},{"style":1599},[3982],{"type":57,"value":3949},{"type":51,"tag":138,"props":3984,"children":3985},{"style":1599},[3986],{"type":57,"value":3954},{"type":51,"tag":138,"props":3988,"children":3989},{"style":1599},[3990],{"type":57,"value":3991}," a2r6bw",{"type":51,"tag":138,"props":3993,"children":3994},{"style":1599},[3995],{"type":57,"value":3996}," --template",{"type":51,"tag":138,"props":3998,"children":3999},{"style":1599},[4000],{"type":57,"value":4001}," vite\n",{"type":51,"tag":138,"props":4003,"children":4004},{"class":140,"line":1569},[4005],{"type":51,"tag":138,"props":4006,"children":4007},{"emptyLinePlaceholder":1707},[4008],{"type":57,"value":1710},{"type":51,"tag":138,"props":4010,"children":4011},{"class":140,"line":1632},[4012],{"type":51,"tag":138,"props":4013,"children":4014},{"style":1526},[4015],{"type":57,"value":4016},"# Create a monorepo project.\n",{"type":51,"tag":138,"props":4018,"children":4019},{"class":140,"line":1670},[4020,4024,4028,4032,4036,4040,4044,4049],{"type":51,"tag":138,"props":4021,"children":4022},{"style":1542},[4023],{"type":57,"value":3187},{"type":51,"tag":138,"props":4025,"children":4026},{"style":1599},[4027],{"type":57,"value":3192},{"type":51,"tag":138,"props":4029,"children":4030},{"style":1599},[4031],{"type":57,"value":3939},{"type":51,"tag":138,"props":4033,"children":4034},{"style":1599},[4035],{"type":57,"value":3944},{"type":51,"tag":138,"props":4037,"children":4038},{"style":1599},[4039],{"type":57,"value":3949},{"type":51,"tag":138,"props":4041,"children":4042},{"style":1599},[4043],{"type":57,"value":3954},{"type":51,"tag":138,"props":4045,"children":4046},{"style":1599},[4047],{"type":57,"value":4048}," base-nova",{"type":51,"tag":138,"props":4050,"children":4051},{"style":1599},[4052],{"type":57,"value":4053}," --monorepo\n",{"type":51,"tag":138,"props":4055,"children":4056},{"class":140,"line":1687},[4057,4061,4065,4069,4073,4077,4081,4085,4089,4094],{"type":51,"tag":138,"props":4058,"children":4059},{"style":1542},[4060],{"type":57,"value":3187},{"type":51,"tag":138,"props":4062,"children":4063},{"style":1599},[4064],{"type":57,"value":3192},{"type":51,"tag":138,"props":4066,"children":4067},{"style":1599},[4068],{"type":57,"value":3939},{"type":51,"tag":138,"props":4070,"children":4071},{"style":1599},[4072],{"type":57,"value":3944},{"type":51,"tag":138,"props":4074,"children":4075},{"style":1599},[4076],{"type":57,"value":3949},{"type":51,"tag":138,"props":4078,"children":4079},{"style":1599},[4080],{"type":57,"value":3954},{"type":51,"tag":138,"props":4082,"children":4083},{"style":1599},[4084],{"type":57,"value":4048},{"type":51,"tag":138,"props":4086,"children":4087},{"style":1599},[4088],{"type":57,"value":3996},{"type":51,"tag":138,"props":4090,"children":4091},{"style":1599},[4092],{"type":57,"value":4093}," next",{"type":51,"tag":138,"props":4095,"children":4096},{"style":1599},[4097],{"type":57,"value":4053},{"type":51,"tag":138,"props":4099,"children":4100},{"class":140,"line":1703},[4101],{"type":51,"tag":138,"props":4102,"children":4103},{"emptyLinePlaceholder":1707},[4104],{"type":57,"value":1710},{"type":51,"tag":138,"props":4106,"children":4107},{"class":140,"line":1713},[4108],{"type":51,"tag":138,"props":4109,"children":4110},{"style":1526},[4111],{"type":57,"value":4112},"# Initialize existing project.\n",{"type":51,"tag":138,"props":4114,"children":4115},{"class":140,"line":1722},[4116,4120,4124,4128,4132],{"type":51,"tag":138,"props":4117,"children":4118},{"style":1542},[4119],{"type":57,"value":3187},{"type":51,"tag":138,"props":4121,"children":4122},{"style":1599},[4123],{"type":57,"value":3192},{"type":51,"tag":138,"props":4125,"children":4126},{"style":1599},[4127],{"type":57,"value":3939},{"type":51,"tag":138,"props":4129,"children":4130},{"style":1599},[4131],{"type":57,"value":3954},{"type":51,"tag":138,"props":4133,"children":4134},{"style":1599},[4135],{"type":57,"value":3959},{"type":51,"tag":138,"props":4137,"children":4138},{"class":140,"line":1743},[4139,4143,4147,4151,4156],{"type":51,"tag":138,"props":4140,"children":4141},{"style":1542},[4142],{"type":57,"value":3187},{"type":51,"tag":138,"props":4144,"children":4145},{"style":1599},[4146],{"type":57,"value":3192},{"type":51,"tag":138,"props":4148,"children":4149},{"style":1599},[4150],{"type":57,"value":3939},{"type":51,"tag":138,"props":4152,"children":4153},{"style":1599},[4154],{"type":57,"value":4155}," --defaults",{"type":51,"tag":138,"props":4157,"children":4158},{"style":1526},[4159],{"type":57,"value":4160},"  # shortcut: --template=next --preset=nova (base style implied)\n",{"type":51,"tag":138,"props":4162,"children":4163},{"class":140,"line":1775},[4164],{"type":51,"tag":138,"props":4165,"children":4166},{"emptyLinePlaceholder":1707},[4167],{"type":57,"value":1710},{"type":51,"tag":138,"props":4169,"children":4170},{"class":140,"line":1796},[4171],{"type":51,"tag":138,"props":4172,"children":4173},{"style":1526},[4174],{"type":57,"value":4175},"# Apply a preset to an existing project.\n",{"type":51,"tag":138,"props":4177,"children":4178},{"class":140,"line":1830},[4179,4183,4187,4192],{"type":51,"tag":138,"props":4180,"children":4181},{"style":1542},[4182],{"type":57,"value":3187},{"type":51,"tag":138,"props":4184,"children":4185},{"style":1599},[4186],{"type":57,"value":3192},{"type":51,"tag":138,"props":4188,"children":4189},{"style":1599},[4190],{"type":57,"value":4191}," apply",{"type":51,"tag":138,"props":4193,"children":4194},{"style":1599},[4195],{"type":57,"value":4196}," a2r6bw\n",{"type":51,"tag":138,"props":4198,"children":4199},{"class":140,"line":1846},[4200,4204,4208,4212,4216,4221],{"type":51,"tag":138,"props":4201,"children":4202},{"style":1542},[4203],{"type":57,"value":3187},{"type":51,"tag":138,"props":4205,"children":4206},{"style":1599},[4207],{"type":57,"value":3192},{"type":51,"tag":138,"props":4209,"children":4210},{"style":1599},[4211],{"type":57,"value":4191},{"type":51,"tag":138,"props":4213,"children":4214},{"style":1599},[4215],{"type":57,"value":3991},{"type":51,"tag":138,"props":4217,"children":4218},{"style":1599},[4219],{"type":57,"value":4220}," --only",{"type":51,"tag":138,"props":4222,"children":4223},{"style":1599},[4224],{"type":57,"value":4225}," theme\n",{"type":51,"tag":138,"props":4227,"children":4228},{"class":140,"line":1854},[4229,4233,4237,4241,4245,4249],{"type":51,"tag":138,"props":4230,"children":4231},{"style":1542},[4232],{"type":57,"value":3187},{"type":51,"tag":138,"props":4234,"children":4235},{"style":1599},[4236],{"type":57,"value":3192},{"type":51,"tag":138,"props":4238,"children":4239},{"style":1599},[4240],{"type":57,"value":4191},{"type":51,"tag":138,"props":4242,"children":4243},{"style":1599},[4244],{"type":57,"value":3991},{"type":51,"tag":138,"props":4246,"children":4247},{"style":1599},[4248],{"type":57,"value":4220},{"type":51,"tag":138,"props":4250,"children":4251},{"style":1599},[4252],{"type":57,"value":4253}," font\n",{"type":51,"tag":138,"props":4255,"children":4256},{"class":140,"line":1863},[4257,4261,4265,4269,4273,4277],{"type":51,"tag":138,"props":4258,"children":4259},{"style":1542},[4260],{"type":57,"value":3187},{"type":51,"tag":138,"props":4262,"children":4263},{"style":1599},[4264],{"type":57,"value":3192},{"type":51,"tag":138,"props":4266,"children":4267},{"style":1599},[4268],{"type":57,"value":4191},{"type":51,"tag":138,"props":4270,"children":4271},{"style":1599},[4272],{"type":57,"value":3991},{"type":51,"tag":138,"props":4274,"children":4275},{"style":1599},[4276],{"type":57,"value":4220},{"type":51,"tag":138,"props":4278,"children":4279},{"style":1599},[4280],{"type":57,"value":4281}," theme,font\n",{"type":51,"tag":138,"props":4283,"children":4284},{"class":140,"line":1879},[4285],{"type":51,"tag":138,"props":4286,"children":4287},{"emptyLinePlaceholder":1707},[4288],{"type":57,"value":1710},{"type":51,"tag":138,"props":4290,"children":4291},{"class":140,"line":1918},[4292],{"type":51,"tag":138,"props":4293,"children":4294},{"style":1526},[4295],{"type":57,"value":4296},"# Inspect preset codes and project preset state.\n",{"type":51,"tag":138,"props":4298,"children":4299},{"class":140,"line":1927},[4300,4304,4308,4313,4318],{"type":51,"tag":138,"props":4301,"children":4302},{"style":1542},[4303],{"type":57,"value":3187},{"type":51,"tag":138,"props":4305,"children":4306},{"style":1599},[4307],{"type":57,"value":3192},{"type":51,"tag":138,"props":4309,"children":4310},{"style":1599},[4311],{"type":57,"value":4312}," preset",{"type":51,"tag":138,"props":4314,"children":4315},{"style":1599},[4316],{"type":57,"value":4317}," decode",{"type":51,"tag":138,"props":4319,"children":4320},{"style":1599},[4321],{"type":57,"value":4196},{"type":51,"tag":138,"props":4323,"children":4324},{"class":140,"line":1943},[4325,4329,4333,4337,4342],{"type":51,"tag":138,"props":4326,"children":4327},{"style":1542},[4328],{"type":57,"value":3187},{"type":51,"tag":138,"props":4330,"children":4331},{"style":1599},[4332],{"type":57,"value":3192},{"type":51,"tag":138,"props":4334,"children":4335},{"style":1599},[4336],{"type":57,"value":4312},{"type":51,"tag":138,"props":4338,"children":4339},{"style":1599},[4340],{"type":57,"value":4341}," url",{"type":51,"tag":138,"props":4343,"children":4344},{"style":1599},[4345],{"type":57,"value":4196},{"type":51,"tag":138,"props":4347,"children":4348},{"class":140,"line":1951},[4349,4353,4357,4361,4366],{"type":51,"tag":138,"props":4350,"children":4351},{"style":1542},[4352],{"type":57,"value":3187},{"type":51,"tag":138,"props":4354,"children":4355},{"style":1599},[4356],{"type":57,"value":3192},{"type":51,"tag":138,"props":4358,"children":4359},{"style":1599},[4360],{"type":57,"value":4312},{"type":51,"tag":138,"props":4362,"children":4363},{"style":1599},[4364],{"type":57,"value":4365}," open",{"type":51,"tag":138,"props":4367,"children":4368},{"style":1599},[4369],{"type":57,"value":4196},{"type":51,"tag":138,"props":4371,"children":4372},{"class":140,"line":1960},[4373,4377,4381,4385],{"type":51,"tag":138,"props":4374,"children":4375},{"style":1542},[4376],{"type":57,"value":3187},{"type":51,"tag":138,"props":4378,"children":4379},{"style":1599},[4380],{"type":57,"value":3192},{"type":51,"tag":138,"props":4382,"children":4383},{"style":1599},[4384],{"type":57,"value":4312},{"type":51,"tag":138,"props":4386,"children":4387},{"style":1599},[4388],{"type":57,"value":4389}," resolve\n",{"type":51,"tag":138,"props":4391,"children":4392},{"class":140,"line":2004},[4393,4397,4401,4405,4410],{"type":51,"tag":138,"props":4394,"children":4395},{"style":1542},[4396],{"type":57,"value":3187},{"type":51,"tag":138,"props":4398,"children":4399},{"style":1599},[4400],{"type":57,"value":3192},{"type":51,"tag":138,"props":4402,"children":4403},{"style":1599},[4404],{"type":57,"value":4312},{"type":51,"tag":138,"props":4406,"children":4407},{"style":1599},[4408],{"type":57,"value":4409}," resolve",{"type":51,"tag":138,"props":4411,"children":4412},{"style":1599},[4413],{"type":57,"value":4414}," --json\n",{"type":51,"tag":138,"props":4416,"children":4417},{"class":140,"line":2046},[4418],{"type":51,"tag":138,"props":4419,"children":4420},{"emptyLinePlaceholder":1707},[4421],{"type":57,"value":1710},{"type":51,"tag":138,"props":4423,"children":4424},{"class":140,"line":2054},[4425],{"type":51,"tag":138,"props":4426,"children":4427},{"style":1526},[4428],{"type":57,"value":4429},"# Add components.\n",{"type":51,"tag":138,"props":4431,"children":4432},{"class":140,"line":2063},[4433,4437,4441,4446,4450,4455],{"type":51,"tag":138,"props":4434,"children":4435},{"style":1542},[4436],{"type":57,"value":3187},{"type":51,"tag":138,"props":4438,"children":4439},{"style":1599},[4440],{"type":57,"value":3192},{"type":51,"tag":138,"props":4442,"children":4443},{"style":1599},[4444],{"type":57,"value":4445}," add",{"type":51,"tag":138,"props":4447,"children":4448},{"style":1599},[4449],{"type":57,"value":3202},{"type":51,"tag":138,"props":4451,"children":4452},{"style":1599},[4453],{"type":57,"value":4454}," card",{"type":51,"tag":138,"props":4456,"children":4457},{"style":1599},[4458],{"type":57,"value":4459}," dialog\n",{"type":51,"tag":138,"props":4461,"children":4462},{"class":140,"line":2104},[4463,4467,4471,4475],{"type":51,"tag":138,"props":4464,"children":4465},{"style":1542},[4466],{"type":57,"value":3187},{"type":51,"tag":138,"props":4468,"children":4469},{"style":1599},[4470],{"type":57,"value":3192},{"type":51,"tag":138,"props":4472,"children":4473},{"style":1599},[4474],{"type":57,"value":4445},{"type":51,"tag":138,"props":4476,"children":4477},{"style":1599},[4478],{"type":57,"value":4479}," @magicui\u002Fshimmer-button\n",{"type":51,"tag":138,"props":4481,"children":4482},{"class":140,"line":2145},[4483,4487,4491,4495],{"type":51,"tag":138,"props":4484,"children":4485},{"style":1542},[4486],{"type":57,"value":3187},{"type":51,"tag":138,"props":4488,"children":4489},{"style":1599},[4490],{"type":57,"value":3192},{"type":51,"tag":138,"props":4492,"children":4493},{"style":1599},[4494],{"type":57,"value":4445},{"type":51,"tag":138,"props":4496,"children":4497},{"style":1599},[4498],{"type":57,"value":4499}," owner\u002Frepo\u002Fitem\n",{"type":51,"tag":138,"props":4501,"children":4502},{"class":140,"line":2153},[4503,4507,4511,4515],{"type":51,"tag":138,"props":4504,"children":4505},{"style":1542},[4506],{"type":57,"value":3187},{"type":51,"tag":138,"props":4508,"children":4509},{"style":1599},[4510],{"type":57,"value":3192},{"type":51,"tag":138,"props":4512,"children":4513},{"style":1599},[4514],{"type":57,"value":4445},{"type":51,"tag":138,"props":4516,"children":4517},{"style":1599},[4518],{"type":57,"value":4519}," --all\n",{"type":51,"tag":138,"props":4521,"children":4522},{"class":140,"line":2162},[4523],{"type":51,"tag":138,"props":4524,"children":4525},{"emptyLinePlaceholder":1707},[4526],{"type":57,"value":1710},{"type":51,"tag":138,"props":4528,"children":4529},{"class":140,"line":2222},[4530],{"type":51,"tag":138,"props":4531,"children":4532},{"style":1526},[4533],{"type":57,"value":4534},"# Preview changes before adding\u002Fupdating.\n",{"type":51,"tag":138,"props":4536,"children":4538},{"class":140,"line":4537},33,[4539,4543,4547,4551,4555],{"type":51,"tag":138,"props":4540,"children":4541},{"style":1542},[4542],{"type":57,"value":3187},{"type":51,"tag":138,"props":4544,"children":4545},{"style":1599},[4546],{"type":57,"value":3192},{"type":51,"tag":138,"props":4548,"children":4549},{"style":1599},[4550],{"type":57,"value":4445},{"type":51,"tag":138,"props":4552,"children":4553},{"style":1599},[4554],{"type":57,"value":3202},{"type":51,"tag":138,"props":4556,"children":4557},{"style":1599},[4558],{"type":57,"value":4559}," --dry-run\n",{"type":51,"tag":138,"props":4561,"children":4563},{"class":140,"line":4562},34,[4564,4568,4572,4576,4580,4585],{"type":51,"tag":138,"props":4565,"children":4566},{"style":1542},[4567],{"type":57,"value":3187},{"type":51,"tag":138,"props":4569,"children":4570},{"style":1599},[4571],{"type":57,"value":3192},{"type":51,"tag":138,"props":4573,"children":4574},{"style":1599},[4575],{"type":57,"value":4445},{"type":51,"tag":138,"props":4577,"children":4578},{"style":1599},[4579],{"type":57,"value":3202},{"type":51,"tag":138,"props":4581,"children":4582},{"style":1599},[4583],{"type":57,"value":4584}," --diff",{"type":51,"tag":138,"props":4586,"children":4587},{"style":1599},[4588],{"type":57,"value":4589}," button.tsx\n",{"type":51,"tag":138,"props":4591,"children":4593},{"class":140,"line":4592},35,[4594,4598,4602,4606,4611,4616],{"type":51,"tag":138,"props":4595,"children":4596},{"style":1542},[4597],{"type":57,"value":3187},{"type":51,"tag":138,"props":4599,"children":4600},{"style":1599},[4601],{"type":57,"value":3192},{"type":51,"tag":138,"props":4603,"children":4604},{"style":1599},[4605],{"type":57,"value":4445},{"type":51,"tag":138,"props":4607,"children":4608},{"style":1599},[4609],{"type":57,"value":4610}," @acme\u002Fform",{"type":51,"tag":138,"props":4612,"children":4613},{"style":1599},[4614],{"type":57,"value":4615}," --view",{"type":51,"tag":138,"props":4617,"children":4618},{"style":1599},[4619],{"type":57,"value":4589},{"type":51,"tag":138,"props":4621,"children":4623},{"class":140,"line":4622},36,[4624,4628,4632,4636,4641],{"type":51,"tag":138,"props":4625,"children":4626},{"style":1542},[4627],{"type":57,"value":3187},{"type":51,"tag":138,"props":4629,"children":4630},{"style":1599},[4631],{"type":57,"value":3192},{"type":51,"tag":138,"props":4633,"children":4634},{"style":1599},[4635],{"type":57,"value":4445},{"type":51,"tag":138,"props":4637,"children":4638},{"style":1599},[4639],{"type":57,"value":4640}," owner\u002Frepo\u002Fitem",{"type":51,"tag":138,"props":4642,"children":4643},{"style":1599},[4644],{"type":57,"value":4559},{"type":51,"tag":138,"props":4646,"children":4648},{"class":140,"line":4647},37,[4649],{"type":51,"tag":138,"props":4650,"children":4651},{"emptyLinePlaceholder":1707},[4652],{"type":57,"value":1710},{"type":51,"tag":138,"props":4654,"children":4656},{"class":140,"line":4655},38,[4657],{"type":51,"tag":138,"props":4658,"children":4659},{"style":1526},[4660],{"type":57,"value":4661},"# Search registries.\n",{"type":51,"tag":138,"props":4663,"children":4665},{"class":140,"line":4664},39,[4666,4670,4674,4679,4684,4689,4694,4699],{"type":51,"tag":138,"props":4667,"children":4668},{"style":1542},[4669],{"type":57,"value":3187},{"type":51,"tag":138,"props":4671,"children":4672},{"style":1599},[4673],{"type":57,"value":3192},{"type":51,"tag":138,"props":4675,"children":4676},{"style":1599},[4677],{"type":57,"value":4678}," search",{"type":51,"tag":138,"props":4680,"children":4681},{"style":1599},[4682],{"type":57,"value":4683}," @shadcn",{"type":51,"tag":138,"props":4685,"children":4686},{"style":1599},[4687],{"type":57,"value":4688}," -q",{"type":51,"tag":138,"props":4690,"children":4691},{"style":1536},[4692],{"type":57,"value":4693}," \"",{"type":51,"tag":138,"props":4695,"children":4696},{"style":1599},[4697],{"type":57,"value":4698},"sidebar",{"type":51,"tag":138,"props":4700,"children":4701},{"style":1536},[4702],{"type":57,"value":4703},"\"\n",{"type":51,"tag":138,"props":4705,"children":4707},{"class":140,"line":4706},40,[4708,4712,4716,4720,4725,4729,4733,4738],{"type":51,"tag":138,"props":4709,"children":4710},{"style":1542},[4711],{"type":57,"value":3187},{"type":51,"tag":138,"props":4713,"children":4714},{"style":1599},[4715],{"type":57,"value":3192},{"type":51,"tag":138,"props":4717,"children":4718},{"style":1599},[4719],{"type":57,"value":4678},{"type":51,"tag":138,"props":4721,"children":4722},{"style":1599},[4723],{"type":57,"value":4724}," @tailark",{"type":51,"tag":138,"props":4726,"children":4727},{"style":1599},[4728],{"type":57,"value":4688},{"type":51,"tag":138,"props":4730,"children":4731},{"style":1536},[4732],{"type":57,"value":4693},{"type":51,"tag":138,"props":4734,"children":4735},{"style":1599},[4736],{"type":57,"value":4737},"stats",{"type":51,"tag":138,"props":4739,"children":4740},{"style":1536},[4741],{"type":57,"value":4703},{"type":51,"tag":138,"props":4743,"children":4745},{"class":140,"line":4744},41,[4746,4750,4754,4758,4763,4767,4771,4776],{"type":51,"tag":138,"props":4747,"children":4748},{"style":1542},[4749],{"type":57,"value":3187},{"type":51,"tag":138,"props":4751,"children":4752},{"style":1599},[4753],{"type":57,"value":3192},{"type":51,"tag":138,"props":4755,"children":4756},{"style":1599},[4757],{"type":57,"value":4678},{"type":51,"tag":138,"props":4759,"children":4760},{"style":1599},[4761],{"type":57,"value":4762}," owner\u002Frepo",{"type":51,"tag":138,"props":4764,"children":4765},{"style":1599},[4766],{"type":57,"value":4688},{"type":51,"tag":138,"props":4768,"children":4769},{"style":1536},[4770],{"type":57,"value":4693},{"type":51,"tag":138,"props":4772,"children":4773},{"style":1599},[4774],{"type":57,"value":4775},"login",{"type":51,"tag":138,"props":4777,"children":4778},{"style":1536},[4779],{"type":57,"value":4703},{"type":51,"tag":138,"props":4781,"children":4783},{"class":140,"line":4782},42,[4784,4788,4792,4796],{"type":51,"tag":138,"props":4785,"children":4786},{"style":1542},[4787],{"type":57,"value":3187},{"type":51,"tag":138,"props":4789,"children":4790},{"style":1599},[4791],{"type":57,"value":3192},{"type":51,"tag":138,"props":4793,"children":4794},{"style":1599},[4795],{"type":57,"value":4678},{"type":51,"tag":138,"props":4797,"children":4798},{"style":1526},[4799],{"type":57,"value":4800},"                          # all configured registries\n",{"type":51,"tag":138,"props":4802,"children":4804},{"class":140,"line":4803},43,[4805,4809,4813,4817,4821,4825,4829,4834,4838,4843,4848],{"type":51,"tag":138,"props":4806,"children":4807},{"style":1542},[4808],{"type":57,"value":3187},{"type":51,"tag":138,"props":4810,"children":4811},{"style":1599},[4812],{"type":57,"value":3192},{"type":51,"tag":138,"props":4814,"children":4815},{"style":1599},[4816],{"type":57,"value":4678},{"type":51,"tag":138,"props":4818,"children":4819},{"style":1599},[4820],{"type":57,"value":4683},{"type":51,"tag":138,"props":4822,"children":4823},{"style":1599},[4824],{"type":57,"value":4688},{"type":51,"tag":138,"props":4826,"children":4827},{"style":1536},[4828],{"type":57,"value":4693},{"type":51,"tag":138,"props":4830,"children":4831},{"style":1599},[4832],{"type":57,"value":4833},"menu",{"type":51,"tag":138,"props":4835,"children":4836},{"style":1536},[4837],{"type":57,"value":1596},{"type":51,"tag":138,"props":4839,"children":4840},{"style":1599},[4841],{"type":57,"value":4842}," -t",{"type":51,"tag":138,"props":4844,"children":4845},{"style":1599},[4846],{"type":57,"value":4847}," ui",{"type":51,"tag":138,"props":4849,"children":4850},{"style":1526},[4851],{"type":57,"value":4852},"  # filter by item type\n",{"type":51,"tag":138,"props":4854,"children":4856},{"class":140,"line":4855},44,[4857],{"type":51,"tag":138,"props":4858,"children":4859},{"emptyLinePlaceholder":1707},[4860],{"type":57,"value":1710},{"type":51,"tag":138,"props":4862,"children":4864},{"class":140,"line":4863},45,[4865],{"type":51,"tag":138,"props":4866,"children":4867},{"style":1526},[4868],{"type":57,"value":4869},"# Get component docs and example URLs.\n",{"type":51,"tag":138,"props":4871,"children":4873},{"class":140,"line":4872},46,[4874,4878,4882,4886,4890,4894],{"type":51,"tag":138,"props":4875,"children":4876},{"style":1542},[4877],{"type":57,"value":3187},{"type":51,"tag":138,"props":4879,"children":4880},{"style":1599},[4881],{"type":57,"value":3192},{"type":51,"tag":138,"props":4883,"children":4884},{"style":1599},[4885],{"type":57,"value":3197},{"type":51,"tag":138,"props":4887,"children":4888},{"style":1599},[4889],{"type":57,"value":3202},{"type":51,"tag":138,"props":4891,"children":4892},{"style":1599},[4893],{"type":57,"value":3207},{"type":51,"tag":138,"props":4895,"children":4896},{"style":1599},[4897],{"type":57,"value":3212},{"type":51,"tag":138,"props":4899,"children":4901},{"class":140,"line":4900},47,[4902],{"type":51,"tag":138,"props":4903,"children":4904},{"emptyLinePlaceholder":1707},[4905],{"type":57,"value":1710},{"type":51,"tag":138,"props":4907,"children":4909},{"class":140,"line":4908},48,[4910],{"type":51,"tag":138,"props":4911,"children":4912},{"style":1526},[4913],{"type":57,"value":4914},"# View registry item details (for items not yet installed).\n",{"type":51,"tag":138,"props":4916,"children":4918},{"class":140,"line":4917},49,[4919,4923,4927,4932],{"type":51,"tag":138,"props":4920,"children":4921},{"style":1542},[4922],{"type":57,"value":3187},{"type":51,"tag":138,"props":4924,"children":4925},{"style":1599},[4926],{"type":57,"value":3192},{"type":51,"tag":138,"props":4928,"children":4929},{"style":1599},[4930],{"type":57,"value":4931}," view",{"type":51,"tag":138,"props":4933,"children":4934},{"style":1599},[4935],{"type":57,"value":4936}," @shadcn\u002Fbutton\n",{"type":51,"tag":138,"props":4938,"children":4940},{"class":140,"line":4939},50,[4941,4945,4949,4953],{"type":51,"tag":138,"props":4942,"children":4943},{"style":1542},[4944],{"type":57,"value":3187},{"type":51,"tag":138,"props":4946,"children":4947},{"style":1599},[4948],{"type":57,"value":3192},{"type":51,"tag":138,"props":4950,"children":4951},{"style":1599},[4952],{"type":57,"value":4931},{"type":51,"tag":138,"props":4954,"children":4955},{"style":1599},[4956],{"type":57,"value":4499},{"type":51,"tag":59,"props":4958,"children":4959},{},[4960,4965,4966,4971,4972,4977,4978,4984,4985,4991,4992,4998,4999,5005,5010,5011,5017,5018,5023,5024,5030,5031,5037,5038,5044,5046,5052,5054,5059,5061,5066,5068,5074,5075,5081,5083,5091],{"type":51,"tag":72,"props":4961,"children":4962},{},[4963],{"type":57,"value":4964},"Named presets:",{"type":57,"value":209},{"type":51,"tag":80,"props":4967,"children":4969},{"className":4968},[],[4970],{"type":57,"value":2968},{"type":57,"value":87},{"type":51,"tag":80,"props":4973,"children":4975},{"className":4974},[],[4976],{"type":57,"value":2975},{"type":57,"value":87},{"type":51,"tag":80,"props":4979,"children":4981},{"className":4980},[],[4982],{"type":57,"value":4983},"maia",{"type":57,"value":87},{"type":51,"tag":80,"props":4986,"children":4988},{"className":4987},[],[4989],{"type":57,"value":4990},"lyra",{"type":57,"value":87},{"type":51,"tag":80,"props":4993,"children":4995},{"className":4994},[],[4996],{"type":57,"value":4997},"mira",{"type":57,"value":87},{"type":51,"tag":80,"props":5000,"children":5002},{"className":5001},[],[5003],{"type":57,"value":5004},"luma",{"type":51,"tag":72,"props":5006,"children":5007},{},[5008],{"type":57,"value":5009},"Templates:",{"type":57,"value":209},{"type":51,"tag":80,"props":5012,"children":5014},{"className":5013},[],[5015],{"type":57,"value":5016},"next",{"type":57,"value":87},{"type":51,"tag":80,"props":5019,"children":5021},{"className":5020},[],[5022],{"type":57,"value":37},{"type":57,"value":87},{"type":51,"tag":80,"props":5025,"children":5027},{"className":5026},[],[5028],{"type":57,"value":5029},"start",{"type":57,"value":87},{"type":51,"tag":80,"props":5032,"children":5034},{"className":5033},[],[5035],{"type":57,"value":5036},"react-router",{"type":57,"value":87},{"type":51,"tag":80,"props":5039,"children":5041},{"className":5040},[],[5042],{"type":57,"value":5043},"astro",{"type":57,"value":5045}," (all support ",{"type":51,"tag":80,"props":5047,"children":5049},{"className":5048},[],[5050],{"type":57,"value":5051},"--monorepo",{"type":57,"value":5053},") and ",{"type":51,"tag":80,"props":5055,"children":5057},{"className":5056},[],[5058],{"type":57,"value":31},{"type":57,"value":5060}," (not supported for monorepo)\n",{"type":51,"tag":72,"props":5062,"children":5063},{},[5064],{"type":57,"value":5065},"Preset codes:",{"type":57,"value":5067}," Version-prefixed base62 strings (e.g. ",{"type":51,"tag":80,"props":5069,"children":5071},{"className":5070},[],[5072],{"type":57,"value":5073},"a2r6bw",{"type":57,"value":324},{"type":51,"tag":80,"props":5076,"children":5078},{"className":5077},[],[5079],{"type":57,"value":5080},"b0",{"type":57,"value":5082},"), from ",{"type":51,"tag":283,"props":5084,"children":5088},{"href":5085,"rel":5086},"https:\u002F\u002Fui.shadcn.com",[5087],"nofollow",[5089],{"type":57,"value":5090},"ui.shadcn.com",{"type":57,"value":256},{"type":51,"tag":120,"props":5093,"children":5095},{"id":5094},"detailed-references",[5096],{"type":57,"value":5097},"Detailed References",{"type":51,"tag":290,"props":5099,"children":5100},{},[5101,5111,5121,5131,5141,5151,5161,5171,5190],{"type":51,"tag":172,"props":5102,"children":5103},{},[5104,5109],{"type":51,"tag":283,"props":5105,"children":5106},{"href":486},[5107],{"type":57,"value":5108},"rules\u002Fforms.md",{"type":57,"value":5110}," — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states",{"type":51,"tag":172,"props":5112,"children":5113},{},[5114,5119],{"type":51,"tag":283,"props":5115,"children":5116},{"href":739},[5117],{"type":57,"value":5118},"rules\u002Fcomposition.md",{"type":57,"value":5120}," — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading",{"type":51,"tag":172,"props":5122,"children":5123},{},[5124,5129],{"type":51,"tag":283,"props":5125,"children":5126},{"href":1304},[5127],{"type":57,"value":5128},"rules\u002Fchat.md",{"type":57,"value":5130}," — MessageScroller, Message, Bubble, Attachment, Marker; streaming, anchoring, jump-to-latest",{"type":51,"tag":172,"props":5132,"children":5133},{},[5134,5139],{"type":51,"tag":283,"props":5135,"children":5136},{"href":1211},[5137],{"type":57,"value":5138},"rules\u002Ficons.md",{"type":57,"value":5140}," — data-icon, icon sizing, passing icons as objects",{"type":51,"tag":172,"props":5142,"children":5143},{},[5144,5149],{"type":51,"tag":283,"props":5145,"children":5146},{"href":285},[5147],{"type":57,"value":5148},"rules\u002Fstyling.md",{"type":57,"value":5150}," — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index",{"type":51,"tag":172,"props":5152,"children":5153},{},[5154,5159],{"type":51,"tag":283,"props":5155,"children":5156},{"href":842},[5157],{"type":57,"value":5158},"rules\u002Fbase-vs-radix.md",{"type":57,"value":5160}," — asChild vs render, Select, ToggleGroup, Slider, Accordion",{"type":51,"tag":172,"props":5162,"children":5163},{},[5164,5169],{"type":51,"tag":283,"props":5165,"children":5166},{"href":3139},[5167],{"type":57,"value":5168},"cli.md",{"type":57,"value":5170}," — Commands, flags, presets, templates",{"type":51,"tag":172,"props":5172,"children":5173},{},[5174,5180,5182,5188],{"type":51,"tag":283,"props":5175,"children":5177},{"href":5176},".\u002Fregistry.md",[5178],{"type":57,"value":5179},"registry.md",{"type":57,"value":5181}," — Authoring source registries, ",{"type":51,"tag":80,"props":5183,"children":5185},{"className":5184},[],[5186],{"type":57,"value":5187},"include",{"type":57,"value":5189},", item definitions, dependencies, GitHub registry rules",{"type":51,"tag":172,"props":5191,"children":5192},{},[5193,5199],{"type":51,"tag":283,"props":5194,"children":5196},{"href":5195},".\u002Fcustomization.md",[5197],{"type":57,"value":5198},"customization.md",{"type":57,"value":5200}," — Theming, CSS variables, extending components",{"type":51,"tag":2960,"props":5202,"children":5203},{},[5204],{"type":57,"value":5205},"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":5207,"total":1532},[5208,5222],{"slug":5209,"name":5209,"fn":5210,"description":5211,"org":5212,"tags":5213,"stars":23,"repoUrl":24,"updatedAt":5221},"migrate-radix-to-base","migrate React components from Radix to Base","Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components (\"migrate accordion\") and whole projects.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5214,5215,5218,5219,5220],{"name":21,"slug":22,"type":15},{"name":5216,"slug":5217,"type":15},"Migration","migration",{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},"2026-07-18T05:48:33.480459",{"slug":4,"name":4,"fn":5,"description":6,"org":5223,"tags":5224,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5225,5226,5227,5228],{"name":21,"slug":22,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},{"items":5230,"total":1532},[5231,5239],{"slug":5209,"name":5209,"fn":5210,"description":5211,"org":5232,"tags":5233,"stars":23,"repoUrl":24,"updatedAt":5221},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5234,5235,5236,5237,5238],{"name":21,"slug":22,"type":15},{"name":5216,"slug":5217,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":5240,"tags":5241,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5242,5243,5244,5245],{"name":21,"slug":22,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},{"name":18,"slug":19,"type":15}]