🎯 Brand Colors
Primary / Secondary / Accent / Destructive
📋 Surface Colors
Background / Card / Popover / Muted
🔲 Border & Input
Border / Input / Ring
📐 Border Radius
0.5rem

👁️ Live Preview

📦 Component Preview

Primary Secondary Destructive Muted

📝 Muted Surface

This card uses --muted background with --muted-foreground text.

📋 Generated CSS Variables


        


        
        

          
❓ Frequently Asked Questions

          

            
What is Shadcn/UI Theme Builder? 

            
This tool helps you visually customize CSS variables for Shadcn/UI components. Adjust colors, border radius, and preview changes in real-time. Copy the generated CSS directly into your project's globals.css file.

          

          

            
How do CSS variables work in Shadcn/UI? 

            
Shadcn/UI uses HSL color values stored as CSS custom properties (e.g., --primary: 222.2 47.4% 11.2%). These are consumed via hsl(var(--primary)) throughout components. The format separates hue, saturation, and lightness for flexible theming.

          

          

            
How do I apply the generated theme to my project? 

            
Copy the generated CSS and paste it into your app/globals.css file (for Next.js) or your main CSS file. The :root block defines light mode, and .dark block defines dark mode. Make sure your HTML root element toggles the .dark class for dark mode.

          

          

            
What's the difference between Light and Dark mode editing? 

            
Use the Light/Dark toggle to edit variables for each mode independently. Light mode values go into :root, dark mode values go into .dark. Switch between modes to fine-tune both appearances.

          

          

            
Can I export and share my theme? 

            
Yes! Click "Export JSON" to download your theme configuration as a JSON file. You can later import it using "Import" to restore or share your custom theme with others.

          

          

            
What is the --radius variable for? 

            
The --radius variable controls the global border radius for all Shadcn/UI components. Adjust it to make components more rounded (higher values) or more squared (lower values). Default is 0.5rem.