Stack - Docs - Artefact

Stack

Layout

Presentational

A layout primitive that can be used to create a vertical or horizontal stack of elements.

Usage

Item 1

Item 2

Item 3

import { Stack } from '../components/ui/stack'

export const Example = () => (
  <Stack direction="row" gap="4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Stack>
)

CMS Page Builder

This component is available as a stack block in the Page Builder (content/pages/*.json):

{
  "type": "stack",
  "direction": "horizontal",
  "gap": "4",
  "children": [
    { "type": "text", "content": "Item 1" },
    { "type": "text", "content": "Item 2" }
  ]
}

Props

Prop	Type	Default	Description
`direction`	`flex-direction`	`column`	The flex direction of the stack.
`gap`	`spacing`	`8px`	The gap between the elements in the stack.
`align`	`align-items`	-	The alignment of the elements in the stack.
`justify`	`justify-content`	-	The justification of the elements in the stack.

Responsiveness

The Stack component supports responsive values for all its props.

<Stack direction={{ base: 'column', md: 'row' }} gap={{ base: '4', md: '8' }}>
  {/* Elements will be stacked vertically on mobile and horizontally on desktop */}
</Stack>