shadcn/ui

Wire @lamstack/react-dialog’s templates to shadcn/ui’s Dialog (a styled wrapper around Radix UI’s dialog primitive). The component below was generated with the real shadcn CLI (npx shadcn@latest add dialog) — its exact markup/class names come from the registry, not hand-written from memory.

Live demo

Try all four ways to open a dialog — the log below shows exactly what each call resolved with:

alert() — acknowledgement only, resolves void once dismissed.
confirm() — resolves true/false depending on which button was pressed.
prompt() — resolves the typed string, or null if cancelled.
open(custom) — opens RatingDialog, built from the same shadcn Dialog primitives plus a lucide-react star icon, with its own payload/result type ({ itemName: string } → number | null) that has nothing to do with the three built-in kinds above.

Preview

alert()

Acknowledgement only — resolves void once dismissed.

confirm()

Resolves true/false depending on which button was pressed.

prompt()

Resolves the typed string, or null if cancelled.

open(custom)

Any component works, not just alert/confirm/prompt — here, a rating.

Chaining dialogs with async/await

Each call blocks until its dialog closes, so a multi-step flow — confirm, then prompt, then alert — reads top-to-bottom. No nested callbacks, no extra state for tracking which dialog is currently open.

Loading state via async onClose()

onClose runs before the promise resolves — the dialog awaits it itself to show “Saving…” with no extra state passed in from here.

Code

The complete, real source behind the preview above — nothing hidden or simplified (view on GitHub ):


'use client';
 
import * as React from 'react';
import { Loader2, Star } from 'lucide-react';
import { DialogsProvider, useDialogs } from '@lamstack/react-dialog';
import type {
  AlertDialogPayload,
  ConfirmDialogPayload,
  DialogProps,
  DialogTemplates,
  PromptDialogPayload,
} from '@lamstack/react-dialog';
import { Button } from './ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardTitle } from './ui/card';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from './ui/dialog';
 
