Shadcn Ui

<!-- Canonical overview: https://ui.shadcn.com/docs/skills.md -->

Skills (shadcn/ui)

Skills give AI assistants project-aware context about shadcn/ui. When used, the assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project.

For example, you can ask:

• _"Add a login form with email and password fields."_
• _"Create a settings page with a form for updating profile information."_
• _"Build a dashboard with a sidebar, stats cards, and a data table."_
• _"Switch to --preset [CODE]"_
• _"Can you add a hero from @tailark?"_

The skill reads your project's components.json and provides your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try.

---

Install (ecosystem vs this repo)

Official install from Skills — shadcn/ui:

npx skills add shadcn/ui

That installs the skill where the skills CLI is available. This repository keeps the same intent under .agents/skills/shadcn-ui/ (overview here + vendored upstream docs in `vendor/shadcn/`) and runs the shadcn CLI from the frontend app root:

cd web/default && bunx shadcn@latest info --json

Learn more about skills at skills.sh.

---

What's included (and where)

Project context

Run `shadcn info --json` (here: cd web/default && bunx shadcn@latest info --json) for framework, Tailwind version, aliases, base (radix | base), icon library, installed components, and resolved paths.

CLI commands

Full command reference (vendored): `vendor/shadcn/cli.md`.

Theming and customization

Vendored: `vendor/shadcn/customization.md`. Live docs: Theming.

Registry authoring

Not duplicated as a single file in the vendor tree; see Registry and build in `vendor/shadcn/cli.md`.

MCP server

Vendored: `vendor/shadcn/mcp.md`. Live docs: MCP Server.

---

How it works

1. Project detection — Applies when components.json exists (here: web/default/components.json). 2. Context injection — Use shadcn info --json as ground truth for imports and APIs. 3. Pattern enforcement — Follow rules in `vendor/shadcn/SKILL.md` and `vendor/shadcn/rules/`. 4. Component discovery — shadcn docs, shadcn search, MCP, or registries — see vendored SKILL + MCP doc.

---

Learn more (web)

• CLI — complements `vendor/shadcn/cli.md`
• Theming
• Registry
• skills.sh

---

Vendored upstream bundle (deep rules)

Snapshot from shadcn-ui/ui `skills/shadcn`; revision note in `vendor/shadcn/UPSTREAM.txt`.

Workflow: Prefer this root SKILL.md for repo paths (web/default, Bun). Read `vendor/shadcn/SKILL.md` for the complete upstream workflow, patterns, and CLI quick reference. Use *`vendor/shadcn/rules/.md`** when validating concrete markup.

shadcn CLI Reference

Configuration is read from components.json.

IMPORTANT: Always run commands using the project's package runner: npx shadcn@latest, pnpm dlx shadcn@latest, or bunx --bun shadcn@latest. Check packageManager from project context to choose the right one. Examples below use npx shadcn@latest but substitute the correct runner for the project.

IMPORTANT: Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no --package-manager flag.

Contents

• Commands: init, apply, add (dry-run, smart merge), search, view, docs, info, build
• Templates: next, vite, start, react-router, astro
• Presets: named, code, URL formats and fields
• Switching presets

---

Commands

init — Initialize or create a project

npx shadcn@latest init [components...] [options]

Initializes shadcn/ui in an existing project or creates a new project (when --name is provided). Optionally installs components in the same step.

npx shadcn@latest create is an alias for npx shadcn@latest init.

apply — Apply a preset to an existing project

npx shadcn@latest apply [preset] [options]

Applies a preset to an existing project, overwriting preset-driven config, fonts, CSS variables, and detected UI components.

[preset] is a shorthand for --preset <preset>. If both are provided, they must match. If no preset is provided, the CLI offers to open the custom preset builder on ui.shadcn.com/create.

add — Add components

IMPORTANT: To compare local components against upstream or to preview changes, ALWAYS use npx shadcn@latest add <component> --dry-run, --diff, or --view. NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.

