Skip to content
Tenet UI

Stack

Status: stableAccessibility reviewedtenet-ui@0.4.0
Import
import { Stack } from 'tenet-ui';

Also accepts every prop of HTMLAttributes<HTMLDivElement>.

Source: src/components/Stack/Stack.tsx

Usage guidelines

Section titled “Usage guidelines”

When to use: any time you place two or more elements next to or above each other with space between them. Stack is the design-system layout primitive — reach for it instead of writing display: flex with hardcoded gaps, and instead of reinventing a generic Box.

Rules

Section titled “Rules”
  • Use direction for the axis and gap for spacing — gap values map to the space scale (condensed=8, normal=16, spacious=24). Never set a pixel gap or margins between Stack children.
  • Use Stack.Item grow for the child that should absorb extra space (e.g. a search field in a toolbar) rather than flex: 1 inline.
  • Use align / justify for alignment; don’t add wrapper <div>s just to center things.
  • padding (optional) also comes from the space scale.
  • Stack is one axis. For columns (tiles, side-by-side fields) use Grid with columns and Grid.Item span; it shares the same gap scale.

Do / Don’t

Section titled “Do / Don’t”
  • ✅ <Stack direction="horizontal" gap="condensed" align="center">…</Stack>
  • ✅ <Stack.Item grow><TextInput … /></Stack.Item>
  • ❌ <div style={{ display: 'flex', gap: 12 }}> — raw flex, hardcoded gap.
  • ❌ A bespoke Box component that re-implements spacing with a custom sx prop.

See also: Grid for columns and responsive layouts; system guideline layout (gap scale, breakpoints, Card vs plain section).

Examples

Section titled “Examples”
3 stories for Stack — open in Storybook

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Section titled “Props”

Stack

PropTypeDefaultDescription
direction'horizontal' | 'vertical'
StackDirection
verticalMain-axis direction.
gap'none' | 'condensed' | 'normal' | 'spacious'
StackGap
normalSpace between children, from the space scale (condensed=8, normal=16, spacious=24).
align'start' | 'center' | 'end' | 'stretch'
StackAlign
—Cross-axis alignment (maps to align-items).
justify'start' | 'center' | 'end' | 'between'
StackJustify
—Main-axis distribution (maps to justify-content).
wrapbooleanfalseAllow children to wrap onto multiple lines.
padding'none' | 'condensed' | 'normal' | 'spacious'
StackPadding
—Inner padding, from the space scale.
childrenReactNode—

Stack.Item

PropTypeDefaultDescription
growbooleanfalseGrow to fill the available space along the main axis.
childrenReactNode—