Components

Stack

The Stack component is a low-level primitive used to layout items in a horizontal or vertical stack, with even spacing between the items.

By default, the Stack component will distribute items vertically using space token 300 (8px) between the items.

import { Stack } from '@sproutsocial/racine'

Stacks can also be distributed along on the horizontal axis:

The spacing between items in the stack can be adjusted using Seeds tokens. In this example, a space value of 600 is used (40px), as well as a center alignment:

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON
BORDER
LAYOUT
POSITION
FLEXBOX
Learn more
NameTypeDefaultDescriptionRequired?
spaceTypeSpace300
Amount of space between items in the stack
align"left""center""right""left"
Alignment of the items in the stack
direction"vertical""horizontal""vertical"
Axis upon which the stack is laid out
childrenReact.Node