npx shadcn@latest add [components...] [options]

Accepts component names, registry-prefixed names (@magicui/shimmer-button), URLs, or local paths.

Dry-Run Mode

Use --dry-run to preview what add would do without writing any files. --diff and --view both imply --dry-run.

# Preview all changes.
npx shadcn@latest add button --dry-run

# Show diffs for all files (top 5).
npx shadcn@latest add button --diff

# Show the diff for a specific file.
npx shadcn@latest add button --diff button.tsx

# Show contents for all files (top 5).
npx shadcn@latest add button --view

# Show the full content of a specific file.
npx shadcn@latest add button --view button.tsx

# Works with URLs too.
npx shadcn@latest add https://api.npoint.io/abc123 --dry-run

# CSS diffs.
npx shadcn@latest add button --diff globals.css

When to use dry-run:

• When the user asks "what files will this add?" or "what will this change?" — use --dry-run.
• Before overwriting existing components — use --diff to preview the changes first.
• When the user wants to inspect component source code without installing — use --view.
• When checking what CSS changes would be made to globals.css — use --diff globals.css.
• When the user asks to review or audit third-party registry code before installing — use --view to inspect the source.

`npx shadcn@latest add --dry-run` vs `npx shadcn@latest view`: Prefer npx shadcn@latest add --dry-run/--diff/--view over npx shadcn@latest view when the user wants to preview changes to their project. npx shadcn@latest view only shows raw registry metadata. npx shadcn@latest add --dry-run shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use npx shadcn@latest view only when the user wants to browse registry info without a project context.

Smart Merge from Upstream

See Updating Components in SKILL.md for the full workflow.

search — Search registries

npx shadcn@latest search <registries...> [options]

Fuzzy search across registries. Also aliased as npx shadcn@latest list. Without -q, lists all items.

view — View item details

npx shadcn@latest view <items...> [options]

Displays item info including file contents. Example: npx shadcn@latest view @shadcn/button.

docs — Get component documentation URLs

npx shadcn@latest docs <components...> [options]

Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.

Example output for npx shadcn@latest docs input button:

base  radix

input
  docs      https://ui.shadcn.com/docs/components/radix/input
  examples  https://raw.githubusercontent.com/.../examples/input-example.tsx

button
  docs      https://ui.shadcn.com/docs/components/radix/button
  examples  https://raw.githubusercontent.com/.../examples/button-example.tsx

Some components include an api link to the underlying library (e.g. cmdk for the command component).

diff — Check for updates

Do not use this command. Use npx shadcn@latest add --diff instead.

info — Project information

npx shadcn@latest info [options]

Displays project info and components.json configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.

Project Info fields:

Components.json fields:

Links fields:

The info output includes a Links section with templated URLs for component docs, source, and examples. For resolved URLs, use npx shadcn@latest docs <component> instead.

build — Build a custom registry

npx shadcn@latest build [registry] [options]

Builds registry.json into individual JSON files for distribution. Default input: ./registry.json, default output: ./public/r.

---

Templates

All templates support monorepo scaffolding via the --monorepo flag. When passed, the CLI uses a monorepo-specific template directory (e.g. next-monorepo, vite-monorepo). When neither --monorepo nor --no-monorepo is passed, the CLI prompts interactively. Laravel does not support monorepo scaffolding.

---

Presets

Three ways to specify a preset via --preset:

1. Named: --preset nova or --preset lyra 2. Code: --preset a2r6bw (version-prefixed base62 string, e.g. a2r6bw or b0) 3. URL: --preset "https://ui.shadcn.com/init?base=radix&style=nova&..."

IMPORTANT: Never try to decode, fetch, or resolve preset codes manually. Preset codes are opaque — pass them directly to npx shadcn@latest init --preset <code> and let the CLI handle resolution.

Use npx shadcn@latest apply --preset <code> when overwriting an existing project's preset.

