Universal UI Framework

Hanzo GUI — One Codebase,
Every Platform

Universal UI framework for React Native and Web. Build cross-platform apps with optimizing compiler, themes, tokens, and responsive styles.

Get StartedView on GitHub
App.tsx
import { Button, H1, Paragraph, YStack } from '@hanzo/gui'

export function App() {
  return (
    <YStack padding="$4" gap="$3">
      <H1>Welcome</H1>
      <Paragraph theme="alt2">
        Build once, run on Web and Native.
      </Paragraph>
      <Button theme="active" onPress={() => alert('Pressed!')}>
        Get Started
      </Button>
    </YStack>
  )
}

Build with optimizing compiler, design tokens, and universal components.

Cross-Platform

  • React Native and Web from one codebase
  • SSR with full server-side rendering support
  • Responsive styles with media queries
  • Accessible with built-in ARIA support

Themes & Tokens

Type-safe design tokens with automatic dark mode, sub-themes, and CSS variable generation. Full theme nesting support.

const tokens = createTokens({
  size: { sm: 4, md: 8, lg: 16 },
  color: { brand: '#6366f1' },
  radius: { sm: 4, lg: 12 },
})

Optimizing Compiler

Flattens component trees and extracts styles at build time. Turns inline styles into atomic CSS on web and optimized StyleSheet.create on native.

Flatten

Removes nested views

Extract

Atomic CSS at build

Dead Code

Removes unused styles

Partial

Eval what it can

Rich Component Library

50+ universal components including sheets, dialogs, popovers, forms, lists, and more. All accessible, themeable, and animated.

import { Sheet, Button } from '@hanzo/gui'

<Sheet modal snapPoints={[50]}>
  <Sheet.Trigger asChild>
    <Button>Open Sheet</Button>
  </Sheet.Trigger>
  <Sheet.Frame>
    <Sheet.Handle />
    {/* content */}
  </Sheet.Frame>
</Sheet>

Documentation

IntroductionGet started with Hanzo GUICoreStyled, variants, tokens, themesGuidesNext.js, Vite, Expo setupComponents50+ universal components

Ready to Build?

Start building universal apps with Hanzo GUI. One codebase for React Native and Web with optimizing compiler, themes, and 50+ components.

Read the DocsGitHub