Stack

Name: Boreal UI
Author: Davin Chiupka

The Stack component arranges content vertically with predictable spacing and alignment.

Usage & Examples

Vertical Content

PlanChoose a workspace plan.

MembersInvite your collaborators.

LaunchPublish when everything is ready.

vertical-content.tsx

const tileStyle = {
  boxSizing: "border-box",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  width: "100%",
  height: "100%",
  minHeight: "4.5rem",
  padding: "1rem",
  border: "1px solid var(--border-color)",
  borderRadius: "var(--border-radius-md, 0.75rem)",
  background: "var(--background-color-surface)",
};

<Stack gap="sm">
  <div style={tileStyle}><strong>Plan</strong><span>Choose a workspace plan.</span></div>
  <div style={tileStyle}><strong>Members</strong><span>Invite your collaborators.</span></div>
  <div style={tileStyle}><strong>Launch</strong><span>Publish when everything is ready.</span></div>
</Stack>

Props API

Stack props API
				Default	Description
`align`	`LayoutAlign`	No	props	`—`	Align prop for LayoutPrimitive.
`as`	`ElementType`	No	props	`—`	As prop for LayoutPrimitive.
`children`	`ReactNode`	No	props	`—`	Content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`gap`	`LayoutGap`	No	props	`"md"`	Gap.
`justify`	`LayoutJustify`	No	props	`—`	Justify prop for LayoutPrimitive.
`testId`	`string`	No	props	`—`	Test id used to identify the component in tests.