Skip to Content
DialogOverview

@lamstack/react-dialog

Headless, imperative dialog API for React. Wrap your app in DialogsProvider, supply the components used to render alert/confirm/prompt, then open dialogs from anywhere with useDialogs() — no dialog markup baked in, so it works with any UI library (or none).

pnpm add @lamstack/react-dialog

Credit: This API is a headless extraction of MUI Toolpad Core’s useDialogs — same open/close/alert/confirm/prompt shape and onClose semantics, ported out from under MUI so it has no MUI dependency and works with any UI library. All credit for the original design goes to the Toolpad team; see Prior art for the full comparison.

Want to see it wired up to a real UI first? Jump to the Guides — live demos for Tailwind CSS, MUI, and shadcn/ui.

Quickstart

import { DialogsProvider, useDialogs } from '@lamstack/react-dialog';
import type { DialogTemplates } from '@lamstack/react-dialog';
 
const templates: DialogTemplates = {
  alert: MyAlertDialog,
  confirm: MyConfirmDialog,
  prompt: MyPromptDialog,
};
 
function App() {
  return (
    <DialogsProvider templates={templates}>
      <DeleteButton />
    </DialogsProvider>
  );
}
 
function DeleteButton() {
  const { confirm } = useDialogs();
 
  return (
    <button
      onClick={async () => {
        const ok = await confirm('Delete this item?', { title: 'Are you sure?' });
        if (ok) {
          // ...delete it
        }
      }}
    >
      Delete
    </button>
  );
}
  • Concepts — how the imperative promise-based API works, the dialog stack, exit animations, and onClose timing/error semantics.
  • API reference — full useDialogs() surface, DialogsProvider props, DialogProps<P, R>, and how to open your own custom dialog components.
  • Testing — how to test components that call useDialogs().
  • Guides — live demos wiring DialogTemplates up to Tailwind CSS, MUI, and shadcn/ui.
Last updated on
IntroductionConcepts