Custom shadcn/ui Themes
Stop using the default gray theme. Generate a complete globals.css with your brand colors, typography, and full dark mode support.
Generate Your ThemeHow shadcn/ui Theming Works
shadcn/ui is a collection of beautifully designed, accessible components that you copy directly into your project. Unlike traditional component libraries, you own the code—and that includes the theme.
Theming in shadcn/ui is powered by CSS custom properties defined in your globals.css file. Every component references these variables, so changing one variable updates every component that uses it.
globals.css structure
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
/* ... dark mode overrides */
}
}Why Customize Your shadcn/ui Theme?
Brand Identity
The default theme is intentionally neutral. Your product deserves colors that reflect your brand, not a generic gray palette.
Dark Mode Done Right
Dark mode isn't just inverting colors. PickCSS generates properly balanced dark variants that maintain contrast and readability.
Instant Updates
Change one CSS variable and every component updates automatically. No need to hunt through component files or override styles.
What PickCSS Generates
Complete globals.css
- All shadcn/ui color variables
- Light and dark mode variants
- Border radius and spacing tokens
- Chart and status colors
Bonus Exports
- Tailwind config extension
- TypeScript theme types
- JSON tokens for Figma
- AI skill files for Claude Code
Frequently Asked Questions
How do I customize shadcn/ui colors?
shadcn/ui uses CSS custom properties defined in globals.css. To customize colors, modify the :root block with your brand colors, and the .dark block for dark mode. PickCSS generates a complete globals.css file with your custom palette.
Does shadcn/ui support dark mode?
Yes. shadcn/ui has built-in dark mode support using the "class" strategy. When you add the "dark" class to your html element, all CSS variables switch to their dark variants. PickCSS generates both light and dark mode variables automatically.
Can I use PickCSS themes with existing shadcn/ui projects?
Yes. PickCSS exports a globals.css file that's fully compatible with shadcn/ui. You can either replace your existing globals.css or merge the :root variables. All component colors will automatically update.
What's the difference between shadcn/ui default theme and a custom theme?
The default shadcn/ui theme uses a neutral gray palette. A custom theme replaces those colors with your brand colors while maintaining the same semantic structure (primary, secondary, muted, accent, etc.). Your components look unique while keeping the same excellent UX.
Create Your Custom shadcn/ui Theme
Pick your colors through simple binary choices. Get a complete globals.css with light mode, dark mode, and all the extras.