Tamagui

Overview

Tamagui is a style library and UI kit for React and React Native that targets both web and native platforms from a single codebase. It solves the performance and code-sharing gap between web and native React development, offering a typed superset of the React Native style API in approximately 24KB with no outside dependencies.

Unlike standard React Native style solutions, Tamagui ships an optimizing compiler that performs partial evaluation, tree flattening, hoisting, and dead-code elimination to produce atomic CSS on web and flattened native views — without requiring developers to change their code for each platform.

Key Benefits

• Core library ships in approximately 24KB with no external dependencies.
• The static optimizer extracts atomic CSS, flattens component trees, and eliminates dead code at build time.
• Themes act like CSS variables, descend through component trees, and compile to CSS to avoid runtime re-renders.
• Animation drivers can be swapped between platforms without changing application code.
• SSR and React Server Components work out of the box with no hydration flicker across all animation drivers, themes, and responsive styles.
• Fully typed inline styles, themes, tokens, shorthands, media queries, animations, and hooks.

How It Works

Developers write styles using inline props or the styled function from @tamagui/core, defining variants, tokens, and responsive breakpoints in a single declaration. The static optimizer — compatible with Next.js, Webpack, Vite, Babel, and Metro — then analyses the code at build time, extracts atomic CSS classes, and outputs flattened DOM elements on web or View/Text components on native. At runtime, theme tokens resolve like CSS variables and cascade down through sub-themes without triggering re-renders.

Use Cases

• React Native developers building apps that also target the web who need a single styling API without duplicating code.
• Next.js engineers requiring SSR-first atomic CSS and server component compatibility in cross-platform projects.
• Front-end engineers at product teams who need a composable, accessible UI kit with Compound Component APIs and unstyled component options.
• Design-system authors who want typed theme tokens, sub-themes, and shorthands that compile to zero-runtime CSS.
• Performance-focused teams who need build-time dead-code elimination and tree flattening to minimize bundle size on web.

Why Choose This Product

Tamagui suits teams building universal React applications who need verifiably fast output on both web and native without maintaining separate style systems. Its optimizing compiler, SSR-first design, and typed API make it a strong fit for performance-critical projects. The page does not explicitly list limitations or call out scenarios where the product is a poor fit.