Shadcn Vue

shadcn-vue

A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.

IMPORTANT: Run all CLI commands using the project's package runner: npx shadcn-vue@latest, pnpm dlx shadcn-vue@latest, or bunx --bun shadcn-vue@latest — based on the project's packageManager. Examples below use npx shadcn-vue@latest but substitute the correct runner for the project.

Current Project Context

!`npx shadcn-vue@latest info --json`

The JSON above contains the project config and installed components. Use npx shadcn-vue@latest docs <component> to get documentation and example URLs for any component.

Principles

1. Use existing components first. Use npx shadcn-vue@latest search to check registries before writing custom UI. Check community registries too. 2. Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. 3. Use built-in variants before custom styles. variant="outline", size="sm", etc. 4. Use semantic colors. bg-primary, text-muted-foreground — never raw values like bg-blue-500.

Critical Rules

These rules are always enforced. Each links to a file with Incorrect/Correct code pairs.

Styling & Tailwind → styling.md

• `class` for layout, not styling. Never override component colors or typography.
• *No `space-x- or space-y-`. Use `flex` with `gap-. For vertical stacks, flex flex-col gap-*`.
• *Use `size- when width and height are equal.** size-10 not w-10 h-10`.
• Use `truncate` shorthand. Not overflow-hidden text-ellipsis whitespace-nowrap.
• No manual `dark:` color overrides. Use semantic tokens (bg-background, text-muted-foreground).
• Use `cn()` for conditional classes. Don't write manual template literal ternaries.
• No manual `z-index` on overlay components. Dialog, Sheet, Popover, etc. handle their own stacking.

Forms & Inputs → forms.md

• Forms use `FieldGroup` + `Field`. Never use raw div with space-y-* or grid gap-* for form layout.
• `InputGroup` uses `InputGroupInput`/`InputGroupTextarea`. Never raw Input/Textarea inside InputGroup.
• Buttons inside inputs use `InputGroup` + `InputGroupAddon`.
• Option sets (2–7 choices) use `ToggleGroup`. Don't loop Button with manual active state.
• `FieldSet` + `FieldLegend` for grouping related checkboxes/radios. Don't use a div with a heading.
• 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.

Component Structure → composition.md

• Items always inside their Group. SelectItem → SelectGroup. DropdownMenuItem → DropdownMenuGroup. CommandItem → CommandGroup.
• Dialog, Sheet, and Drawer always need a Title. DialogTitle, SheetTitle, DrawerTitle required for accessibility. Use class="sr-only" if visually hidden.
• Use full Card composition. CardHeader/CardTitle/CardDescription/CardContent/CardFooter. Don't dump everything in CardContent.
• Button has no `isPending`/`isLoading`. Compose with Spinner + data-icon + disabled.
• `TabsTrigger` must be inside `TabsList`. Never render triggers directly in Tabs.
• `Avatar` always needs `AvatarFallback`. For when the image fails to load.

Use Components, Not Custom Markup → composition.md

• Use existing components before custom markup. Check if a component exists before writing a styled div.
• Callouts use `Alert`. Don't build custom styled divs.
• Empty states use `Empty`. Don't build custom empty state markup.
• Toast via `vue-sonner`. Use toast() from vue-sonner.
• Use `Separator` instead of <hr> or <div class="border-t">.
• Use `Skeleton` for loading placeholders. No custom animate-pulse divs.
• Use `Badge` instead of custom styled spans.

Icons → icons.md

• Icons in `Button` use `data-icon`. data-icon="inline-start" or data-icon="inline-end" on the icon.
• No sizing classes on icons inside components. Components handle icon sizing via CSS. No size-4 or w-4 h-4.
• Pass icons as objects, not string keys. :icon="CheckIcon", not a string lookup.

CLI

• Apply preset codes directly with the CLI. Use npx shadcn-vue@latest apply <code> for existing projects, or npx shadcn-vue@latest init --preset <code> when initializing.

Key Patterns

These are the most common patterns that differentiate correct shadcn-vue code. For edge cases, see the linked rule files above.

<!-- Form layout: FieldGroup + Field, not div + Label. -->
<FieldGroup>
  <Field>
    <FieldLabel for="email">Email</FieldLabel>
    <Input id="email" />
  </Field>
