wwwwwwwwwwwwwwwwwww

Introduction

Style React fast on Native or web

Tamagui is a modular set of 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:

npm create tamagui@latest

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.

wwwwwwwwwwwwwwwwwww

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!

wwwwwwwwwwwwwwwwwww

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