Available nowReact

Dialog

Focused, accessible overlays for decisions that need attention.

shadcnRegistry install command

npx shadcn add http://localhost:3000/r/menace-dialog.json

Preview

Live component behavior

Interactive

Preview size

desktop

8 components in draft

Use it in context.

Copy the component into your project, then adapt the source to the interface around it.

TSXUsage example

import { MenaceDialog } from "@/components/menace/dialog";

<MenaceDialog
  confirmLabel="Publish collection"
  description="Anyone with the link can install these components."
  onConfirm={() => publishCollection()}
  title="Publish Signal collection?"
/>

API and behavior

title / descriptionrequired: Accessible dialog name and description.
onConfirmundefined: Optional synchronous or async confirmation action.
open / onOpenChangeuncontrolled: Controlled visibility and close-reason reporting.
toneaccent: Accent or danger treatment for the primary action.

Traps focus, restores the previous focus target, locks page scroll, and closes with Escape.
Async confirmation exposes a pending state and retains the dialog with an explicit error when work fails.
Open state, backdrop dismissal, labels, tone, and supporting content are all configurable.