OnlyNative 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)

Quick Start

New project

Scaffold a new Expo project with OnlyNative UI pre-configured:

npx onlynative create

See the Quick Start guide for the full walkthrough.

Existing project

Add OnlyNative UI to an existing React Native or Expo project:

yarn

yarn add @onlynative/core @onlynative/components

npm

npm install @onlynative/core @onlynative/components

pnpm

pnpm add @onlynative/core @onlynative/components

Wrap your app with ThemeProvider:

import { ThemeProvider } from '@onlynative/core'

export default function App() {
  return (
    <ThemeProvider>
      {/* Your app */}
    </ThemeProvider>
  )
}

Use a component:

import { Button } from '@onlynative/components/button'

<Button variant="filled" onPress={() => {}}>
  Get Started
</Button>

Components

Layout

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

Inputs

Component	Description
Button	Actions and choices with a single tap
Checkbox	Selection controls for multiple choices
Chip	Compact elements for filters and selections
IconButton	Icon-only actions
Radio	Selection controls for single choice options
Switch	Toggle controls for on/off settings
TextField	Text input with labels and validation

Data Display

Component	Description
Card	Contained surfaces for related content
List	Vertically arranged items with text and icons
Progress	Linear and circular progress indicators (determinate / indeterminate)
Typography	MD3 type scale text rendering

Surfaces

Component	Description
AppBar	Top navigation with title and actions