https://tamagui.dev

 
Tamagui homepage
Docs
Blog
 
New
 
Github
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
Introduction
Configuration
Guides
Docs
Installation
Themes
Variants
Community
GitHub
Twitter
Discord