Primitive

Concept frame

Symbolic currentColor SVG frame for editorial and educational explainers.

Concept frames identify an interface, artifact, model, or system without pretending to be a product screenshot.
diagram
DOM renderImage render
Concept frameDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Frame atlas with generic symbolic content.
Render state

Selected

Focused frame state.
Render state

Muted

Background context state.
Render state

Sizes

Concept frame scale scale for explainers.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
kindConceptFrameKindbrowser-windowSymbolic frame asset name.
scale'small' | 'medium' | 'large'mediumSVG display scale.
selectedbooleanfalsePromotes the frame for focused explainer states.
mutedbooleanfalseSubdues the frame for background context.
titlestring-Optional accessible title.