Skip to content
Try Hanzo
Language: English (United States)

Hanzo UI

React Component Library

The React components powering Hanzo apps

GitHub

Panel

  • chat.hanzo.aiin production
  • platform.hanzo.aiin production
  • every Hanzo dashboardin production

@hanzo/design tokens

--radius 14px
--density 1.00

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 <Button>Ship it</Button>
}

Hello()

Components your design team will sign off on

  1. 01

    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.

  2. 02

    Accessible by Default

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

  3. 03

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

  4. 04

    One package, everywhere

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

  5. 05

    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.

  6. 06

    Production Tested

    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 prompt
Read https://hanzo.ai/skill.md and use Hanzo UI in my project.

Get UI

Headless UI primitives

Stop reinventing buttons.

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

View on GitHub pnpm add @hanzo/ui