BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Stack

Stable
Edit in Studio

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

Updated Oct 16, 2026

Rendered with the real component
Light
TokenValueDescription
Dark
TokenValueDescription

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.

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 tokens 0 semantic or component, change with theme and brand 1 density, change with comfortable or compact 0 from the shared scales

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.

Prop Type Default Description
gap '0' | '0-5' | '1' | '1-5' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' none Space 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`.
render ReactElement none Render 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. 

<Stack gap="2" />
gap
align
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

Changelog

  • New

    Layout utilities: Stack, Inline, Grid (fixed columns or auto-fit by minimum item width) and Container (token widths and gutters). Gaps only accept space-scale keys.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes