shadcn-v3_skill

Overview

This skill shows how to set up Tailwind CSS v4 with shadcn/ui using the @theme inline pattern and a CSS variable architecture. It covers theme mapping, dark mode, component composition, accessibility guidelines, and React Hook Form integration to build consistent, accessible UI primitives in TypeScript React projects.

How this skill works

The setup maps Tailwind tokens to CSS variables using @theme inline and defines color tokens in :root and .dark using hsl() values. Tailwind v4 configuration is driven by CSS (not a tailwind.config.ts), the @tailwindcss/vite plugin is used for Vite, and components are composed from shadcn primitives with wrapper patterns, CVA for variants, and forwardRef for form compatibility. Semantic colors adapt automatically to dark mode without dark: variants.

When to use it

• Initializing a new React or Next.js project that targets Tailwind v4 and shadcn/ui
• Setting up dark mode and semantic color tokens that adapt automatically
• Composing or extending shadcn components without modifying originals
• Integrating forms with React Hook Form while preserving accessibility and refs
• Fixing issues like colors not applying, theme variables broken, or tw-animate-css errors during migration from v3

Best practices

• Use @theme inline to map all CSS variables and delete any tailwind.config.ts file
• Wrap color values with hsl() in :root and .dark and define semantic tokens (--background, --foreground, etc.)
• Use @tailwindcss/vite plugin for Vite projects instead of PostCSS plugins
• Compose complex UI from smaller shadcn primitives and extend via wrapper pattern (don’t modify originals)
• Use CVA for variant systems, cn() for conditional classes, and forwardRef for form-compatible components
• Leverage Radix UI primitives for built-in accessibility and test keyboard/screen reader behavior

Example use cases

• Create a theme-safe button library where primary/secondary colors follow dark mode automatically
• Build accessible dialog and dropdown components using Radix primitives and shadcn composition
• Migrate a project from Tailwind v3 to v4 by switching to CSS-variable driven theme and removing tailwind.config.ts
• Integrate a custom input component with React Hook Form using forwardRef and ARIA attributes
• Resolve color or animation token issues by ensuring @theme inline mapping and hsl() color wrappers