Nature Shadcn Theme
Natural theme with earth tones and organic green accents for shadcn/ui. Calming nature-inspired design with peaceful aesthetics. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Nature Shadcn Theme
Been spending way too much time indoors coding and realized my interfaces were as sterile as my home office. This theme brings that outdoor calm inside—soft greens, earth tones, and the kind of color palette that doesn't make your eyes scream after 8 hours of debugging.
Perfect for wellness apps, environmental platforms, meditation tools, or any React project where you want users to feel grounded and relaxed rather than overstimulated. The Montserrat font keeps things readable while maintaining that organic, approachable feel.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/nature.jsonnpx shadcn@latest add https://www.shadcn.io/registry/nature.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/nature.jsonbunx shadcn@latest add https://www.shadcn.io/registry/nature.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.97 0.01 80.72);
--foreground: oklch(0.30 0.04 30.20);
--card: oklch(0.97 0.01 80.72);
--card-foreground: oklch(0.30 0.04 30.20);
--popover: oklch(0.97 0.01 80.72);
--popover-foreground: oklch(0.30 0.04 30.20);
--primary: oklch(0.52 0.13 144.17);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.96 0.02 147.64);
--secondary-foreground: oklch(0.43 0.12 144.31);
--muted: oklch(0.94 0.01 74.42);
--muted-foreground: oklch(0.45 0.05 39.21);
--accent: oklch(0.90 0.05 146.04);
--accent-foreground: oklch(0.43 0.12 144.31);
--destructive: oklch(0.54 0.19 26.72);
--border: oklch(0.88 0.02 74.64);
--input: oklch(0.88 0.02 74.64);
--ring: oklch(0.52 0.13 144.17);
--chart-1: oklch(0.67 0.16 144.21);
--chart-2: oklch(0.58 0.14 144.18);
--chart-3: oklch(0.52 0.13 144.17);
--chart-4: oklch(0.43 0.12 144.31);
--chart-5: oklch(0.22 0.05 145.73);
--sidebar: oklch(0.94 0.01 74.42);
--sidebar-foreground: oklch(0.30 0.04 30.20);
--sidebar-primary: oklch(0.52 0.13 144.17);
--sidebar-primary-foreground: oklch(1.00 0 0);
--sidebar-accent: oklch(0.90 0.05 146.04);
--sidebar-accent-foreground: oklch(0.43 0.12 144.31);
--sidebar-border: oklch(0.88 0.02 74.64);
--sidebar-ring: oklch(0.52 0.13 144.17);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Montserrat, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: Source Code Pro, monospace;
--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.03 150.77);
--foreground: oklch(0.94 0.01 72.66);
--card: oklch(0.33 0.03 146.99);
--card-foreground: oklch(0.94 0.01 72.66);
--popover: oklch(0.33 0.03 146.99);
--popover-foreground: oklch(0.94 0.01 72.66);
--primary: oklch(0.67 0.16 144.21);
--primary-foreground: oklch(0.22 0.05 145.73);
--secondary: oklch(0.39 0.03 142.99);
--secondary-foreground: oklch(0.90 0.02 142.55);
--muted: oklch(0.33 0.03 146.99);
--muted-foreground: oklch(0.86 0.02 76.10);
--accent: oklch(0.58 0.14 144.18);
--accent-foreground: oklch(0.94 0.01 72.66);
--destructive: oklch(0.54 0.19 26.72);
--border: oklch(0.39 0.03 142.99);
--input: oklch(0.39 0.03 142.99);
--ring: oklch(0.67 0.16 144.21);
--chart-1: oklch(0.77 0.12 145.30);
--chart-2: oklch(0.72 0.14 144.89);
--chart-3: oklch(0.67 0.16 144.21);
--chart-4: oklch(0.63 0.15 144.20);
--chart-5: oklch(0.58 0.14 144.18);
--sidebar: oklch(0.27 0.03 150.77);
--sidebar-foreground: oklch(0.94 0.01 72.66);
--sidebar-primary: oklch(0.67 0.16 144.21);
--sidebar-primary-foreground: oklch(0.22 0.05 145.73);
--sidebar-accent: oklch(0.58 0.14 144.18);
--sidebar-accent-foreground: oklch(0.94 0.01 72.66);
--sidebar-border: oklch(0.39 0.03 142.99);
--sidebar-ring: oklch(0.67 0.16 144.21);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Montserrat, sans-serif;
--font-serif: Merriweather, serif;
--font-mono: Source Code Pro, monospace;
--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
After building apps for healthcare and wellness companies, learned that green isn't just "nature color"—it's scientifically proven to reduce eye strain and promote calm focus. This theme uses the right shade of green that feels alive without being aggressive or too "environmental activist."
Most nature themes either go full forest ranger with dark greens that feel heavy, or they use those artificial lime greens that hurt to look at. This theme hits the sweet spot—calming earth tones that feel organic and approachable while maintaining professional credibility.
Dark mode shifts to deeper forest tones that maintain the natural feeling while being comfortable for night work. The greens stay calming but become more sophisticated, like stepping into a cozy cabin instead of standing in bright sunlight.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The Montserrat font provides clean readability while the organic green accents create that grounded, natural feeling without being distracting.
That calm green is perfect for primary actions that should feel safe and reassuring—"Join," "Subscribe," "Get Started." The earth-tone backgrounds create environments where users can actually think and focus instead of feeling rushed by aggressive colors.
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 soft green should mark actions that feel safe and inviting—anything related to health, growth, learning, or positive outcomes. Use the earth tones to create calm, focused environments where users can think clearly about important decisions.
This works especially well for healthcare apps, educational platforms, financial wellness tools, or any interface where trust and calm matter more than excitement. Think meditation app, not energy drink marketing.
In practice, embrace the breathing room this palette creates. The generous contrast and organic color relationships reduce cognitive load, letting users focus on content and tasks rather than fighting with the interface design.
You might also like
Green Theme
Pure green theme with natural forest vibes
Ghibli Studio Theme
Studio Ghibli inspired theme with warm earth tones
Orange Theme
Warm orange theme with autumn energy
Yellow Theme
Sunny yellow theme with natural warmth
Tangerine Theme
Fresh citrus theme with organic appeal
Summer Theme
Bright summer theme with natural energy
FAQ
Modern Minimal Shadcn Theme
Clean modern minimal theme with subtle purple accents for shadcn/ui. Swiss design principles with contemporary aesthetics. TypeScript ready.
Slack Shadcn Theme
Slack-inspired theme with professional purple accents for shadcn/ui. Modern workspace design with team communication vibes. TypeScript ready.