design systems for React Native & Web, faster

Write once, run everywhere without downsides thanks to an optimizing compiler.

Performant

The fastest UI kit - thanks to an advanced compiler that handles styles, media queries, CSS variables, and tree flattening.

Easy to adopt

Works with React Native and Web. Use it as a style library or full component kit. Comes with beautiful themes, or BYO.

Productive

Typed inline styles without performance downside with themes, tokens, shorthands, media queries, and animations.

A new theme engine

Themes that customize to the component, plus unlimited alternate shades.

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Spaceship

Kanye West

College Dropout

Responsive

Responsive on Native & Web, without performance downside.

Tamagui compiles to hoisted CSS/StyleSheets, moving styles outside of render/runtime.

tamagui.dev

Github

Tamagui - React Native & Web UI kits

@natebirdman

Less time debugging performance.

Media queries, themes and inline, logical styles all compile to performant atomic CSS.

Lower is better. As of February 2022.

Benchmarks »

Animated

Plug-and-play drivers for every platform.

Bouncy

A bouncy spring

Lazy

A lazy, straightforward spring

Quick

A super fast spring

damping

9

mass

0.9

stiffness

150

import { Button, Square } from 'tamagui'
export default () => {
const [positionI, setPositionI] = React.useState(0)
return (
<>
<Square
animation="animation
size={110}
bc="$pink10"
br="$9"
hoverStyle={{
scale: 1.1,
}}
pressStyle={{
scale: 0.9,
}}
{...positions[positionI]}
>
<LogoIcon />
</Square>
<Button pos="absolute" b={20} l={20} icon={require('@tamagui/feather-icons').Play} size="$6" circular onPress={() => setPositionI(i =>