Hanzo GUI
One UI kit. Every platform.
The primitives underneath every Hanzo surface. 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.
Build it once. Ship it everywhere.
The same code that runs your web app runs your iOS app. No bridges, no compromise.
One Codebase, Every Surface
Write your UI once. Render it natively on iOS, Android, web, and desktop. Same components, same props, same behavior.
Design tokens, not CSS
Colour, spacing, typography and motion are tokens in one place. Brand is resolved from the hostname a surface is served on, so the same build wears the right name on every domain without a fork.
Compile-Time CSS
Styles flatten to atomic CSS at build time. Zero runtime cost on the web, zero style recalc on native.
Composable Primitives
Stack, XStack, YStack, Text, Button, Sheet, and Dialog — primitives that compose into anything without leaking abstraction.
Animated by Default
Spring-driven animations on every prop. No extra library, no boilerplate — just declare the target state and ship.
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.
Drop it in. Start shipping.
One install gets you the whole kit.
# Install
pnpm add @hanzo/gui
# Use it
import { YStack, Button, Text } from '@hanzo/gui'
export function Welcome() {
return (
<YStack space="$4" padding="$4">
<Text size="$8">Hello, Hanzo</Text>
<Button>Get started</Button>
</YStack>
)
}The design system that ships your product
Powered every Hanzo surface in production. Battle-tested across web, native, and desktop.