Derivation

A textbook-style stack of math lines — each step on its own row, expression centered in serif italic, with an optional muted right-aligned justification. Use it for short manipulations where the reader needs to see each rewrite, not just the start and the end.

Installation

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

Usage

import { Derivation } from "@craft-bits/core";
 
<Derivation
  title="Simplify (a + b)² − (a − b)²"
  steps={[
    { expression: <code>(a + b)² − (a − b)²</code>, comment: "start" },
    { expression: <code>(a² + 2ab + b²) − (a² − 2ab + b²)</code>, comment: "expand" },
    { expression: <code>4ab</code>, comment: "cancel" },
  ]}
/>

Drop the numbering for a tighter "scratch work" look:

<Derivation
  numbered={false}
  steps={[
    { expression: <code>x² − 5x + 6 = 0</code> },
    { expression: <code>(x − 2)(x − 3) = 0</code> },
    { expression: <code>x = 2 or x = 3</code> },
  ]}
/>

Anatomy

• Three-column grid — [counter] [expression] [comment]. The expression column stays optically centered regardless of comment length.
• Counter — (1) (2) … rendered via JSX over the array index. Toggle off with numbered={false}.
• Expression — serif italic, accepts any ReactNode (inline math, <code>, KaTeX output).
• Comment — optional, right-aligned, muted text — the "by definition" / "Cauchy-Schwarz" justification column.

Props

Accessibility

• Renders as a semantic <ol> — assistive tech announces "list with N items" and ordinal position from list semantics, not from the visual (n) label.
• No motion to suppress.

Credits

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