Introduction
Tamagui makes styling React easy and fast on web, Android, and iOS. It focuses on platform-native output, with an optional optimizing compiler that significantly improves your app or site performance.
Tamagui is three things:
@tamagui/coreis a style library that expands on the React Native style API with many features from CSS - all without any external dependency except for React.@tamagui/staticis an optimizing compiler that significantly improves performance by hoisting objects and CSS at build-time, leaving behind flatter React trees.tamaguiis a large universal component kit in styled and unstyled forms.
Quick start
Choose from a few starters:
Install
Set up an app.
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.
If using VSCode, use VSCode Icons file icon theme to get custom tamagui icon for tamagui.config.ts.
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:
- 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 functionality.
Next
Installation