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. 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.
- Write styles 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 inheritance.
- 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.
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, themeable components that scale across every size in your design system. Enjoy Radix-like composable component APIs that always visually adapt properly to each platform.
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!
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.