Skip to content
Site volume
Colourway

Components

Stack

A column with a gap from the 4 px space steps.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/stack
On this page

Example#

Look of this example
FernlightPebblepath
Live render of examples/stack/basic.tsx

Usage#

Use a stack to set a column of items apart by one consistent gap from the 4 px space scale. It replaces margins on children, so a component never brings its own outer spacing.

  • gap is a step of 4 px: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12 or 16.
  • align and justify set the cross and main axis; render changes the element, such as a ul.
  • A row that wraps is a Cluster; columns are a Grid.

Anatomy#

FernlightPebblepath
The parts of examples/stack/basic.tsx, numbered:
  1. StackA flex column; the gap is the only spacing..mk-stack

Volume#

Layout only: identical at every volume.

  • Quiet

    FernlightPebblepath

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    FernlightPebblepath

    The site default. Art on its own plates, one display moment per view.

  • Press

    FernlightPebblepath

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    FernlightPebblepath

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Pick gaps from the scale by relationship: tight for parts of one thing (2 or 3), roomy between things (6 or 8).

Do and don't#

Do

FernlightPebblepathDana Whitfield

One gap from the scale.

Don't

Fernlight
Pebblepath
Dana Whitfield

Margins picked by eye.

A gap from the scale keeps the 8-point rhythm on every page. Hand-set margins drift a few pixels at a time until nothing lines up.

Accessibility#

  • A layout primitive adds no semantics; pass render for a list (<ul />).

Props#

PropTypeDefaultDescription
gapSpaceStep4Default 4 (16 px).
alignFlexAlignnone
justifyFlexJustifynone
renderRenderPropnone
childrenReactNodenone

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from StackProps in packages/overprint-react/src/reading/stack/stack.tsx.

Tokens#

System tokens (1)

Its own properties (1)

  • --mk-layout-gap

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry