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

pnpm add @onlynative/core @onlynative/utils @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
Typography	MD3 type scale text rendering

Surfaces

Component	Description
AppBar	Top navigation with title and actions