Design-system agnostic component library for React Native. Ships with Material Design 3 out of the box.
Runs on iOS, Android, and web (through react-native-web), on the Expo SDK 57 runtime. See Installation for the platform table.
- Design-system agnostic theme engine — use MD3, build your own, or mix both
- Material Design 3 built-in with light and dark themes
- Generate branded MD3 themes from a single seed color
- Full TypeScript support with strict types
- Accessible by default — proper roles, labels, and states, and the OS reduce-motion setting is respected out of the box
- Tree-shakeable with subpath exports
- Responsive layout hooks (
useBreakpoint, useBreakpointValue, useWindowDimensions) on MD3 window size classes
- New project → Quick Start — scaffold a ready-to-run Expo app with
npx rootnative create.
- Existing project → Installation — add RootNative UI to your React Native or Expo app.
| Component | Description |
|---|
| Box | Theme-aware View with spacing shorthand props |
| Row | Horizontal layout with wrap and invert support |
| Column | Vertical layout with invert support |
| Grid | Equal-width multi-column grid |
| Layout | Safe area wrapper with theme background |
| Component | Description |
|---|
| Button | Actions and choices with a single tap |
| ButtonGroup | Connected buttons with single or multi selection |
| Checkbox | Selection controls for multiple choices |
| Chip | Compact elements for filters and selections |
| FAB | Floating action button for the screen's primary action |
| IconButton | Icon-only actions |
| Radio | Selection controls for single choice options |
| SearchBar | MD3 search bar with a clear button and trailing actions |
| Slider | Select a value or range from a continuous track |
| Switch | Toggle controls for on/off settings |
| TextField | Text input with labels and validation |
| Component | Description |
|---|
| Avatar | Image, initials, or icon representation of a person |
| Card | Contained surfaces for related content |
| Divider | Thin horizontal or vertical rule that groups content |
| Icon | Any icon source rendered through the theme resolver |
| List | Vertically arranged items with text and icons |
| LoadingIndicator | MD3 Expressive shape-morphing loading indicator |
| Progress | Linear and circular progress indicators (determinate / indeterminate) |
| Typography | MD3 type scale text rendering |
| Component | Description |
|---|
| AppBar | Top navigation with title and actions |
| BottomSheet | Draggable modal and standard sheets with snap points |
| Dialog | Basic and full-screen modal dialogs |
| KeyboardAvoidingWrapper | Keeps inputs visible when the keyboard opens |
| Menu | Anchored dropdown menus that flip and shift to stay on screen |
| Portal | Render content above the rest of the tree |
| Snackbar | Queued transient messages with an optional action |
| Tooltip | Plain and rich tooltips on hover or a long press |
| Component | Description |
|---|
| Tabs | Primary and secondary tab rows, fixed or scrollable |
| NavigationBar | 80dp bottom destination bar with an animated indicator pill |
| NavigationRail | 80dp side rail of destinations with an optional menu and FAB header |
| NavigationDrawer | Modal or standard side panel of destinations with sections and badges |