Nuxt UI Theme Builder

Loading preview…

Blocks

Feature

Feature grids, bento layouts, and alternating sections to showcase capabilities.

Feature Section New!

A feature section using UPageSection with the :features prop to auto-render a 3-column grid of UPageFeature items — the canonical Nuxt UI v4 feature layout.

Features

Everything you need to build

A complete toolkit for designing, previewing, and shipping polished design systems.

Visual Builder
Design your theme visually with an intuitive point-and-click editor. Changes reflect instantly across all components.
Export Anywhere
Generate ready-to-use config files, CSS variables, or JSON. Drop into any Nuxt project in seconds.
Dark Mode
First-class dark mode support with independent light and dark palettes. Automatic contrast optimization.
125+ Components
Every component in Nuxt UI v4 is themed and ready. From buttons to data tables, everything stays consistent.
Fully Responsive
Components adapt to every screen size. Build once, deploy everywhere — mobile, tablet, and desktop.
Blazing Fast
Built on Nuxt 4 and Tailwind CSS v4 for optimal performance. Tiny bundles, fast renders, smooth interactions.

Feature Grid New!

A spotlight grid with atmospheric gradient orbs, staggered entrance animations, and interactive hover glow effects — each feature card has a gradient icon container with ring highlights that respond to hover state.

Why Choose Us

Built for modern teams

Powerful features designed for speed, scale, and security.

Enterprise Security

SOC 2 Type II certified with end-to-end encryption, SSO, and role-based access controls.

Version Control

Full history with branching and merging. Roll back any change with a single click.

Team Collaboration

Real-time multiplayer editing, comments, and approvals built right into the workflow.

Performance Insights

Built-in analytics dashboard. Track bundle sizes, render times, and Core Web Vitals.

Extensible Plugins

A growing ecosystem of plugins and integrations. Build your own or install from the marketplace.

Priority Support

Dedicated support engineers and a 99.9% uptime SLA. We're here when you need us.

Feature Alternating New!

An alternating feature layout with UPageSection in horizontal orientation — each section includes a realistic mock UI card (editor, preview, or export view) with window chrome, status badges, and a floating toast notification instead of plain image placeholders.

Design

Visual theme editor

Point-and-click controls for every design token — colors, typography, spacing, and radius. See results in real time without writing a single line of CSS.

theme.config

Primary

Secondary

Neutral

Preview

Live component previews

Browse 125+ real components, blocks, and full-page templates — all rendered live with your active theme. Toggle dark mode and viewport size instantly.

preview

Button

Active

Card

Styled

Modal

Ready

Export

One-click export

Generate app.config.ts, CSS variables, or JSON with a single click. Copy the output and paste it into any Nuxt UI project for instant theming.

app.config.ts

export default defineAppConfig({

ui: {

colors: {

primary: 'green',

neutral: 'slate'

}

})

Copied!

Feature Bento New!

A true asymmetric bento grid using CSS grid-template-areas with named regions — hero-sized cards get bullet sub-features with check icons, the wide card shows preset tag badges, and content density scales with cell size. Product-mapped features over a dot-grid texture with dual glow spots and frosted-glass styling.

Platform

A feature for every need

Visual Theme Editor

Fine-tune every detail of your design system with an intuitive visual editor. See changes reflected instantly across real component pages.

Semantic color palettes with per-role shade control
Independent light & dark mode configurations
Typography, radius, and spacing tokens

Live Preview

Every edit renders instantly in a sandboxed iframe with real Nuxt UI components — no refresh needed.

One-Click Export

Export your theme as app.config.ts, CSS variables, or JSON — ready to drop into any Nuxt UI project.

AI-Powered Generation

Describe the mood you want — professional, playful, bold — and let AI generate a complete theme for you. Supports OpenAI, Anthropic, and Google models with your own API key.

Natural language prompts for theme creation
Multi-provider support (BYOK)
Refine results with follow-up instructions
Full schema validation before applying

Presets & History

Start from curated presets or save your own. Full undo/redo history means you never lose a design iteration.

OceanForestSunsetSlateCustom…

Feature Cards New!

A numbered editorial feature layout with large step numbers, a gradient accent stripe on each card, icon badges, and staggered slide-in entrance animations — editorial magazine-style presentation with clear visual hierarchy.

Capabilities

Powerful features, simple interface

Everything you need to create a cohesive design system in minutes.

Design Tokens

Centralized tokens for colors, typography, spacing, shadows, and radii. Change once, update everywhere.

Live Preview

See every change reflected instantly across 125+ components. Toggle between light and dark mode in real time.

One-Click Export

Export your theme as app.config.ts, CSS custom properties, or JSON. Ready to drop into any Nuxt project.

Undo & Redo

Full change history with unlimited undo and redo. Experiment freely without losing previous work.