Skip to main content

​
Introduction to Tamagui

Tamagui is a complete UI solution for building high-performance applications that run on both web and React Native. It combines a powerful style library, a comprehensive component kit, and an optimizing compiler to deliver exceptional performance without compromising on developer experience.

​
What is Tamagui?

Tamagui is actually a collection of complementary libraries:
  • @tamagui/core - Universal style library for React
  • @tamagui/static - Optimizing compiler that works with core and tamagui
  • tamagui - Complete UI kit that adapts to every platform
These work together to let you share more code between web and native apps without sacrificing performance or code quality.

Installation

Get started by installing Tamagui in your project

Quick Start

Build your first cross-platform component in minutes

Why Tamagui?

Learn about the benefits and use cases

Configuration

Configure themes, tokens, and design system

​
Key Features

Cross-Platform

Write once, run everywhere. Your components work on iOS, Android, and web with the same code.

Optimizing Compiler

The compiler flattens styled components into optimized platform-specific code - div with atomic CSS on web, View with hoisted styles on native.

Type-Safe Styling

Full TypeScript support with intelligent autocompletion for your design tokens, themes, and variants.

Rich Component Library

Comprehensive set of accessible, customizable components including Button, Dialog, Sheet, Select, and more.

Powerful Animations

Built-in animation support with multiple drivers including CSS, React Native Animated, and Reanimated.

Theming System

Sophisticated theme system with automatic dark mode, theme nesting, and dynamic theme switching.

​
How It Works

The magic of Tamagui lies in its optimizing compiler. It analyzes your styled components at build time and:
  1. Extracts static styles into atomic CSS classes on web
  2. Hoists style objects on React Native for optimal performance
  3. Flattens component trees by removing unnecessary wrapper components
  4. Optimizes media queries and responsive styles
For example, in the ~500px² responsive browser section of the Tamagui website, 49 of 55 inline styled components are flattened to a simple div. The homepage gains nearly 15% on Lighthouse with the compiler enabled.

​
Runtime and Compile Time

Tamagui works both at compile time and runtime, and can be adopted gradually:
  • Start by using the base views and styled function without any build setup
  • Add the compiler later for production optimizations
  • The entire API works the same whether compiled or not

​
Getting Started

The fastest way to start is with a starter template: 
npm create tamagui@latest
This gives you options ranging from a simple learning example to a production-ready monorepo with Next.js, Expo, and Solito.
The starters come pre-configured with the compiler, design tokens, themes, and example components to help you hit the ground running.

​
Example

Here’s a taste of what Tamagui code looks like: 
import { Button, YStack, H2 } from 'tamagui'

export default function MyComponent() {
  return (
    <YStack gap="$4" padding="$4">
      <H2>Welcome to Tamagui</H2>
      <Button theme="accent" size="$5">
        Get Started
      </Button>
    </YStack>
  )
}
This code works identically on web and native, with the compiler optimizing it to platform-specific code at build time.

​
Next Steps

Install Tamagui

Set up Tamagui in your existing or new project

Quick Start Guide

Follow the step-by-step guide to build your first component

Build docs developers (and LLMs) love

Get started for freeTalk to us