Introduction

What is tetra-ui?

tetra-ui is a modern, accessible React Native component library that brings the same philosophy and approach as shadcn/ui to the mobile development world. Built with a focus on customization, performance, and developer experience, tetra-ui provides a collection of carefully designed, open-source components that you can copy directly into your project and own completely.

tetra-ui is built for React 19 and relies on features only available in the New Architecture of React Native.

Key Features

• 🎨 Mobile-First Design: Every component is crafted specifically for mobile experiences
• ♿ Accessibility First: Built with accessibility in mind from the ground up
• 🎯 Copy & Own: No npm dependencies - copy components directly into your project
• ⚡ Performance Optimized: Built with React Native best practices and optimized for mobile
• 🎭 Fully Customizable: Complete control over styling and behavior
• 🌙 Dark Mode Ready: Built-in theme support with seamless dark/light mode switching
• 🚀 Expo Ready: Supports Expo out of the box with no additional configuration required
• 📱 Uniwind Powered: Leverages Uniwind for consistent, utility-first styling
• 🔧 TypeScript Native: Full TypeScript support with excellent developer experience

Why tetra-ui?

The shadcn/ui Philosophy for React Native

Much like shadcn/ui revolutionized web development, tetra-ui brings the same principles to React Native:

• No Black Box: You own the code completely - no hidden dependencies or magic
• Copy & Customize: Copy components directly into your project and modify as needed
• Framework Agnostic: Works with any React Native setup, not tied to specific frameworks
• Community Driven: Open source and community-focused development

Universal vs Mobile-Only

Many component libraries aim for "write once, run anywhere" - creating universal components that work on both web and mobile. While this approach has its merits, tetra-ui takes a different stance:

We believe in purpose-built tools over universal compromises.

Universal libraries often make tradeoffs in:

• Design: Components that look good on web but feel awkward on mobile
• Performance: Optimizations that work for web but hurt mobile performance
• User Experience: Interactions designed for mouse that don't translate to touch
• Platform Integration: Missing out on platform-specific features and conventions

tetra-ui is crafted specifically for mobile, ensuring:

• Native Feel: Components that feel like they belong on mobile devices
• Touch Optimization: Interactions designed for fingers, not cursors
• Platform Awareness: Respects iOS and Android design patterns
• Performance: Optimized for mobile hardware and constraints