The fastest UI kit - thanks to an advanced compiler that handles styles, media queries, CSS variables, and tree flattening.
Works with React - Native and Web . Use it as a style library or full component kit. Comes with beautiful themes, or BYO.
Typed inline styles without performance downside with themes, tokens, shorthands, media queries, and animations.
Spaceship
Kanye West
College Dropout
Share native and web styling without performance downside.
Responsive styles compile to CSS (web) or StyleSheet turning jank into butter. 🧈
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.
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,
},
},
]
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.
Typed inline styles, themes, tokens, shorthands, media queries, animations, and hooks that optimize.
Get faster feedback - inline styles author much faster, without performance downside.
Cross-browser server-side rendering, even for responsive styles and variants out of the box.
Debug props and pragmas, dev-time fileName/lineNumber props added on every element, global Tamagui for state introspection.
Built on top of react-native-web, accessiblity control out of the box, plus components with smart defaults.
Components that smooth out bumps and add features between Native and Web.
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.