Introduction
Delightful, accessible React Native components you copy into your project and own completely—purpose-built for mobile.
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.
Requirements
tetra-ui targets React 19 and the React Native New Architecture. Older runtimes are not supported.
This is not a traditional component library
Most libraries ask you to install from npm, import opaque APIs, and fight the styling system when something does not fit. tetra-ui works differently:
- Add components with the CLI — same workflow as shadcn/ui (
npx shadcn add @tetra-ui/button). - Own the source — files live in your repo; change behavior, tokens, or structure without wrappers.
- Ship with confidence — defaults are tuned for touch, accessibility, and mobile performance out of the box.
If you have customized a web button by overriding CSS in a third-party library, you already know the problem. With tetra-ui, you edit the component file directly.
Principles
Open code
Every component is plain TypeScript in your project. No hidden implementations, no version lock-in on styling internals—just code you can read, diff, and hand to your team (or an LLM) like any other module.
Mobile-native defaults
Interactions, spacing, and feedback are designed for fingers and small screens—not cursors and wide viewports. Components respect platform conventions on iOS and Android instead of feeling like a web layout squeezed onto a phone.
Composable building blocks
Shared patterns (cn, variants, slots) keep APIs predictable as you add more pieces. New components should feel familiar, not like learning another library inside your library.
Distribution you control
A flat registry schema plus the shadcn CLI means you pull only what you need, when you need it. Your components.json points at the tetra-ui registry; updates are deliberate copies, not surprise semver bumps.
Built for mobile—not “universal”
Many kits optimize for write-once, run-anywhere. That often means compromises in touch targets, motion, platform chrome, and performance on real devices.
tetra-ui chooses purpose-built mobile UI over lowest-common-denominator abstractions:
- Native feel — patterns that belong on a phone, not a responsive website
- Touch-first — hit areas, gestures, and feedback meant for hands
- Performance — React Native best practices without web-centric baggage
- Theming — light/dark tokens via Uniwind and CSS variables you already control
When tetra-ui fits
Choose tetra-ui when you want shadcn-style ownership on React Native—especially with Expo and a Tailwind/Uniwind styling stack. If you need identical components on web and native from one package, a universal kit may be a better fit.
What you get
- Accessibility — Semantics and behavior considered from the start, not bolted on later
- Customization — Full control over styles and logic in your own files
- Expo-ready — Works with Expo without extra wiring
- TypeScript — First-class types across components and helpers
- Dark mode — Theme variants built into the token system
Ready to try it? Follow the installation guide, add a component with the CLI, and open the component gallery to see what ships today.