shadcn-setup-and-theming

Install shadcn/ui by running the CLI in your React + TypeScript project, which configures Tailwind CSS, PostCSS, and generates components.json with correct import aliases and component paths. The Skill automates this setup for Next.js App Router and Vite workflows.

components.json is a configuration file that tells shadcn/ui where your Tailwind config, global CSS, and component directories are located. Correct configuration ensures shadcn components install to the right paths and respect your project structure.

Define dark mode tokens in your Tailwind configuration and design system theme, then configure shadcn/ui to apply these tokens to components. The Skill handles token generation and dark mode setup for consistent theming across light and dark modes.

Yes. Customize design tokens—colors, radius, and typography—in your theme configuration, and shadcn/ui components automatically inherit these values. The Skill defines and adjusts these tokens to ensure consistency across your entire component library.

Misconfigurations in components.json, incorrect import alias paths, or incomplete Tailwind setup cause these issues. The Skill diagnoses and repairs these problems, ensuring import paths align with your project structure and theme tokens apply correctly.

Document your design tokens and components.json configuration so future component generation applies the same theme automatically. The Skill creates repeatable setup documentation, ensuring new components inherit your design system without manual adjustment.