Universal design systems for React Native and Web, faster.

npm create tamagui-app@latest

Less syntax, better performance

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.

Easily responsive

Responsive props and hooks, compiled to atomic CSS on web.

Enchanting Garden

Kailua, HI

$45

/night

Automatically fast

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

Universal Animations

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

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

SSR

Server Components

Introspection

Compatibility

Full Featured

Beautifully expressive font systems with rhythm.

Use, swap and share fonts with typed vertical rhythm.

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.

Twitter

Discord

GitHub