Write once, run everywhere without downsides thanks to an optimizing compiler.
The fastest UI kit - thanks to an advanced compiler that handles styles, media queries, CSS variables, and tree flattening.
Works with React Native and Web. Use it as a style library or full component kit. Comes with beautiful themes, or BYO.
Typed inline styles without performance downside with themes, tokens, shorthands, media queries, and animations.
Spaceship
Kanye West
College Dropout
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
Lower is better. As of February 2022.
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 =>