Design System
v4.9.5
⌘K

Stack

Mobile Support: Full
Jump to Props

Low-level primitive used to lay out items in a horizontal or vertical stack, with even spacing between the items.

On this page

Import

import { Stack } from "@vitality-ds/components";

The Stack component is a handy layout component that lets you create a CSS flexbox environment where elements can be "stacked". They can be stacked either horizontally or vertically.

Usage

<Stack direction="vertical" align="stretch">
  <Button>Add Medication</Button>
  <Button variant="outline">Attach Letter</Button>
  <Button variant="outline">Edit Patient</Button>
</Stack>

Direction

This property sets the direction of how child items are stacked. By default, its value is vertical.

<>
  <Stack>
    <FauxBadge>Item 1</FauxBadge>
    <FauxBadge>Item 2</FauxBadge>
  </Stack>
  <Stack direction="verticalReverse">
    <FauxBadge>Item 1</FauxBadge>
    <FauxBadge>Item 2</FauxBadge>
  </Stack>
  <Stack direction="horizontal">
    <FauxBadge>Item 1</FauxBadge>
    <FauxBadge>Item 2</FauxBadge>
  </Stack>
  <Stack direction="horizontalReverse">
    <FauxBadge>Item 1</FauxBadge>
    <FauxBadge>Item 2</FauxBadge>
  </Stack>
</>

Align

This property is shorthand for the align-items CSS property.

<div style={{ width: "100%" }}>
  <Stack align="start">
    <FauxBadge>Item 1</FauxBadge>
    <FauxBadge>Item 2</FauxBadge>
  </Stack>
  <Stack align="center">
    <FauxBadge>Item 1</FauxBadge>
    <FauxBadge>Item 2</FauxBadge>
  </Stack>
  <Stack align="end">
    <FauxBadge>Item 1</FauxBadge>
    <FauxBadge>Item 2</FauxBadge>
  </Stack>
  <Stack align="baseline">
    <FauxBadge>Item 1</FauxBadge>
    <FauxBadge>Item 2</FauxBadge>
  </Stack>
  <Stack align="stretch">
    <FauxBadge>Item 1</FauxBadge>
    <FauxBadge>Item 2</FauxBadge>
  </Stack>
</div>

Justify

This property is shorthand for the justify-content CSS property.

<div style={{ width: "100%", background: "cadetblue" }}>
  <Stack direction="horizontal" align="center" justify="end">
    <Stack>
      <FauxBadge>Item 1</FauxBadge>
      <FauxBadge>Item 2</FauxBadge>
    </Stack>
    <div style={{ height: 240, background: "cyan" }}>
      Tall element, sibling items justified to end
    </div>
    <Stack>
      <FauxBadge>Item 1</FauxBadge>
      <FauxBadge>Item 2</FauxBadge>
      <FauxBadge>Item 2</FauxBadge>
    </Stack>
  </Stack>
</div>

Spacing

This property is shorthand for the gap CSS property. Gap values refer to the theme.space object.

<Stack spacing="xxl" align="stretch">
  <Button>Add Medication</Button>
  <Button variant="outline">Attach Letter</Button>
  <Button variant="outline">Edit Patient</Button>
</Stack>

shouldFitContainer

In cases where you need a <Stack /> to try and fit (ie. fill) its container, use shouldFitContainer. This property adds a width: 100% CSS property. This is useful when a child element may have variable content whose intrinsic width may not always cause it to fill the container. Multiple Stacks using shouldFitContainer within a parent flex environment will all attempt to fill and thus distribute the available space evenly.

<div style={{ width: "100%", background: "cyan" }}>
  <Stack justify="between" direction="horizontal" spacing="xxl">
    <Stack shouldFitContainer spacing="xxl" align="stret">
      <FauxBadge>item 1</FauxBadge>
      <FauxBadge>item 2</FauxBadge>
      <FauxBadge>item 3</FauxBadge>
    </Stack>
    <Stack shouldFitContainer spacing="xxl" align="center">
      <FauxBadge>item 4</FauxBadge>
      <FauxBadge>item 5</FauxBadge>
      <FauxBadge>item 6</FauxBadge>
    </Stack>
  </Stack>
</div>

Responsive Layouts

You can set all props based on responsive breakpoints. See below for the syntax. Note that you need to set @intial if you're going to use responsive breakpoints. Read more on here.

<Stack
  spacing={{ "@initial": "xl", "@bp1": "md" }}
  align={{ "@initial": "stretch", "@bp1": "end" }}
>
  <Button>Add Medication</Button>
  <Button variant="outline">Attach Letter</Button>
  <Button variant={{ "@initial": null, "@bp1": "outline" }}>
    Edit Patient
  </Button>
</Stack>

Props

align

Type

AlignTypes

Default Value

start

direction

Description

Define the direction of stacking. Under the hood, this sets the flex-direction CSS property. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Type

"horizontal" | "vertical" | "horizontalReverse" | "verticalReverse"

Default Value

vertical

justify

Type

JustifyTypes

Default Value

start

ref

Type

Ref<HTMLDivElement>

shouldFitContainer

Description

This Property is shorthand for width: 100% CSS property.

Type

boolean

spacing

Type

SpacingSizes

Default Value

md

wrap

Type

WrapTypes

© 2025