design systems for React Native and Web, faster.

Amazing UI tooling for React Native
styles + Components + compiler

npm create tamagui-app@latest

Core

A lightweight design-system library for React Native & Web with tokens, themes, fonts and more + a nice typed styled utility.

Tamagui

UI kit that adapts to native and web, built using Core. Composable component APIs, consistent size props, nested themes, and more.

Static

Compile-time optimize styles both static and inline, with partial evaluation and tree flattening. Plugins for Webpack, Vite, Metro & more.

Less syntax, better performance

A complete design system that optimizes away.
import { styled, Stack } from '@tamagui/core'
import { Heading } from './Heading'
const App = () => (
<Stack px="$2" w={550} $gtSm={{ px: '$6' }}>
<Heading fs="$2">
Lorem ipsum dolor.
</Text>
</Stack>
)

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"
const App = () => <div className={_cn}>
<h1 className={_cn2}>
Lorem ipsum dolor.
</h1>
</div>

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

A colorful revolution

Fully typed themes with nested sub-themes and component themes, all compiled to CSS that avoids rendering.

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

Easily responsive

Responsive props - even inline ones containing logic - are compiled to atomic CSS on web, or hooks on native.

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.

Automatically fast

Partial evaluation + tree flattening extract nearly all inline styles at build-time, greatly reducing render depth and time.

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,
},
},
]

Fully typed

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

SSR

Server-side rendering works by default, including responsive styles, themes and variants.

Server Components

Beta support for React Server Components for dramatically less up-front bundle size and parsing.

Introspection

wwwwwwwwwwwwwwwwwwwMulti-level debug pragrma and props, compile-time JSX props for quick file:line:component jump.

Compatibility

Runs entirely without plugins, with optional optimizing plugins for Metro, Vite, and Webpack.

Full Featured

A styled factory, variants, tokens, fonts, themes, media queries, shorthands and more.

Beautifully expressive font systems with rhythm.

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 »
  • 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.