OnlyNative UI

Design system agnostic component library for React Native, built as a pnpm + Turborepo monorepo. Ships with a Material Design You theme out of the box — or bring your own design system using the pluggable theme engine.

Documentation  |  Live Demo  |  GitHub

Try it on your device

Scan the QR code with the Expo Go app to preview components on your device:

Features

• Pluggable theme engine — use the built-in Material Design You theme or create your own design system
• Token-based theming (colors, typography, shape, spacing, elevation, motion, state)
• Light and dark themes out of the box
• Responsive breakpoint utilities (useBreakpoint, useBreakpointValue)
• Subpath exports for tree-shaking (@onlynative/components/button, etc.)
• Accessible by default (role, accessibilityLabel, accessibilityState)
• State-layer press/hover/focus feedback
• TypeScript-first with strict mode

Installation

# Install the core theme package
yarn add @onlynative/core

# Install the component library
yarn add @onlynative/components

Peer dependencies — make sure these are installed in your project:

npx expo install react react-native react-native-safe-area-context

Optional — only needed if you plan to use icons in your app:

npx expo install @expo/vector-icons

Quick Start

Wrap your app with ThemeProvider and start using components:

import { ThemeProvider, lightTheme } from '@onlynative/core'
import { Button, Typography } from '@onlynative/components'

export default function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      <Typography variant="headlineSmall">Hello UI</Typography>
      <Button variant="filled">Press me</Button>
    </ThemeProvider>
  )
}

You can also import individual components via subpath exports:

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

CLI (copy-paste workflow)

Prefer to own the source code? Use the CLI to scaffold components directly into your project

npx onlynative init          # Set up config + install @onlynative/core
npx onlynative add button card text-field

Component files are copied into your project with imports rewritten to match your aliases. See the CLI README for the full command reference.

Packages

Package	Size	Description
@onlynative/core		Theme engine, theme contracts, built-in Material Design You theme, ThemeProvider, useTheme hook, responsive utilities.
@onlynative/components		UI components with subpath exports for tree-shaking.
@onlynative/cli		CLI to scaffold components into your project (shadcn/ui-style).
example	—	Expo Router showcase app for testing and previewing components.
docs	—	Docusaurus documentation site.

Repository Layout

.
├── docs/                  # Docusaurus documentation site
├── example/               # Expo Router showcase app
├── packages/
│   ├── core/              # Theme + provider primitives
│   ├── components/        # Reusable UI component library
│   └── cli/               # CLI for scaffolding components into projects
├── turbo.json
└── pnpm-workspace.yaml

Development

Requirements

• Node.js >=18
• pnpm 9.x

Setup

pnpm install

Commands

Command	Description
pnpm run build	Build all packages with Turborepo
pnpm run typecheck	Type-check all packages (tsc --noEmit)
pnpm run lint	ESLint across example and packages
pnpm run test	Run tests across all packages
pnpm run format	Format with Prettier
pnpm run example	Start the Expo example app
pnpm run clean	Clean build outputs
pnpm run docs:dev	Start documentation dev server

Running the Example App

pnpm run example            # Start Expo dev server

# Or target a specific platform
pnpm --filter example ios
pnpm --filter example android
pnpm --filter example web

Tech Stack

Layer	Technology
Runtime	React 19.1, React Native 0.81.5, Expo SDK 54
Language	TypeScript 5 (strict mode)
Build	tsup (package bundling), Turborepo (task orchestration)
Package Manager	pnpm 9 (workspace protocol)
Testing	Jest 29, @testing-library/react-native
Documentation	Docusaurus 3

Contributing

See CONTRIBUTING.md for guidelines.

License

This project is licensed under the MIT License.