Skip to content

Stack API

Stack is a layout component that arranges its children in a vertical or horizontal stack with consistent spacing between them. It provides a convenient way to create common layouts while maintaining proper spacing between elements.

The Stack component is particularly useful when you need to:

  • Create vertical lists of elements with consistent spacing
  • Arrange form fields
  • Layout groups of buttons or controls
  • Create responsive layouts that adapt to different screen sizes
import { Stack } from '@cimpress-ui/react';

The Stack component requires two props:

  • children: The elements to be stacked
  • gap: The amount of space between each child element

By default, Stack arranges items vertically in a single column. You can customize the layout using props like direction, align, justify, and wrap.

Stack can arrange items horizontally by setting the direction prop to "horizontal".

By default, Stack will prevent items from wrapping if there’s not enough space available. If you want items to wrap, set the wrap prop to true.

Stack supports responsive layouts through object syntax. You can specify different directions for different breakpoints, allowing the layout to adapt based on screen size. In this example, items are stacked vertically on mobile devices (sm breakpoint) and horizontally on tablets and larger devices (md breakpoint).

Stacks its children with a specified amount of space between them.

ref Ref<HTMLDivElement>

The ref type for this component.

StackProps
children * ReactNode

The items to stack.

gap * Responsive<Spacing>

The amount of space between items.

direction Responsive<Direction>

Determines the stacking direction (ie. which direction is the primary axis)

Defaults to 'vertical' .
justify Responsive<Justify>

Determines how items are distributed along the primary axis.

Defaults to 'start' .
align Responsive<Alignment>

Determines how each item is aligned along the cross axis.

Defaults to 'stretch' .
wrap Responsive<boolean>

Determines whether items will wrap to a new line if stack size is too small.

Defaults to false .
id string

The element's unique identifier. See MDN.

data-cim-style-root boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps
margin Responsive<Spacing | "auto">

The amount of margin applied to all edges of this component.

marginX Responsive<Spacing | "auto">

The amount of margin applied to the left and right edges of this component. Takes priority over margin.

marginY Responsive<Spacing | "auto">

The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.

marginTop Responsive<Spacing | "auto">

The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.

marginRight Responsive<Spacing | "auto">

The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.

marginBottom Responsive<Spacing | "auto">

The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.

marginLeft Responsive<Spacing | "auto">

The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.