Tamagui — React Native + Web UI kit

Universal React design systems that optimize for native & web

React Native + Web UIs much faster with an optimizing compiler. Themes, media queries & typed inline styles that run better, everywhere.

Documentation

Github

Discord

npm install tamagui

PerformantCompile inline styles, media queries and themes to atomic CSS. Even conditional logic compiles away!

CompatibleAugments react-native-web and reduces overhead. Use it as a plain styling library, or an accessible component kit.

IntuitiveSupports DX advances in modern design systems: themes, tokens, shorthands, media queries, and typed inline styles.

Beautiful syntax, faster output

Styles

Conditionals

Responsive

Shorthands

Hooks

Your own design system with media queries, themes, inline styles and variants all fully typed.

Input

import { YStack, Text } from 'tamagui'

const App = () => (
  <YStack
    paddingHorizontal="$1"
    width={550}
  >
    <Text fontSize="$1" color="$color">
      Lorem ipsum dolor.
    </Text>
  </YStack>
)

const tokens = createTokens({
  space: { 1: 5, 2: 10, 3: 20 },
  fontSize: { 1: 12, 2: 14, 3: 16 },
  color: { white: '#fff' }
})

export default createTamagui({
  tokens,
  theme: {
    light: {
      color: tokens.color.white,
    }
  },
})

Compile-time optimized to atomic CSS, flattened components into div / span.

Output

const _cn2 = " _boxSizing-deolkf _color-1gcmrwd _display-1471scf _fontFamily-187pbxx _fontSize-mmgcxm _wordWrap-qvutc0"
const _cn = " _alignItems-1oszu61 _boxSizing-deolkf _display-6koalj _flexBasis-1mlwlqe _flexDirection-eqz5dr _flexShrink-1q142lx _paddingLeft-1vvdr1v _paddingRight-9myuio _width-11mp6g5"
import { Text, YStack } from 'tamagui'

const App = () => <div className={_cn}>
    <span className={_cn2}>
      Lorem ipsum dolor.
    </span>
  </div>


._alignItems-1oszu61{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch;}
._boxSizing-deolkf{box-sizing:border-box;}
._display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
._flexBasis-1mlwlqe{-ms-flex-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto;}
._flexDirection-eqz5dr{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;}
._flexShrink-1q142lx{-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;}
._paddingLeft-1vvdr1v{padding-left:var(--space-1);}
._paddingRight-9myuio{padding-right:var(--space-1);}
._width-11mp6g5{width:550px;}
._color-1gcmrwd{color:var(--color);}
._display-1471scf{display:inline;}
._fontFamily-187pbxx{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
._fontSize-mmgcxm{font-size:var(--fontSize-1);}
._wordWrap-qvutc0{word-wrap:break-word;}

Features

A full featured styling library.

Complete

Inline typed styles with themes, constants, shorthand props and media queries, plus a set of accessible components that work together out of the box.

Performant

Tamagui avoids more JS parsing at runtime than other libraries, even with conditional logic in your render. It even flattens your tree when possible.

Server-side

Tamagui supports cross-browser server-side rendering, even for responsive styles and variants.

Developer friendly

A fully-typed API, completely extensible, token-aware properties, debug props and pragmas, and custom shorthands.

Stay in flow

Inline styles that don't affect render performance, no more naming styles. Let the compiler optimize it for you.

Full-featured

Everything you need included on all platforms from themes to responsive design and more. Augments react-native-web.

Community

Join the community on these platforms

wwwwwwwwwwwwwwwwwww

Twitter

For news, announcements, and general updates.

Discord

Get involved and get questions answered.

GitHub

Bring up issues, request features, and contribute.

homepage

by nate.

built with Tamagui

site forked from modulz.

Overview

Docs

Community