Stack

Usage

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

import { HStack, Stack, VStack } from "chakra-ui-solid";

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

Examples

Horizontal

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

HStack

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

VStack

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

Separator

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

separator takes a component, where the React version takes an element and clones it between each pair of children. Solid has no cloneElement: a JSX element is one already-constructed DOM node, and inserting one node in several places moves it — you would get a single separator, at the last gap, with nothing to say so. Passing the component (or a function returning it, separator={() => <StackSeparator borderColor="red.500" />}) is what lets the Stack build a fresh one per gap, and it makes the element spelling a type error rather than a quiet mislayout.

StackSeparator reads the stack’s direction from context — that is how it knows to draw across a column stack and down a row one — and it carries no margins of its own. Chakra unsets the flex gap when a separator is present and spaces the items with the separator’s own margins; here the gap stays on and does that work, because a margin whose value is the gap prop is a value no stylesheet has a rule for. The geometry is the same either way: a gap, the line, a gap.

Responsive Direction

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

Props