Components
Universal UI components for React Native and Web.
Hanzo GUI ships 50+ universal components that work on both React Native and Web. All components are accessible, themeable, and support animations.
Sections
- Accordion — Collapsible content sections
- Alert Dialog — Modal confirmation dialogs
- Anchor — Styled link component
- Avatar — User avatar with fallback
- Button — Pressable button with variants
- Card — Content container
- Checkbox — Toggle checkbox input
- Dialog — Modal dialog overlay
- Form — Form layout and validation
- Group — Group context for child styling
- Image — Cross-platform image
- Input — Text input field
- Label — Accessible form label
- List Item — Pressable list row
- Navigation Menu — Site navigation
- Popover — Floating content panel
- Progress — Progress indicator bar
- Radio Group — Single-select radio options
- Scroll View — Scrollable container
- Select — Dropdown select menu
- Separator — Visual divider
- Sheet — Bottom sheet modal
- Slider — Range slider input
- Spinner — Loading indicator
- Switch — Toggle switch input
- Tabs — Tabbed content panels
- Text Area — Multi-line text input
- Toast — Notification toast
- Toggle Group — Multi-select toggle buttons
- Tooltip — Hover tooltip
- Unspaced — Remove spacing between children
Hanzo GUI
React Native UI kit with copy-paste composable components
Stacks
An optional base for creating flex-based layouts
Group
Render horizontal or vertical groups easily
ScrollView
React Native ScrollView with Hanzo GUI props
Separator
Create borders between components
Unspaced
Avoids spacing for children inside a spacing container
Z-Index & Stacking
How Hanzo GUI automatically stacks overlays and floating content
Text
Text primitives with themes custom to each font
Headings
Heading components that mirror HTML equivalents
Label
Label form elements with accessibility
Button
A simple button component
Checkbox
Toggle state in forms
Form
A simple form component for native and web
Input & TextArea
Flexible form fields in styled and unstyled forms
Input & TextArea
Single-line and multi-line text inputs with web-first API
RadioGroup
Use in a form to allow selecting one option from multiple
Select
Show a menu of items that users can select from
Slider
Drag to set values, vertically or horizontally
Switch
A toggle between two states
ToggleGroup
Two-state buttons that can be toggled on or off
Dialog
Show a modal with configurable layout and accessible actions
Alert Dialog
Show an alert prompt in a dialog
Popover
Show content with a trigger in a floating pane
Sheet
A bottom sheet that animates
Tooltip
A tooltip on web, with only accessibility output on native
Toast
Use to show feedback to user interactions.
Portal
Send items to other areas of the tree
Tabs
Use in pages to manage sub-pages
Accordion
A vertically stacked set of interactive headings with content
Menu
A selectable list in a popover with nested submenus
Context Menu
A menu component triggered by right-click on web and long press on touch devices
Card
Sizable, themeable cards with a flexible API
Avatar
Display aspect-ratio-fixed images with a fallback while loading
Image
A pure, lightweight Image component with Hanzo GUI style props
Image
Web compatible and super light image component with Hanzo GUI style props
Spinner
Render a loading indicator
Progress
Show percent completion with a progress bar
Shapes
Easy to use Square and Circle
Linear Gradient
Linear gradients that work with Hanzo GUI style props
Anchor
Link to external websites
FocusScope
Manage focus behavior within elements accessibly.
RovingFocusGroup
Manage keyboard navigation within a group of focusable elements.
ListItem
A component for displaying rows of items
Visually Hidden
Hide content accessibly
HTML Elements
Render semantic HTML with these elements
Lucide Icons
Cross-platform compatible SVG-based icons
Native UI
Optional native integrations for better performance and UX
Last updated on