Art Deco Shadcn Theme
Elegant art deco theme with golden yellows and luxurious typography for shadcn/ui. Professional design inspired by 1920s glamour. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Art Deco Shadcn Theme
Spent way too much time looking at 1920s design lately and figured someone should make a theme that actually captures that art deco elegance without looking like a costume party. This theme gives you that luxurious, sophisticated feel with golden yellows and rich typography.
Perfect for portfolio sites, luxury brand apps, creative agencies, or any React project where you want to convey premium quality and timeless style. The Delius Swash Caps font really sells the art deco vibe without being over the top.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/art-deco.jsonnpx shadcn@latest add https://www.shadcn.io/registry/art-deco.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/art-deco.jsonbunx shadcn@latest add https://www.shadcn.io/registry/art-deco.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.96 0.03 106.96);
--foreground: oklch(0.40 0.07 91.45);
--card: oklch(0.98 0.04 95.41);
--card-foreground: oklch(0.32 0 0);
--popover: oklch(0.98 0.04 95.41);
--popover-foreground: oklch(0.32 0 0);
--primary: oklch(0.77 0.14 91.05);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.67 0.13 61.29);
--secondary-foreground: oklch(0 0 0);
--muted: oklch(0.93 0.03 106.91);
--muted-foreground: oklch(0.32 0 0);
--accent: oklch(0.89 0.18 95.32);
--accent-foreground: oklch(0.32 0 0);
--destructive: oklch(0.70 0.20 32.32);
--border: oklch(0.83 0.11 92.68);
--input: oklch(0.65 0.13 81.56);
--ring: oklch(0.75 0.15 83.98);
--chart-1: oklch(0.89 0.18 95.32);
--chart-2: oklch(0.67 0.13 61.29);
--chart-3: oklch(0.65 0.13 81.56);
--chart-4: oklch(0.75 0.15 83.98);
--chart-5: oklch(0.77 0.14 91.05);
--sidebar: oklch(0.96 0.03 106.96);
--sidebar-foreground: oklch(0.32 0 0);
--sidebar-primary: oklch(0.77 0.14 91.05);
--sidebar-primary-foreground: oklch(0.32 0 0);
--sidebar-accent: oklch(0.89 0.18 95.32);
--sidebar-accent-foreground: oklch(0.32 0 0);
--sidebar-border: oklch(0.65 0.13 81.56);
--sidebar-ring: oklch(0.75 0.15 83.98);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Delius Swash Caps;
--font-serif: Delius Swash Caps;
--font-mono: Delius Swash Caps;
--radius: 0.625rem;
--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.32 0 0);
--foreground: oklch(0.96 0.03 106.96);
--card: oklch(0.41 0 0);
--card-foreground: oklch(0.96 0.03 106.96);
--popover: oklch(0.41 0 0);
--popover-foreground: oklch(0.96 0.03 106.96);
--primary: oklch(0.84 0.17 82.56);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.47 0.11 50.84);
--secondary-foreground: oklch(0.96 0.03 106.96);
--muted: oklch(0.44 0 0);
--muted-foreground: oklch(0.96 0.03 106.96);
--accent: oklch(0.66 0.14 80.23);
--accent-foreground: oklch(0 0 0);
--destructive: oklch(0.66 0.23 35.40);
--border: oklch(0.47 0.11 50.84);
--input: oklch(0.47 0.11 50.84);
--ring: oklch(0.65 0.13 81.56);
--chart-1: oklch(0.75 0.15 83.98);
--chart-2: oklch(0.47 0.11 50.84);
--chart-3: oklch(0.65 0.13 81.56);
--chart-4: oklch(0.75 0.15 83.98);
--chart-5: oklch(0.65 0.13 81.56);
--sidebar: oklch(0.32 0 0);
--sidebar-foreground: oklch(1.00 0 0);
--sidebar-primary: oklch(0.61 0.13 80.96);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.75 0.15 83.98);
--sidebar-accent-foreground: oklch(0.96 0.03 106.96);
--sidebar-border: oklch(0.47 0.11 50.84);
--sidebar-ring: oklch(0.65 0.13 81.56);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Delius Swash Caps;
--font-serif: Delius Swash Caps;
--font-mono: Delius Swash Caps;
--radius: 0.625rem;
--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(--color-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
After trying dozens of "luxury" themes that either look tacky or use fonts you can't read, this art deco theme gets the balance right. The golden yellows feel premium without being gaudy, and the typography has personality without sacrificing legibility.
The key is restraint—real art deco was about elegant geometry and sophisticated color palettes, not throwing gold everywhere. This theme captures that essence while still being practical for modern web apps.
Dark mode switches the palette to rich charcoals with the same golden accents. Most luxury themes fail completely in dark mode, but this one maintains the sophisticated feel while being easy on the eyes for extended use.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. No weird font loading or special config needed. The Delius Swash Caps font gives you that authentic 1920s feel while remaining readable for UI text.
The color scheme is built around warm golds and cream backgrounds with charcoal text. The contrast ratios all pass WCAG AA standards so you won't run into accessibility issues during audits. The rounded corners are slightly more pronounced to complement the art deco aesthetic.
Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. just works. No custom type definitions or weird workarounds.
How to use this in projects
The golden yellow is perfect for CTAs, important buttons, and key highlights. Use the cream and charcoal for most of your content areas—the gold should accent, not dominate. Think high-end restaurant menu or luxury brand website.
Dark mode uses the same golds against rich charcoal backgrounds. The OKLCH colors ensure the golden tones maintain their warmth and visual impact even in dark mode. This consistency is what makes the theme feel cohesive across both modes.
In practice, this theme works best when you embrace the geometric aspects of art deco. Clean lines, clear hierarchy, and purposeful use of the golden accents. Trust the contrast ratios that are built in rather than second-guessing and making things darker.
You might also like
Orange Theme
Vibrant orange theme with warm energy
Yellow Theme
Bright yellow theme with sunshine vibes
Tangerine Theme
Fresh citrus theme with bright orange accents
Summer Theme
Bright summer theme with warm oranges and yellows
Vercel Theme
Clean Vercel-inspired black and white theme
Mono Theme
Monochromatic black and white design theme
FAQ
Vercel Shadcn Theme
Vercel-inspired theme with clean deployment focus for shadcn/ui. Modern development platform design with precision aesthetics. TypeScript ready.
Claymorphism Shadcn Theme
Claymorphism-inspired theme with soft organic clay tones for shadcn/ui. Modern clay aesthetic with tactile design elements. TypeScript ready.