Notation

A glossary for the symbols a section is about to use. Renders as a semantic <dl> with the symbol as the <dt> (serif italic, accent color) and the meaning as the <dd> (body text). Drop one near the top of a chapter so the reader can scroll back to it without re-reading the paragraph that introduced each symbol.

Preview

Σ: Summation over the indexed expression that follows.
∂: Partial derivative with respect to the named variable.
∇: Gradient — vector of partial derivatives.
ℝ: The set of real numbers.

Installation

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

Usage

import { Notation } from "@craft-bits/core";
 
<Notation
  title="Notation used in this section"
  entries={[
    { symbol: "Σ", meaning: "Summation over the indexed expression." },
    { symbol: "∂", meaning: "Partial derivative." },
    { symbol: "∇", meaning: "Gradient." },
    { symbol: "ℝ", meaning: "The set of real numbers." },
  ]}
/>

A two-column variant for longer legends:

<Notation
  columns={2}
  entries={[
    { symbol: <code>x</code>, meaning: "the input" },
    { symbol: <code>y</code>, meaning: "the label" },
    { symbol: <code>ŷ</code>, meaning: "the prediction" },
    { symbol: <code>L</code>, meaning: "the loss" },
  ]}
/>

Anatomy

<dl> root — the semantic container for symbol → meaning pairs.
<dt> symbol — serif italic, accent color. Accepts inline math, <code>, or KaTeX.
<dd> meaning — body text, wraps with [text-wrap:pretty].
Grid — two-column [max-content_minmax(0,1fr)] so symbols share a vertical gutter and meanings wrap naturally. columns={2} doubles the columns on wider viewports.

Props

Prop	Type	Default	Description
`entries`	`{ symbol: ReactNode; meaning: ReactNode }[]`	required	Legend entries.
`title`	`ReactNode`	—	Small uppercase caption above the entries.
`columns`	`1 \| 2`	`1`	Side-by-side pairs on wider viewports.
`className`	`string`	—	Merged onto the root via `cn()`.

Accessibility

Renders as a <dl> / <dt> / <dd> so each symbol-meaning pair is announced together.
Accent color on <dt> is paired with a serif-italic weight change — color is never the only signal.
No motion to suppress.

Credits

Extracted from: craftingattention (app/src/lessons/primitives/edu/Notation.tsx).