</FieldGroup>

<!-- Validation: data-invalid on Field, aria-invalid on the control. -->
<Field data-invalid>
  <FieldLabel>Email</FieldLabel>
  <Input aria-invalid />
  <FieldDescription>Invalid email.</FieldDescription>
</Field>

<!-- Icons in buttons: data-icon, no sizing classes. -->
<Button>
  <SearchIcon data-icon="inline-start" />
  Search
</Button>

<!-- Spacing: gap-*, not space-y-*. -->
<div class="flex flex-col gap-4">  <!-- correct -->
<div class="space-y-4">           <!-- wrong -->

<!-- Equal dimensions: size-*, not w-* h-*. -->
<Avatar class="size-10">   <!-- correct -->
<Avatar class="w-10 h-10"> <!-- wrong -->

<!-- Status colors: Badge variants or semantic tokens, not raw colors. -->
<Badge variant="secondary">+20.1%</Badge>    <!-- correct -->
<span class="text-emerald-600">+20.1%</span> <!-- wrong -->

Component Selection

Key Fields

The injected project context contains these key fields:

• `aliases` → use the actual alias prefix for imports (e.g. @/, ~/), never hardcode.
• `tailwindVersion` → "v4" uses @theme inline blocks; "v3" uses tailwind.config.js.
• `tailwindCssFile` → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.
• `style` → component visual treatment (e.g. nova, vega).
• `base` → primitive library (reka). Affects component APIs and available props.
• `iconLibrary` → determines icon imports. Use @lucide/vue for lucide, @tabler/icons-vue for tabler, etc. Never assume @lucide/vue.
• `resolvedPaths` → exact file-system destinations for components, utils, hooks, etc.
• `framework` → routing and file conventions (e.g. Nuxt vs Vite SPA).
• `packageManager` → use this for any non-shadcn-vue dependency installs (e.g. pnpm add date-fns vs npm install date-fns).

See cli.md — `info` command for the full field reference.

Component Docs, Examples, and Usage

Run npx shadcn-vue@latest docs <component> to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.

npx shadcn-vue@latest docs button dialog select

When creating, fixing, debugging, or using a component, always run `npx shadcn-vue@latest docs` and fetch the URLs first. This ensures you're working with the correct API and usage patterns rather than guessing.

Workflow

1. Get project context — already injected above. Run npx shadcn-vue@latest info again if you need to refresh. 2. 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. 3. Find components — npx shadcn-vue@latest search. 4. Get docs and examples — run npx shadcn-vue@latest docs <component> to get URLs, then fetch them. Use npx shadcn-vue@latest view to browse registry items you haven't installed. To preview changes to installed components, use npx shadcn-vue@latest add --diff. 5. Install or update — npx shadcn-vue@latest add. When updating existing components, use --dry-run and --diff to preview changes first (see Updating Components below). 6. Fix imports in third-party components — After adding components from community registries, check the added non-UI files for hardcoded import paths like @/components/ui/.... These won't match the project's actual aliases. Use npx shadcn-vue@latest info to get the correct ui alias (e.g. @workspace/ui/components) 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. 7. 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. Also replace any icon imports with the project's iconLibrary from the project context (e.g. if the registry item uses @lucide/vue but the project uses hugeicons, swap the imports and icon names accordingly). Fix all issues before moving on. 8. 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, etc.), ask which registry to use. Never default to a registry on behalf of the user. 9. Switching presets — Ask the user first: overwrite, merge, or skip?

• Overwrite: npx shadcn-vue@latest apply <code>. Overwrites detected components, fonts, and CSS variables.
• Merge: npx shadcn-vue@latest init --preset <code> --force --no-reinstall, then run npx shadcn-vue@latest info to list installed components, then for each installed component use --dry-run and --diff to smart merge it individually.
• Skip: npx shadcn-vue@latest init --preset <code> --force --no-reinstall. Only updates config and CSS, leaves components as-is.
• 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 (reka) 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.

Updating Components

When 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.

1. Run npx shadcn-vue@latest add <component> --dry-run to see all files that would be affected. 2. For each file, run npx shadcn-vue@latest add <component> --diff <file> to see what changed upstream vs local. 3. Decide per file based on the diff:

