Prose

A typographic container for any block of HTML or MDX you want to read like a textbook page. Wraps your content in a single <div class="cb-prose"> and styles every descendant — headings, paragraphs, lists, blockquotes, code, links, tables — using the library's editorial typography. The portable equivalent of @tailwindcss/typography's prose class, but tied to cb-* tokens so it repaints when you re-skin.

Preview

The dot product is the smallest brick in the stack. Two vectors point in roughly the same direction when it is positive, opposite directions when it is negative, and exactly orthogonal when it is zero.

Why this matters

Almost every later result — projections, cosine similarity, attention scores — is a dot product wearing a different hat. Understand it once and the rest of the chapter follows.

Projection onto a unit vector is a single dot product.
Cosine similarity normalises both sides first.
Attention scores are dot products plus a softmax.

Mathematics is the art of giving the same name to different things.

The inline form looks like a · b = |a| |b| cos θ, and the whole pipeline collapses to that one identity.

Customize

Size

size (sm/md/lg)md

Body & rhythm

serif body

compact rhythm

Installation

npx shadcn@latest add https://craftbits.dev/r/prose.json

Usage

import { Prose } from "@craft-bits/core";
 
<Prose>
  <p>The dot product is the smallest brick in the stack.</p>
  <h2>Why this matters</h2>
  <p>Almost every later result is a dot product wearing a different hat.</p>
  <ul>
    <li>Projection onto a unit vector is a single dot product.</li>
  </ul>
</Prose>

Drop arbitrary MDX inside too — headings, lists, blockquotes, and code blocks all pick up the styling without any per-element class.

Anatomy

Root — <div class="cb-prose"> that owns the descendant CSS via an injected sentinel-id stylesheet.
Headings — h1 serif italic display, h2 and h3 serif (h3 italic), h4–h6 mono caps for sub-sections.
Body — serif body by default (Newsreader / Literata / Georgia). Toggle serif={false} to swap to sans while keeping serif headings.
Lists — bullets and italic-numeric ordered markers tinted with --cb-fg-subtle.
Inline code & pre — tokenised against --cb-bg-muted with a faint border for an inset look.
Blockquote — accent-tinted left rail plus serif italic body.

Variants

size="sm" — 15px body, tight rhythm for sidebars or footnotes.
size="md" — 17px body, the editorial default.
size="lg" — 19px body for long-form chapters.
serif={false} — swap body to sans while keeping serif headings, blockquotes, and emphasis.
compact — tighten vertical rhythm by ~30% for reference reading.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	required	HTML or MDX content.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Base font-size, line-height, vertical rhythm.
`serif`	`boolean`	`true`	Use serif body. `false` swaps to sans (headings stay serif).
`compact`	`boolean`	`false`	Tighten vertical rhythm.
`className`	`string`	—	Merged onto the root via `cn()`.

Accessibility

Pure typography — no interactive controls and no motion to suppress.
Headings keep their semantic levels so screen-reader heading navigation still works.
Links retain a visible :focus-visible outline tied to --cb-accent.
Body text meets WCAG AA contrast (≥4.5:1) against --cb-bg in both themes.

Credits

Extracted from: craftingattention (app/src/components/ui/Prose.tsx). The source was a one-line wrapper that delegated to a docs-site .prose class; the library version ships its own descendant rules so it's portable, and adds size / serif / compact so one recipe covers sidebars, articles, and reference pages.