Stacks

The core view element in Tamagui for creating flex-based layouts.

Features

X, Y, and Z stacks with super performance.

Space property to add space between elements.

Supports all the same properties as React Native.

Usage

XStack, YStack and ZStack are the base views in Tamagui, they both extend directly off the simple Stack view from @tamagui/core.

Stack props accept every prop from react-native-web View, as well as all the style properties Tamagui supports.

In this example you'd show three YStack elements spaced out.

import { YStack, XStack } from 'tamagui'

export default () => (
  <XStack space>
    <YStack />
    <YStack />
    <YStack />
  </XStack>
);

To see all the style properties supported, see the Props documentation.

Fuller example

An example using a wide variety of style properties:

import { XStack, YStack, Text } from 'tamagui'

export default () => (
  <XStack
    flex={1}
    flexWrap="wrap"
    backgroundColor="#fff"
    hoverStyle={{
      backgroundColor: 'red'
    }}
    // media query
    $gtSm={{
      flexDirection: 'column',
      flexWrap: 'nowrap'
    }}
  >
    <YStack space="$3">
      <Text>Hello</Text>
      <Text>World</Text>
    </YStack>
  </XStack>
)

Stacks Props

Beyond the Tamagui Props, stacks have two variants

Prop	Type	Default
`fullscreen`	`boolean`
Sets position: absolute, top: 0, left: 0, right: 0, bottom: 0.
`elevation`	`number \| tokens.size`
Sets a natural looking shadow that expands out and away as the size gets bigger.

ThemeableStack

Adds a variety of helpers that automatically apply theme values when set to true. Useful for creating higher level components by wrapping with styled():

import { styled } from '@tamagui/core'
import { ThemeableStack } from '@tamagui/stacks' // or tamagui

const MyCard = styled(ThemeableStack, {
  hoverable: true,
  pressable: true,
  focusable: true,
  bordered: true,
})

Beyond Stacks props, ThemeableStacks add:

Prop	Type	Default
`hoverable`	`boolean`
Sets backgroundColor and borderColor to matching theme values on hover.
`focusable`	`boolean`
Sets backgroundColor and borderColor to matching theme values on hover.
`pressable`	`boolean`
Sets backgroundColor and borderColor to matching theme values on hover.
`pad`	`boolean`
Matches padding to size prop, if given.
`elevate`	`boolean`
Matches elevation prop to size prop, if given.
`bordered`	`boolean \| number`
Adds a border that inherits themes.
`circular`	`boolean \| number`
Clamps to a circular shape and radius.

useTheme()

Paragraph

Edit this page on GitHub.

Getting Started

Core

Tamagui

Separate Components

Extras