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 colorful revolution.

Powerful themes that compile to clean CSS, with unlimited sub-themes down to the element.

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, for real.

Share native and web styling without performance downside.

Responsive styles compile to CSS (web) or StyleSheet turning jank into butter. 🧈

tamagui.dev

Github

Tamagui - React Native & Web UI kits

@natebirdman

Enchanting Garden

Kailua, HI

$45

/night

4 guests

·

Entire house

4.55

A lovely, private and very clean cottage with all amenities for a comfortable and peaceful stay. We are a 20 minute walk from the Hawaii Tropical Botanical Garden and well situated for touring to Akaka Falls, Volcano National Park, and many other destinations.

Best in class.

Advanced optimizing compilation flattens views & turns all types of styling (even inline, logical ones) into fast CSS.

Lower is better. As of February 2022.

Benchmarks »

Universal Animations

Better platform targeting with animation drivers that can be changed without changing code.

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="bouncy" 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 => (i + 1) % positions.length)} />
</>
)
}
export const positions = [
{
x: 0,
y: 0,
scale: 1,
rotate: '0deg',
},
{
x: -50,
y: -50,
scale: 0.5,
rotate: '-45deg',
hoverStyle: {
scale: 0.6,
},
pressStyle: {
scale: 0.4,
},
},
{
x: 50,
y: 50,
scale: 1,
rotate: '180deg',
hoverStyle: {
scale: 1.1,
},
pressStyle: {
scale: 0.9,
},
},
]

Incredible features, insanely fast.

Modern features 🤝 unmatched performance.

import { YStack, Text } from 'tamagui'
const App = () => (
<YStack px="$2" w={550} $gtSm={{ px: '$6' }}>
<Text fs="$2">
Lorem ipsum dolor.
</Text>
</YStack>
)

Input - Fully typed shorthands you can set up yourself work with all the features of Tamagui.

const _cn2 = " _color-scmqyp _display-1471scf _fontFamily-187pbxx _fontSize-7uzi8p"
const _cn = " _display-6koalj _flexDirection-eqz5dr _flexShrink-1q142lx _paddingLeft-11jtx42 _paddingRight-4a8ukp _width-11mp6g5 _paddingLeft-_gtSm_1hxi05q _paddingRight-_gtSm_poy3ov"
import { Text, YStack } from 'tamagui'
const App = () => <div className={_cn}>
<span className={_cn2}>
Lorem ipsum dolor.
</span>
</div>

Output - Shorthands work with the compiler support of media queries, pseudo styling and conditional logic.

Years of developer-time out of the box.

Start day one with more than you'd build by year two.

Fully typed

Typed inline styles, themes, tokens, shorthands, media queries, animations, and hooks that optimize.

Fast, all ways

Get faster feedback - inline styles author much faster, without performance downside.

SSR

Cross-browser server-side rendering, even for responsive styles and variants out of the box.

Dev tools

Debug props and pragmas, dev-time fileName/lineNumber props added on every element, global Tamagui for state introspection.

Accessibility

Built on top of react-native-web, accessiblity control out of the box, plus components with smart defaults.

Components

Components that smooth out bumps and add features between Native and Web.

Beautifully expressive font systems with rythym.

Use, swap and share fonts with typed vertical rhythm.

Typed, sizable fonts with control over every facet - weight, spacing, line-height, letter-spacing, color and more.

Fonts »

More powerful props on every component.

  • Press & hover events  -  onHoverIn, onHoverOut, onPressIn, and onPressOut.

  • Pseudo styles  -  Style hover, press, and focus, in combination with media queries.

  • Media queries  -  For every style/variant.

  • Themes  -  Change theme on any component.

  • Animations  -  Animate every component, enter and exit styling, works with pseudo states.

  • DOM escape hatches  -  Support for className and other HTML attributes.