Concrete
layout
Primitive

Frame

Single-border content frame with optional texture ground.

Frames are for contained examples, generated panels, and educational fragments. Do not use them as a default page section wrapper.

DOM renderJPEG render
Eyebrowmeta
body
Footermeta
Playground

Props in the URL.

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

Loading playground.
States

Rendered matrix.

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

Eyebrowmeta
body
Footermeta
Default

Header, body, and footer chrome.

/render state
Eyebrowmeta
body
Footermeta
Texture

Textured body ground.

/render state
Props

Public contract.

NameTypeDefaultDescription
headerReactNode-Optional top eyebrow slot.
headerMetaReactNode-Optional top-right meta slot.
footerReactNode-Optional bottom eyebrow slot.
footerMetaReactNode-Optional bottom-right meta slot.
texture'lattice' | 'dots' | 'lines'-Optional tokenized body ground pattern.
childrenReactNode-Frame body content.