• No local changes → safe to overwrite.
• Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
• User says "just update everything" → use --overwrite, but confirm first.

4. Never use `--overwrite` without the user's explicit approval.

Quick Reference

# Create a new project.
npx shadcn-vue@latest init --name my-app --preset nova
npx shadcn-vue@latest init --name my-app --preset a2r6bw --template vite

# Initialize existing project.
npx shadcn-vue@latest init --preset nova
npx shadcn-vue@latest init --defaults  # shortcut: --template=nuxt --preset=nova (base style implied)

# Apply a preset to an existing project.
npx shadcn-vue@latest apply a2r6bw

# Add components.
npx shadcn-vue@latest add button card dialog
npx shadcn-vue@latest add --all

# Search registries.
npx shadcn-vue@latest search @shadcn -q "sidebar"

# Get component docs and example URLs.
npx shadcn-vue@latest docs button dialog select

# View registry item details (for items not yet installed).
npx shadcn-vue@latest view @shadcn/button

Named presets: nova, vega, maia, lyra, mira, luma Templates: nuxt, vite, astro and laravel Preset codes: Version-prefixed base62 strings (e.g. a2r6bw), from shadcn-vue.com.

Detailed References

• rules/forms.md — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
• rules/composition.md — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
• rules/icons.md — data-icon, icon sizing, passing icons as objects
• rules/styling.md — Semantic colors, variants, class, spacing, size, truncate, dark mode, cn(), z-index
• cli.md — Commands, flags, presets, templates
• customization.md — Theming, CSS variables, extending components

shadcn-vue CLI Reference

Configuration is read from components.json.

IMPORTANT: Always run commands using the project's package runner: npx shadcn-vue@latest, pnpm dlx shadcn-vue@latest, or bunx --bun shadcn-vue@latest. Check packageManager from project context to choose the right one. Examples below use npx shadcn-vue@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 (smart merge), search, view, docs, info, build
• Templates: nuxt, vite, astro, laravel
• Presets: named, code, URL formats and fields
• Switching presets

---

Commands

init — Initialize or create a project

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

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

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

apply — Apply a preset to an existing project

npx shadcn-vue@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 shadcn-vue.com/create.

add — Add components

IMPORTANT: NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.

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

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

Smart Merge from Upstream

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

search — Search registries

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

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

view — View item details

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

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

docs — Get component documentation URLs

npx shadcn-vue@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-vue@latest docs input button:

input
  docs      https://shadcn-vue.com/docs/components/input
  examples  https://raw.githubusercontent.com/.../examples/InputExample.vue

button
  docs      https://shadcn-vue.com/docs/components/button
  examples  https://raw.githubusercontent.com/.../examples/ButtonExample.vue

Some components include an api link to the underlying library (e.g. reka-ui for the primitive components).

diff — Check for updates

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

info — Project information

npx shadcn-vue@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-vue@latest docs <component> instead.

build — Build a custom registry

npx shadcn-vue@latest build [registry] [options]

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

---

Templates

---

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) 3. URL: --preset "https://shadcn-vue.com/init?base=reka&style=nova&..."

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

Use npx shadcn-vue@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-vue@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-vue@latest init --preset <code> --force --no-reinstall, then run npx shadcn-vue@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-vue@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) 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, class, 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 Nuxt, use @nuxtjs/color-mode:

<!-- nuxt.config.ts -->
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    classSuffix: ''
  }
})

---

Changing the Theme

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

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

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

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

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

Or edit CSS variables directly in globals.css.

---

Adding Custom Colors

Add variables to the file at tailwindCssFile from npx shadcn-vue@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-vue@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 class="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 class

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

3. Add a new variant

Edit the component source to add a variant via cva:

// components/ui/Button.vue (or similar)
warning: "bg-warning text-warning-foreground hover:bg-warning/90",

4. Wrapper components

Compose shadcn-vue primitives into higher-level components:

<script setup lang="ts">
defineProps<{
  title: string
  description: string
}>()

const emit = defineEmits(['confirm'])
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <slot />
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>{{ title }}</AlertDialogTitle>
        <AlertDialogDescription>{{ description }}</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction @click="emit('confirm')">Confirm</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>

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-vue mcp        # start the MCP server (stdio)
shadcn-vue 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-vue@latest info — there is no MCP equivalent.

