Stack

Status

Stable

Accessibility

Reviewed

Package

tenet-ui@0.5.0

Source

Stack.tsx

Import

import { Stack } from 'tenet-ui';

Also accepts every prop of HTMLAttributes<HTMLDivElement>.

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

• 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

• ✅ <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

3 stories for Stack, open in Storybook

• Vertical components-stack--vertical
• Horizontal components-stack--horizontal
• Toolbar components-stack--toolbar

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

Props

Stack

Prop	Type	Default	Description
direction	'horizontal' | 'vertical' StackDirection	vertical	Main-axis direction.
gap	'none' | 'condensed' | 'normal' | 'spacious' StackGap	normal	Space between children, from the space scale (condensed=8, normal=16, spacious=24).
align	'start' | 'center' | 'end' | 'stretch' StackAlign	None	Cross-axis alignment (maps to align-items).
justify	'start' | 'center' | 'end' | 'between' StackJustify	None	Main-axis distribution (maps to justify-content).
wrap	boolean	false	Allow children to wrap onto multiple lines.
padding	'none' | 'condensed' | 'normal' | 'spacious' StackPadding	None	Inner padding, from the space scale.
children	ReactNode	None

Stack.Item

Prop	Type	Default	Description
grow	boolean	false	Grow to fill the available space along the main axis.
children	ReactNode	None

Related components

• Grid
• Card
• Divider
• Accordion
• Heading