Concrete
layout
Component

Form shell

Canonical form container with title hierarchy, metadata, action slots, body spacing, status border, and sticky-feeling footer.

Form shell owns product form chrome and density. It deliberately slots controls and policy so persistence, submit rules, and validation source stay in application code.

DOM renderJPEG render
Workspace

Runtime settings

Configure a reusable agent workspace without leaving the local form contract.

Identity

Short identity fields stay compact and directly editable.

Runtime

Agent executionAllow scheduled runs and manual tool execution.
Worker limitParallel workers available to this workspace.
1-8
Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.
States

Rendered matrix.

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

Workspace

Runtime settings

Configure a reusable agent workspace without leaving the local form contract.

Identity

Short identity fields stay compact and directly editable.

Runtime

Agent executionAllow scheduled runs and manual tool execution.
Worker limitParallel workers available to this workspace.
1-8
Default

Panel shell with sections and action footer.

/render state
Workspace

Runtime settings

Configure a reusable agent workspace without leaving the local form contract.

Review required

Two fields need attention before this workspace can run.

Identity

Short identity fields stay compact and directly editable.

Choose a default model.

Runtime

Agent executionAllow scheduled runs and manual tool execution.
Worker limitParallel workers available to this workspace.
1-8
Validation

Shell composed with validation summary.

/render state
Workspace

Runtime settings

Configure a reusable agent workspace without leaving the local form contract.

Identity

Short identity fields stay compact and directly editable.

Runtime

Agent executionAllow scheduled runs and manual tool execution.
Worker limitParallel workers available to this workspace.
1-8
Compact

Dense settings surface rhythm.

/render state
Props

Public contract.

NameTypeDefaultDescription
title *ReactNode-Primary form title rendered in the shell header.
descriptionReactNode-Supporting copy below the title.
eyebrowReactNode-Optional compact section label above the title.
metaReactNode-Small metadata beside the title.
actionsReactNode-Header action slot.
footerReactNode-Footer action slot, usually cancel and submit buttons.
variant'panel' | 'modal' | 'drawer'panelSurface treatment for the shell.
status'default' | 'error' | 'success'defaultOuter status border treatment.
compactbooleanfalseTightens header/body spacing for dense settings.
FormSection.titleReactNode-Section title slot.
FormGrid.columns1 | 2 | 32Responsive field grid column count.
FormRow.controlReactNode-Right-aligned primitive or component control slot.