# Tamagui — Universal UI Kit for React and React Native

> A style and UI library that lets you share components across React web and React Native with an optimizing compiler for near-zero-runtime CSS output.

## Install

Save as a script file and run:

# Tamagui — Universal UI Kit for React and React Native

## Quick Use
```bash
npm create tamagui@latest
# Or add to existing project:
npm install tamagui @tamagui/config
```
```tsx
import { Button, Text, YStack } from 'tamagui'
export default () => (
  <YStack padding="$4" gap="$2">
    <Text fontSize="$6">Hello Tamagui</Text>
    <Button>Press Me</Button>
  </YStack>
)
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-1717d3f6
Author: Script Depot