Skip to content

State management ​

State can be owned by the controller or by your application. Both modes use the same snapshots and reasons.

Uncontrolled state ​

Use default options when the controller should own state internally.

ts
import { createPopover } from 'ui-headless-runtime';

const popover = createPopover({ defaultOpen: false });
const unsubscribe = popover.subscribe(renderPopover);

popover.toggle({ reason: 'trigger' });

unsubscribe();
popover.destroy();

Controlled state ​

Use controlled options when an application store is authoritative. The controller requests a change; your store commits it and notifies the controller.

Controlled mode is useful for URL state, shared stores, undo/redo, analytics, and product rules that can reject transitions.

Headless behavior; consumer-owned rendering and styling.