Stacks

An optional base for creating flex-based layouts

XStack, YStack, and ZStack provide styled flex layouts for horizontal, vertical, and overlapping content.

Features

X, Y, and Z flex stacks
Spacing between elements with gap
Press, focus, and layout events

Tamagui components include optional stack views: XStack, YStack and ZStack. They extend the View from @tamagui/core, so they accept all style properties.

Installation

Stacks is already installed in tamagui, or you can install it independently:

yarnnpmbunpnpm
yarn add @tamagui/stacks

Usage

import { XStack, YStack } from 'tamagui'

export default () => (
  <XStack gap="2">
    <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 { Text, XStack, YStack } from 'tamagui'

export default () => (
  <XStack
    flex={1}
    flexWrap="wrap"
    backgroundColor="#fff hover:red"
    flexDirection="gtSm:column"
    flexWrap="wrap gtSm:nowrap"
  >
    <YStack gap="3">
      <Text>Hello</Text>
      <Text>World</Text>
    </YStack>
  </XStack>
)

API reference

XStack, YStack, ZStack

Stacks accept all standard Tamagui Props.

Stacking (zIndex)

Surface

Edit this page on GitHub.