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/core is 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/static is an optimizing compiler that significantly improves performance by hoisting objects and CSS at build-time, leaving behind flatter React trees.
  • tamagui is a large universal component kit in styled and unstyled forms.

Quick start

Choose from a few starters:

npm create tamagui@latest

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.

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:

  • 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