shadcn/ui Customization & Theming

What problem does it solve?

This Skill helps teams and developers quickly implement consistent theming for shadcn/ui components, enabling fast, repeatable color schemes and reliable dark mode support across projects.

Core Features & Use Cases

• CSS Variables & Design Tokens: Centralize color, border, and radius values for consistent UI theming.
• Dark Mode & Theming: Seamlessly toggle between light and dark palettes with a single class or theme provider.
• Theme Generation & Configuration: Generate and apply color schemes via CSS variables and tokens in components.json and Tailwind setup.
• Use Case: You want a blue theme across a dashboard that automatically adapts to dark mode; update your base tokens and the UI updates everywhere.

Quick Start

Use shadcn/ui customization to set CSS variables in your global styles, enable dark mode by adding the 'dark' class or a theme provider, and reference the theming guide in the 'references' directory to align with your project setup.