Stack

Used to layout its children in a vertical or horizontal stack.

AI TipWant to skip the docs? Use the MCP Server

Usage

By default, Stack applies flex-direction: column and gap: 8px to its children.

import { HStack, Stack, VStack } from "@chakra-ui/react"

<Stack>
  <div />
  <div />
</Stack>

Use the direction prop to change the direction of the stack.

Alternatively, you can use the HStack to create a horizontal stack and align its children horizontally.

Use the VStack to create a vertical stack and align its children vertically.

Use the separator prop to add a separator between the stack items.

Use the direction prop to change the direction of the stack responsively.