shadcn-components

name	shadcn-components
description	Build UI using shadcn/ui components. Use when creating pages, forms, modals, navigation, sidebars, or any frontend UI. Provides component selection, composition patterns, and installation commands. Always activate before writing custom UI code.

shadcn UI Components

Required Workflow

Before writing ANY UI code:

1. Check docs/shadcn-components.md for relevant primitives
2. Use MCP mcp__shadcn__search_items_in_registries to find blocks matching your need
3. Install blocks with npx shadcn@latest add <block> before customizing
4. Only build custom components when no shadcn primitive or block exists

Composition Philosophy

shadcn components are primitives meant to be stacked, not standalone solutions.

Mental model: Decompose UI into shadcn primitives first:

• Login page = Card + Form + Field + Input + Button
• Settings page = Tabs + Card + Form + Switch + Select
• Dashboard = Sidebar + Card + Table + Chart + Badge
• Modal form = Dialog + Form + Field + Input + Button

Pattern: Container → Layout → Interactive → Feedback

• Containers: Card, Dialog, Sheet, Sidebar
• Layout: Tabs, Accordion, Separator, ScrollArea
• Interactive: Button, Input, Select, Switch, Checkbox
• Feedback: Alert, Toast, Badge, Skeleton

DO NOT Build Custom Implementations Of:

Buttons, inputs, dialogs, dropdowns, cards, forms, navigation, tables, tooltips, popovers, or any component that exists in shadcn. Use the primitives.

MCP Tools Available

• mcp__shadcn__search_items_in_registries - Search for components/blocks by keyword
• mcp__shadcn__view_items_in_registries - View component details and files
• mcp__shadcn__get_item_examples_from_registries - Get usage examples
• mcp__shadcn__get_add_command_for_items - Get install command

Project Configuration

• Style: radix-mira (compact/dense interface)
• Base color: mist
• Theme: mist
• Chart Color: mist
• Heading: Source Serif 4
• Font: Figtree
• Radius: Large (0.875rem)
• Icons: Lucide
• Components location: src/components/ui/
• Preset code: --preset b4cwnZvlhI

Styling

• Use cn() utility from @/lib/utils for conditional classes
• Theme colors use CSS variables in globals.css
• Components support light/dark mode via .dark class on root