Switching Presets

Ask the user first: overwrite, merge, or skip existing components?

• Overwrite / Re-install → npx shadcn@latest apply --preset <code>. Overwrites all detected component files with the new preset styles. Use when the user hasn't customized components.
• Merge → npx shadcn@latest init --preset <code> --force --no-reinstall, then run npx shadcn@latest info to get the list of installed components and use the smart merge workflow to update them one by one, preserving local changes. Use when the user has customized components.
• Skip → npx shadcn@latest init --preset <code> --force --no-reinstall. Only updates config and CSS variables, leaves existing components as-is.

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/temp directory (e.g. for --dry-run comparisons), pass --base <current-base> explicitly — preset codes do not encode the base.

Customization & Theming

Components reference semantic CSS variable tokens. Change the variables to change every component.

Contents

• How it works (CSS variables → Tailwind utilities → components)
• Color variables and OKLCH format
• Dark mode setup
• Changing the theme (presets, CSS variables)
• Adding custom colors (Tailwind v3 and v4)
• Border radius
• Customizing components (variants, className, wrappers)
• Checking for updates

---

How It Works

1. CSS variables defined in :root (light) and .dark (dark mode). 2. Tailwind maps them to utilities: bg-primary, text-muted-foreground, etc. 3. Components use these utilities — changing a variable changes all components that reference it.

---

Color Variables

Every color follows the name / name-foreground convention. The base variable is for backgrounds, -foreground is for text/icons on that background.

Colors use OKLCH: --primary: oklch(0.205 0 0) where values are lightness (0–1), chroma (0 = gray), and hue (0–360).

---

Dark Mode

Class-based toggle via .dark on the root element. In Next.js, use next-themes:

import { ThemeProvider } from "next-themes"

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

---

Changing the Theme

# Apply a preset code from ui.shadcn.com.
npx shadcn@latest apply --preset a2r6bw

# Positional shorthand also works.
npx shadcn@latest apply a2r6bw

# Switch to a named preset and overwrite existing components.
npx shadcn@latest apply --preset nova

# Preserve existing components instead.
npx shadcn@latest init --preset nova --force --no-reinstall

# Use a custom theme URL.
npx shadcn@latest apply --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..."

Or edit CSS variables directly in globals.css.

---

Adding Custom Colors

Add variables to the file at tailwindCssFile from npx shadcn@latest info (typically globals.css). Never create a new CSS file for this.

/* 1. Define in the global CSS file. */
:root {
  --warning: oklch(0.84 0.16 84);
  --warning-foreground: oklch(0.28 0.07 46);
}
.dark {
  --warning: oklch(0.41 0.11 46);
  --warning-foreground: oklch(0.99 0.02 95);
}

/* 2a. Register with Tailwind v4 (@theme inline). */
@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

When tailwindVersion is "v3" (check via npx shadcn@latest info), register in tailwind.config.js instead:

// 2b. Register with Tailwind v3 (tailwind.config.js).
module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "oklch(var(--warning) / <alpha-value>)",
        "warning-foreground":
          "oklch(var(--warning-foreground) / <alpha-value>)",
      },
    },
  },
}

// 3. Use in components.
<div className="bg-warning text-warning-foreground">Warning</div>

---

Border Radius

--radius controls border radius globally. Components derive values from it (rounded-lg = var(--radius), rounded-md = calc(var(--radius) - 2px)).

---

Customizing Components

See also: rules/styling.md for Incorrect/Correct examples.

Prefer these approaches in order:

1. Built-in variants

<Button variant="outline" size="sm">
  Click
</Button>

2. Tailwind classes via className

<Card className="mx-auto max-w-md">...</Card>

3. Add a new variant

Edit the component source to add a variant via cva:

// components/ui/button.tsx
warning: "bg-warning text-warning-foreground hover:bg-warning/90",

4. Wrapper components

