Theme Gallery
Free Nuxt UI Themes
28 ready-made Nuxt UI v4 themes with light and dark modes. Open one to copy its app.config.ts and CSS, or load it in the Theme Builder and make it your own.
Essentials
Balanced, versatile starting points. — 3 themes
DefaultBalanced indigo palette with standard contrast on zinc neutral. A versatile classic. Nuxt UIOfficial Nuxt UI defaults. Nuxt green primary, blue secondary, slate neutral with standard shading. shadcnInspired by shadcn/ui. Near-black dark mode, zinc neutrals, Geist font, and minimal borders for a clean developer aesthetic.
Warm
Reds, oranges, golds, and pinks. — 6 themes
CherryBold red tones for high-energy, attention-grabbing interfaces. SunsetDual personality — warm orange in light, cool violet in dark. Every setting transforms between modes. SaharaDesert-inspired amber warmth on stone neutral. Rich and earthy. SunflowerBright yellow for cheerful, optimistic designs. Deeper shades ensure readability. BlushDual personality — soft pink in light transforms to cool indigo in dark. Colors, shape, and feel all change between modes. Rose GoldElegant rose on warm stone neutral. Refined and sophisticated.
Nature
Greens and earthy tones. — 3 themes
ZestFresh lime green with modern energy and clean lines. ForestNatural green tones on warm stone. Earthy and grounded. EmeraldRich emerald gemstone palette with Plus Jakarta Sans. Sophisticated and luxurious.
Cool
Blues, teals, and quiet neutrals. — 4 themes
CoastalCalm teal tones evoking ocean shores and open skies. ArcticIcy cyan on slate. Cool, crisp, and professional. MinimalUltra-clean sky blue with zero radius. Content-focused design. CorporateProfessional blue with high contrast. Ideal for business applications.
Bold
High-contrast and vivid palettes. — 3 themes
Dark MonoHigh-contrast violet with deep 950 dark base. Bold and dramatic. LavenderSoft purple tones deepening to rich violet in dark mode. NeonVibrant fuchsia with bright shades. Playful and high-energy.
Brands
Inspired by well-known product brands. — 9 themes
SpotifyInspired by Spotify's iconic green-on-black aesthetic. High contrast with deep dark backgrounds. YouTubeInspired by YouTube's bold red branding with clean, content-focused design. SlackInspired by Slack's friendly purple palette with warm, collaborative energy. DiscordInspired by Discord's signature blurple with deep dark mode backgrounds. GitHubInspired by GitHub's developer-focused design. Clean, minimal, and functional. StripeInspired by Stripe's polished violet-indigo palette. Premium and trustworthy. TwitchInspired by Twitch's vibrant purple with high-energy dark mode gaming aesthetic. NetflixInspired by Netflix's dramatic red-on-black design. Bold and cinematic. LinearInspired by Linear's sleek product design. Violet accents on minimal dark surfaces.
How to use a Nuxt UI theme
Every theme sets the six semantic colors (primary, secondary, success, info, warning, error), a neutral gray scale, a border radius, and a font, with separate values for light and dark mode. Nuxt UI reads the palette names from app.config.ts; the rest ships as CSS variables in your main stylesheet.
Treat a theme as a starting point. Load it in the builder, swap the primary color for your brand, check contrast, and export. The color customization guide walks through each setting.