Introducing Tamagui

Tamagui takes the next steps towards truly universal styling for React apps.

It was born to allow sharing more code between native and web components — with all the modern styling features we've grown love.

Until today, sharing code between native and web has had some big downsides — especially inline styling, responsive styling and themes. All of the above require time and memory-hungry operations in JavaScript. On the web, especially, this runs a lot of JS on the same thread as your layout, causing issues with jank and limitations rendering deeper trees.

Tamagui introduces an optimizing compiler, enabling:

An optimizing compiler extracts most styles you write, for 2-8x speed improvements vs other cross-platform UI kits. Even if they're inside conditional ternaries or spread objects, it extracts styles out of your JS bundle and into atomic CSS.

Hooks and inline responsive styles also optimize away. Again, even with ternaries or other logical operations interspersed, you get clean CSS media queries as your output.

A powerful theme system that outputs CSS variables on the web, clearing your tree of many large objects.

What is Tamagui

Tamagui is three things:

@tamagui/core provides fast primitives for inline styles as well as hooks - even for media queries and themes - that work the same on native as they do web.

tamagui is a batteries-included UI Kit that builds on core with easy-to-use universal components.

@tamagui/static works with both of the above (with webpack and babel). It outputs faster code, flattens your trees, and tunes your styles perfectly to each platform.

What makes it alpha

We've just finished upgrading many pieces of Tamagui, so some of the newer features are still settling. On native, we need to iron out a few of those features a bit more.

History

We're building Tamagui hand-in-hand with an app that needs a great UX on web and native. As a small team, being able to share as much code as possible between the platforms has many upsides.

Tamagui began as a fork of JSXStyle , rebuilt to support React Native Web . We added basic support for useMedia first, which let us share responsive components between web and native. Eventually, useTheme was added when we added a dark mode.

With enough development, we decided it was worth sharing it with the world.

There was only one problem: design systems have gotten really good in the last few years with syntax, themes, variants, tokens, and shorthands. We'd built UI kits with these features before, but since JSXStyle hadn't supported them, Tamagui didn't either.

So, over the last months I set out to modernize Tamagui, and I'm happy to say that as of today it's ready for wider release.

A big thanks is owed to the creators of both JSXStyle (for the initial compiler) and Stitches  (for theme inspiration, and the bones of this website).

Going forward

Tamagui is an ambitious project and still early in its life, but we've been using it for a couple years now and feel its ready to get out into the world.

We look forward to working with the community and helping it grow.