Write less,
runs faster.

styles, optimizing compiler & UI kit that unify React Native + Web

npm create tamagui-app@latest

Core

A lightweight style + design system library for React Native & Web. Themes, responsive styles, styled() with variants and a host of features.

Static

An optimizing compiler for styles both static and inline. Partial evaluation, tree flattening & more. Plugins for Next, Webpack, Vite, Metro.

Tamagui

A complete suite of UI components built using Core. Composable component APIs, size variance, incredible themes, platform optimized.

Input

A powerful `styled` constructor, inline props, shorthands and more.

import { Stack } from '@tamagui/core'
import { Heading } from './Heading'
const App = (props) => (
<Stack px="$2" w={550} $gtSm={{ px: '$6' }}>
<Heading size={props.big ? 'large' : 'small'}>Lorem ipsum dolor.</Heading>
</Stack>
)
Output

Styles extracted, logic evaluated, and a flatter tree with atomic CSS styles per-file.

import { concatClassName } from "@tamagui/helpers";
import { Stack } from '@tamagui/core';
import { Heading } from './Heading';
export default (props) => (
<div className={_cn}>
<span className={concatClassName(_cn2 + (_cn3 + (props.big ? _cn4 : _cn4)))}>Lorem ipsum dolor.</span>
</div>
);
const _cn4 = " _col-b5vn3b _ff-4yewjq";
const _cn3 = " _ml-0px _mb-0px _mr-0px _mt-0px _col-b5vn3b _tt-3tb9js _ff-4yewjq _fow-3uqci0 _ls-3w5fg8 _fos-3slq2o _lh-3or5x5 _cur-text _ussel-text _ww-break-word _bxs-border-box _dsp-inline ";
const _cn2 = " is_Heading font_heading";
const _cn = " is_Stack _fd-column _miw-0px _mih-0px _pos-relative _bxs-border-box _fb-auto _dsp-flex _fs-0 _ai-stretch _w-550px _pr-1aj148u _pl-1aj148u _pr-_gtSm_1aj14ca _pl-_gtSm_1aj14ca ";

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 and hooks, compiled to atomic CSS on web.

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, hoisting and dead-code elimination ✅

Lower is better. As of February 2022.

Universal Animations

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

  • BouncyA bouncy spring
  • LazyA lazy, straightforward spring
  • QuickA 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/lucide-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 pragma 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.