What problem does it solve? Setting up and building accessible React interfaces with shadcn/ui involves many moving parts: CLI initialization, Tailwind configuration, CSS variable theming, Radix UI primitives, and form validation wiring. This Skill consolidates installation commands, configuration files, and copy-ready component patterns so you avoid piecing together scattered documentation. ## Core Features & Use Cases - Installation & Configuration: Step-by-step setup for Next.js, Vite, Remix, and TanStack Start, including tailwind.config, tsconfig paths, and CSS variables for light/dark themes. - Component Patterns: Ready-to-use implementations for Button, Input, Card, Dialog, Sheet, Select, Menubar, Table, Toast, and forms built with React Hook Form and Zod validation. - Customization & Theming: Guidance on extending components with class-variance-authority variants, custom themes via CSS variables, and registry configuration for private component distribution. - Use Case: Build a settings page by installing card, sheet, select, and switch components, wire a validated profile form with Zod schemas, and show toast notifications on submission. ## Quick Start Ask the AI to set up shadcn/ui in a Next.js project and build a validated contact form using the Form, Input, and Button components.
