Stack

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

Source: packages/chakra-ui-solid/src/components/stackChakra UI ↗

import { Stack } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function StackBasic() {
  return (
    <Stack>
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
    </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.

import { Stack } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function StackHorizontal() {
  return (
    <Stack direction="row" h="20">
      <DecorativeBox />
      <DecorativeBox />
      <DecorativeBox />
    </Stack>
  );
}

HStack

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

import { HStack } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function StackWithHstack() {
  return (
    <HStack>
      <DecorativeBox h="10" />
      <DecorativeBox h="5" />
      <DecorativeBox h="20" />
    </HStack>
  );
}

VStack

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

import { VStack } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function StackWithVstack() {
  return (
    <VStack>
      <DecorativeBox w="50%" h="20" />
      <DecorativeBox w="25%" h="20" />
      <DecorativeBox w="100%" h="20" />
    </VStack>
  );
}

Separator

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

import { Stack, StackSeparator } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function StackWithSeparator() {
  return (
    <Stack separator={StackSeparator}>
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
    </Stack>
  );
}

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.

import { Stack } from "chakra-ui-solid";
import { DecorativeBox } from "../components/decorative-box";

export default function StackWithResponsiveDirection() {
  return (
    <Stack direction={{ base: "column", md: "row" }} gap="10">
      <DecorativeBox boxSize="20" />
      <DecorativeBox boxSize="20" />
      <DecorativeBox boxSize="20" />
    </Stack>
  );
}