Shadcn.io is not affiliated with official shadcn/ui
React Themes for shadcn/ui
60+ color themes for shadcn/ui. Pastels, dark mode, brutalist, brand-inspired. Copy CSS variables into your Next.js project.
You know that moment when your app works but looks... beige? The default shadcn/ui theme is fine, but "fine" doesn't ship. You need pastels for that wellness app, something moody for your developer tool, maybe brutalist vibes for a portfolio that actually gets remembered.
Here's 60+ themes. Each one's a complete palette—light mode, dark mode, all the semantic colors working together. Copy the CSS variables, paste them in, done. Your app looks intentional instead of default.
Pick a Vibe
Color Themes
When you just need a solid brand color. Blue for trust, green for growth, red for urgency—the classics.
Blue
The professional default
Green
Fresh and eco-friendly
Red
Bold and urgent
Orange
Energetic and warm
Yellow
Optimistic and bright
Violet
Creative and premium
Rose
Elegant and soft
Pastel Themes
Soft colors that don't assault the eyes. Great for consumer apps, creative tools, anything that shouldn't feel corporate.
Marshmallow
Pink and purple softness
Bubblegum
Playful candy vibes
Catppuccin
The community favorite
Pastel Dreams
Dreamy and gentle
Soft Pop
Pastels with personality
Dark Themes
For apps where users spend hours staring at screens. Developer tools, dashboards, anything used at 2am.
VS Code
Familiar IDE comfort
Cosmic Night
Deep space atmosphere
Midnight Bloom
Dark with floral hints
Caffeine
Late-night coffee energy
Doom 64
Gothic gamer aesthetic
Cyberpunk
Neon-soaked future
Dark Matter
As dark as it gets
Minimal Themes
When you want the design to disappear. Content first, chrome never.
Modern Minimal
Clean and neutral
Clean Slate
Pure grayscale
Amber Minimal
Warm simplicity
Corporate
Safe for the enterprise
Graphite
Sleek metallic gray
Mono
Black, white, nothing else
Creative Themes
For portfolios, artistic projects, and apps that should make people stop scrolling.
Art Deco
1920s golden age
Neo Brutalism
Raw and unapologetic
Studio Ghibli
Anime whimsy
Starry Night
Van Gogh's palette
Northern Lights
Aurora magic
Candyland
Rainbow everything
Claymorphism
Soft 3D surfaces
Amethyst Haze
Mystical purple
Warm Themes
Cozy palettes that feel like a warm drink. Good for food, lifestyle, anything that should feel inviting.
Mocha Mousse
Pantone 2025
Solar Dusk
Sunset warmth
Sunset Horizon
Twilight colors
Summer
Sunny and bright
Tangerine
Citrus fresh
Tech Themes
For SaaS, dev tools, and products that should look like they were built by people who care about craft.
Brand Themes
Inspired by products you know. Not official, just the aesthetic.
Spotify
That iconic green
Claude
Warm terracotta
Slack
Aubergine workspace
Supabase
Developer emerald
Classic blue bird
Vercel
Pure black and white
Valorant
Competitive red
Marvel
Superhero bold
Luxury Themes
For premium products, fintech, fashion—anything that needs to feel expensive.
Elegant Luxury
Dark with gold
Violet Bloom
Rich purple elegance
Quantum Rose
Futuristic rose gold
Perpetuity
Timeless classics
Retro Themes
Nostalgia as a design choice. Arcades, paper, the aesthetics of things that existed before screens.
Nature Themes
Earth tones and organic palettes. For outdoor brands, environmental apps, or just calming interfaces.
Using Themes
Install with the CLI:
npx shadcn@latest add https://shadcn.io/r/art-deco.jsonOr just copy the variables into globals.css:
@layer base {
:root {
--background: oklch(0.96 0.03 106.96);
--foreground: oklch(0.40 0.07 91.45);
/* ... */
}
.dark {
--background: oklch(0.32 0 0);
--foreground: oklch(0.96 0.03 106.96);
/* ... */
}
}Every shadcn/ui component picks up the new colors automatically. No component changes needed.
FAQ
Was this page helpful?
Sign in to leave feedback.