Write less
runs faster
runs fasterruns fasterruns fasterruns fasterruns faster

styles · optimizing compiler · UI kit for React · every platform

npm create tamagui

Core

A style library for React and/or React Native with a large typed superset of the React Native style API, with no outside dependencies in about 24Kb.

Static

A smart optimizer that makes your app fast with partial analysis, extracts CSS, flattens your tree, and removes code. Next, Webpack, Vite, Babel and Metro.

Tamagui

All the components you'd want, cross platform and adaptable to each other. Compound Component APIs, styled or unstyled, sizable, themeable, and more.

A powerful style system

A multi-faceted optimizing compiler enables
SSR-first atomic CSS.

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

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

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

export const App = props => <div className={_cn}>
<h1 className={_cn2 + (_cn3 + (props.big ? _cn4 : _cn5))}>
Lorem ipsum.
</h1>
</div>
const _cn5 = " _fos-16px"
const _cn4 = " _fos-22px"
const _cn3 = " _bg-180kg62 _col-b5vn3b _mt-0px _mr-0px _mb-0px _ml-0px _ww-break-word _bxs-border-box _ff-System _dsp-inline "
const _cn2 = " font_System"
const _cn = " is_View _fd-column _miw-0px _mih-0px _pos-relative _bxs-border-box _fb-auto _dsp-flex _fs-0 _ai-stretch _w-550px _pr-1aj14ca _pl-1aj14ca _pr-_gtSm_lrpixp _pl-_gtSm_lrpixp"

Smart themes and sub-themes down to the component.

Themes that act like CSS variables, overriding as they descend and compiled to CSS to avoid re-renders.

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

Billie Jean

Michael Jackson

Thriller

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
  • transition

    ease-in 200ms

    import { Button, Square } from 'tamagui'
    export default () => {
    const [positionI, setPositionI] = React.useState(0)
    return (
    <>
    <Square animation="bouncy" size={110} bg="$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 bundle size reduction.

    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 »

    Swappable

    typed, compiled

    custom per-size

    premade or custom

    easy to author
    font themes
  • 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.