Stack

A layout component for consistent spacing between child elements. Available in vertical and horizontal orientations.

Preview

Vertical stack

Item 1

Item 2

Item 3

Horizontal stack

Tag A

Tag B

Tag C

Tag D

Tag E

With different spacing

gap: --space-1 (4px)

A

B

C

gap: --space-4 (16px)

A

B

C

gap: --space-8 (32px)

A

B

C

Props

Prop	Type	Default	Description
direction	'vertical' | 'horizontal'	'vertical'	Stack direction
gap	string	--space-4	Spacing between items
align	'start' | 'center' | 'end' | 'stretch'	'stretch'	Cross-axis alignment
wrap	boolean	false	Allow items to wrap
children	React.ReactNode	--	Stack items

Code example

React

import { Stack, Button } from '@thepace/lexicon/components';

<Stack direction="horizontal" gap="var(--space-3)">
  <Button variant="primary">Save</Button>
  <Button variant="secondary">Cancel</Button>
</Stack>

<Stack gap="var(--space-6)">
  <Card>Section 1</Card>
  <Card>Section 2</Card>
  <Card>Section 3</Card>
</Stack>

CSS utility

.my-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

CSS class reference

Class	Purpose
.lex-stack	Flex container
.lex-stack--vertical	Column direction
.lex-stack--horizontal	Row direction
.lex-stack--wrap	Allow wrapping

Guidelines

Do

• Use Stack for consistent spacing between sibling elements.
• Use spacing tokens for the gap value.
• Combine with Grid for complex page layouts.

Don't

• Don't set margins on Stack children — use the gap prop instead.
• Don't nest Stacks excessively — a single Grid often works better.