Installation

Set up Next.js or Vite, add the Xzero UI registries, and install your first component.

Requirements

A React 19 project with TypeScript and the @/* path alias. Xzero uses CSS modules and CSS variables.

Add both registries

Add this to components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

Add the foundation

npx shadcn@4.23.0 add @xzero-ui/xzero-foundation

Import the tokens at your application root:

import "@/components/xzero/foundation.css";

Install components

npx shadcn@4.23.0 add @xzero-ui/button @xzero-ui-pro/dock

All registry dependencies resolve through the Xzero UI registry. npm package downloads are still allowed. Xzero credentials are not required by this public library.

Copy sample assets

For examples with portraits, photos, fonts, or logos, download and run the asset helper once with the receiving project path. It downloads verified assets into that project and refuses to overwrite differing assets.

curl -fsS https://mcp.xzero.co.uk/install-assets.mjs -o xzero-install-assets.mjs
node xzero-install-assets.mjs .

Manual installation

Open any item's Code tab, copy every source file, and install its listed npm dependencies. Complete registry JSON is linked from the Markdown document.