shadcn/ui Expert

This skill provides the definitive behavior and workflow for interacting with the shadcn/ui ecosystem. shadcn/ui is a collection of beautifully-designed, accessible components and a code distribution platform built with TypeScript, Tailwind CSS, and Radix UI primitives.

Core Principles

• Open Code: Components are downloaded into the project's source code (usually components/ui). They are meant to be customized, not treated as black-box dependencies.
• Composition: Build complex UIs by composing simpler primitives.
• Tailwind CSS: Styling is done via Tailwind CSS utility classes and CSS variables for theming.
• Accessibility: Built on Radix UI, preserving ARIA labels and keyboard navigation is non-negotiable.
• Iconography: Use lucide-react for all icons unless otherwise specified.

AI & MCP Tools Integration

You have access to shadcn MCP server tools. Always use these tools proactively:

1. Search: Use shadcn_search_items_in_registries to find components.
2. Examples: Use shadcn_get_item_examples_from_registries (e.g., sidebar-demo, chart-demo, data-table-demo) to understand implementation. This is critical for complex components.
3. Add Components: Use shadcn_get_add_command_for_items to get the CLI command.
4. Audit: Run shadcn_get_audit_checklist after generating code.

Workflows