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
Section titled “Import”import { Stack } from '@cimpress-ui/react';
import { Stack, Select, SelectItem, TextField } from '@cimpress-ui/react';
export default function Example() { return ( <Stack gap={16}> <TextField label="Name" placeholder="Enter your name" /> <Select label="Favorite fruit"> <SelectItem>Apple</SelectItem> <SelectItem>Banana</SelectItem> <SelectItem>Cherry</SelectItem> </Select> </Stack> );}
The Stack component requires two props:
children
: The elements to be stackedgap
: 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
Section titled “Horizontal direction”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> );}
Stack can arrange items horizontally by setting the direction
prop to "horizontal"
.
Wrapping
Section titled “Wrapping”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> );}
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
Section titled “Responsiveness”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 width="100%" height="100px" /> <WireframeGridItem width="100%" height="100px" /> <WireframeGridItem width="100%" height="100px" /> </Stack> );}
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
Section titled “API reference”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)
- justify Responsive<Justify>
-
Determines how items are distributed along the primary axis.
- align Responsive<Alignment>
-
Determines how each item is aligned along the cross axis.
- wrap Responsive<boolean>
-
Determines whether items will wrap to a new line if stack size is too small.
- 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
andmargin
. - marginRight Responsive<Spacing | "auto">
-
The amount of margin applied to the right edge of this component. Takes priority over
marginX
andmargin
. - marginBottom Responsive<Spacing | "auto">
-
The amount of margin applied to the bottom edge of this component. Takes priority over
marginY
andmargin
. - marginLeft Responsive<Spacing | "auto">
-
The amount of margin applied to the left edge of this component. Takes priority over
marginX
andmargin
.