Tamagui Props

All the properties supported on base Tamagui components.

Tamagui uses a superset of the style properties that are supported in React Native and React Native Web, and flattens them onto the direct properties of Stack and Text (see why below). So you can write:

import { Stack } from 'tamagui' // or '@tamagui/core'
export default () => <Stack padding={10} backgroundColor="red" />

For the full list of style and non-style props, see:

You may also want to reference the react-native-web docs  for more on props related to:

Tamagui adds a few extra props, read those below.

Order is important

Tamagui props are sensitive to their order - a very nice feature, that without which would leave you with impossible styling challenges. Let's first explain how it works, and then why it's necessary.

Define a new styled component:

const CalHeader = styled(Text, {
variants: {
isHero: {
true: {
fontSize: 36,
backgroundColor: 'blue',
color: 'white',

And then use it in a view you're building:

export const MyCalendar = (props: { isHero?: boolean; headerFontSize?: number }) => {
return (
{/* ... some other components... */}
<CalHeader isHero={props.isHero} fontSize={props.headerFontSize}>

Why it's important

Notice two things: isHero sets a variety of properties, but you want to allow overriding one of those properties, fontSize.

If Tamagui didn't respect the order of the props on the JSX element of CalHeader, you wouldn't know if the isHero font size wins, or if the headerFontSize wins.

CSS does a "last defined style wins", which is a huge pain because it means you have to carefully manage the order your CSS is actually loaded into the document. Tamagui could do something similar, with a "inline props always win, defined props go in order of definition", but this would be dramatically less flexible.

Especially when it comes to spreading props downwards. Because Tamagui supports prop order, you have complete control over which styles you want to always win, vs which can be overridden by a user:

export const MyCalendarHeader = (props: CalHeaderProps) => {
return (
<CalHeader isHero {...props} fontSize={36}>

This component defaults to isHero styles, but if a user passes in isHero as false, it will disable all those styles. But because fontSize is always after the spread, it will always be set to 36.

Tamagui props

Outside of flat style properties, Tamagui adds the following props:


  • theme


    Apply a theme or sub-theme to this component and the components below it.

  • themeInverse


    Invert light or dark theme for the sub-tree.

  • themeShallow


    Used in combination with the theme prop, it prevents the theme from passing to children.

  • className


    Web Only: An escape hatch to set className. This works fully with the compiler, which will concat your defined className with its generated ones.

  • tag


    Web Only: Renders the final element as the given tag.

  • space

    boolean | string | TamaguiConfig['space']

    Spacing is built into Tamagui and can accept a number or Token.space value. This will filter out any nullish child elements and insert a spacer components between the remaining elements.

  • spaceDirection

    'horizontal' | 'vertical' | 'both'



    By default the space inserted is a square, but if you set it to horizontal it will be 0px tall, vertical will be 0px wide.

  • separator


    Insert a custom separator between every child. If space is provided, the separator will appear with a space on either side.

  • fullscreen


    Sets position absolute, and top, left, right, and bottom all to 0.

  • debug

    boolean | 'verbose' | 'break'

    When set Tamagui will output a variety of helpful information on how it parsed and applied styling. Verbose will output more information, and break will hit a debugger at the start of render in development mode.

  • asChild


    When true, Tamagui expects a single child element. Instead of rendering its own element, it will pass all props to that child, merging together any event handling props.

  • Text props

    Text adds the additional Text-specific props from React Native Web .

    Flat transform properties

    For styling, Tamagui adds flattened transform properties, pseudo states and media queries:


  • x

    string | number

    Maps to transform: [{ translateX }]

  • y

    string | number

    Maps to transform: [{ translateY }]

  • scale

    string | number

    Maps to transform: [{ scale }]

  • perspective

    string | number

    Maps to transform: [{ perspective }]

  • scaleX

    string | number

    Maps to transform: [{ scaleX }]

  • scaleY

    string | number

    Maps to transform: [{ scaleY }]

  • skewX

    string | number

    Maps to transform: [{ skewX }]

  • skewY

    string | number

    Maps to transform: [{ skewY }]

  • matrix

    string | number

    Maps to transform: [{ matrix }]

  • rotate

    string | number

    Maps to transform: [{ rotate }]

  • rotateY

    string | number

    Maps to transform: [{ rotateY }]

  • rotateX

    string | number

    Maps to transform: [{ rotateX }]

  • rotateZ

    string | number

    Maps to transform: [{ rotateZ }]

  • Pseudo style props

    Support for hoverStyle, pressStyle, and focusStyle is helpful as it turns what typically is complex stateful code into pure CSS on web, and a more performant StyleSheet.create (compared to inline styles) for native. They can be used with media queries as well.

    <Text color="red" hoverStyle={{ color: 'blue' }} />


  • hoverStyle


    Web only: Applies the given style on hover

  • pressStyle


    Applies the given style on press

  • focusStyle


    Applies the given style on focus

  • Media query style props

    Based on whatever media queries you define in createTamagui, you can now use any of them to apply styling on native and web using the $ prefix.

    If you defined your media query like:

    media: {
    sm: { maxWidth: 800 },

    Then you can use it like:

    <Text color="red" $sm={{ color: 'blue' }} />

    Press Events

    Press events come along for easy single-touch events:


  • onPress

    (e: PressEvent) => void

  • onPressIn

    (e: PressEvent) => void

  • onPressOut

    (e: PressEvent) => void

  • Note: Internally Tamagui Stack and Text implement press events through React Native Pressable  - which includes some important details on how it works.

    Hover Events

    Tamagui adds events above the typical react-native/react-native-web View/Text props. These are:


  • onHoverIn

    (e: HoverEvent) => void

    Web only: maps to onMouseEnter

  • onHoverOut

    (e: HoverEvent) => void

    Web only: maps to onMouseLeave