Introduction
Tamagui makes styling React on any platform a delight. All of its features work the same on both React Native and React web.
@tamagui/coreis the base style library, it expands on the React Native style API with many features from CSS, all without a single external dependency. It can entirely replace React Native Web in a much lighter package, with full API compatibility, much improved SSR, more features, and much better performance.@tamagui/staticis an optimizing compiler that significantly improves performance through partial analysis, hoisting, and flattening. It makes sharing code between web and native actually feel great.tamagui UIis a bunch of unstyled and styled components for building common UI elements. It's similar to Radix, but works on native and web, and has a powerful Adapt primitive to shapeshift UI based on the platform or media query.
Install
Set up an app.
Quick start
Choose from a few starters:
Highlights
Core only has one dependency - React - but supports the full React Native View and Text API, a superset of the React Native Style API, styled(), powerful hooks, and the typed design system helpers in ~28Kb on web.
A smart, partial-evaluating compiler gives 0-runtime performance with the ergonomics of writing your code however you want - even inline, logic-filled code is optimized.
Every feature works at runtime and compile-time, so none of the usual limits of 0-runtime libraries, while optionally getting the same great performance.
useTheme and useMedia hooks with signal-like granularity and dirty tracking.
Unstyled and styled versions of all components.
Community
Join us on:
Credits
A big thanks to:
- Stitches for the variants pattern.
- JSXStyle for providing the original version of the compiler.
- Modulz for Radix of which we've adopted many APIs, and for the initial structure for this website.
- Moti for the foundation of the reanimated driver.
- Framer Motion for the AnimatePresence implementation.