Stack

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

Panda

import { Stack, HStack, VStack } from "styled-system/jsx";

Usage

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

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.

Responsive Direction

Props

Prop	Type	Description
`direction`	`'row' \| 'column' \| ResponsiveValue`	The direction of the stack.
`gap`	`CerberusSpacing`	The gap between the stack items.
`align`	`CSSProperties['align-items']`	The alignment of the stack items.
`justify`	`CSSProperties['justify-content']`	The justification of the stack items.

On this page

Edit this page on Github

Cerberus Design System | Docs

import { DecorativeBox } from '@/app/components/decorative-box'
import { Stack } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <Stack w="3/4">
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
      <DecorativeBox h="20" />
    </Stack>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { Stack } from 'styled-system/jsx'

export function HorizontalDemo() {
  return (
    <Stack direction="horizontal" gap="md" w="3/4">
      <DecorativeBox h="10" />
      <DecorativeBox h="10" />
      <DecorativeBox h="10" />
    </Stack>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { HStack } from 'styled-system/jsx'

export function HStackDemo() {
  return (
    <HStack gap="md" w="3/4">
      <DecorativeBox h="10" />
      <DecorativeBox h="5" />
      <DecorativeBox h="20" />
    </HStack>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { VStack } from 'styled-system/jsx'

export function VStackDemo() {
  return (
    <VStack gap="md" w="3/4">
      <DecorativeBox h="20" w="50%" />
      <DecorativeBox h="20" w="25%" />
      <DecorativeBox h="20" w="full" />
    </VStack>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { Stack } from '@/styled-system/jsx'

export function ResponsiveStackDemo() {
  return (
    <Stack direction={{ base: 'column', md: 'row' }} gap="md" h="100px" w="3/4">
      <DecorativeBox boxSize="20" />
      <DecorativeBox boxSize="20" />
      <DecorativeBox boxSize="20" />
    </Stack>
  )
}