How to use Tamagui: install, style components and share code

What Tamagui includes

Tamagui is split into three packages, and you can use them together or separately. The core package is a universal style library for React. The static package is an optimizing compiler that works with core and the UI kit. The UI kit is a ready-made set of components that adapts to each platform.

• @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

Install Tamagui with the starter command

The README recommends starting from one of the official starters rather than wiring everything up by hand. The starters range from a simple learning example to a production-ready monorepo. Prerequisites are Node.js and npm, and the setup assumes you know React and TypeScript.

Run the command below in the terminal where you want the project folder created.

• Install Node.js and npm first.
• Pick a starter: the simple example is best for learning, the monorepo for production work.

Use the base views and styled function

The source says that initial usage can be as simple as importing Tamagui and using the base views and the styled function. You can adopt it gradually inside an existing app rather than rewriting everything at once.

The README does not show code for these APIs, so check the documentation at tamagui.dev for exact usage before you copy any examples.

• Start with a few components, not the whole app.
• Read the docs for the current import names and styled syntax.

Understand what the compiler does

The optional compiler turns styled components, including those with complex logic or cross-module imports, into simpler output. On the web it becomes a div with atomic CSS. On native it becomes a View with its style objects hoisted.

The README reports one measurement: on the Tamagui website, 49 of about 55 inline styled components in one responsive browser section are flattened to a div, and the homepage gains nearly 15% on Lighthouse with the compiler on. Treat this as the authors' own result, not a guarantee for your app.

• The compiler works at compile time and runtime.
• You can turn it on later as you grow into it.

Contribute or read the docs

Documentation lives on the project website. The README points to a contributing guide for code changes and says the docs source is in code/tamagui.dev/data/docs/ for documentation edits.

• Full documentation: tamagui.dev
• Contributing guide: CONTRIBUTING.md in the repository
• Docs source: code/tamagui.dev/data/docs/