shadcn-ui-expert
Installation
Summary
Build accessible React components with shadcn-ui, Tailwind CSS, and Radix UI primitives.
- Supports 50+ pre-built components across forms, layouts, dialogs, tables, data display, and feedback patterns, installable via CLI or natural language requests
- Works with Next.js, Vite, Remix, Astro, Laravel, Gatsby, and React Router; integrates with shadcn MCP server for component discovery
- All components use Tailwind CSS for styling with built-in dark mode, CSS variable theming, and component variants for customization
- Form components integrate with React Hook Form and Zod for validation; composition-based architecture encourages combining small components over modifying large ones
- Accessibility and keyboard navigation built-in through Radix UI primitives; no runtime overhead beyond Radix dependencies
SKILL.md
shadcn-ui Expert
shadcn-ui is a collection of beautifully-designed, accessible React components built with TypeScript, Tailwind CSS, and Radix UI primitives. This skill guides you through component selection, implementation, customization, and best practices.
Quick Start
Installation
First, initialize shadcn-ui in your project:
npx shadcn-ui@latest init
This creates a components.json file for configuration. Choose your framework:
- Next.js (App Router recommended)
- Vite
- Remix
- Astro
Related skills