Theorem

A textbook box for a formal statement — theorem, proposition, lemma, corollary. The header reads <Kind> <Number> in the accent color; the title sits below in serif italic; the statement follows in body text. If you pass proof, the component grows a "Show proof" toggle that smoothly reveals the proof beneath the statement.

Preview

Theorem 4.2

Cauchy–Schwarz Inequality

For any two vectors u, v in an inner product space, |⟨u, v⟩| ≤ ‖u‖ · ‖v‖, with equality iff u and v are linearly dependent.

Installation

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

Usage

import { Theorem } from "@craft-bits/core";
 
<Theorem
  kind="Theorem"
  number="4.2"
  title="Cauchy–Schwarz Inequality"
  statement={<>For any u, v in an inner product space, |⟨u, v⟩| ≤ ‖u‖ · ‖v‖.</>}
  proof={<>Expand ‖u + t·v‖² ≥ 0 and use the discriminant.</>}
/>

Without a proof, the toggle is hidden:

<Theorem
  kind="Lemma"
  number="2.1"
  statement={<>Every subspace of a finite-dimensional vector space is finite-dimensional.</>}
/>

Anatomy

Kind + number header — small uppercase accent label like Theorem 4.2.
Title — optional named version of the result, in serif italic, e.g. "Cauchy–Schwarz Inequality".
Statement — the body text.
Proof toggle — when proof is provided, a <button> controls aria-expanded and an AnimatePresence block reveals the proof beneath the statement.

Props

Prop	Type	Default	Description
`kind`	`string`	`'Theorem'`	Kind of statement.
`number`	`string \| number`	—	Concatenated onto `kind` (`Theorem 4.2`).
`title`	`ReactNode`	—	Optional named title in serif italic.
`statement`	`ReactNode`	required	The body of the statement.
`proof`	`ReactNode`	—	Optional proof. When set, renders a "Show proof" toggle.
`defaultExpanded`	`boolean`	`false`	Whether the proof starts open.
`className`	`string`	—	Merged onto the root `<figure>` via `cn()`.

Accessibility

The toggle uses aria-expanded so screen readers announce open/closed state.
A visible focus-visible:ring-2 ring lands on the toggle for keyboard users.
The expand/collapse animation is suppressed under prefers-reduced-motion: reduce — the proof simply fades in/out without a height animation.
The container is a <figure> so screen readers can navigate between numbered statements.

Credits

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