Get Started
Components
Styling
Theming

Stack

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

import { Stack } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"


const Demo = () => {
  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 "styled-system/jsx";
<Stack>
  <div />
  <div />
</Stack>

Examples

Horizontal

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

import { Stack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";


const Demo = () => {
  return (
    <Stack direction="horizontal" gap="md">
      <DecorativeBox h="10" />
      <DecorativeBox h="10" />
      <DecorativeBox h="10" />
    </Stack>
  );
};

HStack

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

import { HStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";
const Demo = () => {
  return (
    <HStack gap="md">
      <DecorativeBox h="10" />
      <DecorativeBox h="10" />
      <DecorativeBox h="10" />
    </HStack>
  );
};

VStack

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

import { VStack } from "styled-system/jsx";
import { DecorativeBox } from "compositions/lib/decorative-box";


const Demo = () => {
  return (
    <VStack gap="md">
      <DecorativeBox h="10" />
      <DecorativeBox h="10" />
      <DecorativeBox h="10" />
    </VStack>
  );
};

On this page