Skip to content
Sapphire UIv4.1.0

Prose

Prose gives ordinary article HTML consistent typography and spacing: headings, paragraphs, lists, links, quotations and code. Use it for documentation, articles and other long-form content.

Examples

Article

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom
"use client";

function ProseArticle() {
  return (
    <article className="sp-prose">
      <h2>Design for clarity</h2>
      <p>Start with a clear goal.</p>
      <p>
        Then explain the <a href="#principles">principles</a>.
      </p>
      <ul>
        <li>Use familiar words.</li>
        <li>Keep navigation predictable.</li>
      </ul>
      <ol>
        <li>Explore the problem.</li>
        <li>Validate the solution.</li>
      </ol>
      <blockquote>Make every detail earn its place.</blockquote>
      <pre>
        <code>const clarity = true;</code>
      </pre>
    </article>
  );
}

export default ProseArticle;
HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

HTML API

CSS-only entry: use native HTML with these shared classes. There is no React component or React props API.

HTML parts
ClassContract
sp-proseShared styled HTML part
Supported data attributes
Attribute / value
data-size="sm"
data-size="lg"

Setup

bun add @kongmy-dev/sapphire-ui

For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";

Mixing package and vendored components? Follow application setup.

Search documentation