The React component library for AI applications. 157 components on one substrate, so the same import runs on web, native and desktop.
Every component renders through @hanzo/gui
primitives on the @hanzo/tokens scale. No Radix, no Tailwind, no utility
classes — style props and $ tokens, which is what lets one import serve React,
React Native (Expo) and Tauri.
Other frameworks are their own packages, because a theme does not port:
@hanzo/svelte for Svelte 5.
pnpm add @hanzo/uiimport{Hanzo,Button,Card,CardHeader,CardTitle,CardContent,Input}from'@hanzo/ui'exportfunctionApp(){return(<Hanzo><Card><CardHeader><CardTitle>Welcome</CardTitle></CardHeader><CardContent><Inputplaceholder="Enter text…"/><Button>Submit</Button></CardContent></Card></Hanzo>)}<Hanzo> is the whole setup — it carries the gui config, the theme and the
stylesheet. There is no CSS import and no generator step.
| Import | What you get |
|---|---|
@hanzo/ui | the component surface — Button, Card*, Dialog*, Input, Select*, Tabs*, Popover*, Command*, … |
@hanzo/ui/product | charts, metrics, PageHeader, StatusTag, EmptyState, ComboBox, SlideOver, Toast |
@hanzo/ui/chat | Thread, Message, Composer, Sidebar, Header, Code, Sources |
@hanzo/ui/chat/pure | sends, ready, pinned — decisions with no React, loads in Node |
@hanzo/ui/models | ModelSelector, fetchModelCatalog |
@hanzo/ui/data | RecordsView, DataTable, typed field editors |
@hanzo/ui/core · /tokens | cn, font vars, the colour/theme/radii/spacing scale |
@hanzo/ui/theme.css · /styles.css | tokens alone, or the complete sheet |
@hanzo/ui/primitives/<Name> | one member, for hosts that modularize imports |
@hanzo/ui/{canvas,dashboard,usage,gitops} | optional-peer kits |
npx @hanzo/ui add button
npx @hanzo/ui add @aceternity/spotlight # 35+ external registries| Package | Purpose |
|---|---|
@hanzo/ui | the component library |
@hanzo/svelte | the Svelte 5 kit |
@hanzo/react | React primitives |
@hanzo/data | records, data tables, typed field editors |
@hanzo/canvas · @hanzo/dashboard | service/deploy canvas, dashboard kit |
@hanzo/commerce · @hanzo/checkout · @hanzo/shop | commerce |
@hanzo/brand · @hanzo/tokens | branding and design tokens |
@hanzo/event | telemetry client (POST /v1/event) |
pnpm install
pnpm --filter @hanzo/ui... build # the `...` builds workspace deps first| Command | |
|---|---|
pnpm --filter @hanzo/ui test:unit | styles + render surface |
pnpm --filter @hanzo/ui test:consumer | packs the tarball, installs it outside the repo, asserts computed styles |
pnpm typecheck · pnpm lint |
The shadcn CLI, the component registry and the docs sites live in
hanzoai/shadcn.
Docs at ui.hanzo.ai. MIT.