Skip to content
Site volume
Colourway

Components

Prose

Long-form reading for MDX and HTML, and `mdxComponents`, the element map for Fumadocs and the site.

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

Example#

Look of this example

Jordan Reyes runs Fernlight with one other gardener. Run pnpm gate before you push.

  • Prices on the first screen
  • A four-field quote form
Live render of examples/prose/basic.tsx

Usage#

Wrap long-form text in Prose: articles, case studies, legal pages, these docs. It styles plain HTML and MDX in the reading measure (70 characters at most, D-B10), 18 px body at 1.6, with the kit's headings, lists, code, quotes, tables, figures and rules.

  • mdxComponents maps every element to the kit (blockquote to Quote, pre to CodeBlock, table to the ledger, img to Figure, hr to Rule, kbd to Kbd), for Fumadocs or any MDX setup.
  • Headings get an anchor link that shows on hover and focus.
  • Lists use shapes from the alphabet as bullets: circle, then triangle, then diamond.
  • Short UI text (a card body, a form hint) does not need Prose; use the type roles directly.

Anatomy#

Jordan Reyes runs Fernlight with one other gardener. Run pnpm gate before you push.

  • Prices on the first screen
  • A four-field quote form
The parts of examples/prose/basic.tsx, numbered:
  1. Measure70 characters at most, body type..mk-prose
  2. Inline codeThe code face on the code surface..mk-prose code
  3. ListShape-alphabet bullets..mk-prose ul

Volume#

Reading layer: identical at every volume. That is the point: reading surfaces stay calm (D-B1).

  • Quiet

    Jordan Reyes runs Fernlight with one other gardener. Run pnpm gate before you push.

    • Prices on the first screen
    • A four-field quote form

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

  • Studio

    Jordan Reyes runs Fernlight with one other gardener. Run pnpm gate before you push.

    • Prices on the first screen
    • A four-field quote form

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

  • Press

    Jordan Reyes runs Fernlight with one other gardener. Run pnpm gate before you push.

    • Prices on the first screen
    • A four-field quote form

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

  • Rave

    Jordan Reyes runs Fernlight with one other gardener. Run pnpm gate before you push.

    • Prices on the first screen
    • A four-field quote form

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

Content#

  • Short paragraphs, one idea each; headings every few paragraphs so people can scan.
  • Links name their destination; lists hold parallel items.
  • No em dashes in any copy; use a comma, a colon or a full stop.

Do and don't#

Do

Jordan Reyes runs Fernlight with one other gardener.

They wanted prices on the first screen.

The measure and the rhythm of Prose.

Don't

Jordan Reyes runs Fernlight with one other gardener and they wanted prices on the first screen and a quote form with four fields and fewer calls about prices and more about gardens and a site they could update themselves.

A small, run-on block at full width.

Prose sets the size, measure and spacing that long reading needs. Text outside it tends to drift smaller and wider.

Accessibility#

  • Headings get an anchor link ("Link to this section") shown on hover and focus.
  • The measure stays at 70ch; links are always underlined.

Props#

PropTypeDefaultDescription
renderRenderPropnone
childrenReactNodenone

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

Tokens#

System tokens (27)

Its own properties (8)

  • --mk-header-h
  • --mk-prose-bullet
  • --mk-prose-code-pad-block
  • --mk-prose-code-pad-inline
  • --mk-prose-code-size
  • --mk-prose-gap
  • --mk-prose-indent
  • --mk-prose-leading

Scanned from its CSS at build and checked against its registry entry; 20 read but not declared there.

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