Nuxt UI as it ships, with themes on top
What Zoo UI is
Nuxt UI is already a polished, accessible component library. Zoo UI does not restyle it. It adds three things:
- Themes, as layers you opt into. A theme chooses colors, typefaces and the page ground, and stops there: radius, spacing, shadows, motion and focus rings stay Nuxt UI's. This site wears Forest, the first theme. Pick another scheme from the header and every component repaints.
- Components Nuxt UI doesn't have. Status by shape, quota meters, shown-once tokens, a code surface with copy, package-ecosystem marks, and a few more, all written on Nuxt UI's semantic tokens so they take whatever colors your product gives Nuxt UI.
- Colored edges. One addition to Nuxt UI's surfaces: a 3px edge in the surface's color, on cards, dialogs, slideovers and drawers.
Two packages
| Package | What you get |
|---|---|
@zooui/nuxt | The theme-free base: Nuxt UI as it ships, every Z* component, the colored-edge wrappers, and the mechanisms every product needs. No colors, typefaces or ground of its own: your product's look stays yours. |
@zooui/theme-forest | The Forest theme: a layer that extends @zooui/nuxt and adds Forest's colors, six accent schemes, Inter and JetBrains Mono, and the page ground. Extend this one layer to get both. |
Quick start
Extend the theme layer:
export default defineNuxtConfig({
extends: ['@zooui/theme-forest'],
css: ['~/assets/css/main.css'],
})
Make the layer's stylesheet the first line of your one CSS entry:
@import "@zooui/theme-forest/assets/css/forest.css";
Wrap the app in Nuxt UI's UApp and use any component:
<template>
<UApp>
<ZCard color="primary">
<ZKicker>deployments</ZKicker>
<ZStatus state="healthy" pill />
</ZCard>
</UApp>
</template>
The getting started guide covers the theme-free base, schemes and the versions you need.
Components
Rotate the signing key
The edge runs the full height: header, body and footer.
Nuxt UI's UCard with a colored left edge.
Install with pnpm add @zooui/theme-forest
pnpm add @zooui/theme-forest
export default defineNuxtConfig({
extends: ['@zooui/theme-forest'],
css: ['~/assets/css/main.css'],
})tsZoo UI's code surface — near-black in both themes — for a command, a config or an inline value, with copy.
A calendar-day field with typed entry, shortcut keys and a calendar picker, holding a Temporal.PlainDate.
Nuxt UI's UDrawer with a colored top edge.
A package manager as a two-letter mono tile, told apart by corner shape rather than brand color.
A value set in the mono face — a package name, a version, a hash — on a chip.
The mono label over a section, bracketed in the primary or set as an eyebrow.
Nuxt UI's UModal with a colored top edge.
One number input for money, percent, count and hours, formatting as you type, with unit marks that line up, steps that never snap, and a calculator mode.
Usage against a limit, amber from the warning mark, red and hatched over the limit.
An editor for a list of rows with the same few fields, with Add, Remove, folding, per-row errors and announcements.
Nuxt UI's USlideover with a colored top edge.
- slot 1 · free
- slot 2 · build 4812
- slot 3 · free
Capacity as one named chip per slot, open or held, as a labeled list.
A service's state by shape — circle, triangle, square, dashed ring, hollow ring — so it survives grayscale.
Light, dark or system as one segmented control, over Nuxt's color mode.
zoo_tok_7Qm2vX9kLr4TzW8nB3cYh6JdThe shown-once moment for a new secret, with copy, a warning and an optional acknowledgment.