shadcn▌

Expert guidance for discovering, installing, and customizing shadcn/ui components in your project. \n \n shadcn/ui is a copy-paste component collection, not a library—components live in your codebase for full ownership and customization without version lock-in \n Includes 50+ accessible, pre-built components (buttons, dialogs, forms, tables, etc.) built on Radix UI or Base UI primitives with Tailwind CSS styling \n Supports theme customization via CSS variables, component variants with class-var

Accessible Vue/Nuxt component library with Reka UI, Tailwind CSS, and dark mode support. \n \n Provides 50+ pre-built, accessible components (buttons, cards, dialogs, data tables, forms) installable via CLI with automatic TypeScript path configuration \n Requires initialization with npx shadcn-vue@latest init to set up components.json , Tailwind CSS variables, and path aliases before adding components \n Supports dark mode through CSS variables, Auto Form for dynamic form generation, and TanStac

Manage shadcn/ui components, projects, and design systems with CLI-driven installation and composition. \n \n Adds components as source code to projects via CLI; supports component search, documentation lookup, and registry browsing across official and community registries \n Enforces strict composition rules: FieldGroup + Field for forms, semantic color tokens, gap-based spacing, and component-specific patterns (e.g., SelectItem inside SelectGroup, DialogTitle required for accessibility) \n Pro

Production-ready setup for Tailwind CSS v4 with shadcn/ui, dark mode, and CSS variable architecture. \n \n Four-step architecture: define CSS variables at root level with hsl() wrapper, map to Tailwind utilities via @theme inline , apply base styles, and enable automatic dark mode switching \n Vite plugin-based configuration (no PostCSS or tailwind.config.ts needed); requires @tailwindcss/vite and empty \"config\" in components.json \n Semantic color tokens for destructive, success, warning, and

Complete guide to building accessible React components with shadcn/ui, Radix UI, and Tailwind CSS. \n \n Install and configure components via CLI ( npx shadcn@latest add ), then customize directly in your project since you own the code \n Covers 10+ core components: buttons, inputs, forms with Zod validation, cards, dialogs, dropdowns, sheets, tables, toasts, and charts built on Recharts \n Full Next.js App Router integration with Server Components, form handling, and metadata support; all compo

Complete shadcn/ui component management for adding, searching, fixing, styling, and composing UI. \n \n Manages the full component lifecycle: search registries, add components, view docs, preview changes with --dry-run and --diff , and intelligently merge upstream updates while preserving local modifications \n Enforces critical rules across forms (FieldGroup, Field, InputGroup, validation states), composition (Groups, overlays, Card structure), styling (semantic colors, gap spacing, size shorth

Build production-grade Next.js applications or systematically migrate existing frontends to Next.js + shadcn/ui following strict design principles and best practices.

58 community-maintained best practices for shadcn/ui component development, organized by priority and impact. \n \n Covers 10 rule categories spanning CLI setup, component architecture, accessibility, styling, forms, data display, layout, composition, performance, and state management \n Each rule includes specific guidance on Radix primitives, Tailwind styling, React Hook Form integration, and accessibility compliance \n Prioritized by impact: CRITICAL rules for setup and architecture, HIGH for

Build distinctive, production-grade interfaces that avoid generic "AI slop" aesthetics.

shadcn/ui is a collection of re-usable React components built with Radix UI primitives and styled with Tailwind CSS. Unlike traditional component libraries, shadcn/ui components are copied directly into your project, giving you full ownership and customization control. Components are accessible, customizable, and open source.