shadcn/ui Theme Generator - Custom CSS Variables
Create a custom theme for shadcn/ui.
Base
Primary
Secondary
Muted & Accent
Destructive
Borders & Input
Preview
Component preview
Card content
Muted text example
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--card: 0 0% 100%;
--card-foreground: 0 0% 4%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 4%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 9%;
--radius: 0.5rem;
}
}Supported formats
How it works
Choose your main colors (primary, secondary, accent)
Define background and text colors
Preview components with your theme
Copy CSS for your globals.css
Privacy guaranteed
Local generation. No data transmitted.
Customize shadcn/ui with your colors
shadcn/ui uses an elegant CSS variables system for theming. Our generator lets you create a custom theme in just a few clicks, compatible with all library components. Define your colors and get ready-to-copy code. Generate a complete shadcn/ui theme: HSL tokens, light and dark mode, radius, ring and accent palette — ready to paste into your globals.css file. Instantly convert between HEX, RGB, HSL, HSV and CMYK, adjust hue, saturation and lightness with real-time preview and check WCAG AA/AAA contrast for sRGB-compliant accessibility.
Optimized HSL variables
Colors are generated in HSL format without the function, as required by shadcn/ui (e.g., "222.2 84% 4.9%"). This allows perfect integration with Tailwind and color calculations.
Automatic light and dark mode
Our generator simultaneously creates variables for light and dark mode. Colors are automatically adjusted for optimal contrast in each mode, while maintaining your brand identity.
Real-time component preview
Immediately visualize how your shadcn/ui components look with your theme. Buttons, cards, forms, dialogs - all elements display with your custom colors for validation before integration.
Next.js and React integration
The generated code integrates perfectly into your Next.js (App Router or Pages Router) and React projects. Simply copy into globals.css and your theme is active. Compatible with next-themes for theme switching.
Free tool for React developers
Our shadcn/ui theme generator is completely free. Create custom themes for all your React and Next.js projects without any limits. Perfect for agencies, freelancers and product teams.
shadcn/ui and Radix: why this winning duo
shadcn/ui combines Tailwind's flexibility with Radix UI's native accessibility. Our generator produces a theme file ready for npx shadcn-ui init, with light mode, dark mode and HSL variables.