Tangerine Shadcn Theme
Fresh citrus theme with vibrant orange energy for shadcn/ui. Bright organic design with natural juice-inspired vibes. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Tangerine Shadcn Theme
Working on interfaces during the winter months and always found myself gravitating toward warm, citrus colors that felt like sunshine. This theme captures that fresh tangerine energy—bright orange that feels natural and organic rather than aggressive, with the kind of warm optimism that makes products feel approachable and energizing.
Perfect for wellness apps, food platforms, creative tools, or any React project where you want that fresh, natural energy without the harshness of pure orange. The balanced approach makes complex interfaces feel friendly and inviting.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/tangerine.jsonnpx shadcn@latest add https://www.shadcn.io/registry/tangerine.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/tangerine.jsonbunx shadcn@latest add https://www.shadcn.io/registry/tangerine.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.9383 0.0042 236.4993);
--foreground: oklch(0.3211 0 0);
--card: oklch(1.0000 0 0);
--card-foreground: oklch(0.3211 0 0);
--popover: oklch(1.0000 0 0);
--popover-foreground: oklch(0.3211 0 0);
--primary: oklch(0.6397 0.1720 36.4421);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.9670 0.0029 264.5419);
--secondary-foreground: oklch(0.4461 0.0263 256.8018);
--muted: oklch(0.9846 0.0017 247.8389);
--muted-foreground: oklch(0.5510 0.0234 264.3637);
--accent: oklch(0.9119 0.0222 243.8174);
--accent-foreground: oklch(0.3791 0.1378 265.5222);
--destructive: oklch(0.6368 0.2078 25.3313);
--border: oklch(0.9022 0.0052 247.8822);
--input: oklch(0.9700 0.0029 264.5420);
--ring: oklch(0.6397 0.1720 36.4421);
--chart-1: oklch(0.7156 0.0605 248.6845);
--chart-2: oklch(0.7875 0.0917 35.9616);
--chart-3: oklch(0.5778 0.0759 254.1573);
--chart-4: oklch(0.5016 0.0849 259.4902);
--chart-5: oklch(0.4241 0.0952 264.0306);
--sidebar: oklch(0.9030 0.0046 258.3257);
--sidebar-foreground: oklch(0.3211 0 0);
--sidebar-primary: oklch(0.6397 0.1720 36.4421);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.9119 0.0222 243.8174);
--sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222);
--sidebar-border: oklch(0.9276 0.0058 264.5313);
--sidebar-ring: oklch(0.6397 0.1720 36.4421);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.75rem;
--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;
--spacing: 0.25rem;
}
.dark {
--background: oklch(0.2598 0.0306 262.6666);
--foreground: oklch(0.9219 0 0);
--card: oklch(0.3106 0.0301 268.6365);
--card-foreground: oklch(0.9219 0 0);
--popover: oklch(0.2900 0.0249 268.3986);
--popover-foreground: oklch(0.9219 0 0);
--primary: oklch(0.6397 0.1720 36.4421);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.3095 0.0266 266.7132);
--secondary-foreground: oklch(0.9219 0 0);
--muted: oklch(0.3095 0.0266 266.7132);
--muted-foreground: oklch(0.7155 0 0);
--accent: oklch(0.3380 0.0589 267.5867);
--accent-foreground: oklch(0.8823 0.0571 254.1284);
--destructive: oklch(0.6368 0.2078 25.3313);
--border: oklch(0.3843 0.0301 269.7337);
--input: oklch(0.3843 0.0301 269.7337);
--ring: oklch(0.6397 0.1720 36.4421);
--chart-1: oklch(0.7156 0.0605 248.6845);
--chart-2: oklch(0.7693 0.0876 34.1875);
--chart-3: oklch(0.5778 0.0759 254.1573);
--chart-4: oklch(0.5016 0.0849 259.4902);
--chart-5: oklch(0.4241 0.0952 264.0306);
--sidebar: oklch(0.3100 0.0283 267.7408);
--sidebar-foreground: oklch(0.9219 0 0);
--sidebar-primary: oklch(0.6397 0.1720 36.4421);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.3380 0.0589 267.5867);
--sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
--sidebar-border: oklch(0.3843 0.0301 269.7337);
--sidebar-ring: oklch(0.6397 0.1720 36.4421);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Inter, sans-serif;
--font-serif: Source Serif 4, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 0.75rem;
--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
Citrus colors have been proven to boost mood and energy, but most orange themes either go too aggressive and feel overwhelming, or too subtle and lose that natural vitality. This tangerine approach finds the perfect balance—bright enough to feel energizing, organic enough to feel natural.
Working on health and wellness apps, noticed how important it is to create interfaces that feel fresh and optimistic without being childish. The tangerine orange taps into those positive associations with fresh fruit and natural energy while maintaining professional credibility.
Dark mode softens the citrus energy into something more sophisticated while keeping that warm, inviting feeling. The orange becomes more elegant against darker backgrounds, creating interfaces that feel energetic but not overwhelming during extended use.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Inter font provides clean, modern typography that balances the energetic orange with professional readability—perfect for apps that need to feel both fresh and trustworthy.
That tangerine orange is perfect for positive actions and call-to-actions—"Get Started," "Add to Cart," "Share Recipe." The generous border radius enhances the organic, natural feeling that makes interfaces feel more human and approachable.
All contrast ratios pass WCAG AA standards because energetic design should never sacrifice accessibility. 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 tangerine orange should mark positive actions and encouraging interactions—anything that helps users feel motivated and energized. Use the fresh, natural aesthetic to create environments where users want to engage and explore rather than just complete tasks.
This works especially well for wellness apps, food platforms, creative tools, or any interface where optimism and natural energy matter more than corporate authority. Think fresh juice bar, not boardroom meeting.
In practice, embrace the citrus energy this palette creates. The bright orange against clean backgrounds reduces visual heaviness and creates interfaces that feel light, fresh, and encouraging—perfect for products that want to inspire positive action.
You might also like
Claymorphism Theme
Organic clay theme with natural orange warmth
Nature Theme
Natural earth tones with organic energy
Claude Theme
AI-powered theme with warm orange accents
Orange Theme
Pure orange theme with vibrant citrus energy
Summer Theme
Bright summer theme with natural warmth
Marshmallow Theme
Soft pastel theme with gentle orange tones
FAQ
Red Shadcn Theme
Bold red theme with energetic passion for shadcn/ui. Strong primary color design with confident crimson accents. TypeScript ready.
Summer Shadcn Theme
Bright summer theme with warm oranges and sunny yellows for shadcn/ui. Energetic vacation vibes with warm color palette. TypeScript ready.