Tamagui

*** HUGE NEWS! Tamagui is now faster than ever! Check out the benchmarks! ***

Overview

Tamagui is a supercharged style library for React and/or React Native with a massive typed superset of the React Native style API. It's tiny, with no outside dependencies in about 24Kb!

Write Less

Runs Â faster!

Progress

Runs Faster!

Optimizing Compiler!

Computer

Features Galore!

Feature	Description
Styles	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	An optimizer that makes Core faster via partial analysis, CSS extraction, tree flattening, and dead code elimination. Next, Webpack, Vite, Babel, Metro.
Tamagui	All the components you'd want, cross platform and adaptable to each other. Compound Component APIs, styled or unstyled, easy to size, theme, and more.

Code Example
                                Input (app.tsx)
                                import{View,Text,styled}from'@tamagui/core'
import{Heading}from'./Heading'
const App=(props)=>(
    
        Lorem ipsum.
    
)
const Heading=styled(Text,{
    tag:'h1',
    color:'green',
    backgroundColor:'$background',
    variants:{
        size:{
            large:{fontSize:22,},
            small:{fontSize:16,},
        },
    },
})
                                
                            

                                Output (app.js)
                                export const App=props=>(
    <div className={_cn}>
        <h1 className={_cn2+_cn3+(_cn4?_cn5:_cn6)}>Lorem ipsum.</h1>
    </div>
)
const _cn6=" _fos-16px"
const _cn5=" _fos-22px"
const _cn4="  _bg-180kg62 _col-b5vn3b _mt-0px _mr-0px _mb-0px _ml-0px _ww-break-word _bxs-border-box _ff-System _dsp-inline  "
const _cn3="  font_System"
const _cn2="  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"
                                
                            

Themes & Responsive

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.

Themes

Billie Jean

Michael Jackson

Thriller

Heart

Responsive

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

tamagui.dev

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

Why Tamagui?

Fully typed

wwwwwwwwwwwwwwwwwww

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

Server-first

wwwwwwwwwwwwwwwwwww

SSR and RSC just work, hydrate, and don't flicker, with all animation drivers, responsive styles, and themes.

Fast

wwwwwwwwwwwwwwwwwww

Fully optimizes and flattens to platform-ideal code for web and native, every feature works at compile and runtime.

Introspection

wwwwwwwwwwwwwwwwwww

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

Beautiful Fonts!

Beautifully expressive font systems withrhythm. 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.

Font System

Font Magic

Use, swap and share fonts with typed vertical rhythm.

Typed Fonts

Notepad

Typed, sizable fonts with control over every facet.

Custom per-size | Premade or custom | Easy to author | Font themes

Interaction Features!

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.