An optional base for creating flex-based layouts.


  • X, Y, and Z stacks for easy flex layouts.

  • Gap property to add space between elements.

  • Handle press, focus, and layout events easily.

Tamagui UI includes optional stack views - XStack, YStack and ZStack. They extend directly off the 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 { XStack, YStack } from 'tamagui'
export default () => (
<XStack gap="$2">
<YStack />
<YStack />
<YStack />

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

Fuller example

An example using a wide variety of style properties:

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

API Reference

XStack, YStack, ZStack

Beyond the Tamagui Props, the stacks add just two variants:


  • fullscreen


    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.

  • Previous