shadcn_vue:get_project_registries

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

Input: none

shadcn_vue:list_items_in_registries

Lists all items from one or more registries.

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

shadcn_vue:search_items_in_registries

Fuzzy search across registries.

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

shadcn_vue:view_items_in_registries

View item details including full file contents.

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

shadcn_vue: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_vue:get_add_command_for_items

Returns the CLI install command.

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

shadcn_vue: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.

Component Composition

Contents

• Items always inside their Group component
• Callouts use Alert
• Empty states use Empty component
• Toast notifications use vue-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 vue-sonner

<script setup lang="ts">
import { toast } from "vue-sonner"

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

---

Choosing between overlay components

---

Dialog, Sheet, and Drawer always need a Title

DialogTitle, SheetTitle, DrawerTitle are required for accessibility. Use class="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 default-value="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 for="email">Email</FieldLabel>
    <Input id="email" type="email" />
  </Field>
  <Field>
    <FieldLabel for="password">Password</FieldLabel>
    <Input id="password" type="password" />
  </Field>
</FieldGroup>

Use Field orientation="horizontal" for settings pages. Use FieldLabel class="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–7 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:

<script setup lang="ts">
import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
</script>

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

---

Buttons inside inputs use InputGroup + InputGroupAddon

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

Incorrect:

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

Correct:

<script setup lang="ts">
import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"
</script>

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

---

Option sets (2–7 choices) use ToggleGroup

Don't manually loop Button components with active state.

Incorrect:

<script setup lang="ts">
const selected = ref("daily")
const options = ["daily", "weekly", "monthly"]
</script>

<template>
  <div class="flex gap-2">
    <Button
      v-for="option in options"
      :key="option"
      :variant="selected === option ? 'default' : 'outline'"
      @click="selected = option"
    >
      {{ option }}
    </Button>
  </div>
</template>

Correct:

<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
</script>

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

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>

---

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 class="gap-3">
    <Field orientation="horizontal">
      <Checkbox id="dark" />
      <FieldLabel for="dark" class="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 for="email">Email</FieldLabel>
  <Input id="email" aria-invalid />
  <FieldDescription>Invalid email address.</FieldDescription>
</Field>

<!-- Disabled. -->
<Field data-disabled>
  <FieldLabel for="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/vue, tabler → @tabler/icons-vue, etc. Never assume @lucide/vue.

---

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 class="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 class="size-4" data-icon="inline-start" />
  Search
</Button>

<DropdownMenuItem>
  <SettingsIcon class="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:

<script setup lang="ts">
const iconMap = {
  check: CheckIcon,
  alert: AlertIcon,
}

defineProps({
  icon: String
})
</script>

<template>
  <component :is="iconMap[icon]" />
</template>

Correct:

<script setup lang="ts">
// Import from the project's configured iconLibrary (e.g. @lucide/vue, @tabler/icons-vue).
import { CheckIcon } from "@lucide/vue"

defineProps({
  icon: Object // Or Component
})
</script>

<template>
  <component :is="icon" />
</template>

<!-- Usage -->
<StatusBadge :icon="CheckIcon" />

Styling & Customization

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

Contents

• Semantic colors
• Built-in variants first
• class 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 class="bg-blue-500 text-white">
  <p class="text-gray-600">Secondary text</p>
</div>

Correct:

<div class="bg-primary text-primary-foreground">
  <p class="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 class="text-emerald-600">+20.1%</span>
<span class="text-green-500">Active</span>
<span class="text-red-600">-3.2%</span>

Correct:

<Badge variant="secondary">+20.1%</Badge>
<Badge>Active</Badge>
<span class="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 class="border border-input bg-transparent hover:bg-accent">
  Click me
</Button>

Correct:

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

---

class for layout only

Use class 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 class="bg-blue-100 text-blue-900 font-bold">
  <CardContent>Dashboard</CardContent>
</Card>

Correct:

<Card class="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 class="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 class strings.

Incorrect:

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

Correct:

<script setup lang="ts">
import { cn } from "@/lib/utils"
</script>

<template>
  <div :class="cn('flex items-center', isActive ? 'bg-primary text-primary-foreground' : 'bg-muted')">
</template>

---

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].