Write less
runs fasterruns fasterruns fasterruns fasterruns fasterruns faster
styles · optimizing compiler · UI kit
for React and React Native
npm create tamagui
Core
A style library for React and React Native with a large typed superset of the React Native style API, with no outside dependencies in ~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 need, cross-platform and composable. Compound Component APIs, styled or unstyled, easy to size, theme, and more.
A powerful style system
A multi-faceted optimizing compiler enables
SSR-first atomic CSS.
Use inline props or the `styled` function:
import { View, Text, styled } from '@tamagui/core'
import { Heading } from './Heading'
const App = (props) => (
<View px={10} width={550} $gtSm={{ px: 30 }}>
<Heading size={props.big ? 'large' : 'small'}>Lorem ipsum.</Heading>
</View>
)
const Heading = styled(Text, {
render: 'h1',
color: 'green',
backgroundColor: '$background',
variants: {
size: {
large: {
fontSize: 22,
},
small: {
fontSize: 16,
},
},
},
})
Get back perfectly optimized DOM on web (or View/Text on native).
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 = " _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"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.
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Billie Jean
Michael Jackson
Thriller
Easily responsive
Responsive props and hooks, compiled to atomic CSS on web.
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.
damping
9
mass
0.9
stiffness
150
import { Button, Square } from 'tamagui'
export default () => {
const [positionI, setPositionI] = React.useState(0)
return (
<>
<Square
transition="bouncy"
size={110}
bg="$red10"
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,
},
},
]Fully typed
wwwwwwwwwwwwwwwwwwwTyped inline styles, themes, tokens, shorthands, media queries, animations, and hooks that optimize.
Server-first
SSR and RSC just work, hydrate, and don't flicker, with all animation drivers, responsive styles, and themes.
Fast
Fully optimizes and flattens to platform-ideal code for web and native, every feature works at compile and runtime.
Introspection
wwwwwwwwwwwwwwwwwwwMulti-level debug pragma 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
Style library + headless components. Animations, themes, variants, tokens, fonts. Advanced selectors, and more.
Beautifully expressive font systems with rhythm.
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.
Swappable
typed, compiled
custom per-size
premade or custom
easy to author
font themes
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.
X
Announcements and general updates.
Discord
Get involved and get questions answered.
GitHub
Issues, feature requests, and contributing.