Stack

The Stack component is the basic layout component, used to build horizontal and vertical flows, dashboards, etc.
For information about views layouts in general as well as common layout patterns, see Layout.

Columns
By default, Stack renders items in a vertical flow with spacing in between each item.
tsx
Copied
1
<Stack>
2
  <Card>Content</Card>
3
  <Card>Content</Card>
4
  <Card>Content</Card>
5
</Stack>

Rows
Stack can render items in a horizontal flow by setting direction="row".
tsx
Copied
1
<Stack direction="row">
2
  <Card>Content</Card>
3
  <Card>Content</Card>
4
  <Card>Content</Card>
5
</Stack>

Spacing
Use the spacing prop to configure the amount of space between each item of the stack.
tsx
Copied
1
<Title order={5}>Extra-large spacing</Title>
2
<Stack spacing="xl">
3
  <Card>Content</Card>
4
  <Card>Content</Card>
5
  <Card>Content</Card>
6
</Stack>
7
<Title order={5}>Extra-small spacing</Title>
8
<Stack spacing="xs">
9
  <Card>Content</Card>
10
  <Card>Content</Card>
11
  <Card>Content</Card>
12
</Stack>

Justify
Justify defines the alignment across the main axis (the horizontal axis for a horizontal stack and the vertical axis for a vertical stack).
tsx
Copied
1
<Title order={5}>start (default)</Title>
2
<Stack direction="row" justify="start">
3
  <Card>Content</Card>
4
  <Card>Content</Card>
5
  <Card>Content</Card>
6
</Stack>
7
 <Title order={5}>end</Title>
8
<Stack direction="row" justify="end">
9
  <Card>Content</Card>
10
  <Card>Content</Card>
11
  <Card>Content</Card>
12
</Stack>
13
 <Title order={5}>center</Title>
14
<Stack direction="row" justify="center">
15
  <Card>Content</Card>
16
  <Card>Content</Card>
17
  <Card>Content</Card>
18
</Stack>
19
 <Title order={5}>space-around</Title>
20
<Stack direction="row" justify="space-around">
21
  <Card>Content</Card>
22
  <Card>Content</Card>
23
  <Card>Content</Card>
24
</Stack>
25
 <Title order={5}>space-between</Title>
26
<Stack direction="row" justify="space-between">
27
  <Card>Content</Card>
28
  <Card>Content</Card>
29
  <Card>Content</Card>
30
</Stack>

Align
Align defines the alignment across the cross axis (the vertical axis for a horizontal stack and the horizontal axis for a vertical stack).
tsx
Copied
1
<Title order={5}>stretch (default)</Title>
2
<Stack align="stretch">
3
  <Card>Content</Card>
4
  <Card>Content</Card>
5
  <Card>Content</Card>
6
</Stack>
7
 <Title order={5}>start</Title>
8
<Stack align="start">
9
  <Card>Content</Card>
10
  <Card>Content</Card>
11
  <Card>Content</Card>
12
</Stack>
13
 <Title order={5}>end</Title>
14
<Stack align="end">
15
  <Card>Content</Card>
16
  <Card>Content</Card>
17
  <Card>Content</Card>
18
</Stack>
19
 <Title order={5}>center</Title>
20
<Stack align="center">
21
  <Card>Content</Card>
22
  <Card>Content</Card>
23
  <Card>Content</Card>
24
</Stack>

Wrap
Set the wrap prop to true to allow items to wrap.
tsx
Copied
1
<Stack direction="row" wrap>
2
  <Card>Content</Card>
3
  <Card>Content</Card>
4
  <Card>
5
    This content is very long so it is pushed to the next row when it can't fit on the row
6
  </Card>
7
</Stack>

Grow
By default, items in a Stack will fit their content. To make the items to grow to fill available space, set the grow prop of the items to true.
tsx
Copied
1
<Title order={5}>No grow</Title>
2
<Stack direction="row">
3
  <Card>Content</Card>
4
  <Card>Content</Card>
5
  <Card>Content</Card>
6
</Stack>
7
<Title order={5}>Grow</Title>
8
<Stack direction="row">
9
  <Card grow>Content</Card>
10
  <Card grow>Content</Card>
11
  <Card grow>Content</Card>
12
</Stack>

Scroll
To force a vertical Stack to scroll, add a max height.
tsx
Copied
1
<Stack height="36u">
2
  <Card>Content</Card>
3
  <Card>Content</Card>
4
  <Card>Content</Card>
5
  <Card>Content</Card>
6
  <Card>Content</Card>
7
</Stack>

Component API
align
optional
default: stretch
"start" | "end" | "center" | "stretch"

Alignment of the stack on the horizontal axis for column stacks and the vertical axis for row stacks.

children
REQUIRED
React.ReactNode

Items of the stack.

direction
optional
default: column
"row" | "column"

Direction of the stack.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
default: auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
justify
optional
default: start
"start" | "end" | "center" | "space-between" | "space-around"

Position of the stack on the vertical axis for column stacks and the horizontal axis for row stacks.

scroll
optional
default: false
boolean

Allow scrolling of the stack.

spacing
optional
default: md
number | "xs" | "sm" | "md" | "lg" | "xl"

Spacing between items of the stack.

width
optional
default: auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.
wrap
optional
default: false
boolean

Allow wrapping of the stack items to multiple lines.

PrivacyTermsSupport