Ghibli Studio Shadcn Theme
Studio Ghibli inspired theme with warm earth tones and gentle greens for shadcn/ui. Whimsical nature-inspired design with organic feel. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Ghibli Studio Shadcn Theme
Been rewatching Spirited Away and Totoro way too much lately and couldn't help but notice how Ghibli films have this perfect color palette—warm earth tones, gentle greens, and that organic feeling that somehow makes everything feel alive and welcoming.
Perfect for creative portfolios, wellness apps, educational platforms, or any React project where you want that magical, approachable feeling that Studio Ghibli captures so well. The Nunito font adds to that friendly, hand-drawn aesthetic.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/ghibli-studio.jsonnpx shadcn@latest add https://www.shadcn.io/registry/ghibli-studio.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/ghibli-studio.jsonbunx shadcn@latest add https://www.shadcn.io/registry/ghibli-studio.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.91 0.05 82.69);
--foreground: oklch(0.41 0.08 79.04);
--card: oklch(0.92 0.04 83.86);
--card-foreground: oklch(0.41 0.08 73.75);
--popover: oklch(0.92 0.04 83.86);
--popover-foreground: oklch(0.41 0.08 73.75);
--primary: oklch(0.71 0.10 111.99);
--primary-foreground: oklch(0.98 0.01 3.71);
--secondary: oklch(0.88 0.05 83.41);
--secondary-foreground: oklch(0.51 0.08 79.21);
--muted: oklch(0.86 0.06 83.48);
--muted-foreground: oklch(0.51 0.08 74.26);
--accent: oklch(0.86 0.05 84.50);
--accent-foreground: oklch(0.26 0.02 358.42);
--destructive: oklch(0.63 0.24 29.21);
--border: oklch(0.74 0.06 79.81);
--input: oklch(0.74 0.06 79.81);
--ring: oklch(0.51 0.08 74.26);
--chart-1: oklch(0.66 0.19 41.68);
--chart-2: oklch(0.70 0.12 183.20);
--chart-3: oklch(0.48 0.08 211.46);
--chart-4: oklch(0.84 0.17 85.07);
--chart-5: oklch(0.74 0.17 60.21);
--sidebar: oklch(0.87 0.06 83.96);
--sidebar-foreground: oklch(0.41 0.08 79.04);
--sidebar-primary: oklch(0.26 0.02 358.42);
--sidebar-primary-foreground: oklch(0.98 0.01 3.71);
--sidebar-accent: oklch(0.83 0.06 84.46);
--sidebar-accent-foreground: oklch(0.26 0.02 358.42);
--sidebar-border: oklch(0.91 0.00 0.43);
--sidebar-ring: oklch(0.71 0.00 0.37);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Nunito, sans-serif;
--font-serif: PT Serif, serif;
--font-mono: JetBrains Mono, monospace;
--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.20 0.01 48.35);
--foreground: oklch(0.88 0.05 79.26);
--card: oklch(0.25 0.01 56.14);
--card-foreground: oklch(0.88 0.05 79.26);
--popover: oklch(0.25 0.01 56.14);
--popover-foreground: oklch(0.88 0.05 79.26);
--primary: oklch(0.64 0.05 115.39);
--primary-foreground: oklch(0.98 0.01 3.71);
--secondary: oklch(0.33 0.02 60.70);
--secondary-foreground: oklch(0.88 0.05 83.41);
--muted: oklch(0.27 0.01 39.35);
--muted-foreground: oklch(0.74 0.06 79.81);
--accent: oklch(0.33 0.02 60.70);
--accent-foreground: oklch(0.86 0.05 84.50);
--destructive: oklch(0.63 0.24 29.21);
--border: oklch(0.33 0.02 60.70);
--input: oklch(0.33 0.02 60.70);
--ring: oklch(0.64 0.05 115.39);
--chart-1: oklch(0.66 0.19 41.68);
--chart-2: oklch(0.70 0.12 183.20);
--chart-3: oklch(0.48 0.08 211.46);
--chart-4: oklch(0.84 0.17 85.07);
--chart-5: oklch(0.74 0.17 60.21);
--sidebar: oklch(0.23 0.01 56.09);
--sidebar-foreground: oklch(0.88 0.05 79.26);
--sidebar-primary: oklch(0.64 0.05 115.39);
--sidebar-primary-foreground: oklch(0.98 0.01 3.71);
--sidebar-accent: oklch(0.33 0.02 60.70);
--sidebar-accent-foreground: oklch(0.86 0.05 84.50);
--sidebar-border: oklch(0.33 0.02 60.70);
--sidebar-ring: oklch(0.64 0.05 115.39);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Nunito, sans-serif;
--font-serif: PT Serif, serif;
--font-mono: JetBrains Mono, monospace;
--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(--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
Studio Ghibli films have this incredible ability to make digital spaces feel organic and alive. The secret is in their color theory—warm earth tones mixed with gentle greens that feel natural instead of artificial. This theme captures that same magic in web interfaces.
Most "nature" themes either go full forest green everywhere or use colors that look like they came from a lawn care website. This theme uses the actual color relationships from Ghibli films—warm yellows, soft greens, and earth tones that work together like they grew that way.
Dark mode shifts to deeper forest tones while keeping that organic warmth. It's like stepping into a cozy cabin at night—still connected to nature but comfortable and inviting. Most green themes fail completely in dark mode, but this one feels intentional.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Nunito font gives you that friendly, approachable feel that works perfectly with the organic color palette.
The gentle green primary is perfect for CTAs that should feel welcoming rather than aggressive. The warm earth tones create a sense of comfort and trust. All contrast ratios pass WCAG AA standards so accessibility is covered.
The generous border radius gives everything that soft, organic feeling—no harsh edges here. Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. just works.
How to use this in projects
The gentle green should be your primary action color for things like "Join," "Learn More," or "Get Started"—anything that should feel welcoming rather than pushy. Think forest path, not traffic light.
The warm earth tones should dominate the interface, creating that cozy, natural feeling. This works especially well for educational apps, wellness platforms, creative portfolios, or any interface where you want users to feel relaxed and engaged.
In practice, embrace the organic aesthetic but keep it clean. This isn't rustic or outdated—it's modern nature-inspired design. The colors are sophisticated enough for professional use while maintaining that magical Ghibli warmth.
You might also like
Nature Theme
Natural theme with earth tones and organic feel
Green Theme
Pure green theme with natural forest vibes
Orange Theme
Warm orange theme with autumn energy
Yellow Theme
Sunny yellow theme with golden warmth
Tangerine Theme
Fresh citrus theme with organic appeal
Summer Theme
Bright summer theme with natural energy
FAQ
Cyberpunk Shadcn Theme
Futuristic cyberpunk theme with electric pink accents and deep purple backgrounds for shadcn/ui. Neon-soaked sci-fi aesthetic. TypeScript ready.
Material Design Shadcn Theme
Google Material Design inspired theme with proper elevation and purple accents for shadcn/ui. Official design system feel with tested principles. TypeScript ready.