Skip to content
Site volume
Colourway

Components

Cluster

A wrapping row 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/cluster
On this page

Example#

Look of this example
FernlightPebblepathDana Whitfield
Live render of examples/cluster/basic.tsx

Usage#

Use a cluster for a row of items that wraps when it runs out of room: keys, badges, tags, links in a footer line. The gap holds in both directions when it wraps.

  • gap is a step of 4 px (default 3, 12 px); align and justify set the axes.
  • Keys in a cluster keep their natural width; for a row that must stretch, use a Grid.

Anatomy#

FernlightPebblepathDana Whitfield
The parts of examples/cluster/basic.tsx, numbered:
  1. ClusterA wrapping flex row with one gap both ways..mk-cluster

Volume#

Layout only: identical at every volume.

  • Quiet

    FernlightPebblepathDana Whitfield

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

  • Studio

    FernlightPebblepathDana Whitfield

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

  • Press

    FernlightPebblepathDana Whitfield

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

  • Rave

    FernlightPebblepathDana Whitfield

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

Content#

  • Order items by importance from the start of the line: the first item is read first, even when the row wraps.

Do and don't#

Do

Wraps when the room runs out.

Don't

A fixed row cuts the second key off.

On a narrow screen a row has to wrap or something gets hidden. A cluster wraps and keeps its gap.

Accessibility#

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

Props#

PropTypeDefaultDescription
gapSpaceStep3Default 3 (12 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 ClusterProps in packages/overprint-react/src/reading/cluster/cluster.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