Free and open source · Nuxt UI v4

The visual theme editor for Nuxt UI

Pick colors, shades, radius and fonts for light and dark mode, see them on real components, then export a config you can paste into your app.

Browse components

Describe a theme

Try it yourself

Examples load a matching built-in preset. Write your own prompt on the AI page.

AS

Acme Studio

Workspace settings

Custom theme
Theme saved
Export it as app.config.ts, CSS variables, or JSON.
Storage64%
PaidSyncedPendingFailed
Light
  • primary: indigo 600
  • secondary: sky 600
  • success: emerald 600
  • info: blue 600
  • warning: amber 600
  • error: rose 600
  • neutral: zinc 500
Dark
  • primary: indigo 500
  • secondary: sky 500
  • success: emerald 500
  • info: blue 500
  • warning: orange 500
  • error: rose 500
  • neutral: zinc 500

See your theme on real pages

Every demo renders with the theme you're editing, in light and dark mode, at any screen width.

  • Components

    68 component pages

    Buttons, forms, overlays, tables and navigation.

  • Blocks

    15 block types

    Heroes, pricing, testimonials, footers and more.

  • Templates

    9 full pages

    Dashboard, chat, landing, pricing, login and more.

Export the theme you're looking at

The config on the right updates as you edit. Import a JSON export later to pick up where you left off.

app.config.ts
Palette assignments for Nuxt UI. Paste it into your app.
CSS variables
Radius, font, shade shifts and dark-mode overrides for main.css.
JSON
The full config, to save, share, or import again later.
app.config.ts 
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'indigo',
      secondary: 'sky',
      success: 'emerald',
      info: 'blue',
      warning: 'amber',
      error: 'rose',
      neutral: 'zinc',
    },
  },
})

// Dark mode and shade overrides — add the CSS variables from the CSS export to your main.css
// Dark mode uses different palettes:
//   warning: orange (light: amber)
// primary: indigo-600 (shifted from default 500)
// secondary: sky-600 (shifted from default 500)
// success: emerald-600 (shifted from default 500)
// info: blue-600 (shifted from default 500)
// warning: amber-600 (shifted from default 500)
// error: rose-600 (shifted from default 500)

Free, open source, and private

No account needed. Your themes stay in your browser, and AI generation uses your own API key. Built with Nuxt, Nuxt UI and Tailwind CSS.

Star on GitHubRead the guides