You're in the Library

Stack

Stacks children in a column with a gap from the space scale. The default gap follows density (16px comfortable, 12px compact).
Stable
Edit

Preview appears after the next Storybook update.

Stack example
<Stack />
Rendered with the real componentFrom the code
Light
Dark

When to use

Use it for

  • Vertical rhythm inside cards, dialogs, forms and page sections.
  • gap from the space scale: tight (1 to 2) inside a group, generous (6 to 8) between groups.
  • render to output a semantic element: <section />, <ul />, <form />.

Not for

  • Rows of items: use Inline.
  • Two-dimensional layouts with columns: use Grid.
  • Spacing one element only: give that element a margin class in your app, not a wrapper.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

LabelHint
LabelHint
Do

Nest stacks to show grouping

A tight stack per group inside a looser stack: the space itself says what belongs together.

TitleLabelHintLabel
Don't

One gap for everything

Equal spacing everywhere flattens hierarchy. Vary the gap to separate groups.

Accessibility

  • A plain div by default with no role: it changes layout, not semantics.
  • Use render to give the stack the right element (a list of items should be <ul />).
  • Visual order equals DOM order, so reading and tab order stay consistent.

Content guidelines

  • Not applicable: Stack holds no copy of its own.

From the code Generated from the component, not editable here.

Anatomy and tokens

Read from packages/react/src/components/Stack/Stack.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

1 tokens0 semantic or component, change with theme and brand1 density, change with comfortable or compact0 from the shared scales

Motion and interaction

Stack does not animate: it only lays out other components.

From the code Generated from the component, not editable here.

Props

Parsed from the TypeScript types in packages/react/src/components/Stack/Stack.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute.

PropTypeDefaultDescription
gap'0' | '0-5' | '1' | '1-5' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16'noneSpace between children, a key of the space scale. Default: the density token `layout.gap` (16 or 12px).
align'start' | 'center' | 'end' | 'stretch' | 'baseline''stretch'Cross-axis alignment. Default `stretch`.
justify'start' | 'center' | 'end' | 'between''start'Main-axis distribution. Default `start`.
renderReactElementnoneRender another element, for example `<section />` or `<ul />`.

Comes with gapStyle, each accepting native <div> attributes.

Playground

Change the props and see the real Stack update. Controls are generated from the TypeScript props; nothing here changes the system.

Code for these props
<Stack gap="2" />

justify

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Stack in Storybook).

Embed Storybook stories here (2)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

AllStates

From the code Generated from the component, not editable here.

Changelog

  • New

    Layout utilities: Stack, Inline, Grid (fixed columns or auto-fit by minimum item width) and Container (token widths and gutters)

    v1.0.0, Nov 11, 2026

  • Fix

    Homepage: "Decide in seconds." shows Ann and Dana with the design system's own illustrated avatars again (Notionists faces, seeds ann and dana, drawn at build time on the Harbor circle), and the Before and After panes stay still while the stack and the Approve pulse keep moving

    v1.0.0, Nov 11, 2026

All release notes

Updated Nov 11, 2026
View source

Generated from 4 files