Primitive

Split

Two-region layout primitive for title/actions, body/aside, and inspector patterns.

Use Split when two sibling regions need a deterministic relationship. Keep workflow state in components.
layout
DOM renderImage render
SplitDefault
Ready

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

Primary content with trailing status.
Ready
Render state

Even

Two balanced regions.
Render state

Sidebar

Main region plus inspector sidebar.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
ratio'auto' | 'even' | 'sidebar'-Relationship between body and aside.
density'compact' | 'comfortable' | 'editorial'-Gap density.
asideReactNode-Secondary region.
childrenReactNode-Primary region.