Compose shadcn/ui primitives into higher-level components:

export function ConfirmDialog({ title, description, onConfirm, children }) {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>{title}</AlertDialogTitle>
          <AlertDialogDescription>{description}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

---

Checking for Updates

npx shadcn@latest add button --diff

To preview exactly what would change before updating, use --dry-run and --diff:

npx shadcn@latest add button --dry-run        # see all affected files
npx shadcn@latest add button --diff button.tsx # see the diff for a specific file

See Updating Components in SKILL.md for the full smart merge workflow.

shadcn MCP Server

The CLI includes an MCP server that lets AI assistants search, browse, view, and install components from registries.

---

Setup

shadcn mcp        # start the MCP server (stdio)
shadcn mcp init   # write config for your editor

Editor config files:

---

Tools

Tip: MCP tools handle registry operations (search, view, install). For project configuration (aliases, framework, Tailwind version), use npx shadcn@latest info — there is no MCP equivalent.

shadcn:get_project_registries

Returns registry names from components.json. Errors if no components.json exists.

Input: none

shadcn:list_items_in_registries

Lists all items from one or more registries.

Input: registries (string[]), limit (number, optional), offset (number, optional)

shadcn:search_items_in_registries

Fuzzy search across registries.

Input: registries (string[]), query (string), limit (number, optional), offset (number, optional)

shadcn:view_items_in_registries

View item details including full file contents.

Input: items (string[]) — e.g. ["@shadcn/button", "@shadcn/card"]

shadcn:get_item_examples_from_registries

Find usage examples and demos with source code.

Input: registries (string[]), query (string) — e.g. "accordion-demo", "button example"

shadcn:get_add_command_for_items

Returns the CLI install command.

Input: items (string[]) — e.g. ["@shadcn/button"]

shadcn:get_audit_checklist

Returns a checklist for verifying components (imports, deps, lint, TypeScript).

Input: none

---

Configuring Registries

Registries are set in components.json. The @shadcn registry is always built-in.

{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json",
    "@private": {
      "url": "https://private.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${MY_TOKEN}" }
    }
  }
}

• Names must start with @.
• URLs must contain {name}.
• ${VAR} references are resolved from environment variables.

Community registry index: https://ui.shadcn.com/r/registries.json

Base vs Radix

API differences between base and radix. Check the base field from npx shadcn@latest info.

Contents

• Composition: asChild vs render
• Button / trigger as non-button element
• Select (items prop, placeholder, positioning, multiple, object values)
• ToggleGroup (type vs multiple)
• Slider (scalar vs array)
• Accordion (type and defaultValue)

---

Composition: asChild (radix) vs render (base)

Radix uses asChild to replace the default element. Base uses render. Don't wrap triggers in extra elements.

Incorrect:

<DialogTrigger>
  <div>
    <Button>Open</Button>
  </div>
</DialogTrigger>

Correct (radix):

<DialogTrigger asChild>
  <Button>Open</Button>
</DialogTrigger>

Correct (base):

<DialogTrigger render={<Button />}>Open</DialogTrigger>

This applies to all trigger and close components: DialogTrigger, SheetTrigger, AlertDialogTrigger, DropdownMenuTrigger, PopoverTrigger, TooltipTrigger, CollapsibleTrigger, DialogClose, SheetClose, NavigationMenuLink, BreadcrumbLink, SidebarMenuButton, Badge, Item.

---

Button / trigger as non-button element (base only)

When render changes an element to a non-button (<a>, <span>), add nativeButton={false}.

Incorrect (base): missing nativeButton={false}.

<Button render={<a href="/docs" />}>Read the docs</Button>

Correct (base):

<Button render={<a href="/docs" />} nativeButton={false}>
  Read the docs
</Button>

Correct (radix):

<Button asChild>
  <a href="/docs">Read the docs</a>
</Button>

Same for triggers whose render is not a Button:

// base.
<PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>
  Pick date
