React Nature Theme

Step outside and breathe. This theme translates the natural world into pixels: forest greens at oklch(0.50 0.12 145) that recall evergreen canopies, warm soil browns at oklch(0.45 0.08 60) grounding every interface, sky blues at oklch(0.70 0.08 230) for moments of openness, and stone grays at oklch(0.55 0.02 90) providing neutral stability. It's biophilic design for digital spaces—the theory that humans feel better surrounded by natural elements. The palette doesn't demand attention; it provides a calming backdrop that reduces cognitive strain. Use it for outdoor recreation and adventure brands, environmental and conservation organizations, gardening and agricultural platforms, wellness and mindfulness apps, eco-conscious e-commerce, or any Next.js project that should feel like taking a walk in the woods. Dark mode becomes twilight—those same earth tones under evening light.

React Nature Theme preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/nature.json

npx shadcn@latest add https://www.shadcn.io/r/nature.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/nature.json

bunx shadcn@latest add https://www.shadcn.io/r/nature.json

Related Components

FAQ