Stacks

Gui UI includes optional stack views - XStack, YStack and ZStack. They extend directly off the View from @hanzogui/core, and so accept all style properties.

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

A stack names an axis — across, down, or stacked — not a layout engine. It sets flexDirection and nothing else, so display still chooses the mode: <XStack display="grid"> is a horizontal grid, and the axis is resolved against the mode for you. See Grid for the track and placement properties, and for which layouts survive the crossing to native.

Installation

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

yarn
npm
bun
pnpm
yarn add @hanzogui/stacks
Copy

Usage

import { XStack, YStack } from '@hanzo/gui'

export default () => (
  <XStack gap="$2">
    <YStack />
    <YStack />
    <YStack />
  </XStack>
)
Copy

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

An example using a wide variety of style properties:

import { Text, XStack, YStack } from '@hanzo/gui'

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

API Reference

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