About

Build Nuxt UI Themes — Visually

Back to HomeView on GitHub
Pick colors, preview 125+ components live, and export production-ready code. No guesswork, no trial-and-error deploys.

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.