Claude Shadcn Theme
Claude AI inspired theme with warm orange accents and clean design for shadcn/ui. Professional AI-inspired aesthetic with thoughtful color choices. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Claude Shadcn Theme
Working with Claude daily and always appreciated how Anthropic designed an interface that actually feels helpful rather than intimidating. This theme captures that same approachable intelligence—warm oranges that feel friendly, clean whites that don't strain your eyes, and the kind of thoughtful design that makes complex tasks feel manageable.
Perfect for AI tools, productivity apps, educational platforms, or any React project where you want users to feel supported and confident rather than overwhelmed by technology. The clean typography maintains readability during long work sessions.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/claude.jsonnpx shadcn@latest add https://www.shadcn.io/registry/claude.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/claude.jsonbunx shadcn@latest add https://www.shadcn.io/registry/claude.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 95.10);
--foreground: oklch(0.34 0.03 95.72);
--card: oklch(0.98 0.01 95.10);
--card-foreground: oklch(0.19 0.00 106.59);
--popover: oklch(1.00 0 0);
--popover-foreground: oklch(0.27 0.02 98.94);
--primary: oklch(0.62 0.14 39.04);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.92 0.01 92.99);
--secondary-foreground: oklch(0.43 0.02 98.60);
--muted: oklch(0.93 0.02 90.24);
--muted-foreground: oklch(0.61 0.01 97.42);
--accent: oklch(0.92 0.01 92.99);
--accent-foreground: oklch(0.27 0.02 98.94);
--destructive: oklch(0.19 0.00 106.59);
--border: oklch(0.88 0.01 97.36);
--input: oklch(0.76 0.02 98.35);
--ring: oklch(0.59 0.17 253.06);
--chart-1: oklch(0.56 0.13 43.00);
--chart-2: oklch(0.69 0.16 290.41);
--chart-3: oklch(0.88 0.03 93.13);
--chart-4: oklch(0.88 0.04 298.18);
--chart-5: oklch(0.56 0.13 42.06);
--sidebar: oklch(0.97 0.01 98.88);
--sidebar-foreground: oklch(0.36 0.01 106.65);
--sidebar-primary: oklch(0.62 0.14 39.04);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.92 0.01 92.99);
--sidebar-accent-foreground: oklch(0.33 0 0);
--sidebar-border: oklch(0.94 0 0);
--sidebar-ring: oklch(0.77 0 0);
--destructive-foreground: oklch(1.0000 0 0);
--radius: 0.5rem;
--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.27 0.00 106.64);
--foreground: oklch(0.81 0.01 93.01);
--card: oklch(0.27 0.00 106.64);
--card-foreground: oklch(0.98 0.01 95.10);
--popover: oklch(0.31 0.00 106.60);
--popover-foreground: oklch(0.92 0.00 106.48);
--primary: oklch(0.67 0.13 38.76);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.98 0.01 95.10);
--secondary-foreground: oklch(0.31 0.00 106.60);
--muted: oklch(0.22 0.00 106.71);
--muted-foreground: oklch(0.77 0.02 99.07);
--accent: oklch(0.21 0.01 95.42);
--accent-foreground: oklch(0.97 0.01 98.88);
--destructive: oklch(0.64 0.21 25.33);
--border: oklch(0.36 0.01 106.89);
--input: oklch(0.43 0.01 100.22);
--ring: oklch(0.59 0.17 253.06);
--chart-1: oklch(0.56 0.13 43.00);
--chart-2: oklch(0.69 0.16 290.41);
--chart-3: oklch(0.21 0.01 95.42);
--chart-4: oklch(0.31 0.05 289.32);
--chart-5: oklch(0.56 0.13 42.06);
--sidebar: oklch(0.24 0.00 67.71);
--sidebar-foreground: oklch(0.81 0.01 93.01);
--sidebar-primary: oklch(0.33 0 0);
--sidebar-primary-foreground: oklch(0.99 0 0);
--sidebar-accent: oklch(0.17 0.00 106.62);
--sidebar-accent-foreground: oklch(0.81 0.01 93.01);
--sidebar-border: oklch(0.94 0 0);
--sidebar-ring: oklch(0.77 0 0);
--destructive-foreground: oklch(1.0000 0 0);
--radius: 0.5rem;
--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
Anthropic clearly spent time thinking about how color affects user psychology in AI interfaces. That warm orange creates confidence without aggression—it says "helpful" rather than "demanding attention." The clean backgrounds reduce cognitive load, which is crucial when users are processing complex AI responses.
Most AI tools either go full sci-fi with blues and purples that feel cold, or they use aggressive colors that make the technology feel intimidating. Claude's approach is the opposite—trustworthy, approachable, and designed for extended thoughtful use.
Dark mode maintains that same helpful feeling while being comfortable for long conversations. The orange becomes slightly more sophisticated while keeping that friendly, accessible energy that makes AI feel like a collaborator rather than a mysterious black box.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The color palette creates environments where complex information feels manageable, perfect for AI interfaces, dashboards, or any app that needs to feel intelligent but approachable.
That thoughtful orange is perfect for primary actions that should feel supportive—"Get Help," "Continue," "Ask Claude." The clean whites and subtle grays create calm environments where users can focus on thinking through problems rather than fighting with the interface.
All contrast ratios pass WCAG AA standards because accessibility is fundamental to truly helpful design. 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 helpful actions and positive interactions—anything that assists or guides users through complex tasks. Use the clean neutrals to create calm, focused environments where users can think clearly about important decisions.
This works especially well for AI tools, educational platforms, productivity apps, or any interface where trust and clarity matter more than excitement. Think helpful assistant, not flashy marketing.
In practice, embrace the supportive aesthetic this palette creates. The warm accent against clean backgrounds reduces anxiety around complex technology, helping users feel confident engaging with powerful tools.
You might also like
Orange Theme
Pure orange theme with warm, helpful energy
Corporate Theme
Professional corporate design theme
Vercel Theme
Clean development-focused theme
Slack Theme
Modern workspace communication theme
Supabase Theme
Developer-friendly database platform theme
Tangerine Theme
Fresh citrus theme with approachable warmth
FAQ
Amber Minimal Shadcn Theme
Clean minimal shadcn theme with warm amber accents. Professional design system with OKLCH colors for React and TypeScript applications.
Corporate Shadcn Theme
Professional corporate theme with trustworthy blue accents for shadcn/ui. Enterprise-grade design with business credibility. TypeScript ready.