Prose

Wraps long-form content (Markdown output, HTML strings from a CMS, ad-hoc rich text) and applies aurora's typography rules — headings, paragraphs, lists, blockquotes, inline code, code blocks, links, definition lists.

Use when the content shape isn't known at write-time (server-rendered HTML, user-generated, or sourced from a CMS). For static prose composed in templates, you'd typically use Tailwind utilities directly (paragraph-md, heading-2-semibold, etc.) without <Prose>.

Default (md)

Saved view

A saved view captures filters, column ordering, and any other table state. Drop in via the menu, restore later from the same workspace.

• Filters and column visibility
• Row ordering and pinning
• Custom adapter settings (if your app provides them)

See the persistence adapter for backend wiring.

<Prose>
  <h2>Saved view</h2>
  <p>A saved view captures filters, column ordering, …</p>
  <ul>
    <li>Filters and column visibility</li>
    <li>Row ordering and pinning</li>
    <li>Custom adapter settings (if your app provides them)</li>
  </ul>
</Prose>

Small

Use size="sm" for tighter rhythms — common in side panels, modals, and dense lists where the default md rhythm is too airy.

Smaller body

The smaller variant lowers paragraph and heading sizes while keeping list, blockquote, and code-block treatments intact.

Use for inline help, tooltip-rich-content, side panels.

<Prose size="sm">
  <h3>Smaller body</h3>
  <p>…</p>
</Prose>

Server-rendered HTML

Aurora's primary use case for Prose is rendering arbitrary HTML that comes from outside the template — the rich-text editor output, a CMS field, etc. Use v-html on the component:

<Prose v-html="article.body" />

Make sure the source HTML is sanitized — v-html does not escape. Aurora's Markdown component (which uses Prose internally) handles this for Markdown source.

What it styles

Prose applies typography rules to standard HTML elements, including:

• Headings — h1 / h2 / h3 use aurora's heading utilities with appropriate top/bottom margins
• Paragraphs — p gets paragraph-md (or paragraph-sm at size="sm") with vertical rhythm
• Lists — ul / ol get bullet/number markers with consistent indentation
• Blockquote — left border, italic, secondary text color
• Inline code — bordered, monospaced, subtle background
• Code block — pre, padded, scrollable horizontally
• Links — CTA-colored, underlined with hover transition
• Definition lists — dl, dt, dd with proper hierarchy

Internally these are all prose-* Tailwind plugin classes (@tailwindcss/typography) wired to aurora's design tokens.

Props

Prop	Type	Default	Description
size	'md' | 'sm'	'md'	Body size. sm tightens paragraph/heading sizes for dense contexts.

The component also forwards $attrs (including class) onto the wrapping <div> — combine with your own utilities (max-w-prose, text-secondary, etc.) as needed.