Figure Frame

16:9 media

FIG. 01Component registry — live preview

Install

Add Figure Frame from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.

pnpm dlx shadcn@latest add @vegastack/figure-frame

Usage

import { FigureFrame } from "@/components/ui/figure-frame";

<FigureFrame figureNumber="01" caption="Component registry — live preview">
  <img src="/screenshot.png" alt="The VegaStack component registry" />
</FigureFrame>;

Examples

16:9 media

FIG. 01Component registry — live preview

FigureFrame uses rounded-(--radius-sharp) (2px) — the marketing sharp gesture is rationed to CTAs, chips, and figure frames (audit 17-brand-direction §Shape). Product surfaces keep the 6/8/12px radius scale unchanged; this is the one deliberate exception.

Aspect ratio

aspectRatio accepts any CSS aspect-ratio value ("16/9" default, "1/1", "4/3", …).

1:1

FIG. ASquare

4:3

FIG. BStandard

Without a caption

caption and figureNumber are both optional — omit them for a bare frame.

No caption

API Reference

Prop	Type	Default	Description
`children`*	`React.ReactNode`	—	The framed media — an image, video, or a live component demo. Fills the frame at `aspectRatio`.
`aspectRatio`	`string`	`'16/9'`	CSS `aspect-ratio` for the media area (e.g. `"16/9"`, `"4/3"`, `"1/1"`).
`caption`	`React.ReactNode`	—	FIG-annotation caption text. Rendered in the mono voice (`font-mono` + `text-mono-label`, uppercase — the spec's 12px floor; this component intentionally does not reach for the spec's optional 10px FIG-annotation minimum, since no token below 12px is shipped yet — see the component's audit note).
`figureNumber`	`React.ReactNode`	—	Figure number/id prefixed as `FIG. {figureNumber}` before the caption (e.g. `figureNumber="01"` → `"FIG. 01"`). Omit for a caption with no numbering.

Data attributes and CSS variables on FigureFrame

Attribute	Values
`data-slot`	`"figure-frame" \| "figure-frame-caption" \| "figure-frame-caption-text" \| "figure-frame-media" \| "figure-frame-number"`
`--figure-frame-ratio`	CSS custom property

Accessibility

Renders a semantic <figure> / <figcaption> pair — the caption is real, readable text associated with its figure.
The caption uses the mono voice at its 12px floor (text-mono-label) — this component intentionally does not reach for the spec's optional 10px FIG-annotation minimum, since no token below 12px is shipped yet.
The framed media (an <img>, video, or live demo) must carry its own accessible description (e.g. alt text) — FigureFrame adds no accessibility semantics to its children.

Contract	States tested
Behaviour	`default`
Accessibility	`native-or-base-ui-semantics`, `browser-accessibility-test`
Visual	`default`

Do / Don't

Use FigureFrame to frame a single screenshot, video, or live demo on a marketing surface.

Don't

Nest multiple unrelated pieces of content inside one FigureFrame — it's a frame for ONE figure.