Claymorphism Shadcn Theme
Claymorphism-inspired theme with soft organic clay tones for shadcn/ui. Modern clay aesthetic with tactile design elements. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Claymorphism Shadcn Theme
Tired of the cold, glass-like interfaces that dominated the last few years and started experimenting with claymorphism—that warm, tactile design trend that makes digital interfaces feel like you could actually touch them. This theme captures that organic clay aesthetic with soft oranges and generous rounded corners that feel human.
Perfect for creative portfolios, wellness apps, artisan brands, or any React project where you want that handcrafted, organic feeling. The large border radius and warm earth tones create interfaces that feel approachable and crafted rather than sterile and automated.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/claymorphism.jsonnpx shadcn@latest add https://www.shadcn.io/registry/claymorphism.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/claymorphism.jsonbunx shadcn@latest add https://www.shadcn.io/registry/claymorphism.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: hsl(34, 53%, 92%);
--foreground: hsl(26, 83%, 14%);
--card: hsl(36, 45%, 88%);
--card-foreground: hsl(26, 83%, 14%);
--popover: hsl(36, 45%, 88%);
--popover-foreground: hsl(26, 83%, 14%);
--primary: hsl(25, 95%, 53%);
--primary-foreground: hsl(210, 20%, 98%);
--secondary: hsl(39, 77%, 80%);
--secondary-foreground: hsl(26, 83%, 14%);
--muted: hsl(39, 77%, 80%);
--muted-foreground: hsl(25, 5%, 45%);
--accent: hsl(39, 77%, 80%);
--accent-foreground: hsl(26, 83%, 14%);
--destructive: hsl(0, 84%, 60%);
--border: hsl(39, 77%, 70%);
--input: hsl(39, 77%, 70%);
--ring: hsl(25, 95%, 53%);
--chart-1: hsl(25, 95%, 53%);
--chart-2: hsl(39, 77%, 80%);
--chart-3: hsl(34, 53%, 92%);
--chart-4: hsl(26, 83%, 14%);
--chart-5: hsl(25, 5%, 45%);
--sidebar: hsl(34, 53%, 92%);
--sidebar-foreground: hsl(26, 83%, 14%);
--sidebar-primary: hsl(25, 95%, 53%);
--sidebar-primary-foreground: hsl(210, 20%, 98%);
--sidebar-accent: hsl(39, 77%, 80%);
--sidebar-accent-foreground: hsl(26, 83%, 14%);
--sidebar-border: hsl(39, 77%, 70%);
--sidebar-ring: hsl(25, 95%, 53%);
--destructive-foreground: oklch(1.0000 0 0);
--radius: 1.25rem;
--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: hsl(224, 71%, 4%);
--foreground: hsl(213, 31%, 91%);
--card: hsl(224, 71%, 4%);
--card-foreground: hsl(213, 31%, 91%);
--popover: hsl(224, 71%, 4%);
--popover-foreground: hsl(213, 31%, 91%);
--primary: hsl(210, 20%, 98%);
--primary-foreground: hsl(220, 9%, 46%);
--secondary: hsl(215, 28%, 17%);
--secondary-foreground: hsl(210, 20%, 98%);
--muted: hsl(215, 28%, 17%);
--muted-foreground: hsl(217, 11%, 65%);
--accent: hsl(215, 28%, 17%);
--accent-foreground: hsl(210, 20%, 98%);
--destructive: hsl(0, 63%, 31%);
--border: hsl(215, 28%, 17%);
--input: hsl(215, 28%, 17%);
--ring: hsl(216, 13%, 65%);
--chart-1: hsl(220, 70%, 50%);
--chart-2: hsl(160, 60%, 45%);
--chart-3: hsl(30, 80%, 55%);
--chart-4: hsl(280, 65%, 60%);
--chart-5: hsl(340, 75%, 55%);
--sidebar: hsl(224, 71%, 4%);
--sidebar-foreground: hsl(213, 31%, 91%);
--sidebar-primary: hsl(210, 20%, 98%);
--sidebar-primary-foreground: hsl(220, 9%, 46%);
--sidebar-accent: hsl(215, 28%, 17%);
--sidebar-accent-foreground: hsl(210, 20%, 98%);
--sidebar-border: hsl(215, 28%, 17%);
--sidebar-ring: hsl(216, 13%, 65%);
--destructive-foreground: oklch(1.0000 0 0);
--radius: 1.25rem;
--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
Claymorphism emerged as a reaction to the cold, glass-like designs that dominated UIs for years. Those warm clay tones aren't just trendy—they tap into something fundamentally human about tactile experiences. This theme creates interfaces that feel crafted rather than generated.
Most attempts at claymorphism either go too heavy on the rounded corners and look childish, or use muddy browns that feel dated. This theme strikes the right balance—organic and warm but still professional enough for serious applications.
Dark mode completely transforms the aesthetic into something more contemporary while maintaining that crafted feeling. The generous border radius works especially well in dark interfaces, creating soft, approachable elements that don't feel harsh on the eyes.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The large border radius (1.25rem) is key to the claymorphism aesthetic—it makes every element feel soft and molded rather than cut from sheet metal.
That warm orange creates energy without aggression—perfect for creative CTAs like "Create," "Design," "Build." The clay-like backgrounds feel tactile and inviting, encouraging users to interact rather than just consume.
All contrast ratios pass WCAG AA standards because good design never sacrifices accessibility for aesthetics. Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. works perfectly.
How to use this in projects
The warm orange should mark creative and expressive actions—anything related to making, building, or crafting. Use the clay-like backgrounds to create environments that feel welcoming and human rather than sterile and corporate.
This works especially well for creative tools, wellness apps, artisan brands, or any interface where the human touch matters more than corporate efficiency. Think pottery studio, not accounting firm.
In practice, embrace the organic aesthetic this palette creates. The generous rounded corners and warm colors reduce the digital coldness that can make interfaces feel intimidating or impersonal.
You might also like
Orange Theme
Pure orange theme with warm creative energy
Tangerine Theme
Fresh citrus theme with organic warmth
Summer Theme
Bright summer theme with natural energy
Nature Theme
Natural theme with earth tones and organic feel
Ghibli Studio Theme
Studio Ghibli inspired warm earth tones
Marshmallow Theme
Soft marshmallow theme with pastel warmth
FAQ
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.
Cyberpunk Shadcn Theme
Futuristic cyberpunk theme with electric pink accents and deep purple backgrounds for shadcn/ui. Neon-soaked sci-fi aesthetic. TypeScript ready.