Imperative UI

Traditional React modal APIs usually keep visibility in component state:

const [open, setOpen] = useState(false);

Imperative Surface moves the presentation step to a method call:

const result = await Surface.Dialog.present({
  body: MyDialog,
});

This is useful when opening a surface is part of a workflow rather than simply a piece of render state.

Declarative vs imperative

Declarative

<Dialog open={open} onOpenChange={setOpen}>
  ...
</Dialog>

Imperative

const result = await Surface.Dialog.present({
  body: MyDialog,
});

The imperative approach makes the caller responsible for the interaction flow while the body component is responsible for rendering and deciding when to resolve it.

When to use it

Imperative Surface works particularly well for:

• confirmation flows
• pickers and selection sheets
• short forms
• multi-step asynchronous workflows
• UI that should return a value to the caller