Stack - Chakra Ui — ContextQMD

Usage

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

jsx

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

jsx

<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.