Introduction

Universal styles for React Native and Web

Tamagui is a complete suite of libraries for building UI's that run well on both React for web, and React Native. It consists of three layers that work together:

Core

A complete design system: a typed styled() factory, base components and hooks that work the same across Native and Web, at ~17Kb gzipped. It features deterministic, easy to reason about styling that outputs to atomic CSS and always merges styles based on the order received.

import { Stack, styled } from '@tamagui/core'
export const Circle = styled(Stack, {
backgroundColor: '$background',
color: '$color9',
borderRadius: 100_000_000,
variants: {
pin: {
top: {
position: 'absolute',
top: 0,
},
},
size: {
'...size': (size, { tokens }) => {
return {
width: tokens.size[size] ?? size,
height: tokens.size[size] ?? size,
}
},
},
} as const,
})
// use <Circle pin="top" size="$sm" />

Features

Expressive

  • Simplest possible styled() constructor for easy nested base views.
  • Apply styles conditionalls inline or with powerful typed variants.
  • Merge styles from anywhere and across modules
  • Media and Pseudo styles merge deterministically without fighting CSS specificity

Predictable

  • The last style always wins. Whether you nest styled() functions, or just pass in styles inline to your views, Tamagui always merges them in-order of definition, upwards in inheretence.
  • Expands CSS shorthands inline to ensure your styles always merge properly.
  • Pseudos styles and Media query styles always win in a predictable manner.

Universal

  • Works on Native and Web the exact same across the entire API surface area.
  • No dependency core for web-only use cases.

Fast

  • Generates atomic styles for the minimal amount of code output at build-time
  • Optimizes entire JSX callsites, flattening all styles and entire views down to div/View.
  • CSS generated at compile-time into splittable bundles, no runtime injection

Core: Design System

Using createTamagui you can generate a fully-typed design system with colors, tokens, spacing, sizing, fonts, themes, shorthands, animations, and more, that work with well-optimized and easy to use hooks like useMedia and useTheme.

It works hand-in-hand with a lightweight yet full-featured styled factory for CSS-in-JS with all features from variants and shorthand props to media queries, themes, pseudo styles and more, all nicely typed.

The Stack and Text components work with styled() and provide lot of nice features like hover, press, and focus styles, nice inline style props with typed theme and token values, shorthands, media queries, animations, and more (the animations are powered by drivers which can be swapped out, like CSS transition on web, but react-native-reanimated on iOS).

It's a base layer with everything you need for building a full-featured design system.

wwwwwwwwwwwwwwwwwww

Static

The @tamagui/static package is an optimizing compiler for React that does much more than just extracting CSS styles.

Read in-depth on how it works and how fast it is here.

wwwwwwwwwwwwwwwwwww

Tamagui

Above that, the Tamagui UI Kit for building full-featured app interfaces right out of the box. Featuring powerful, themable components that scale across every size in your design system. Enjoy Radix-like composable component APIs that always visually adapt properly to each platform.

wwwwwwwwwwwwwwwwwww

Comparison

  • Package

    Native & Web

    Themes

    Static Extraction

    Atomic Styles

    Object Literals

    Styles Colocation

    Media Queries

    Pseudo Classes

    Conditional Styles

    Style Composition

    Dynamic Styles

    Strongly Typed

    Optimizing Compiler

    Design System

    Animations

  • Tamagui

    CSS, React Native, Reanimated

  • StyleX

    Soon

    CSS

  • Emotion

    CSS

  • Linaria

    CSS

  • Vanilla Extract

    Opt-in

    Opt-in

    CSS

  • Stitches

    With Variants

    CSS

  • wwwwwwwwwwwwwwwwwww

    Community

    We're excited to see the community adopt Tamagui, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

    wwwwwwwwwwwwwwwwwww

    Credits

    A big thanks to:

    • JSXStyle  for providing the original version of the compiler.
    • Modulz  for the bones of the website and inspiration on some Radix-like component APIs.
    • Moti  for the foundation of the reanimated driver.
    • Framer Motion  for the AnimatePresence functionality.