Primitive

DrawerSurface

Drawer panel sizing and dialog semantics for side-panel workflows.

Use DrawerSurface inside Overlay for side workflows. Keep drawer state and form behavior in components.
surface
DOM renderImage render
DrawerSurfaceDefault

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

Drawer surface for side-panel workflows.
Render state

Left

Left-side drawer placement.
Render state

Wide

Wide drawer for dense generated interfaces.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
side'left' | 'right'-Logical drawer side.
measure'compact' | 'default' | 'wide'-Drawer width role.
childrenReactNode-Drawer content, usually Panel.