Core
Core concepts and APIs of Hanzo GUI -- styled, variants, tokens, themes, animations, and more.
Core APIs and concepts that power Hanzo GUI. These are the building blocks for creating styled, themed, responsive components.
Sections
- Configuration — Configure your GUI setup
- Styled — Create styled components
- Variants — Type-safe variant props
- View & Text — Base layout and text primitives
- Theme — Theme component and nesting
- useTheme — Access theme values in code
- Tokens — Create and use design tokens
- useMedia — Responsive hooks
- Animations — Animation drivers and usage
- Font Language — Font and language configuration
- Groups — Group context for parent-child styling
- Stacks — XStack, YStack, ZStack layouts
- Text — Text components and typography
Configuration
Set up media queries, tokens, themes, and more.
Config v5
Modern config and themes with @hanzogui/config/v5
Quick Config
Easy config and themes with @hanzogui/config/v4
View & Text
Your base components
styled()
Extend and build custom and optimizable components
Variants
Simple typed prop styles through styled()
Tokens
Accessing and using tokens
Theme
Change themes contextually
useTheme
Creating and using theme values
useMedia
Respond to different screen sizes
createStyledContext
Share variant props across compound components
Other exports
Helpful functions and constants
FontLanguage
Using custom fonts for each language
Server Rendering
Advanced SSR, hydration, and client-only rendering in Hanzo GUI
Animations
Swap out animation drivers per-platform or at runtime
Animation Drivers
Choose and configure animation drivers for your platform
AnimatePresence
Animate components as they mount and unmount
CSS Driver
Lightweight CSS transition-based animations
React Native Driver
Spring-based animations using React Native Animated
Reanimated Driver
Advanced off-thread animations with Reanimated
Motion Driver
High-performance web animations with WAAPI
Last updated on