wwwwwwwwwwwwwwwwwww

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 + Text API surface, a superset of the style API, and includes styled() and powerful hooks and design system helpers on the web in ~26Kb total.

  • A smart, partial-evaluating compiler gives you have 0-runtime performance with the ergonomics of writing your code however you want - even inline, logic-filled code is optimized.

  • Everything works runtime and compile-time.

  • useTheme and useMedia hooks with signal-like granularity and dirty tracking.

  • Unstyled and styled versions of all components.

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

Edit this page on GitHub.