shadcn-ui-expert

SKILL.md

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

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