Stack

On this page

Watch

UTC 12:04:31

Depth

4.2 m

Speed

6.2 kn

The primitives composed: every value a token's name, never a raw color or distance.

Code

import { Box } from "@bosunkit/components/box";
import { Stack } from "@bosunkit/components/stack";
import { Inline } from "@bosunkit/components/inline";
import { Text } from "@bosunkit/components/text";
import { Heading } from "@bosunkit/components/heading";
import type { ReactElement } from "react";

export const description: string =
  "The primitives composed: a stack of two cards, a heading and a reading, all from tokens.";

export default function Example(): ReactElement {
  return (
    <Stack space="md">
      <Heading level={2}>Watch</Heading>
      <Inline space="sm">
        <Text family="mono" size="sm" color="text-dim">UTC 12:04:31</Text>
      </Inline>
      <Inline space="md">
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Depth</Text>
            <Text size="lg">4.2 m</Text>
          </Stack>
        </Box>
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Speed</Text>
            <Text size="lg">6.2 kn</Text>
          </Stack>
        </Box>
      </Inline>
    </Stack>
  );
}

Stack is one of the layout primitives the pages are built from. Its props take the scales by name — a spacing prop a step of the spacing scale, a color prop a semantic token — and each becomes a class or a custom property on the element, never a stylesheet. Every primitive takes as, the element to render, and testId.

Watch

UTC 12:04:31

Depth

4.2 m

Speed

6.2 kn

The primitives composed: a stack of two cards, a heading and a reading, all from tokens.

Code

import { Box } from "@bosunkit/components/box";
import { Stack } from "@bosunkit/components/stack";
import { Inline } from "@bosunkit/components/inline";
import { Text } from "@bosunkit/components/text";
import { Heading } from "@bosunkit/components/heading";
import type { ReactElement } from "react";

export const description: string =
  "The primitives composed: a stack of two cards, a heading and a reading, all from tokens.";

export default function Example(): ReactElement {
  return (
    <Stack space="md">
      <Heading level={2}>Watch</Heading>
      <Inline space="sm">
        <Text family="mono" size="sm" color="text-dim">UTC 12:04:31</Text>
      </Inline>
      <Inline space="md">
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Depth</Text>
            <Text size="lg">4.2 m</Text>
          </Stack>
        </Box>
        <Box background="surface2" padding="md" radius="lg">
          <Stack space="xs">
            <Text size="sm" color="text-dim">Speed</Text>
            <Text size="lg">6.2 kn</Text>
          </Stack>
        </Box>
      </Inline>
    </Stack>
  );
}

Group by relationship

Stack puts siblings in a vertical sequence with one shared gap. Use a small space for a label and its supporting text, and a larger space between independent fields or sections. Nest stacks when those relationships differ; one large gap across every line makes related content appear disconnected.

Keep the DOM order equal to the reading order. Stack does not add headings, list semantics, responsive columns or padding. Use as for an appropriate element, Box for the inset and ReportGrid for related report panels. Avoid child margins that duplicate the stack's gap, especially around prose with default margins.

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	–	The children, laid out top to bottom.
space	SpaceScale \| undefined	"md"	The gap between the children, a step of the spacing scale by name; `md` unless set.
as	PrimitiveElement \| undefined	"div"	The element to render; `div` unless set.
className	string \| undefined	–	Classes added to the element's own.
testId	string \| undefined	–	Becomes `data-testid` on the element.