Balance Logo
Balance
Reckon Design System

Stack

Used to distribute children vertically, with even spacing between each child.
Install
pnpm add @reckon-web/stack
Import usage
import {
Stack
} from '@reckon-web/stack';
  • Code
  • API

Alternatives

  • Inline — For horizontal layouts, with fluid child widths that may wrap
  • Columns — For horizontal layouts, with prescriptive and exact child widths
  • Flex — For custom layouts

Usage

Gap

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

Open in Playroom

Horizontal alignment

Items can be aligned horizontally using the align prop.

left
center
right

Dividers

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

First item
Second item
Third item

Nesting

Nest Stack components to create more complex white space rules.

Heading

Line 1
Line 2
Line 3
Line 1
Line 2
Line 3
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo