Skip to content
Zuno UI
Documentation
DOCUMENTATION
RESOURCES
Documentation / Getting started
ALPHA

Start with the foundation.

ZUNO ships editable React components built on Base UI. The zunoui CLI copies each component into your project, so the code is yours to change.

1. Requirements

Node.js 22 or later and a React project with Next.js or Vite, TypeScript and Tailwind CSS v4 already configured. The @/* alias must point to ./src/* or ./* in tsconfig.json. npm, Bun, pnpm and Yarn are supported.

2. Install

From the root of your project:

bashTerminal
npx zunoui@latest init
npx zunoui@latest add button

init writes components.json, the ZUNO theme, a cn utility when needed, and zuno.lock.json. add copies a component and its dependencies. The CLI detects your package manager from the lockfile; if there are several, pass --pm npm|bun|pnpm|yarn.

3. Use your code

tsxexample.tsx
import { Button } from "@/components/ui/button"

<Button>Create project</Button>

Components use @base-ui/react under the hood. To show a form's validation errors, compose Field inside Form from @base-ui/react/form; try it in the Field examples. Every component page lists its install command, dependencies, API and accessibility notes. Browse them all in the gallery.

Existing projects

init keeps your theme, your components.json fields and other registries. It reuses your configured utility (it must export cn) and compatible installed dependencies, and never overwrites components you have modified. Existing themes must provide the semantic tokens the components read; they are not replaced or filled in automatically. Registry, path and version conflicts are reported before any file is written. Set aliases.ui to @/components/zuno to keep ZUNO components in their own folder.

Review component updates

bashTerminal
npx zunoui@latest diff button
npx zunoui@latest update button

diff compares your copy with the current registry without changing files. update replaces only files whose fingerprints in zuno.lock.json still match the local copy; commit that lockfile with your components. Locally edited files and copies installed before fingerprints existed require manual review. After merging a file to match the registry, run add to track it. Updating the npm CLI alone does not change copied components.

Alpha status

The API, the available components and the configuration may change before 1.0.0. The gallery remembers the light, dark or system theme; your project keeps control of its own theme integration. Found a bug or want a component? Open an issue on GitHub.