Tamagui is a light layer above React Native / React Native Web, augmenting rather than replacing them. Tamagui's goal is simple: share a lot more code between web and native apps, without sacrificing look, feel and especially, performance. It's a big step forward for:
Responsive styling — fully cross platform, easy to use, with amazing performance.
Theming — works cross platform, fast, avoiding all runtime on web.
Inline styles — that are typed, and extracted into atomic CSS at build-time.
Today, you can't share code between Native and Web without resorting to writing media queries, themes and styles in JS. This slows things down a lot and generally feels clunky.Tamagui works backwards from ideal syntax - both inline styles and hooks - and then on the web generates CSS media queries and CSS variables when possible. On native it extracts everything to StyleSheet.create. This makes everything fast. The compiler goes further and flattens what would have been a View or Text into a div or span when possible, improving performance.React Native ❤️Work with your favorite libraries: react-native and react-native-web. Tamagui improves typical performance with an optimizing compiler - especially with media queries, themes, and dynamic styles.Themed, ResponsiveHooks useTheme and useMedia and inline theme and media styling work just how you'd expect them to. But they compile to clean CSS media queries and CSS variables.Faster RuntimeNot just 0 prop interpolation, but 0 prop interpolation on inline styles and dynamic styles. Even with complex logical styling you get less runtime, light CSS output, and flatter component trees. Plus CSS media queries and CSS variables run much faster than JS ones.Less RuntimeLess JS to parse, especially when doing logic in your render function. Ternaries, object spreads, and more get extracted. Strictly style components (with no un-parseable props) are flattened to div or span, saving tree depth and hook calls.Server-Side RenderingTamagui supports cross-browser server-side rendering (see how we do it with Next.js ), even for responsive styles and variants.Key FeaturesVariantsVariants as a first-class citizen, so you can design composable component APIs. Define a single variant, multiple variants, and even Spread Variants which allow you to return dynamic styles, even at compile-time.TokensDefine your own tokens and seamlessly apply them as CSS values. CSS Properties are automatically mapped to token scales. Tokens can even be used in shorthand CSS properties.ThemesTamagui provides a simple theming experience out of the box. Create as many themes as you need, and apply them wherever you want. Each theme generates a CSS class name which overrides the default tokens.ShorthandsShorthands allow you to map shorthand properties to their longer cousins. This lets you create Tailwinds-like quick properties to style. These work with TypeScript as well, and are designed so you can bring them with you across different tamagui component kits.ResponsiveTamagui lets you configure media queries and apply variants responsively using $ props.Developer ExperienceTamagui provides a fully-typed API so all your TypeScript style properties, values, media queries and shorthands will be auto-completed for you. It provides a // debug pragma and debug prop that both allow easy introspection into whats happening at compile and runtime. In dev mode it puts a data- attribute that links every DOM node back to your original source.
wwwwwwwwwwwwwwwwwww
CommunityWe're excited to see the community adopt Tamagui, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
