Primitive

Panel

Grouped surface with header, body, and footer anatomy.

Use Panel for complete grouped regions. Keep behavior in components and keep repeated-item cards as Card.
surface
DOM renderImage render
PanelDefault

Runtime

Connected workspace controls.
Tools, memory, and model routing are available.

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

Grouped region with header, body, and compact copy.

Runtime

Connected workspace controls.
Tools, memory, and model routing are available.
Render state

Compact

Compact product panel with action slot.

Agent runtime

Live
4 tools enabled.
Render state

Footer

Footer dock for scoped actions.

Settings

Ready
Changes are staged locally.
Render state

Raised

Raised panel for overlay-adjacent content.

Canvas

Generated output preview.
schema.valid = true
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
titleReactNode-Panel title slot.
descriptionReactNode-Panel supporting copy.
footerReactNode-Footer or action dock content.
childrenReactNode-Panel body content.