styles, optimizing compiler & UI kit that unify React Native + Web
npm create tamagui
Core Light design-system and style library for React Native + Web with themes, animations, responsive and pseudo styles, and much more.
Static Flatten your component tree with partial evaluation, outputs minimal CSS. Easy install with Next, Webpack, Vite, Babel and Metro.
Tamagui A total UI kit for Native and Web. Composable components, themeable, sizable, adapts to each platform properly.
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.</Heading>
</Stack>
)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_Stack _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"Billie Jean
Michael Jackson
Thriller
tamagui.dev
Github
Tamagui - React Native & Web UI kits
@natebirdman
/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.
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,
},
},
]
wwwwwwwwwwwwwwwwwwwTyped inline styles, themes, tokens, shorthands, media queries, animations, and hooks that optimize.
Server-side rendering works by default, including responsive styles, themes and variants.
Beta support for React Server Components for bundle size reduction.
wwwwwwwwwwwwwwwwwwwMulti-level debug pragma and props, compile-time JSX props for quick file:line:component jump.
Runs entirely without plugins, with optional optimizing plugins for Metro, Vite, and Webpack.
A styled factory, variants, tokens, fonts, themes, media queries, shorthands and more.
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.