tetra-ui

shadcn/ui for React Native — copy-paste components you own, built for mobile with Expo and Uniwind.

· ·

What is tetra-ui?

tetra-ui brings the philosophy to React Native: beautiful defaults, open code, and a CLI that drops components straight into your app. You are not installing a black-box package — you are building a component library that is yours to shape.

bash
npx shadcn@latest add @tetra-ui/button

Components are styled with (Tailwind for React Native) and tuned for touch, accessibility, and mobile performance.

Quick start

  1. Install Uniwind —
  2. Add utilities — npm install class-variance-authority clsx tailwind-merge
  3. Add a component:
bash
npx shadcn@latest add @tetra-ui/button

Full setup guide:

Requirements

  • React 19
  • React Native
  • recommended

Components

30+ components including Button, Card, Form, Select, Bottom Sheet, Menu (Expo UI), Switch, Slider, and more.

ComponentInstall
Buttonnpx shadcn@latest add @tetra-ui/button
Formnpx shadcn@latest add @tetra-ui/form
Selectnpx shadcn@latest add @tetra-ui/select
Bottom Sheetnpx shadcn@latest add @tetra-ui/bottom-sheet
Menunpx shadcn@latest add @tetra-ui/menu

Why tetra-ui?

  • Copy-paste ownership — same workflow as shadcn/ui on the web
  • Mobile-native — touch-first interactions, platform-aware patterns
  • Expo-ready — native Menu, Switch, and Slider via @expo/ui
  • Accessible — semantics and behavior built in from the start
  • Customizable — edit component source directly in your repo
  • Dark mode — light/dark theme tokens via CSS variables

For AI coding agents

  • Agent instructions:
  • LLM context:
  • Full reference:

Monorepo structure

tetra-ui/├── apps/│   ├── docs/          # Documentation site (tetra-ui.com)│   └── example/       # Expo example app├── packages/│   └── tetra-ui/      # Component source

Development

bash
pnpm installpnpm dev:docs      # Documentation sitepnpm dev:example   # Expo example app

Rebuild the component registry after editing apps/docs/registry/registry.json:

bash
pnpm --filter docs registry:build

When to use tetra-ui

Choose tetra-ui when you want shadcn-style ownership on React Native with Expo and Uniwind. If you need identical components on web and native from one package, consider a universal kit like Tamagui instead.

License

MIT — see