Definition

A textbook-style card that introduces a term. Renders as a semantic <dl> so the term-to-body relationship survives screen-reader navigation. Serif-italic head, thin accent left rail, no motion — the classic MathBook / Tufte convention without needing a theme override.

Preview

Eigenvalue: A scalar λ such that, for some non-zero vector v, the linear map A satisfies Av = λv. The vector v is the corresponding eigenvector.

Installation

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

Usage

import { Definition } from "@craft-bits/core";
 
<Definition term="Eigenvalue">
  A scalar λ such that, for some non-zero vector v, Av = λv.
</Definition>

The term prop accepts a ReactNode, so math and code inline:

<Definition term={<code>softmax(z)</code>}>
  The function that maps a real vector to a probability distribution.
</Definition>

Anatomy

Term — the heading, rendered inside a <dt> in serif italic. Accepts any ReactNode so KaTeX, <code>, or links work inline.
Body — rendered inside a <dd> in body text. Wraps with [text-wrap:pretty].
Accent rail — a thin --cb-accent left edge marks this as a defined-term box.

Props

Prop	Type	Default	Description
`term`	`ReactNode`	required	The term being defined. Renders inside the `<dt>`.
`children`	`ReactNode`	required	The definition body. Renders inside the `<dd>`.
`className`	`string`	—	Merged onto the root via `cn()`.

Accessibility

Wraps a <dl> / <dt> / <dd> so screen readers announce the term-meaning pair together.
The accent rail is decorative; no extra noise for assistive tech.
No motion to suppress.

Credits

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