Summer Shadcn Theme
Bright summer theme with warm oranges and sunny yellows for shadcn/ui. Energetic vacation vibes with warm color palette. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Summer Shadcn Theme
Working on projects during those long summer coding sessions and always found myself gravitating toward warmer, more energetic colors. This theme captures that perfect summer energy—bright oranges and warm yellows that feel like sunshine without burning your retinas.
Perfect for travel apps, food delivery platforms, fitness trackers, or any React project where you want that energetic, optimistic feeling that gets people excited to engage with your product. The Nunito font adds to that friendly, approachable summer vibe.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/summer.jsonnpx shadcn@latest add https://www.shadcn.io/registry/summer.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/summer.jsonbunx shadcn@latest add https://www.shadcn.io/registry/summer.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 78.24);
--foreground: oklch(0.38 0.02 64.34);
--card: oklch(0.97 0.02 74.09);
--card-foreground: oklch(0.38 0.02 64.34);
--popover: oklch(0.96 0.04 81.50);
--popover-foreground: oklch(0.38 0.02 64.34);
--primary: oklch(0.70 0.17 28.12);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.81 0.15 72.19);
--secondary-foreground: oklch(0.38 0.02 64.34);
--muted: oklch(0.94 0.03 62.01);
--muted-foreground: oklch(0.62 0.06 59.53);
--accent: oklch(0.64 0.22 28.81);
--accent-foreground: oklch(1.00 0 0);
--destructive: oklch(0.57 0.20 26.41);
--border: oklch(0.87 0.08 65.91);
--input: oklch(0.96 0.03 79.26);
--ring: oklch(0.70 0.17 28.12);
--chart-1: oklch(0.70 0.17 28.12);
--chart-2: oklch(0.81 0.15 72.19);
--chart-3: oklch(0.71 0.18 37.77);
--chart-4: oklch(0.89 0.15 91.22);
--chart-5: oklch(0.59 0.19 35.90);
--sidebar: oklch(0.97 0.02 74.09);
--sidebar-foreground: oklch(0.38 0.02 64.34);
--sidebar-primary: oklch(0.70 0.17 28.12);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.81 0.15 72.19);
--sidebar-accent-foreground: oklch(0.38 0.02 64.34);
--sidebar-border: oklch(0.87 0.08 65.91);
--sidebar-ring: oklch(0.70 0.17 28.12);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Nunito, Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
--font-serif: Lora, ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
--font-mono: Fira Code, ui-monospace, SFMono-Regular;
--radius: 0.6rem;
--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.26 0.02 60.79);
--foreground: oklch(0.87 0.08 65.91);
--card: oklch(0.31 0.03 57.05);
--card-foreground: oklch(0.87 0.08 65.91);
--popover: oklch(0.36 0.03 54.43);
--popover-foreground: oklch(0.87 0.08 65.91);
--primary: oklch(0.70 0.17 28.12);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.81 0.15 72.19);
--secondary-foreground: oklch(0.26 0.02 60.79);
--muted: oklch(0.56 0.05 58.96);
--muted-foreground: oklch(0.79 0.06 71.12);
--accent: oklch(0.61 0.21 27.03);
--accent-foreground: oklch(1.00 0 0);
--destructive: oklch(0.50 0.19 27.48);
--border: oklch(0.45 0.05 59.00);
--input: oklch(0.40 0.04 60.66);
--ring: oklch(0.70 0.17 28.12);
--chart-1: oklch(0.70 0.17 28.12);
--chart-2: oklch(0.81 0.15 72.19);
--chart-3: oklch(0.71 0.18 37.77);
--chart-4: oklch(0.89 0.15 91.22);
--chart-5: oklch(0.59 0.19 35.90);
--sidebar: oklch(0.31 0.03 57.05);
--sidebar-foreground: oklch(0.87 0.08 65.91);
--sidebar-primary: oklch(0.70 0.17 28.12);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.81 0.15 72.19);
--sidebar-accent-foreground: oklch(0.26 0.02 60.79);
--sidebar-border: oklch(0.45 0.05 59.00);
--sidebar-ring: oklch(0.70 0.17 28.12);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Nunito, Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
--font-serif: Lora, ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
--font-mono: Fira Code, ui-monospace, SFMono-Regular;
--radius: 0.6rem;
--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
After building apps for vacation rentals and food delivery platforms, learned that warm orange really does make people feel more energetic and willing to take action. There's actual psychology behind it—orange stimulates appetite and creates urgency without feeling aggressive like red.
Most "warm" themes either go full neon and hurt your eyes, or use muddy browns that feel dated. This theme hits that sweet spot where the oranges are bright and energetic but still professional enough for serious applications.
Dark mode transforms into warm evening tones—think sunset rather than harsh contrast. The oranges maintain their energy while becoming more comfortable for extended use. Perfect for those late-night coding sessions when you need energy but not eye strain.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Nunito and Lora font combination gives you that friendly, approachable feeling that works perfectly with the warm color palette.
That vibrant orange primary is perfect for CTAs that need to grab attention and motivate action—"Book Now," "Order Food," "Start Workout." The warm yellows and creams create a welcoming atmosphere without being overwhelming.
All contrast ratios pass WCAG AA standards so you won't run into accessibility issues. The generous border radius gives everything a soft, friendly feeling. Since it uses standard shadcn color tokens, your TypeScript autocomplete works perfectly.
How to use this in projects
The vibrant orange should be your primary action color for conversions—anything where you want users to feel excited and take immediate action. Think vacation booking, food ordering, or fitness challenges where energy and optimism drive engagement.
The warm secondary colors should create that sunny, welcoming atmosphere throughout the interface. This works especially well for consumer apps, lifestyle brands, or any platform where you want users to feel happy and energized.
In practice, embrace the energetic vibe but keep it balanced. Too much orange becomes overwhelming, so use the creams and yellows to give users' eyes places to rest. The goal is sustained energy, not visual fatigue.
You might also like
Tangerine Theme
Fresh citrus theme with bright orange accents
Orange Theme
Vibrant orange theme with warm energy
Yellow Theme
Bright yellow theme with sunshine vibes
Rose Theme
Soft rose theme with romantic warmth
Red Theme
Bold red theme with passionate energy
Nature Theme
Natural theme with warm earth tones
FAQ
Tangerine Shadcn Theme
Fresh citrus theme with vibrant orange energy for shadcn/ui. Bright organic design with natural juice-inspired vibes. TypeScript ready.
Violet Shadcn Theme
Creative violet theme with artistic inspiration for shadcn/ui. Rich purple design with imaginative creative energy. TypeScript ready.