Prose
Composition

Prose

Style Markdown and CMS HTML with Onset typography using one scoped class.

Prose component

Prose is a wrapper component that styles bare HTML (the kind a markdown renderer or a CMS produces) in Onset's type system. It is renderer-agnostic: use it with react-markdown, marked, MDX, or any other tool that produces HTML strings or React elements.

Prose styles headings, paragraphs, tables, and other HTML elements through scoped element selectors. Use it for Markdown or CMS markup that does not provide per-element class names.

Prose

Sizes

size accepts "sm", "md", and "lg". The default is "md". Use "sm" for card or drawer content and "lg" for documentation. full removes the approximate 68-character width limit and fills the container.

Prose sizesTSX
<Prose size="md">
  <div dangerouslySetInnerHTML={{ __html: cardContent }} />
</Prose>

<Prose size="lg" full>
  <ReactMarkdown>{documentationSource}</ReactMarkdown>
</Prose>

Styled elements

  • Headings h1–h6 with Onset's type scale
  • Paragraphs, bold, and italic text
  • Inline code and fenced code blocks
  • Links styled in the theme's accent color
  • Ordered and unordered lists with proper spacing
  • Tables with the same header/row treatment as Table
  • Blockquotes with a colored left border
  • Horizontal rules

proseClass

proseClass applies the same typography styles as Prose to an existing element. Use the class when a renderer supplies the wrapper element.

Using proseClassTSX
import { proseClass } from "@solarius/onset";

// Apply the class to any container
<div className={proseClass}>
  <article>
    <h1>Server-rendered content</h1>
    <p>This gets Onset's typography without a wrapper component.</p>
  </article>
</div>;

proseClass is the same CSS module class that Prose applies internally: any element with that class gets the scoped typography styles, including heading sizes, code styling, list spacing, table borders, and link colors.