# Hanzo UI — Hanzo AI

> Open-source, accessible, themeable React components built on @hanzo/gui primitives and @hanzo/design tokens. Install them, theme them, ship faster.

React Component Library

# Hanzo UI

The React components powering Hanzo apps

Open source, on @hanzo/gui primitives and @hanzo/design tokens. No Tailwind, no Radix, no vendored component folder to maintain — the admin you are reading about elsewhere on this site is built out of it.

[Browse components](https://docs.hanzo.ai/docs/projects/hanzoai/ui)[GitHub](https://github.com/hanzoai/ui)

## Components your design team will sign off on

The same library we use to ship our own products — open-sourced for yours.

### Overlays are components. The rest is CSS.

Dialog and DropdownMenu are real components, because they carry focus management, keyboard behaviour and placement that CSS cannot. Buttons, panels, fields and tables are classes over tokens — which is why reading the markup is still possible.

### Accessible by Default

WAI-ARIA compliant, keyboard navigable, screen reader tested. Accessibility isn't an afterthought — it's the foundation.

### Nothing invents a colour

Every value comes from a @hanzo/design token — a plain CSS variable, alongside self-hosted faces. Nothing hard-codes a colour, a size or a radius, so retuning the tokens retunes every surface at once and a brand fork costs nothing.

### One Package, Every Surface

pnpm add @hanzo/ui. The same components run chat, console, and cloud — upgrade once and every surface moves together.

### Zero Runtime CSS

Built on @hanzo/gui primitives. No styled-components, no emotion, no CSS-in-JS at render — one atomic stylesheet, generated at build.

### Production Tested

Powers chat.hanzo.ai, console.hanzo.ai, and every Hanzo dashboard. If it ships in our products, it ships in your code.

## From init to UI in 60 seconds

Add the components you need. Skip the ones you don't.

terminal

```
# Initialize in any React project npx @hanzo/ui init # Add the components you need npx @hanzo/ui add button dialog dropdown-menu # Use them import { Button } from "@hanzo/ui" export function Hello() { return Ship it

}
```

## Stop reinventing buttons.

Hanzo UI gives you the components — you focus on what makes your product different.

[Browse components](https://docs.hanzo.ai/docs/projects/hanzoai/ui)[View on GitHub](https://github.com/hanzoai/ui)

## Get started with UI

[Read the docs](https://docs.hanzo.ai/docs/projects/hanzoai/ui)[View on GitHub](https://github.com/hanzoai/ui)

## Open source

License: MIT[hanzoai/ui](https://github.com/hanzoai/ui)

## Get UI

Headless UI primitives

[Deploy to Cloud](https://console.hanzo.ai/deploy)[Self-host](https://docs.hanzo.ai/docs/projects/hanzoai/ui)