Typography / Prose

Styles raw HTML/Markdown output (articles, docs, CMS content) with the design tokens. Uses Tailwind child selectors, so no typography plugin is required.

Import

import { Prose } from '@marbleui/ui'

Props

<Prose>

Prop	Type	Default	Description
size	`'sm' \| 'md'`	`'md'`

Also accepts HTML element props (278).

Usage notes

Typography wrapper for raw HTML or Markdown output (articles, docs, CMS content). For individual elements you control, use Heading and Text.

<Prose>
  <h1>Designing with tokens</h1>
  <p>Tokens let one component wear <strong>many styles</strong>.</p>
</Prose>

It styles descendant elements (h1–h3, p, lists, blockquote, code, pre, table, img, hr, links) by tag, so it only affects plain HTML, not Marble UI components’ internals.
size is md (default) or sm. Width is capped at about 68 characters; override with className.
Heading levels come from your markup, so make sure the content uses a sensible outline.
A CodeBlock inside keeps its own styling.

Example source · show

import { Prose } from './prose'

const Article = () => (
  <>
    <h1>Designing with tokens</h1>
    <p>Tokens let one component wear <strong>many styles</strong>. Change a preset and every surface, border and accent follows. Read the <a href="#">theming guide</a> for details.</p>
    <h2>Why semantic names</h2>
    <p>Name colors by role, like <code>surface</code> or <code>fg-muted</code>, not by hue:</p>
    <ul>
      <li>Dark mode becomes a token swap</li>
      <li>Brands change without touching components</li>
    </ul>
    <blockquote>Design systems are products serving products.</blockquote>
    <pre><code>{`:root { --accent: oklch(0.56 0.22 293); }`}</code></pre>
  </>
)

export const styles = {
  Article: () => <Prose className="w-[34rem]"><Article /></Prose>,
  Compact: () => <Prose size="sm" className="w-[28rem]"><Article /></Prose>,
}

Source: packages/ui/src/prose/prose.tsx

Catalog