tetra-ui

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

tetra-ui.com · Documentation · Components

What is tetra-ui?

tetra-ui brings the shadcn/ui 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.

npx shadcn@latest add @tetra-ui/button

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

Quick start

1. Install Uniwind — docs.uniwind.dev
2. Add utilities — npm install class-variance-authority clsx tailwind-merge
3. Add a component:

npx shadcn@latest add @tetra-ui/button

Full setup guide: tetra-ui.com/docs/installation

Requirements

• React 19
• React Native New Architecture
• Uniwind
• Expo recommended

Components

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

Component	Install
Button	npx shadcn@latest add @tetra-ui/button
Form	npx shadcn@latest add @tetra-ui/form
Select	npx shadcn@latest add @tetra-ui/select
Bottom Sheet	npx shadcn@latest add @tetra-ui/bottom-sheet
Menu	npx shadcn@latest add @tetra-ui/menu

Browse all components →

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: AGENTS.md
• LLM context: tetra-ui.com/llms.txt
• Full reference: tetra-ui.com/llms-full.txt

Monorepo structure

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

Development

pnpm install
pnpm dev:docs      # Documentation site
pnpm dev:example   # Expo example app

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

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 LICENSE