What is this?
Tamagui is a set of TypeScript libraries for styling React apps: a universal style library, an optimizing compiler, and an optional UI kit that let you share UI code across web and React Native.
Tamagui is a set of TypeScript libraries for styling React apps: a universal style library, an optimizing compiler, and an optional UI kit that let you share UI code across web and React Native.Is it one package I install, or a whole suite?Three pieces: @tamagui/core is the universal style library, @tamagui/static is the optimizing compiler, and tamagui is a ready-made UI kit that adapts to every platform.
Three pieces: @tamagui/core is the universal style library, @tamagui/static is the optimizing compiler, and tamagui is a ready-made UI kit that adapts to every platform.What's the quickest way to spin up a project with it?Run npm create tamagui@latest to scaffold a starter — they range from a simple learning example to a production-ready monorepo.
Run npm create tamagui@latest to scaffold a starter — they range from a simple learning example to a production-ready monorepo.Do I need anything special in my stack to use it?Nothing exotic: it lives in the React and TypeScript ecosystem, rides on standard bundlers (Vite and Webpack are among its listed integrations), and uses React Native on the native side.
Nothing exotic: it lives in the React and TypeScript ecosystem, rides on standard bundlers (Vite and Webpack are among its listed integrations), and uses React Native on the native side.Do I have to rewire my whole app to adopt it?No big-bang migration: Tamagui works at compile time and runtime and can be set up gradually — initial usage is as simple as importing it and using the base views and styled function.
No big-bang migration: Tamagui works at compile time and runtime and can be set up gradually — initial usage is as simple as importing it and using the base views and styled function.If I build with it, where can my app actually run?Web and native iOS/Android: the same UI code runs in the browser and in React Native apps, with the project advertising 100% parity between web and native.
Web and native iOS/Android: the same UI code runs in the browser and in React Native apps, with the project advertising 100% parity between web and native.What does the optimizing compiler actually do to my components?It turns styled components — even ones with complex logic or cross-module imports — into a simple div plus atomic CSS on the web, or a View with its style objects hoisted on native.
It turns styled components — even ones with complex logic or cross-module imports — into a simple div plus atomic CSS on the web, or a View with its style objects hoisted on native.Is the performance gain real or just marketing?Real, with numbers: in one responsive section of the Tamagui site, 49 of about 55 inline styled components flatten to plain divs, and the homepage gains nearly 15% on Lighthouse with the compiler on.
Real, with numbers: in one responsive section of the Tamagui site, 49 of about 55 inline styled components flatten to plain divs, and the homepage gains nearly 15% on Lighthouse with the compiler on.Why build a compiler instead of just another styling library?Because sharing code between web and native apps usually costs you performance and code quality. Tamagui's compiler outputs platform-specific optimizations, so one shared codebase doesn't have to pay that price.
Because sharing code between web and native apps usually costs you performance and code quality. Tamagui's compiler outputs platform-specific optimizations, so one shared codebase doesn't have to pay that price.What are similar projects?styled-components, react-native-ui-kitten, unocss, daisyui, react-native-web, chakra-ui, react-native-elements, NativeBase
styled-components, react-native-ui-kitten, unocss, daisyui, react-native-web, chakra-ui, react-native-elements, NativeBaseWhich topics is it in?react-native-web, css-in-js, tailwind, ui-kit, jsx, webpack, design-system, react-native, tailwindcss, compiler, vite, component-library
react-native-web, css-in-js, tailwind, ui-kit, jsx, webpack, design-system, react-native, tailwindcss, compiler, vite, component-library