Hanzo GUI
Universal UI framework for React Native and Web.
Hanzo GUI is a universal UI framework for building cross-platform applications with React Native and Web from a single codebase. It provides an optimizing compiler, design tokens, themes, and 50+ accessible components.
Start Here
- Introduction — What Hanzo GUI is and why it exists
- Core Concepts — Styled, variants, tokens, themes, and animations
- Guides — Framework setup for Next.js, Vite, Expo, and more
- Components — 50+ universal components
Quick Start
Install
npm install @hanzo/guiUsage
import { Button, H1, Paragraph, YStack } from '@hanzo/gui'
export function App() {
return (
<YStack padding="$4" gap="$3">
<H1>Hello</H1>
<Paragraph>Universal UI from one codebase.</Paragraph>
<Button>Press Me</Button>
</YStack>
)
}Key Concepts
| Concept | Description |
|---|---|
| Styled | Create styled components with type-safe variants |
| Tokens | Design tokens for spacing, colors, sizes, and radii |
| Themes | Nested, switchable themes with dark mode support |
| Compiler | Optimizing compiler that flattens and extracts styles |
| Animations | Pluggable animation drivers (CSS, Reanimated, Motion) |
| Media | Responsive styles with configurable breakpoints |
Last updated on