Imperative SurfaceUI that behaves
like a function.
Present a Dialog or Sheet, await the user's decision, and get the result directly. No modal state. No callback chains.
01const confirmed = await Surface.Dialog.present<boolean>({02 body: ConfirmDialog03});0405if (confirmed) {06 deleteProject();07}The result becomes your control flow
No open state. No callback. Just await the interaction and continue.
This action cannot be undone. All project data will be permanently deleted.
pop(true) resolves the Promise
01
Present a surface
02
User makes a choice
03
Continue with the result
Why Imperative Surface
Keep interaction logic
where it belongs.
Your application decides what should happen next. Imperative Surface handles presenting the UI and returning the result.
Two primitives
Dialogs when you need focus.
Sheets when you need flow.
Same Promise-based API. Different presentation. Choose the surface that fits the interaction.
Dialog
CenteredIdeal for confirmations, focused forms, warnings and decisions.
Sheet
ResponsivePerfect for selections, menus, mobile actions and larger interactive workflows.
Sheets
Responsive by design.
Sheets can attach to any edge and automatically adapt to smaller screens. Build one component and let the surface handle the presentation.
const selected = await Surface.Sheet.present<Option>({
position: 'bottom',
size: 'large',
body: SelectionSheet
});
if (selected) {
handleSelection(selected);
}Simple lifecycle
Present. Resolve. Continue.
Present
Call Dialog.present() or Sheet.present().
Render
Your React component becomes the surface body.
Resolve
Call pop(value) with the result.
Continue
Your original function receives the value.
PREVIEW
A Sheet for every workflow.
Selection menus, actions, filters, forms, account controls and more.
Choose an option
Select how you want to continue.
Start building
Make UI interactions feel natural.
Stop threading modal state through your components. Present a surface, await the result, and keep moving.