MathBlock

A typography primitive for a single block-level equation, in the style of LaTeX's \begin{equation}…\end{equation}. Centered (or left-aligned), serif italic, with an optional small-caps label above and an optional (N) reference on the right. Math typesetting is out of scope — drop in plain glyphs, inline <code>, or KaTeX-rendered HTML.

Preview

Bayes' Theorem

P(A | B) = P(B | A) · P(A) / P(B)

(1.1)

Customize

Slots

label

number

Layout

left align

Installation

npx shadcn@latest add https://craftbits.dev/r/math-block.json

Usage

import { MathBlock } from "@craft-bits/core";
 
<MathBlock label="Bayes' Theorem" number="1.1">
  <code>P(A | B) = P(B | A) · P(A) / P(B)</code>
</MathBlock>

A bare equation with no label and no number:

<MathBlock>
  <code>e^(iπ) + 1 = 0</code>
</MathBlock>

Pre-rendered KaTeX HTML — render math wherever you keep your KaTeX setup, then drop the output as children:

<MathBlock number="2.3">
  <span dangerouslySetInnerHTML={{ __html: katexHtml }} />
</MathBlock>

Anatomy

<figure> root — the semantic container. <figcaption> holds the equation number so screen readers announce the number alongside the equation.
Three-column grid — [spacer] [equation] [number]. The spacer keeps the equation optically centered against the right-hand number; remove the number and the equation still reads as truly centered in the box.
Label — optional small-caps caption above the equation in the accent color (the cb-label class). Use it for the equation's name ("Bayes' Theorem"), not its index.
Number — optional (N) reference rendered in mono with tabular figures so multi-digit references like (12.4) line up.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	required	The equation content.
`number`	`number \| string`	—	Optional `(N)` equation reference on the right.
`label`	`ReactNode`	—	Optional small-caps caption above the equation.
`align`	`'center' \| 'left'`	`'center'`	Horizontal alignment of the equation.
`className`	`string`	—	Merged onto the root via `cn()`.

Accessibility

Renders as a <figure> with the equation number in a <figcaption> so the caption is announced together with the figure body.
Color is never the only signal: the number sits in its own column; the label changes weight and case as well as color.
No motion to suppress.

Credits

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