@spark-web/stack

---
title: Stack
storybookPath: page-layout-stack--default
isExperimentalPackage: false
---

Used to distribute children vertically, with even spacing between each child.

``jsx live





`

Examples

$3

The spacing between children can be adjusted using the gap prop.

`jsx live






















`

$3

Items can be aligned horizontally using the align prop.

`jsx live

















`

$3

Use the dividers property to render a Divider between each
element in the Stack.

`jsx live

First item
Second item
Third item

`

$3

Nest Stack components to create more complex white space rules.

`jsx live

Heading

Line 1
Line 2
Line 3


Line 1
Line 2
Line 3


`

Props

Stack props also include Box props and are not listed here
(excludes display, className, alignItems, flexDirection,
justifyContent and flexWrap).

Extra props are also passed into the underlying Box` component.

[align]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/stack/src/Stack.tsx#L24
[data-attribute-map]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1