</PopoverTrigger>

---

Select

items prop (base only). Base requires an items prop on the root. Radix uses inline JSX only.

Incorrect (base):

<Select>
  <SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>
</Select>

Correct (base):

const items = [
  { label: "Select a fruit", value: null },
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
]

<Select items={items}>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {items.map((item) => (
        <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>

Correct (radix):

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Placeholder. Base uses a { value: null } item in the items array. Radix uses <SelectValue placeholder="...">.

Content positioning. Base uses alignItemWithTrigger. Radix uses position.

// base.
<SelectContent alignItemWithTrigger={false} side="bottom">

// radix.
<SelectContent position="popper">

---

Select — multiple selection and object values (base only)

Base supports multiple, render-function children on SelectValue, and object values with itemToStringValue. Radix is single-select with string values only.

Correct (base — multiple selection):

<Select items={items} multiple defaultValue={[]}>
  <SelectTrigger>
    <SelectValue>
      {(value: string[]) => value.length === 0 ? "Select fruits" : `${value.length} selected`}
    </SelectValue>
  </SelectTrigger>
  ...
</Select>

Correct (base — object values):

<Select defaultValue={plans[0]} itemToStringValue={(plan) => plan.name}>
  <SelectTrigger>
    <SelectValue>{(value) => value.name}</SelectValue>
  </SelectTrigger>
  ...
</Select>

---

ToggleGroup

Base uses a multiple boolean prop. Radix uses type="single" or type="multiple".

Incorrect (base):

<ToggleGroup type="single" defaultValue="daily">
  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
</ToggleGroup>

Correct (base):

// Single (no prop needed), defaultValue is always an array.
<ToggleGroup defaultValue={["daily"]} spacing={2}>
  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
</ToggleGroup>

// Multi-selection.
<ToggleGroup multiple>
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
</ToggleGroup>

Correct (radix):

// Single, defaultValue is a string.
<ToggleGroup type="single" defaultValue="daily" spacing={2}>
  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
</ToggleGroup>

// Multi-selection.
<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
</ToggleGroup>

Controlled single value:

// base — wrap/unwrap arrays.
const [value, setValue] = React.useState("normal")
<ToggleGroup value={[value]} onValueChange={(v) => setValue(v[0])}>

// radix — plain string.
const [value, setValue] = React.useState("normal")
<ToggleGroup type="single" value={value} onValueChange={setValue}>

---

Slider

Base accepts a plain number for a single thumb. Radix always requires an array.

Incorrect (base):

<Slider defaultValue={[50]} max={100} step={1} />

Correct (base):

<Slider defaultValue={50} max={100} step={1} />

Correct (radix):

<Slider defaultValue={[50]} max={100} step={1} />

Both use arrays for range sliders. Controlled onValueChange in base may need a cast:

// base.
const [value, setValue] = React.useState([0.3, 0.7])
<Slider value={value} onValueChange={(v) => setValue(v as number[])} />

// radix.
const [value, setValue] = React.useState([0.3, 0.7])
<Slider value={value} onValueChange={setValue} />

---

Accordion

Radix requires type="single" or type="multiple" and supports collapsible. defaultValue is a string. Base uses no type prop, uses multiple boolean, and defaultValue is always an array.

Incorrect (base):

<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">...</AccordionItem>
</Accordion>

Correct (base):

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">...</AccordionItem>
</Accordion>

// Multi-select.
<Accordion multiple defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">...</AccordionItem>
  <AccordionItem value="item-2">...</AccordionItem>
</Accordion>

Correct (radix):

<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">...</AccordionItem>
</Accordion>

Component Composition

Contents

• Items always inside their Group component
• Callouts use Alert
• Empty states use Empty component
• Toast notifications use sonner
• Choosing between overlay components
• Dialog, Sheet, and Drawer always need a Title
• Card structure
• Button has no isPending or isLoading prop
• TabsTrigger must be inside TabsList
• Avatar always needs AvatarFallback
• Use Separator instead of raw hr or border divs
• Use Skeleton for loading placeholders
• Use Badge instead of custom styled spans

---

Items always inside their Group component

Never render items directly inside the content container.

Incorrect:

<SelectContent>
  <SelectItem value="apple">Apple</SelectItem>
  <SelectItem value="banana">Banana</SelectItem>
</SelectContent>

Correct:

<SelectContent>
  <SelectGroup>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectGroup>
</SelectContent>

This applies to all group-based components:

---

Callouts use Alert

<Alert>
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Something needs attention.</AlertDescription>
</Alert>

---

Empty states use Empty component

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon"><FolderIcon /></EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Get started by creating a new project.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create Project</Button>
  </EmptyContent>
</Empty>

---

Toast notifications use sonner

import { toast } from "sonner"

toast.success("Changes saved.")
toast.error("Something went wrong.")
toast("File deleted.", {
  action: { label: "Undo", onClick: () => undoDelete() },
})

---

Choosing between overlay components

---

Dialog, Sheet, and Drawer always need a Title

DialogTitle, SheetTitle, DrawerTitle are required for accessibility. Use className="sr-only" if visually hidden.

<DialogContent>
  <DialogHeader>
    <DialogTitle>Edit Profile</DialogTitle>
    <DialogDescription>Update your profile.</DialogDescription>
  </DialogHeader>
  ...
</DialogContent>

---

Card structure

Use full composition — don't dump everything into CardContent:

<Card>
  <CardHeader>
    <CardTitle>Team Members</CardTitle>
    <CardDescription>Manage your team.</CardDescription>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>
    <Button>Invite</Button>
  </CardFooter>
</Card>

---

Button has no isPending or isLoading prop

Compose with Spinner + data-icon + disabled:

<Button disabled>
  <Spinner data-icon="inline-start" />
  Saving...
</Button>

---

TabsTrigger must be inside TabsList

Never render TabsTrigger directly inside Tabs — always wrap in TabsList:

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">...</TabsContent>
</Tabs>

---

Avatar always needs AvatarFallback

Always include AvatarFallback for when the image fails to load:

<Avatar>
  <AvatarImage src="/avatar.png" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

---

Use existing components instead of custom markup

Forms & Inputs

Contents

• Forms use FieldGroup + Field
• InputGroup requires InputGroupInput/InputGroupTextarea
• Buttons inside inputs use InputGroup + InputGroupAddon
• Option sets (2–7 choices) use ToggleGroup
• FieldSet + FieldLegend for grouping related fields
• Field validation and disabled states

---

Forms use FieldGroup + Field

Always use FieldGroup + Field — never raw div with space-y-*:

<FieldGroup>
  <Field>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <Input id="email" type="email" />
  </Field>
  <Field>
    <FieldLabel htmlFor="password">Password</FieldLabel>
    <Input id="password" type="password" />
  </Field>
</FieldGroup>

Use Field orientation="horizontal" for settings pages. Use FieldLabel className="sr-only" for visually hidden labels.

Choosing form controls:

• Simple text input → Input
• Dropdown with predefined options → Select
• Searchable dropdown → Combobox
• Native HTML select (no JS) → native-select
• Boolean toggle → Switch (for settings) or Checkbox (for forms)
• Single choice from few options → RadioGroup
• Toggle between 2–5 options → ToggleGroup + ToggleGroupItem
• OTP/verification code → InputOTP
• Multi-line text → Textarea

---

InputGroup requires InputGroupInput/InputGroupTextarea

Never use raw Input or Textarea inside an InputGroup.

Incorrect:

<InputGroup>
  <Input placeholder="Search..." />
</InputGroup>

Correct:

import { InputGroup, InputGroupInput } from "@/components/ui/input-group"

<InputGroup>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

---

Buttons inside inputs use InputGroup + InputGroupAddon

Never place a Button directly inside or adjacent to an Input with custom positioning.

Incorrect:

<div className="relative">
  <Input placeholder="Search..." className="pr-10" />
  <Button className="absolute right-0 top-0" size="icon">
    <SearchIcon />
  </Button>
</div>

Correct:

import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <Button size="icon">
      <SearchIcon data-icon="inline-start" />
    </Button>
  </InputGroupAddon>
</InputGroup>

---

Option sets (2–7 choices) use ToggleGroup

Don't manually loop Button components with active state.

Incorrect:

const [selected, setSelected] = useState("daily")

<div className="flex gap-2">
  {["daily", "weekly", "monthly"].map((option) => (
    <Button
      key={option}
      variant={selected === option ? "default" : "outline"}
      onClick={() => setSelected(option)}
    >
      {option}
    </Button>
  ))}
</div>

Correct:

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

<ToggleGroup spacing={2}>
  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
  <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
</ToggleGroup>

Combine with Field for labelled toggle groups:

<Field orientation="horizontal">
  <FieldTitle id="theme-label">Theme</FieldTitle>
  <ToggleGroup aria-labelledby="theme-label" spacing={2}>
    <ToggleGroupItem value="light">Light</ToggleGroupItem>
    <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
    <ToggleGroupItem value="system">System</ToggleGroupItem>
  </ToggleGroup>
</Field>

Note: defaultValue and type/multiple props differ between base and radix. See base-vs-radix.md.

---

FieldSet + FieldLegend for grouping related fields

Use FieldSet + FieldLegend for related checkboxes, radios, or switches — not div with a heading:

<FieldSet>
  <FieldLegend variant="label">Preferences</FieldLegend>
  <FieldDescription>Select all that apply.</FieldDescription>
  <FieldGroup className="gap-3">
    <Field orientation="horizontal">
      <Checkbox id="dark" />
      <FieldLabel htmlFor="dark" className="font-normal">Dark mode</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

---

Field validation and disabled states

Both attributes are needed — data-invalid/data-disabled styles the field (label, description), while aria-invalid/disabled styles the control.

// Invalid.
<Field data-invalid>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" aria-invalid />
  <FieldDescription>Invalid email address.</FieldDescription>
</Field>

// Disabled.
<Field data-disabled>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" disabled />
</Field>

Works for all controls: Input, Textarea, Select, Checkbox, RadioGroupItem, Switch, Slider, NativeSelect, InputOTP.

Icons

Always use the project's configured `iconLibrary` for imports. Check the iconLibrary field from project context: lucide → lucide-react, tabler → @tabler/icons-react, etc. Never assume lucide-react.

---

Icons in Button use data-icon attribute

Add data-icon="inline-start" (prefix) or data-icon="inline-end" (suffix) to the icon. No sizing classes on the icon.

Incorrect:

<Button>
  <SearchIcon className="mr-2 size-4" />
  Search
</Button>

Correct:

<Button>
  <SearchIcon data-icon="inline-start"/>
  Search
</Button>

<Button>
  Next
  <ArrowRightIcon data-icon="inline-end"/>
</Button>

---

No sizing classes on icons inside components

Components handle icon sizing via CSS. Don't add size-4, w-4 h-4, or other sizing classes to icons inside Button, DropdownMenuItem, Alert, Sidebar*, or other shadcn components. Unless the user explicitly asks for custom icon sizes.

Incorrect:

<Button>
  <SearchIcon className="size-4" data-icon="inline-start" />
  Search
</Button>

<DropdownMenuItem>
  <SettingsIcon className="mr-2 size-4" />
  Settings
</DropdownMenuItem>

Correct:

<Button>
  <SearchIcon data-icon="inline-start" />
  Search
</Button>

<DropdownMenuItem>
  <SettingsIcon />
  Settings
</DropdownMenuItem>

---

Pass icons as component objects, not string keys

Use icon={CheckIcon}, not a string key to a lookup map.

Incorrect:

const iconMap = {
  check: CheckIcon,
  alert: AlertIcon,
}

function StatusBadge({ icon }: { icon: string }) {
  const Icon = iconMap[icon]
  return <Icon />
}

<StatusBadge icon="check" />

Correct:

// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
import { CheckIcon } from "lucide-react"

function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
  return <Icon />
}

<StatusBadge icon={CheckIcon} />

Styling & Customization

See customization.md for theming, CSS variables, and adding custom colors.

Contents

• Semantic colors
• Built-in variants first
• className for layout only
• No space-x- / space-y-
• Prefer size- over w- h-* when equal
• Prefer truncate shorthand
• No manual dark: color overrides
• Use cn() for conditional classes
• No manual z-index on overlay components

---

Semantic colors

Incorrect:

<div className="bg-blue-500 text-white">
  <p className="text-gray-600">Secondary text</p>
</div>

Correct:

<div className="bg-primary text-primary-foreground">
  <p className="text-muted-foreground">Secondary text</p>
</div>

---

No raw color values for status/state indicators

For positive, negative, or status indicators, use Badge variants, semantic tokens like text-destructive, or define custom CSS variables — don't reach for raw Tailwind colors.

Incorrect:

<span className="text-emerald-600">+20.1%</span>
<span className="text-green-500">Active</span>
<span className="text-red-600">-3.2%</span>

Correct:

<Badge variant="secondary">+20.1%</Badge>
<Badge>Active</Badge>
<span className="text-destructive">-3.2%</span>

If you need a success/positive color that doesn't exist as a semantic token, use a Badge variant or ask the user about adding a custom CSS variable to the theme (see customization.md).

---

Built-in variants first

Incorrect:

<Button className="border border-input bg-transparent hover:bg-accent">
  Click me
</Button>

Correct:

<Button variant="outline">Click me</Button>

---

className for layout only

Use className for layout (e.g. max-w-md, mx-auto, mt-4), not for overriding component colors or typography. To change colors, use semantic tokens, built-in variants, or CSS variables.

Incorrect:

<Card className="bg-blue-100 text-blue-900 font-bold">
  <CardContent>Dashboard</CardContent>
</Card>

Correct:

<Card className="max-w-md mx-auto">
  <CardContent>Dashboard</CardContent>
</Card>

To customize a component's appearance, prefer these approaches in order: 1. Built-in variants — variant="outline", variant="destructive", etc. 2. Semantic color tokens — bg-primary, text-muted-foreground. 3. CSS variables — define custom colors in the global CSS file (see customization.md).

---

No space-x- / space-y-

Use gap-* instead. space-y-4 → flex flex-col gap-4. space-x-2 → flex gap-2.

<div className="flex flex-col gap-4">
  <Input />
  <Input />
  <Button>Submit</Button>
</div>

---

Prefer size- over w- h-* when equal

size-10 not w-10 h-10. Applies to icons, avatars, skeletons, etc.

---

Prefer truncate shorthand

truncate not overflow-hidden text-ellipsis whitespace-nowrap.

---

No manual dark: color overrides

Use semantic tokens — they handle light/dark via CSS variables. bg-background text-foreground not bg-white dark:bg-gray-950.

---

Use cn() for conditional classes

Use the cn() utility from the project for conditional or merged class names. Don't write manual ternaries in className strings.

Incorrect:

<div className={`flex items-center ${isActive ? "bg-primary text-primary-foreground" : "bg-muted"}`}>

Correct:

import { cn } from "@/lib/utils"

<div className={cn("flex items-center", isActive ? "bg-primary text-primary-foreground" : "bg-muted")}>

---

No manual z-index on overlay components

Dialog, Sheet, Drawer, AlertDialog, DropdownMenu, Popover, Tooltip, HoverCard handle their own stacking. Never add z-50 or z-[999].