Introduction
Style React fast on Native or web
Tamagui is a modular set of universal React style libraries. Core brings many features from CSS to the React Native style API. Static is a smart optimizing compiler. And Tamagui is a large UI kit in styled and unstyled forms.
Quick start
Choose from a few starters with:
Install
Set up an app.
1-dependency core (only React). Target web with only ~25Kb.
View and Text support the full React Native API surface.
Optional typed design system, SSR safe, animation drivers.
Powerful variants, 0-cost nesting, smart performant hooks.
Brings many web styling features as a superset of the RN style API.
Styled and unstyled versions of all components.
Overview
Tamagui aims to bring joy to cross platform development. Use the core style library or
any of the components in the tamagui
UI kit independently or together. Styled or
unstyled, with React Native and React Native Web, or without either.
Core
Core (@tamagui/core
) is a fully-typed TypeScript
style and design system library, a bit like a modern
styled-components or
Stitches . On native it depends on React Native, but on
web it has no dependency outside react
itself - yet it supports the full React
Native API surface in 24-28Kb, depending on tree-shaking.
It primarly exports a styled
function and Text
and View
components, all of
which accept Tamagui styles. Tamagui styles support a
large superset of the the React Native style API, bringing
many powerful abilities from CSS - like container queries.
Create a fully typed design system, re-theme your app or portions of your app magically with nested themes, swap between three animation drivers, and gain huge runtime performance with smart signal-based hooks for media queries and themes.
Swap Core for @tamagui/web
to drop support for the
React Native prop APIs that Core supports and save bundle
size, for web-only sites and apps.
Static
Static (@tamagui/static
) is an
optimizing compiler for React that emits
0-runtime, near optimal code for both web and native, even when faced with
logic-filled styles or styles that import values from other files. It was forked
from the great JSXStyle library.
Tamagui
Tamagui (tamagui
)
is a suite of cross-platform React Native components
that can come in styled or unstyled form.
It features novel components like Adapt, a primitive that lets a component
shapeshift their content into other forms depending on the media query or
platform and native
props to adapt many components to their native
counterparts.
Community
We'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!
Credits
A big thanks to:
- Stitches for the variants pattern.
- JSXStyle for providing the original version of the compiler.
- Modulz for the bones of the website and inspiration on some Radix-like component APIs.
- Moti for the foundation of the reanimated driver.
- Framer Motion for the AnimatePresence functionality.
Next
Installation