Material Design Shadcn Theme
Google Material Design inspired theme with proper elevation and purple accents for shadcn/ui. Official design system feel with tested principles. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Material Design Shadcn Theme
Google spent over a decade and millions of dollars perfecting Material Design principles through extensive user testing and research. Instead of reinventing the wheel, this theme brings those proven design patterns to shadcn with proper elevation, motion principles, and that distinctive purple.
Perfect for Android apps, enterprise software, Google Workspace tools, or any React project where you want the credibility and familiarity of a battle-tested design system that billions of users already understand.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/material-design.jsonnpx shadcn@latest add https://www.shadcn.io/registry/material-design.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/material-design.jsonbunx shadcn@latest add https://www.shadcn.io/registry/material-design.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.98 0.01 334.35);
--foreground: oklch(0.22 0 0);
--card: oklch(0.96 0.01 335.69);
--card-foreground: oklch(0.14 0 0);
--popover: oklch(0.95 0.01 316.67);
--popover-foreground: oklch(0.40 0.04 309.35);
--primary: oklch(0.51 0.21 286.50);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.49 0.04 300.23);
--secondary-foreground: oklch(1.00 0 0);
--muted: oklch(0.96 0.01 335.69);
--muted-foreground: oklch(0.14 0 0);
--accent: oklch(0.92 0.04 303.47);
--accent-foreground: oklch(0.14 0 0);
--destructive: oklch(0.57 0.23 29.21);
--border: oklch(0.83 0.02 308.26);
--input: oklch(0.57 0.02 309.68);
--ring: oklch(0.50 0.13 293.77);
--chart-1: oklch(0.61 0.21 279.42);
--chart-2: oklch(0.72 0.15 157.67);
--chart-3: oklch(0.66 0.17 324.24);
--chart-4: oklch(0.81 0.15 127.91);
--chart-5: oklch(0.68 0.17 258.25);
--sidebar: oklch(0.99 0 0);
--sidebar-foreground: oklch(0.15 0 0);
--sidebar-primary: oklch(0.56 0.11 228.27);
--sidebar-primary-foreground: oklch(0.98 0 0);
--sidebar-accent: oklch(0.95 0 0);
--sidebar-accent-foreground: oklch(0.25 0 0);
--sidebar-border: oklch(0.90 0 0);
--sidebar-ring: oklch(0.56 0.11 228.27);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Roboto, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 1rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
}
.dark {
--background: oklch(0.15 0.01 317.69);
--foreground: oklch(0.95 0.01 321.50);
--card: oklch(0.22 0.02 322.13);
--card-foreground: oklch(0.95 0.01 321.50);
--popover: oklch(0.22 0.02 322.13);
--popover-foreground: oklch(0.95 0.01 321.50);
--primary: oklch(0.60 0.22 279.81);
--primary-foreground: oklch(0.98 0.01 321.51);
--secondary: oklch(0.45 0.03 294.79);
--secondary-foreground: oklch(0.95 0.01 321.50);
--muted: oklch(0.22 0.01 319.50);
--muted-foreground: oklch(0.70 0.01 320.70);
--accent: oklch(0.35 0.06 299.57);
--accent-foreground: oklch(0.95 0.01 321.50);
--destructive: oklch(0.57 0.23 29.21);
--border: oklch(0.40 0.04 309.35);
--input: oklch(0.40 0.04 309.35);
--ring: oklch(0.50 0.15 294.97);
--chart-1: oklch(0.50 0.25 274.99);
--chart-2: oklch(0.60 0.15 150.16);
--chart-3: oklch(0.65 0.20 309.96);
--chart-4: oklch(0.60 0.17 132.98);
--chart-5: oklch(0.60 0.20 255.25);
--sidebar: oklch(0.20 0.01 317.74);
--sidebar-foreground: oklch(0.95 0.01 321.50);
--sidebar-primary: oklch(0.59 0.11 225.82);
--sidebar-primary-foreground: oklch(0.95 0.01 321.50);
--sidebar-accent: oklch(0.30 0.01 319.52);
--sidebar-accent-foreground: oklch(0.95 0.01 321.50);
--sidebar-border: oklch(0.35 0.01 319.53 / 30%);
--sidebar-ring: oklch(0.59 0.11 225.82);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Roboto, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 1rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-destructive-foreground: var(--destructive-foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
}Why this theme actually works
Material Design isn't just a trend—it's based on actual physics and extensive user research. The elevation system mimics real-world paper and lighting, which makes interfaces feel intuitive because they follow patterns humans already understand from the physical world.
Most themes that claim to be "Material" just slap some drop shadows on flat design and call it a day. This theme actually follows the proper elevation hierarchy, color theory, and interaction patterns that Google documented in their design system.
Dark mode follows Material Design 3 principles with proper surface tones that maintain elevation relationships even in low light. The purple primary is Google's tested choice for broad appeal—vibrant enough to feel modern but professional enough for business use.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Roboto font is Material Design's official typeface, giving you that authentic Google ecosystem feel without any licensing issues.
The purple primary represents interactivity and selection using Google's tested color psychology. The generous border radius and proper shadow system create that signature Material "paper on paper" elevation effect.
All contrast ratios pass WCAG AA standards because Google built accessibility into Material Design from the ground up. Since it uses standard shadcn color tokens, your TypeScript autocomplete works perfectly.
How to use this in projects
The purple should indicate interactivity—buttons, links, selected states, active navigation items. Use the elevation system meaningfully: higher shadows for more important elements, lower shadows for secondary content.
The clean whites and grays should dominate the interface, following Material's philosophy of letting content be the hero. This works especially well for productivity apps, enterprise software, or any interface where clarity and efficiency matter more than personality.
In practice, embrace the elevation system but don't go overboard. Too many floating elements creates visual chaos. The goal is clear hierarchy and intuitive interaction patterns that billions of users already understand from Android and Google products.
You might also like
Violet Theme
Material Design inspired purple theme
Blue Theme
Clean blue theme with Material aesthetics
Corporate Theme
Professional corporate design theme
Slack Theme
Modern workspace inspired theme
Vercel Theme
Clean minimalist development theme
Mono Theme
Monochromatic theme with clean lines
FAQ
Ghibli Studio Shadcn Theme
Studio Ghibli inspired theme with warm earth tones and gentle greens for shadcn/ui. Whimsical nature-inspired design with organic feel. TypeScript ready.
Marvel Shadcn Theme
Marvel Comics inspired theme with bold reds and heroic blues for shadcn/ui. Comic book aesthetic with strong visual impact. TypeScript ready.