About
zui: a shadcn registry of composed React components, and the npm packages they
build on. The components are built on Base UI primitives and published under every
shadcn base- style, and the shadcn CLI writes them into your app as source you own.
Install a component
The app needs a components.json on a Base UI style. Create one with:
pnpm dlx shadcn@latest init --base base --preset nova
Name the registry in its components.json:
{
"registries": {
"@zui": "https://ui.zeroxsolutions.com/r/styles/{style}/{name}.json"
}
}
Then add any item:
pnpm dlx shadcn@latest add @zui/status-indicator
The CLI writes the item's files under your components.json aliases, and pulls in every shadcn
primitive and registry item it composes. The full index is
/r/styles/base-nova/registry.json; each item's page in the docs
shows its preview, its source and its API.
Packages
pnpm add @zeroxsolutions/icons
Each package's README covers its API.
Repository layout
| Path | Contents |
|---|
apps/registry-ui | The registry items' source, registry.json, and the Next.js docs site that serves both |
apps/registry-ui-e2e | Playwright tests against the built site |
packages/* | The npm packages above |
iac/ | Terraform for the bucket that serves the emoji artwork |
Development
Requires Node.js and pnpm 10.
pnpm install
pnpm nx run-many -t lint typecheck test build # the gate CI runs
pnpm nx run-many -t wrangler:dev -p @zeroxsolutions/registry-ui # the site on the Workers runtime, port 8787
pnpm nx e2e @zeroxsolutions/registry-ui-e2e
Tasks run through Nx; pnpm nx show project <name> lists a project's targets.
Contributing
Issues and pull requests are welcome. Read CONTRIBUTING.md for how issues and
commits are written.
