npm create tamagui-app@latest
Core A lightweight design-system library for React Native & Web with tokens, themes, fonts and more + a nice typed styled utility.
Tamagui UI kit that adapts to native and web, built using Core. Composable component APIs, consistent size props, nested themes, and more.
Static Compile-time optimize styles both static and inline, with partial evaluation and tree flattening. Plugins for Webpack, Vite, Metro & more.
Less syntax, better performance
A complete design system that optimizes away.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.
Spaceship
Kanye West
College Dropout
Easily responsive
Responsive props - even inline ones containing logic - are compiled to atomic CSS on web, or hooks on native.
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.
Universal Animations
Better platform targeting with animation drivers that can be changed without changing code.
Bouncy
A bouncy spring
Lazy
A lazy, straightforward spring
Quick
A 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/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
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 pragrma 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.
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.