Why We Built This

Theming Nuxt UI should feel like picking colors, not editing config files. Too often, setting up a design-token system means copy-pasting snippets, toggling dark mode to catch mismatches, and rebuilding just to preview a single shade change.

We wanted a tool where you could see your entire design system render across real components — instantly, in both color modes — and walk away with production-ready code you can paste straight into your project.

Your Theme, Configured Visually

Nuxt UI Theme Builder is a free, open-source application that lets you visually configure Nuxt UI v4 design tokens — semantic colors, neutral palette, border radius, font family, and per-mode shade overrides — then export the result as app.config.ts, CSS variables, or JSON.

Every change is instantly previewed across 125+ real Nuxt UI components, layout blocks, and full-page templates so you can see exactly how your theme looks before shipping it.

Key Features

• Live preview — every component, block, and template re-renders in real time as you adjust tokens.
• Multiple export formats — drop the output straight into your project as app.config.ts, a CSS snippet, or raw JSON.
• Built-in presets — start from curated themes and customize from there.
• Undo / Redo — full history support so you can experiment freely.
• Save & manage themes — persist multiple themes locally and switch between them.
• AI theme generation — describe your design vision in plain language and let AI generate a complete starting point.
• Dark & light mode — separate shade overrides for each color mode.
• No account required — theme data stays in your browser. The only external calls are AI prompts, which go directly to the provider you choose (bring your own API key).
• Learn & tooling — browse theming guides and use built-in color tools to support your design workflow.

Built With

• Nuxt 4 — the Vue framework for full-stack web apps.
• Nuxt UI v4 — the component library whose tokens this tool configures.
• Pinia — state management with persisted state and undo/redo.
• Tailwind CSS v4 — utility-first styling.
• VueUse — essential Vue composition utilities.

Open Source

This project is open source under the MIT License. Contributions of any kind — code, docs, design, ideas — are welcome. If the tool saves you time, consider giving it a star on GitHub.

Get in Touch

Have feedback, ideas, or questions? Visit our contact page.