# Hanzo UI — Hanzo AI

> Accessible, high-performance React component library and design system tokens for building modern, responsive AI applications and websites.

React Component Library

# Hanzo UI

The React components powering Hanzo apps

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

Components your design team will sign off on

- Overlays are components. The rest is CSS.01
- Accessible by Default02
- Nothing invents a colour03
- One package, everywhere04
- Zero Runtime CSS05
- Production Tested06

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.

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

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 everything at once and a brand fork costs nothing.

pnpm add @hanzo/ui. The same components run chat, console, and cloud — upgrade once and all three move together.

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

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

Paste and ship

Paste this into any agent. It reads the skill manifest and calls UI from there.

Agent promptCopy

```
Read https://hanzo.ai/skill.md and use Hanzo UI in my project.
```

## 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.

[View on GitHub](https://github.com/hanzoai/ui)

## Get UI

Headless UI primitives

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

[Deploy to Cloud](https://platform.hanzo.ai/deploy)