# Hanzo GUI — Hanzo AI

> The cross-platform UI kit and design system behind every Hanzo app — web, mobile, desktop. Tokens, primitives, and motion that ship the same code…

@hanzo/gui — Cross-Platform UI Kit

# Hanzo GUI

One UI kit. Every platform.

The primitives underneath every Hanzo app. One component tree renders through react-native-web in a browser and natively on a phone, off the same props — so a screen is written once and read once, whichever thing is showing it.

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

Paste and ship

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

Agent promptCopy

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

## Build it once. Ship it everywhere.

The same code that runs your web app runs your iOS app. No bridges, no compromise.

01

### One codebase, every platform

Write your UI once. Render it natively on iOS, Android, web, and desktop. Same components, same props, same behavior.

02

### Design tokens, not CSS

Colour, spacing, typography and motion are tokens in one place. Brand is resolved from the hostname it is served on, so the same build wears the right name on every domain without a fork.

03

### Compile-Time CSS

Styles flatten to atomic CSS at build time. Zero runtime cost on the web, zero style recalc on native.

04

### Composable Primitives

Stack, XStack, YStack, Text, Button, Sheet, and Dialog — primitives that compose into anything without leaking abstraction.

05

### Animated by Default

Spring-driven animations on every prop. No extra library, no boilerplate — just declare the target state and ship.

06

### The shorthands are the API

p, px, bg, items, justify, rounded — the short style props are what the config accepts, and every token behind them is typed. A value that has drifted out of the design system fails the typecheck rather than the review.

iOS

Native

Android

Native

Web

Atomic CSS

Desktop

macOS · Win · Linux

## Drop it in. Start shipping.

One install gets you the whole kit.

terminal

```
# Install pnpm add @hanzo/gui # Use it import { YStack, Button, Text } from '@hanzo/ui' export function Welcome() { return ( Hello, Hanzo Get started

) }
```

## The design system that ships your product

Runs every Hanzo app in production, on web, native, and desktop.

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

## Start building with GUI

[Get your API key](https://platform.hanzo.ai/api-keys)

One API key. One credit balance. Every primitive.

## Open source

License: Apache-2.0[hanzoai/gui](https://github.com/hanzoai/gui)0 stars

## Get GUI

React UI library

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