Figure

A semantic <figure> wrapper for charts, diagrams, code panels, and images. A small uppercase head line carries an eyebrow (default FIG.), an optional ordinal, and an optional caption, separated by a thin divider rule. The body slot holds the figure itself; an italic serif <figcaption> rides below for the long-form subtitle.

Preview

FIG.4THE EXHAUST PORT

A small thermal vent, two meters wide.

Installation

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

Usage

import { Figure } from "@craft-bits/core";
 
<Figure fig={1} caption="Boyd's loop" subtitle="Observe, orient, decide, act.">
  <OodaLoopDiagram />
</Figure>

Drop the ordinal for an unnumbered caption only:

<Figure caption="Token attention" subtitle="Higher weights in deeper blue.">
  <AttentionHeatmap />
</Figure>

Bare body — no editorial chrome, just the semantic <figure>:

<Figure>
  <img src="/sketch.png" alt="A hand-drawn sketch." />
</Figure>

Override the eyebrow when the page mixes parallel sequences:

<Figure eyebrow="Plate" fig="IV" caption="The mariner">
  <Plate />
</Figure>

Anatomy

Head line — eyebrow + ordinal + caption rendered in the cb-label token (small uppercase mono with tracking). The divider rule extends the kicker into the column and is decorative.
Body — the figure itself; no layout opinions are forced onto it.
Subtitle — italic serif text inside a real <figcaption>, bracketed by decorative em-dashes.

Props

Prop	Type	Default	Description
`fig`	`number \| string`	—	Figure ordinal. Rendered as `FIG. N` (or the chosen eyebrow + N). Omit to drop the ordinal.
`eyebrow`	`ReactNode`	`"FIG."` when `fig` is set	Headline label before the ordinal. Overrides the default `FIG.`.
`caption`	`ReactNode`	—	Caption rendered next to the ordinal. Plain strings auto-uppercase; `ReactNode` captions render verbatim.
`subtitle`	`ReactNode`	—	Italic serif caption rendered inside the `<figcaption>` below the body.
`width`	`'prose' \| 'wide' \| 'full'`	`'wide'`	Hint exposed as `data-figure-width` so the surrounding layout can widen / full-bleed the figure.
`children`	`ReactNode`	required	The figure body — chart, image, code, SVG, etc.
`className`	`string`	—	Merged onto the `<figure>` root via `cn()`.

Accessibility

Renders as a real <figure>; subtitle lands inside a <figcaption> so the body-to-caption pair is announced together.
Divider rule and em-dash brackets are aria-hidden; assistive tech reads only the meaningful text.
No motion to suppress.

Credits

Extracted from: AlgoFlashcards (src/lessons/primitives/chrome/Figure.tsx).