A vertical layout primitive that arranges children in a column with consistent, responsive gaps. Built on top of Box.

Stack

The Stack component arranges its children vertically with consistent spacing. It extends the Box component’s capabilities, but always renders with display="flex" and flexDirection="col", giving you predictable vertical rhythm with a simple API.

Use Stack for vertical groupings (forms, settings panels, content sections). For horizontal rows, use Inline. For grid layouts, use Columns.

Features

Vertical flow with consistent gap between items
Responsive gap values via arrays
Extends Box props (e.g., margin, padding, alignItems, justifyContent, etc.)
Composable with other layout primitives (Inline, Columns, Box)

Usage

import { Stack } from '@loke/design-system/stack';

export default function Example() {
  return (
    <Stack gap={4}>
      <div className="border border-border bg-card p-3">Item 1</div>
      <div className="border border-border bg-card p-3">Item 2</div>
      <div className="border border-border bg-card p-3">Item 3</div>
    </Stack>
  );
}

Tips:

Use responsive arrays to adjust gaps across breakpoints: gap=2468
Combine with Box padding or margin props for outer spacing
Nest Stacks to create grouped sections with different spacing

Props

Stack extends most Box props (spacing, borders, background, alignment). Its vertical layout enforces display="flex" and flexDirection="col".

Prop

Type

Examples

Default

Block 1

Block 2

Block 3

<Stack gap={4}>
  <div className="border border-border bg-card p-5">Block 1</div>
  <div className="border border-border bg-card p-5">Block 2</div>
  <div className="border border-border bg-card p-5">Block 3</div>
</Stack>

Responsive stack

Item 1

Item 2

Item 3

Item 4

<Stack gap={[2, 4, 6]}>
  <div className="border border-border bg-card p-4">Item 1</div>
  <div className="border border-border bg-card p-4">Item 2</div>
  <div className="border border-border bg-card p-4">Item 3</div>
  <div className="border border-border bg-card p-4">Item 4</div>
</Stack>

Different gaps

Tight 1

Tight 2

Tight 3

<TightGapStackExample />

Many items

Block 1

Block 2

Block 3

Block 4

Block 5

Block 6

Block 7

Block 8

Block 9

Block 10

<ManyItemsStackExample />

Responsive gap

<ResponsiveGapStackExample />

Nested stacks

Section Title

Nested 1

Nested 2

Sibling A

Sibling B

<NestedStacksExample />

Best practices

Use Stack to keep vertical spacing consistent across sections
Favor gap over manual margins to maintain predictable rhythm
Nest Stack components to group related content with different spacing
Combine with Inline inside a Stack for complex layouts (labels + controls, etc.)

Stack

On this page