tamagui/tamagui

★ 13,965TypeScriptAudience · developerComplexity · 3/5Setup · moderate

Mindmap

mindmap
  root((repo))
    What it does
      Cross-platform UI
      Shared web and native code
      Optimizing compiler
    Tech Stack
      TypeScript
      React
      React Native
    Components
      Core styling library
      UI kit
      Compiler tool
    Use Cases
      App development
      Performance tuning
      Code sharing

mindmap root((repo)) What it does Cross-platform UI Shared web and native code Optimizing compiler Tech Stack TypeScript React React Native Components Core styling library UI kit Compiler tool Use Cases App development Performance tuning Code sharing

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a cross-platform app with shared UI components that render correctly on both web browsers and iOS or Android.

USE CASE 2

Speed up a React web app by enabling Tamagui's compiler to flatten styled components into plain CSS class names at build time.

USE CASE 3

Add a pre-built UI kit to a React Native project to get platform-adaptive components without writing them from scratch.

Tech stack

TypeScriptReactReact Native

Getting it running

Difficulty · moderate Time to first run · 30min

Requires an existing React or React Native project, the compiler must be integrated into your build tool (Vite or webpack) separately.

In plain English

Tamagui is a set of tools for building user interfaces that work on both the web and on phones. Many teams write apps for the web using React and for phones using React Native, and they want to share as much code as possible between the two. Tamagui aims to let you write the look and layout of your app once and have it run in both places. The README describes three main pieces. The first, called core, is a library for styling React components. The second is an optimizing compiler, which is a tool that runs while your app is being built and rewrites your styling code into a faster form. On the web it turns components into a plain div with small reusable CSS rules, and on phones it produces the native equivalent. The third piece is an optional UI kit, a collection of ready made components that adapt to whatever platform they run on. A stated goal is sharing code across web and native without giving up performance or code quality, the two things that usually suffer when sharing. The authors note you can adopt it gradually, starting as simply as importing it and using the basic views. They suggest running a create command to scaffold a starter project, with options ranging from a small learning example to a production ready setup. The README gives a concrete performance claim: on their own website the compiler flattens most styled components into plain divs, and the homepage gains nearly 15 percent on a Lighthouse score with the compiler turned on. Full documentation lives on their website.

Copy-paste prompts

Prompt 1

I'm using Tamagui in my React Native and web app. Help me create a shared Button component using the styled() API that renders a native pressable on iOS and a plain div on web.

Prompt 2

How do I configure Tamagui's optimizing compiler in my Vite build to flatten styled components and what build-time output should I expect?

Prompt 3

I want to define a shared color theme in Tamagui and apply it across my web and React Native app. Walk me through creating tokens and wrapping the app in a provider.

Prompt 4

Set up a new Tamagui starter project from scratch using the create command and explain when I should use core, the compiler, and the UI kit respectively.

Prompt 5

My Tamagui web app is not seeing performance gains. How do I check how many components the compiler flattened versus left as dynamic components?

Open on GitHub → Explain another repo

← tamagui on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.