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

import { Stack } from '@cimpress-ui/react';

Usage

Preview

Name

Favorite fruit

Select an item

Code

import { Stack, Select, SelectItem, TextField } from '@cimpress-ui/react';

export default function Example() {
  return (
    <Stack gap={16}>
      <TextField label="Name" />
      <Select label="Favorite fruit">
        <SelectItem>Apple</SelectItem>
        <SelectItem>Banana</SelectItem>
        <SelectItem>Cherry</SelectItem>
      </Select>
    </Stack>
  );
}

Copy code Open in playground

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.

Horizontal direction

Preview

First buttonSecond buttonThird button

Code

import { Button, Stack } from '@cimpress-ui/react';

export default function Example() {
  return (
    <Stack gap={16} direction="horizontal">
      <Button>First button</Button>
      <Button>Second button</Button>
      <Button>Third button</Button>
    </Stack>
  );
}

Copy code Open in playground

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

Wrapping

Preview

Wrapping enabled

Wrapping disabled

Code

import { Stack } from '@cimpress-ui/react';
import { WireframeGridItem } from '../../components/wireframes/wireframe';

export default function Example() {
  return (
    <Stack gap={64}>
      <Stack gap={4} direction="horizontal" wrap>
        <WireframeGridItem width="300px" height="60px">
          Wrapping enabled
        </WireframeGridItem>
        <WireframeGridItem width="400px" height="50px" />
        <WireframeGridItem width="500px" height="40px" />
        <WireframeGridItem width="600px" height="40px" />
      </Stack>

      <Stack gap={4} direction="horizontal">
        <WireframeGridItem width="300px" height="60px">
          Wrapping disabled
        </WireframeGridItem>
        <WireframeGridItem width="400px" height="50px" />
        <WireframeGridItem width="500px" height="40px" />
        <WireframeGridItem width="600px" height="40px" />
      </Stack>
    </Stack>
  );
}

Copy code Open in playground

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.

Responsiveness

Preview

Code

import { Stack } from '@cimpress-ui/react';
import { WireframeGridItem } from '../../components/wireframes/wireframe.js';

export default function Example() {
  return (
    <Stack gap={16} direction={{ sm: 'vertical', md: 'horizontal' }}>
      <WireframeGridItem height="100px" />
      <WireframeGridItem height="100px" />
      <WireframeGridItem height="100px" />
    </Stack>
  );
}

Copy code Open in playground

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).

API reference

Stack

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.