Getting started

Choose a layer

Zoo UI is two Nuxt layers. Your app extends one of them.

The theme layer extends the base, so a Forest product gets both from one line. A product with its own look extends the base alone and keeps its own colors, typefaces and color-mode key. The Z* components still work there, in its colors.

With the Forest theme

pnpm add @zooui/theme-forest

export default defineNuxtConfig({
  extends: ['@zooui/theme-forest'],
  css: ['~/assets/css/main.css'],
})

Theme-free, with your own look

pnpm add @zooui/nuxt

export default defineNuxtConfig({
  extends: ['@zooui/nuxt'],
  css: ['~/assets/css/main.css'],
  // your color mode stays yours
  colorMode: { storageKey: 'acme-color-mode' },
})

Your palette goes in app.config.ts, as with plain Nuxt UI:

export default defineAppConfig({
  ui: { colors: { primary: 'sky', neutral: 'slate' } },
})

The one CSS entry

The layers register Nuxt UI but not the stylesheet. Your app owns its single Tailwind entry, and the layer's stylesheet is its first line. Your own tokens, utilities and @source lines go after it, in the same file: one Tailwind compile.

@import "@zooui/theme-forest/assets/css/forest.css";   /* or @zooui/nuxt/assets/css/base.css */

@theme {
  --color-brand: #117d72;
}

Three rules keep it working, and the base fails the build with the fix if one is broken:

• Don't add @nuxt/ui, tailwindcss or @tailwindcss/vite yourself. The layer owns them; a second Tailwind registration fails the build.
• Match the layer and the stylesheet. forest.css with the base layer alone, or base.css under the theme layer, is half a theme and fails the build.
• Wrap the app in <UApp>. Nuxt UI mounts toasts, tooltips and overlays through it.

Pick a scheme

Forest has six accent schemes. Teal is the default; to use another, import its file after the layer's stylesheet:

@import "@zooui/theme-forest/assets/css/forest.css";
@import "@zooui/theme-forest/schemes/ink-indigo.css";

A scheme only redefines raw color ramps, so that one line is all it takes. The theming guide lists them, and the picker in this site's header switches between them live.

Minimum versions

A product on an older Nuxt UI removes its own @nuxt/ui and tailwindcss when it adopts Zoo UI, and gets 4.11 through the layer.

Next

• Theming: the Forest theme, its schemes, typefaces and per-section accents.
• Components: every Z* component, with live examples and its API.