Tamagui

Universal UI for React Native and web

Tamagui is a style library and UI kit that works across React and React Native. It provides a typed styling system, an optimizing compiler, and a complete set of components - all designed to share code between platforms without sacrificing performance.

Why Tamagui

Cross-platform styling usually means runtime overhead on web or limited capabilities on native. Tamagui solves this with a compiler that outputs optimized, platform-specific code from a single source.

• Optimizing compiler - Compiler extracts styles and flattens logical components to achieve ideal performance
• Full React Native API - Complete compatibility with RN, with zero outside dependencies (including even React Native itself)
• Type-safe tokens - Colors, spacing, and typography with full IntelliSense
• Theme system - CSS variables on web, no re-renders on theme change

The Compiler

Tamagui’s compiler transforms styled components at build time:

Input:

<Stack bg="$background" p="$4" rounded="$3">
  <Text color="$color">Hello</Text>
</Stack>

Web output:

<div class="_bg-background _p-4 _rounded-3">
  <span class="_color-text">Hello</span>
</div>

The compiler:

• Extracts styles to atomic CSS classes
• Flattens nested styled components
• Eliminates runtime style computation
• Tree-shakes unused styles

Takeout Integration

Takeout configures Tamagui with:

• Three animation drivers - CSS for static pages, Motion for web dynamic pages, reanimated for native dynamic pages
• Dark and light themes - With $theme-dark and $theme-light conditional styling
• Group selectors - $group-button-hover for parent-scoped states
• Pre-built components - Buttons, inputs, modals, and more

Basic Usage

import { Button, Input, XStack, YStack } from 'tamagui'

function LoginForm() {
  return (
    <YStack gap="$3" p="$4">
      <Input placeholder="Email" />
      <Input placeholder="Password" secureTextEntry />
      <XStack gap="$2">
        <Button flex={1} variant="outlined">
          Cancel
        </Button>
        <Button flex={1} theme="primary">
          Login
        </Button>
      </XStack>
    </YStack>
  )
}

Learn More

• Tamagui Documentation
• GitHub