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.

• Zero runtime overhead - Compiler extracts styles to atomic CSS on web
• Full React Native API - Every style property works on both platforms
• Type-safe tokens - Colors, spacing, and typography with full IntelliSense
• Theme system - CSS variables on web, no re-renders on theme change

Core Concepts

Styled Components

Create components with the styled() function:

import { styled } from ‘tamagui’

const Card = styled(View, {
  bg: ‘$background’,
  p: ‘$4’,
  rounded: ‘$4’,
  shadowColor: ‘$shadow’,
  shadowRadius: 10,

  variants: {
    highlighted: {
      true: {
        borderColor: ‘$primary’,
        borderWidth: 2,
      },
    },
  },
})

Design Tokens

Define your design system once:

const tokens = createTokens({
  color: {
    primary: ‘#007AFF’,
    background: ‘#FFFFFF’,
    text: ‘#000000’,
  },
  space: {
    1: 4,
    2: 8,
    3: 12,
    4: 16,
  },
  radius: {
    1: 4,
    2: 8,
    3: 12,
    4: 16,
  },
})

Access tokens with $ prefix: bg=“$background”, p=“$4”, rounded=“$3”.

Themes

Themes cascade through your app via CSS variables:

const lightTheme = {
  background: ‘#FFFFFF’,
  color: ‘#000000’,
}

const darkTheme = {
  background: ‘#000000’,
  color: ‘#FFFFFF’,
}

// components automatically adapt
<Theme name=“dark”>
  <Card>Dark mode card</Card>
</Theme>

Theme changes don’t trigger re-renders - they update CSS variables.

Responsive Styles

Media queries compile to atomic CSS:

<View
  width={200}
  $md={{ width: 400 }}
  $lg={{ width: 600 }}
/>

Or use the hook for JS logic:

const media = useMedia()
const columns = media.lg ? 3 : media.md ? 2 : 1

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:

• Dual animation drivers - CSS for static pages, spring physics for app pages
• Theme-conditional styles - $theme-dark and $theme-light props
• 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