function AlertDialog({ payload, open, onClose }: DialogProps<AlertDialogPayload, void>) {
  return (
    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
      <DialogContent>
        <DialogHeader>
          {payload.title ? <DialogTitle>{payload.title}</DialogTitle> : null}
          <DialogDescription>{payload.msg}</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button onClick={() => onClose()}>{payload.okText ?? 'OK'}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
 
function ConfirmDialog({ payload, open, onClose }: DialogProps<ConfirmDialogPayload, boolean>) {
  return (
    <Dialog open={open} onOpenChange={(next) => !next && onClose(false)}>
      <DialogContent>
        <DialogHeader>
          {payload.title ? <DialogTitle>{payload.title}</DialogTitle> : null}
          <DialogDescription>{payload.msg}</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" onClick={() => onClose(false)}>
            {payload.cancelText ?? 'Cancel'}
          </Button>
          <Button onClick={() => onClose(true)}>{payload.okText ?? 'OK'}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
 
function PromptDialog({
  payload,
  open,
  onClose,
}: DialogProps<PromptDialogPayload, string | null>) {
  const [value, setValue] = React.useState(payload.defaultValue ?? '');
  return (
    <Dialog open={open} onOpenChange={(next) => !next && onClose(null)}>
      <DialogContent>
        <DialogHeader>
          {payload.title ? <DialogTitle>{payload.title}</DialogTitle> : null}
          <DialogDescription>{payload.msg}</DialogDescription>
        </DialogHeader>
        <input
          className="h-8 rounded-lg border border-border bg-background px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
          value={value}
          placeholder={payload.placeholder}
          onChange={(event) => setValue(event.target.value)}
        />
        <DialogFooter>
          <Button variant="outline" onClick={() => onClose(null)}>
            {payload.cancelText ?? 'Cancel'}
          </Button>
          <Button onClick={() => onClose(value)}>{payload.okText ?? 'OK'}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
 
// Demonstrates open() with a dialog outside the three built-in kinds — its own payload
// (ItemPayload) and result (number | null), built from the same shadcn primitives.
interface ItemPayload {
  itemName: string;
}
 
function RatingDialog({ payload, open, onClose }: DialogProps<ItemPayload, number | null>) {
  const [rating, setRating] = React.useState(0);
  return (
    <Dialog open={open} onOpenChange={(next) => !next && onClose(null)}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Rate &ldquo;{payload.itemName}&rdquo;</DialogTitle>
        </DialogHeader>
        <div className="flex gap-1" role="radiogroup" aria-label="Rating">
          {[1, 2, 3, 4, 5].map((star) => (
            <button
              key={star}
              type="button"
              role="radio"
              aria-checked={star <= rating}
              aria-label={`${star} star${star > 1 ? 's' : ''}`}
              onClick={() => setRating(star)}
            >
              <Star
                className={
                  star <= rating ? 'fill-primary text-primary' : 'text-muted-foreground'
                }
                size={20}
              />
            </button>
          ))}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onClose(null)}>
            Skip
          </Button>
          <Button disabled={rating === 0} onClick={() => onClose(rating)}>
            Submit
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
 
// Demonstrates awaiting DialogProps.onClose(result) inside the dialog itself to show a
// loading state — that promise only resolves once the caller's own async `onClose` option
// (passed to open()) has finished, so this needs no extra plumbing to know when to stop
// spinning.
function SaveDialog({ payload, open, onClose }: DialogProps<ItemPayload, boolean>) {
  const [pending, setPending] = React.useState(false);
  return (
    <Dialog open={open} onOpenChange={(next) => !next && !pending && onClose(false)}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Save changes?</DialogTitle>
          <DialogDescription>Save changes to &ldquo;{payload.itemName}&rdquo;?</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" disabled={pending} onClick={() => onClose(false)}>
            Cancel
          </Button>
          <Button
            disabled={pending}
            onClick={async () => {
              setPending(true);
              await onClose(true);
            }}
          >
            {pending ? <Loader2 className="animate-spin" size={16} /> : null}
            {pending ? 'Saving…' : 'Save'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
 
const templates: DialogTemplates = {
  alert: AlertDialog,
  confirm: ConfirmDialog,
  prompt: PromptDialog,
};
 
interface DemoAction {
  id: string;
  title: string;
  description: string;
  run: () => Promise<string>;
}
 
function DemoButtons() {
  const { alert, confirm, prompt, open } = useDialogs();
  const [log, setLog] = React.useState<{ id: number; text: string }[]>([]);
  const [busy, setBusy] = React.useState(false);
  const nextLogId = React.useRef(0);
 
  function record(text: string) {
    nextLogId.current += 1;
    setLog((prev) => [{ id: nextLogId.current, text }, ...prev].slice(0, 6));
  }
 
  const actions: DemoAction[] = [
    {
      id: 'alert',
      title: 'alert()',
      description: 'Acknowledgement only — resolves void once dismissed.',
      run: async () => {
        await alert('Your changes have been saved.', { title: 'Success' });
        return 'alert() → acknowledged';
      },
    },
    {
      id: 'confirm',
      title: 'confirm()',
      description: 'Resolves true/false depending on which button was pressed.',
      run: async () => {
        const confirmed = await confirm('Delete this item? This cannot be undone.', {
          title: 'Are you sure?',
          okText: 'Delete',
          cancelText: 'Cancel',
        });
        return `confirm() → ${confirmed}`;
      },
    },
    {
      id: 'prompt',
      title: 'prompt()',
      description: 'Resolves the typed string, or null if cancelled.',
      run: async () => {
        const value = await prompt('What should we call this?', {
          title: 'Rename',
          placeholder: 'New name',
        });
        return `prompt() → ${JSON.stringify(value)}`;
      },
    },
    {
      id: 'custom',
      title: 'open(custom)',
      description: 'Any component works, not just alert/confirm/prompt — here, a rating.',
      run: async () => {
        const rating = await open(RatingDialog, { itemName: 'Acme Widget' });
        return `open(RatingDialog) → ${JSON.stringify(rating)}`;
      },
    },
  ];
 
  async function runAction(action: DemoAction) {
    setBusy(true);
    try {
      record(await action.run());
    } finally {
      setBusy(false);
    }
  }
 
  async function runLoadingExample() {
    setBusy(true);
    try {
      const start = Date.now();
      const saved = await open(
        SaveDialog,
        { itemName: 'Acme Widget' },
        {
          onClose: async () => {
            await new Promise((resolve) => setTimeout(resolve, 1200));
          },
        },
      );
      record(`open(SaveDialog) → saved=${saved} (${Date.now() - start}ms)`);
    } finally {
      setBusy(false);
    }
  }
 
  async function runChainedFlow() {
    setBusy(true);
    try {
      const proceed = await confirm('Rename this item before continuing?', {
        okText: 'Yes, rename it',
        cancelText: 'Skip',
      });
      record(`1. confirm() → ${proceed}`);
      if (!proceed) return;
 
      const name = await prompt('New name:', { placeholder: 'e.g. Q3 Report' });
      record(`2. prompt() → ${JSON.stringify(name)}`);
      if (!name) return;
 
      await alert(`Renamed to "${name}".`, { title: 'Done' });
      record('3. alert() → acknowledged');
    } finally {
      setBusy(false);
    }
  }
 
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        {actions.map((action) => (
          <Card key={action.id} size="sm">
            <CardContent>
              <CardTitle className="font-mono">{action.title}</CardTitle>
              <CardDescription className="mt-1">{action.description}</CardDescription>
            </CardContent>
            <CardFooter className="mt-auto border-t-0 bg-transparent p-0 px-4">
              <Button size="sm" variant="outline" disabled={busy} onClick={() => runAction(action)}>
                Run
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
 
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <Card size="sm" className="flex flex-col bg-muted/30">
          <CardContent className="flex-1">
            <CardTitle>Chaining dialogs with async/await</CardTitle>
            <CardDescription className="mt-1">
              Each call blocks until its dialog closes, so a multi-step flow — confirm,
              then prompt, then alert — reads top-to-bottom. No nested callbacks, no
              extra state for tracking which dialog is currently open.
            </CardDescription>
          </CardContent>
          <CardFooter className="mt-auto border-t-0 bg-transparent p-0 px-4">
            <Button disabled={busy} onClick={runChainedFlow}>
              Run guided flow
            </Button>
          </CardFooter>
        </Card>
 
        <Card size="sm" className="flex flex-col bg-muted/30">
          <CardContent className="flex-1">
            <CardTitle>Loading state via async onClose()</CardTitle>
            <CardDescription className="mt-1">
              onClose runs before the promise resolves — the dialog awaits it itself to
              show &ldquo;Saving…&rdquo; with no extra state passed in from here.
            </CardDescription>
          </CardContent>
          <CardFooter className="mt-auto border-t-0 bg-transparent p-0 px-4">
            <Button disabled={busy} onClick={runLoadingExample}>
              Run loading example
            </Button>
          </CardFooter>
        </Card>
      </div>
 
      {log.length > 0 ? (
        <div className="w-full space-y-1 rounded-lg border bg-muted/30 p-3 font-mono text-xs text-muted-foreground">
          {log.map((entry) => (
            <div key={entry.id}>{entry.text}</div>
          ))}
        </div>
      ) : null}
    </div>
  );
}
 
export function ShadcnDialogDemo() {
  return (
    <DialogsProvider templates={templates}>
      <DemoButtons />
    </DialogsProvider>
  );
}

Action buttons call onClose(result) directly rather than being wrapped in shadcn’s <DialogClose> — that would fire onOpenChange(false) and the button’s own onClick, resolving the promise twice with two different results.

A custom (non-template) dialog

The open(custom) button above opens this — same shadcn Dialog primitives, but a component with its own payload/result types instead of one of the three built-in kinds:


import * as React from 'react';
import { Star } from 'lucide-react';
import { useDialogs } from '@lamstack/react-dialog';
import type { DialogProps } from '@lamstack/react-dialog';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
 
interface ItemPayload {
  itemName: string;
}
 
function RatingDialog({ payload, open, onClose }: DialogProps<ItemPayload, number | null>) {
  const [rating, setRating] = React.useState(0);
  return (
    <Dialog open={open} onOpenChange={(next) => !next && onClose(null)}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Rate &ldquo;{payload.itemName}&rdquo;</DialogTitle>
        </DialogHeader>
        <div className="flex gap-1">
          {[1, 2, 3, 4, 5].map((star) => (
            <button key={star} onClick={() => setRating(star)}>
              <Star
                className={star <= rating ? 'fill-primary text-primary' : 'text-muted-foreground'}
                size={20}
              />
            </button>
          ))}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onClose(null)}>
            Skip
          </Button>
          <Button disabled={rating === 0} onClick={() => onClose(rating)}>
            Submit
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
 
function RateButton() {
  const { open } = useDialogs();
  return (
    <Button
      onClick={async () => console.log(await open(RatingDialog, { itemName: 'Acme Widget' }))}
    >
      Rate this
    </Button>
  );
}

Setup


npx shadcn@latest init
npx shadcn@latest add dialog

The CLI needs a resolvable import alias (@/*) in tsconfig.json — if it fails with “Could not find valid path aliases”, add one:


{
  "compilerOptions": {
    "paths": { "@/*": ["./*"] }
  }
}

Dark mode

shadcn’s generated tailwind.css defines :root and .dark CSS variable blocks (colors as oklch() values) — it already assumes class-based dark mode, matching this docs site’s .dark class toggle with no extra configuration needed (unlike the MUI guide, which needed colorSchemeSelector: 'class' set explicitly).