Nuxt UI Theme Builder

Loading preview…

Blocks

Step

Numbered step sections, vertical timelines, and how-it-works flows.

Gradient Path New!

Atmospheric gradient orbs behind a horizontal step path with gradient-bordered numbered orbs, staggered entrance animations, and responsive vertical fallback.

How It Works

Four steps to your perfect theme

From zero to production-ready, no design skills required.

Initialize

Scaffold your project with the Nuxt UI module pre-configured and ready to go.

Design

Use the visual editor to craft your palette, typography, radius, and spacing tokens.

Preview

Watch changes cascade through every component, block, and template in real time.

Ship

Export as app.config.ts, CSS variables, or JSON and drop it straight into your project.

Vertical Timeline New!

A product-launch-inspired vertical timeline with grid-texture backdrop, gradient connecting line, elevated content cards with status badges, and a pulsing active-step indicator.

Getting Started

From install to production

Follow the timeline to ship your custom theme.

STEP 01
Install the module
Complete
Add @nuxt/ui to your project and enable it in nuxt.config.ts. One dependency, full design system.
STEP 02
Open the builder
In Progress
Launch the visual editor to explore palettes, radius, typography, and every design token.
STEP 03
Customize everything
Up Next
Adjust colors, fonts, and spacing while previewing across real components and templates.
STEP 04
Export and deploy
Pending
Copy the generated config directly into your project or download as CSS variables and JSON.

Mock UI Cards New!

Each step rendered as a mini app window with traffic-light chrome, skeleton content rows, floating gradient number badge, and a hover-lift effect — inspired by product showcase heroes.

Simple Workflow

Three steps, zero complexity

Each step brings you closer to a production-ready theme.

theme.config

Design

Use the visual editor or AI to generate your theme tokens.

preview.live

Preview

See changes cascade across real components in real time.

export.config

Export

Download as app.config.ts, CSS variables, or JSON.

Glass Cards New!

Glassmorphism step cards on a dot-grid background with a centered glow, frosted header panel, numbered orbs with glow rings, and a connecting dotted line.

Your Workflow

Three steps to a polished theme

A streamlined process that takes you from idea to shipped theme.

Choose a preset

Start with a curated preset or begin from a blank canvas. Each preset is fully customizable.

Customize tokens

Fine-tune colors, radius, fonts, and spacing with the visual editor. Every change previews instantly.

Review & export

Preview across all components, then export your theme as configuration, CSS, or JSON.

Accordion Flow New!

Interactive expanding accordion steps with a warm gradient backdrop, decorative ring elements, active-state highlighting, and detail badges revealed on expand.

Step-by-Step Guide

Explore each stage

Expand any step to learn what happens at each stage of the process.

Pick a foundation

Select a built-in preset or start from scratch. Presets cover popular color schemes and design directions to jumpstart your workflow.

15+ built-in presets

Customize your tokens

Full control over every token

Tweak every design token visually — primary palette, neutral shade, border radius, font family, and dark mode overrides, all in one panel.

Full control over every token

Preview on real pages

100+ live component previews

Navigate through component demos, marketing blocks, and full-page templates to verify your theme works across every context.

100+ live component previews

Export and integrate

One-click export

Download your finished theme as an app.config.ts file, CSS custom properties, or raw JSON — ready to drop into any Nuxt UI project.

One-click export

Zigzag Timeline New!

Steps alternate left and right on a central gradient line with squared icon nodes, monospace step numbers, and a responsive mobile fallback — editorial layout with spatial variety.

The Process

From idea to production

A clear path through every stage of theme creation.

Start a project

Scaffold a Nuxt app with the UI module enabled. One command gets you a fully configured development environment.

Start a project

Scaffold a Nuxt app with the UI module enabled. One command gets you a fully configured development environment.

Open the editor

Launch the theme builder to access every design token — palettes, neutrals, radius, fonts, and dark mode overrides.

Open the editor

Launch the theme builder to access every design token — palettes, neutrals, radius, fonts, and dark mode overrides.

Preview everywhere

Validate your theme against 100+ components, marketing blocks, and full templates. Switch between light and dark mode instantly.

Preview everywhere

Validate your theme against 100+ components, marketing blocks, and full templates. Switch between light and dark mode instantly.

Ship with confidence

Export your configuration and drop it into your project. Every token is production-tested and framework-ready.

Ship with confidence

Export your configuration and drop it into your project. Every token is production-tested and framework-ready.

Step

Gradient Path New!

Four steps to your perfect theme

Initialize

Design

Preview

Ship

Vertical Timeline New!

From install to production

Install the module

Open the builder

Customize everything

Export and deploy

Mock UI Cards New!

Three steps, zero complexity

Design

Preview

Export

Glass Cards New!

Three steps to a polished theme

Choose a preset

Customize tokens

Review & export

Accordion Flow New!

Explore each stage

Pick a foundation

Customize your tokens

Preview on real pages

Export and integrate

Zigzag Timeline New!

From idea to production

Start a project

Start a project

Open the editor

Open the editor

Preview everywhere

Preview everywhere

Ship with confidence

Ship with confidence