npx create-tamagui-app@latest
Performant
The fastest UI kit - thanks to an advanced compiler that handles styles, media queries, CSS variables, and tree flattening.
Easy to adopt
Works with React - Native and Web . Use it as a style library or full component kit. Comes with beautiful themes, or BYO.
Productive
Typed inline styles without performance downside with themes, tokens, shorthands, media queries, and animations.
A colorful revolution.
Next-generation theme system that compiles to CSS. Unlimited sub-themes down to the element.
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
Responsive, for real.
Simple syntax for universal responsive styling - compiled to @media on the web for amazing performance.
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,
},
},
]
Incredible features, insanely fast.
Modern features 🤝 unmatched performance.
import { YStack, Text } from 'tamagui'
const App = () => (
<YStack px="$2" w={550} $gtSm={{ px: '$6' }}>
<Text fs="$2">
Lorem ipsum dolor.
</Text>
</YStack>
)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"
import { Text, YStack } from 'tamagui'
const App = () => <div className={_cn}>
<span className={_cn2}>
Lorem ipsum dolor.
</span>
</div>Output － Shorthands work with the compiler support of media queries, pseudo styling and conditional logic.
Years of developer-time out of the box.
Start day one with more than you'd build by year two.
Fully typed
Typed inline styles, themes, tokens, shorthands, media queries, animations, and hooks that optimize.
Fast, all ways
Get faster feedback - inline styles author much faster, without performance downside.
SSR
Cross-browser server-side rendering, even for responsive styles and variants out of the box.
Dev tools
Debug props and pragmas, dev-time fileName/lineNumber props added on every element, global Tamagui for state introspection.
Accessibility
Built on top of react-native-web, accessiblity control out of the box, plus components with smart defaults.
Components
Components that smooth out bumps and add features between Native and Web.
More powerful props on every component.
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.