<YStackp="$4"bg="$4"rounded="$4"/>
Build it once. Ship it everywhere.
One codebase, every platform
Write your UI once. Render it natively on iOS, Android, web, and desktop. Same components, same props, same behavior.
01 / 06
- iOSNative
- AndroidNative
- WebAtomic CSS
- DesktopmacOS · Win · Linux
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.
02 / 06
Hello, HanzoGet startedHello, HanzoGet startedCompile-Time CSS
Styles flatten to atomic CSS at build time. Zero runtime cost on the web, zero style recalc on native.
03 / 06
Composable Primitives
Stack, XStack, YStack, Text, Button, Sheet, and Dialog — primitives that compose into anything without leaking abstraction.
04 / 06
Hello, HanzoGet started- Stack
- XStack
- YStack
- Text
- Button
- Sheet
- Dialog
Animated by Default
Spring-driven animations on every prop. No extra library, no boilerplate — just declare the target state and ship.
05 / 06
Hello, HanzoGet started
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.
<YStack06 / 06
/>✓
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/ui'
export function Welcome() {
return (
<YStack space="$4" padding="$4">
<Text size="$8">Hello, Hanzo</Text>
<Button>Get started</Button>
</YStack>
)
}
<YStackp="$4"bg="$4"rounded="$4"/>
Hello, HanzoGet startediOS
Native
<YStackp="$4"bg="$4"rounded="$4"/>
StackXStackYStackTextButtonAndroid
Native
<YStackp="$4"bg="$4"rounded="$4"/>
Hello, HanzoGet startedWeb
Atomic CSS
Styles flatten to atomic CSS at build time. Zero runtime cost on the web, zero style recalc on native.
<YStackp="$4"bg="$4"rounded="$4"/>
StackXStackYStackTextButtonSheetDialogHello, HanzoGet startedDesktop
macOS · Win · Linux
Paste and ship
Paste this into any agent. It reads the skill manifest and calls GUI from there.
Read https://hanzo.ai/skill.md and use Hanzo GUI in my project.The design system that ships your product
Runs every Hanzo app in production, on web, native, and desktop.