The prose primitives turn longform into a first-class product surface. They establish consistent article width, title rhythm, section spacing, figures, and resource lists so journal entries, launch notes, and extended docs pages feel authored within the same system as the UI.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import { ProseHeader, ProseTitle, ProseLead, ProseSection } from "@/components/ui/prose"

import { Prose, ProseBody, ProseEyebrow, ProseHeader, ProseLead, ProseTitle } from "@/components/ui/prose"

<Prose width="reading">
  <ProseHeader>
    <ProseEyebrow>Launch note</ProseEyebrow>
    <ProseTitle>Product writing can match the interface.</ProseTitle>
    <ProseLead>Use the same typography system for editorial pages and UI surfaces.</ProseLead>
  </ProseHeader>
  <ProseBody>
    <p>That keeps the journal aligned with the rest of the product.</p>
  </ProseBody>
</Prose>

Why This Primitive Exists

Most design systems handle interface chrome well and leave longform to generic markdown defaults. This primitive closes that gap.

• Use it when the page is primarily narrative and needs consistent article hierarchy.
• Reach for the prose slots instead of styling individual headings and paragraphs ad hoc.
• Treat the prose layer as a composition system, not just a typography utility class.

Examples

Article Header And Reading Rail

The main value starts with the outer Prose wrapper and the width variant. reading narrows the line length for essays, while default leaves more room when prose sits beside other modules.

<Prose width="reading">
  <ProseHeader>
    <ProseEyebrow>Editorial primitive</ProseEyebrow>
    <ProseTitle>Product writing can match the interface.</ProseTitle>
    <ProseLead>The prose layer uses the same rhythm as the product UI.</ProseLead>
  </ProseHeader>
</Prose>

Figures And Pull Quotes

ProseFigure, ProseCaption, and ProseQuote give articles a stronger mid-stream rhythm without breaking away from the shared spacing and border language.

import { ProseCaption, ProseFigure, ProseQuote } from "@/components/ui/prose"

<ProseFigure>
  <img src="/placeholder.jpg" alt="" />
  <ProseCaption>Caption text and source notes.</ProseCaption>
</ProseFigure>

<ProseQuote>Editorial surfaces should feel authored.</ProseQuote>

Resources And Postscript

Use ProseResources and ProseRule when the article ends with references, release notes, or further reading. That keeps the final section disciplined instead of falling back to an unstructured list.

In Context

Prose becomes more useful when it shares space with other system blocks. In a journal page, the article body can stay readable while adjacent resources and figure strips still feel part of the same product.

<Prose width="default">
  <ProseSection>
    <ProseBody>
      <p>Use the wider layout when the article lives beside supporting modules.</p>
    </ProseBody>
  </ProseSection>
</Prose>

Guidance

Pick Width By Layout, Not Taste

• Use reading for essay-like pages with a single dominant text rail.
• Use default when the article needs to coexist with cards, side modules, or editorial blocks.
• Use full only when the parent layout already constrains width.

Keep Sections Intentional

• ProseHeader should establish the page's main claim before the body starts.
• Break up longform with ProseSection rather than stacking arbitrary margins.
• Use figures and quotes to support narrative shifts, not as decoration.

End The Page Cleanly

• Prefer ProseResources for curated links, references, or source lists.
• Use ProseRule when the final section needs a deliberate reset.
• If the content is mostly UI and only includes a paragraph or two, use standard layout primitives instead of the full prose system.

API Reference

Prose

The Prose root renders an article and accepts normal React.ComponentProps<"article"> plus a width variant.

Exported Slots