@zds/ui

React components and tokens for Z Protocol surfaces. Built on the v2 (Serene System) design language.

npm install @zds/ui

Quick start

import "@zds/ui/styles/tokens.css";
import { Button, DataTable, ChainSwitcher } from "@zds/ui";

In Next.js App Router projects, add "@zds/ui" to transpilePackages in next.config.js — the package ships TSX source, so Next compiles it through SWC.

// next.config.js
module.exports = {
  transpilePackages: ["@zds/ui"]
};

What's exported

47 components covering: buttons, badges, hash chips, address labels, data tables, charts, tabs, modal/result shells, key-value grids, transaction steppers, form controls, action bars, metric cards, and the full app shell (header, footer, search, chain switcher, theme toggle).

Full inventory: see the INVENTORY.md in the repo.

Brand

This package is part of a larger brand system. Read the brand spec for tone, voice, and aesthetic guidance before building new surfaces.

License

MIT — © 2026 Z Protocol.