Introduction

Universal styles for React Native and Web

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" />

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

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.

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.

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.

Comparison

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!

• Discord 
• Twitter 
• GitHub Discussions 
• GitHub 

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.