Tamagui — Universal UI Kit for React and React Native

Introduction

Tamagui is a universal UI library for React and React Native that delivers 100% style parity across web and mobile. Its optimizing compiler extracts styles at build time to produce near-zero-runtime CSS on the web while keeping full React Native compatibility, solving the long-standing problem of writing one codebase for both platforms without performance trade-offs.

What Tamagui Does

• Provides a component library that works identically on React web and React Native
• Ships an optimizing compiler that flattens components and extracts atomic CSS at build time
• Offers a token-based design system with themes, spacing scales, and responsive breakpoints
• Includes 50+ headless and styled UI components out of the box
• Supports animations via CSS transitions on web and React Native Animated on mobile

Architecture Overview

Tamagui uses a compiler plugin (Babel or SWC) that analyzes JSX at build time. When props are deterministic, it flattens nested components into a single DOM element and extracts inline styles into atomic CSS classes. At runtime, a thin reconciler handles dynamic styles. The theme engine uses CSS variables on web and React context on native, keeping both paths fast.

Self-Hosting & Configuration

• Initialize with npm create tamagui@latest for a full starter with Expo and Next.js
• Configure your design tokens in tamagui.config.ts for colors, spacing, fonts, and breakpoints
• Add the Tamagui compiler plugin to your Babel, SWC, or Vite config
• Use @tamagui/theme-base or create custom themes with createTheme()
• Enable the optimizing compiler in production builds for maximum performance

Key Features

• Optimizing compiler flattens component trees and extracts atomic CSS at build time
• Full parity between React web and React Native from a single component API
• Token-based theming with CSS variables on web for instant theme switching
• Responsive props with $sm, $md, $lg breakpoint prefixes
• Media query and animation support that adapts to each platform natively

Comparison with Similar Tools

• NativeWind — Tailwind-based; Tamagui offers its own design system with a compiler
• Dripsy — smaller scope, less maintained; Tamagui is more comprehensive with an optimizing compiler
• React Native Paper — Material Design only; Tamagui is design-system agnostic
• Gluestack UI — similar goals; Tamagui has a more mature optimizing compiler
• Styled Components — web-only, runtime CSS-in-JS; Tamagui compiles away at build time

FAQ

Q: Does Tamagui work with Expo? A: Yes. Tamagui has first-class Expo support and the starter template includes Expo Router.

Q: How much does the compiler improve performance? A: The compiler can reduce component render time significantly by flattening virtual DOM depth and extracting static styles to CSS.

Q: Can I use Tamagui without the compiler? A: Yes. The compiler is optional. Without it, Tamagui works as a standard runtime style library.

Q: Does Tamagui support server-side rendering? A: Yes. It supports SSR with Next.js and other React SSR frameworks out of the box.

Sources

• https://github.com/tamagui/tamagui
• https://tamagui.dev