Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.8

Stack

Stack is a component that groups elements and provides spacing between child elements.

Source@yamada-ui/layouts

Import

import { Stack, VStack, HStack, ZStack } from "@yamada-ui/react"
Copied!
  • Stack is used to stack child elements vertically or horizontally.
  • VStack is used to stack child elements vertically.
  • HStack is used to stack child elements horizontally.
  • ZStack is used to stack child elements in depth.

Usage

Editable example

<Stack direction={{ base: "column", lg: "row" }}>
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(bg, index) => (
      <Box key={index} p="md" rounded="4" bg={bg} color="white">
        Box
      </Box>
    )}
  </For>
</Stack>
Copied!

Stacking Vertically & Horizontally

Editable example

<VStack>
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(bg, index) => (
      <Box key={index} p="md" rounded="4" bg={bg} color="white">
        Box
      </Box>
    )}
  </For>
</VStack>
Copied!

Editable example

<HStack>
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(bg, index) => (
      <Box key={index} p="md" rounded="4" bg={bg} color="white">
        Box
      </Box>
    )}
  </For>
</HStack>
Copied!

Adding Separators Between Child Elements

Editable example

<VStack separator={<Separator />}>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="secondary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="warning" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</VStack>
Copied!

Using Spacer

Editable example

<HStack>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Spacer />

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</HStack>
Copied!

Stacking in Depth

Editable example

<ZStack>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="secondary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="warning" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</ZStack>
Copied!

Changing Direction

To change the direction, set direction to top, bottom-right, etc.

Editable example

<VStack>
  <ZStack direction="top">
    <Box p="md" rounded="4" bg="primary" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="secondary" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="warning" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="danger" color="white">
      Box
    </Box>
  </ZStack>

  <ZStack direction="bottom-right">
    <Box p="md" rounded="4" bg="primary" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="secondary" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="warning" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="danger" color="white">
      Box
    </Box>
  </ZStack>
</VStack>
Copied!

Reversing Direction

To reverse the direction, set reverse to true.

Editable example

<ZStack direction="left" reverse>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="secondary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="warning" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</ZStack>
Copied!

Edit this page on GitHub

PreviousBoxNextContainer