Material 3 colors
for shadcn/ui
Pick a seed color and variant. See the theme change.
Install with one command.
Tonal Spot
Expressive
Fidelity
Vibrant
Neutral
Mono
Content
Rainbow
Fruit Salad
One color in, entire palette out
Each shadcn token maps to a Material 3 color role. They all derive from your single seed color.
Primary
Secondary
Accent
Muted
Destructive
Card
Background
Border
Chart 1
Chart 2
Chart 3
Chart 4
Chart 5
Scoped themes, anywhere
Generate a theme from any image and scope it to a card, section, or entire page. Each area gets its own palette — buttons, text, and borders all adapt independently.
Your components, new colors
Nothing is forked or patched. shadcn's CSS variables get mapped to Material 3 roles — buttons, badges, inputs all pick up the theme automatically.
Buttons
Badges & Inputs
DefaultSecondaryDestructiveOutline
Controls
All colors shift with your seed — primary, secondary, accent, and destructive.
Ready to use
Static CSS themes or runtime React bindings — pick what fits your project.