ZStack

ZStack is used to stack child elements in depth.

Box

<ZStack>
  {["info", "success", "warning", "error"].map((bg, index) => (
    <Box key={index} bg={bg} color="white" p="md">
      Box
    </Box>
  ))}
</ZStack>

Usage

import { ZStack } from "@yamada-ui/react"

import { ZStack } from "@/components/ui"

import { ZStack } from "@workspaces/ui"

<ZStack />

Changing Direction

To change the direction, set direction to "start", "end-end", etc.

Box

<ZStack direction="start">
  {["info", "success", "warning", "error"].map((bg, index) => (
    <Box key={index} bg={bg} color="white" p="md">
      Box
    </Box>
  ))}
</ZStack>

Reversing Direction

To reverse the direction, set reverse to true.

Box

<ZStack direction="center-start" reverse>
  {["info", "success", "warning", "error"].map((bg, index) => (
    <Box key={index} bg={bg} color="white" p="md">
      Box
    </Box>
  ))}
</ZStack>

Props

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`direction`	`"end"`	`Direction` Stack in the specified direction.
`fit`	`true`	`boolean` If `true`, calculate the `width` and `height` of the element and assign container.
`reverse`	`false`	`boolean` If `true`, reverse direction.
`startIndex`	`0`	`number` If set the stack will start from the given index.