layout · Normal DOM only

Stack

Flex container with token-driven gap, alignment, justification. Replaces 90% of inline flexbox.

Stack is the default container for arranging children in a row or column. The gap prop pulls from --t-spacing-*; align / justify use the standard flex vocabulary. Polymorphic via the `as` prop.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Stack } from '@8maverik8/twenty-design';

Examples

Direction × gap

1
2
3
4
1
2
3
tsx
<Stack direction="row" gap="2">…</Stack>
<Stack direction="column" gap="3">…</Stack>

Justify

justify="start"
a
b
c
justify="center"
a
b
c
justify="between"
a
b
c
justify="around"
a
b
c
tsx
<Stack direction="row" justify="between">…</Stack>

Variants

direction
columndefaultVertical stack — default for forms, lists, content.
rowHorizontal stack — toolbars, button groups, inline labels.
align
startflex-start — top in row, left in column.
centerCenter on the cross axis.
endflex-end.
stretchFill the cross axis (default).
baselineAlign by typographic baseline.
justify
startflex-start (default).
centerCenter on the main axis.
endflex-end.
betweenspace-between.
aroundspace-around.

Guidelines

✓
Pick the gap from --t-spacing-* keys — strings like "2", "3", "4".Hard-coded pixels (gap: 12) drift from the rest of the system.
✕
Nest Stack five levels deep just to align one child.Use one Stack with justify="between" — collapse needlessly nested layouts.