Shadcn Component Management

Prerequisites

Verify project setup:

shadcn___get_project_registries

If no components.json exists, instruct user: npx shadcn@latest init

Quick Add Workflow

For simple component additions (e.g., "add a date picker"):

Search - Find component in registry:

shadcn___search_items_in_registries(registries, query)

View - Get implementation details:

shadcn___view_items_in_registries(items: ["@shadcn/component-name"])

Examples - Get usage demo:

shadcn___get_item_examples_from_registries(registries, query: "component-demo")

Install - Get add command:

shadcn___get_add_command_for_items(items: ["@shadcn/component-name"])

Output - Provide installation command and example code

Complex Build Workflow

For multi-component features (e.g., "build a login form"), see references/workflows.md.

When to use Complex Build:

• Feature requires 3+ components

• Need component hierarchy planning

• Building complete sections (forms, dashboards, modals)

Component Naming Patterns

Common search queries:

• Forms: form , input , select , checkbox , radio-group

• Layout: card , dialog , sheet , drawer , tabs

• Feedback: alert , toast , skeleton , progress

• Navigation: button , dropdown-menu , navigation-menu

Example queries for demos: form-demo , card-with-form , dialog-demo

After Implementation

Always run audit:

shadcn___get_audit_checklist

Custom Styling & Theming

Shadcn provides structural foundation with default styling. For custom aesthetics:

Invoke frontend-design skill when:

• User wants unique/distinctive visual style beyond default shadcn theme

• Need custom typography, color schemes, or motion effects

• Building landing pages or marketing sites requiring creative design

• User mentions "custom styling", "unique design", "not generic"

Workflow:

• Use shadcn-management for component structure and composition

• Invoke frontend-design for visual customization:

• Custom CSS variables in globals.css

• Tailwind theme extensions in tailwind.config.js

• Animation and micro-interaction enhancements

• Typography and color refinements

Customization targets:

• @/app/globals.css

• CSS variables, custom fonts

• tailwind.config.js

• theme colors, fonts, animations

• Component-level className overrides