Examples
Real Callables you can interact with. Click into any example to see the live demo, the two-file source, and notes on when to use it.
Confirm dialog
Ask the user to confirm a destructive action before it runs. Returns a boolean to the caller.
Alert dialog
A one-button notice. The caller awaits acknowledgement; the response type is void — the act of closing is the value.
Prompt for input
window.prompt(), but with your component. Resolves with the entered string, or null on cancel.
Nested dialog
A Callable that opens itself. Each open instance can spawn the same Callable from inside its own JSX — the library tracks the stack and resolves each promise independently.
Save form with mutation flow
A dialog with an async submit. useMutationFlow tracks pending; on throw, the call stays open so the user can retry without losing their input.
Account-aware dialog
A dialog that greets the signed-in user without the caller ever passing their name. The user lives on a Root prop and reaches every call through call.root — separate from the per-call props.
Confirm with optional async
One Callable, two callers. Omit mutationFn and submit().orEnd(true) closes instantly with a fallback response; pass one and the async handler decides when to close — the same Confirm serves both.
Progress toast
A singleton toast that updates itself as work progresses. Uses upsert() so consecutive calls mutate the same instance.
Auto-dismissing error
A transient banner that closes itself via setTimeout. Multiple calls stack — each error gets its own banner.
Live status update
A pinned status pill. The caller pushes new props into the open call as work advances — same instance, updated from the outside via the promise reference.
Broadcast to every call
Several upload pills stacked at once. One Upload.update(props) with no promise merges into every open call, so a single connection change flips them all — while each keeps its own filename.
Item picker
Show a list and resolve with the chosen item. Caller-side cancellation returns null; selecting an item returns the object itself.
Color picker
A grid of swatches. The current value is forwarded as a prop so the picker can render it as selected; resolves with the chosen hex or null.
Context menu
A positioned menu opened on right-click. The caller forwards the cursor coordinates so the Callable renders at the click site.
Command palette (⌘K)
A searchable list of actions. Keyboard-driven: arrow keys to navigate, Enter to run, Esc to dismiss.
Bottom sheet
Slides up from the bottom and back down on close — the mobile-native pattern for action menus and quick choices.
Settings drawer
A panel that slides in from the edge and slides back out on close. Props carry the initial settings as plain data; the Callable owns its own form state and resolves with the saved values, or null if the user dismisses.
Image lightbox
Click a thumbnail, open the full image as an overlay. The Callable closes on backdrop click or Escape.
Multi-step wizard
A signup flow with three steps and a back/forward navigation. State lives inside the Callable; the caller awaits a single structured response.
Permission consent
OAuth-style "do you allow X?" prompt. Resolves with allow or deny — a tagged response, not a boolean.
Resolve from the caller
The promise from call() is the call's identity. A timeout in the caller settles that exact open call from the outside with Approval.end(promise, false) — delivering a response without any in-dialog click.
21 of 21 examples
