Tamagui homepage
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.
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.