/tamagui

A style library, UI kit, and optimizing compiler that makes React run faster - on both native and web

Primary LanguageTypeScriptMIT LicenseMIT

Tamagui

Style and UI for React (web and native) meet an optimizing compiler

NPM downloads Discord users online Commits per month


  • @tamagui/core - Universal style library for React.
  • @tamagui/static - Optimizing compiler that works with core and tamagui.
  • tamagui - UI kit that adapts to every platform.

See tamagui.dev for documentation.

Tamagui lets you share more code between web and native apps without sacrificing the two things that typically suffer when you do: performance and code quality.

It does this with an optimizing compiler that outputs platform-specific optimizations, turning even cross-module-imported, logic-infused, inline-styled components into clean, flat DOM + CSS on the web, or on native, hoisted style objects and View/Text. The compiler is also completely optional, as Tamagui also works entirely at runtime.

For example, within the ~500px² responsive browser section on the homepage, 49 of the 55 or so inline styled components are flattened to a div. The homepage gains nearly 15% on Lighthouse just by turning on the compiler.

Learn more on the website.

Contributing

Tamagui is a monorepo that makes it easy to contribute. Install:

yarn

While developing, you'll want to run the build watcher in a dedicated terminal:

yarn watch:build

Note: you may see some errors around "studio" as you run build - this is fine, we encrypt some of the non-open-source projects in the repo. The errors shouldn't block anything.

It's easiest to use the sandbox project to test and develop things for web:

yarn sandbox

This runs a client-side only vite build of tamagui, with a complete configuration already set up.

To test on native, kitchen-sink is equally well set up.

You'll need to create a development build to run this.

# Android
yarn kitchen-sink:build:android

# iOS
yarn kitchen-sink:build:ios

After the build has been completed, run:

yarn kitchen-sink

Once you've made changes, you can add tests. All compiler and CSS generation tests live in packages/static-tests, other tests live in apps/kitchen-sink/tests or in other -tests packages.

Before submitting a PR, please check everything works across every combination of environments.

To do so, run the site, first in development to test if it works entirely at runtime:

# Make sure you have run `yarn watch:build` before you execute this command.

yarn site

You use pages/test.tsx as an easy way to load things. If it looks good, try running again with the compiler on:

yarn site:extract

Finally, if that looks good, build to production and test that:

yarn site:prod

This flow ensures it works with Vite, Webpack, Metro, Next.js with SSR, and with the compiler both on and off.