Skip to main content

RootNative UI

Design-system agnostic component library for React Native. Ships with Material Design 3 out of the box.

Features

  • 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
  • Tree-shakeable with subpath exports
  • Responsive layout hooks (useBreakpoint, useBreakpointValue)

Get started

  • New projectQuick Start — scaffold a ready-to-run Expo app with npx rootnative create.
  • Existing projectInstallation — add RootNative UI to your React Native or Expo app.

Components

Layout

ComponentDescription
BoxTheme-aware View with spacing shorthand props
RowHorizontal layout with wrap and invert support
ColumnVertical layout with invert support
GridEqual-width multi-column grid
LayoutSafe area wrapper with theme background

Inputs

ComponentDescription
ButtonActions and choices with a single tap
CheckboxSelection controls for multiple choices
ChipCompact elements for filters and selections
IconButtonIcon-only actions
RadioSelection controls for single choice options
SwitchToggle controls for on/off settings
TextFieldText input with labels and validation

Data Display

ComponentDescription
CardContained surfaces for related content
ListVertically arranged items with text and icons
ProgressLinear and circular progress indicators (determinate / indeterminate)
TypographyMD3 type scale text rendering

Surfaces

ComponentDescription
AppBarTop navigation with title and actions