EssentialsFree component
Dialog
A focused dialog for confirmations and short decisions, with keyboard navigation and feedback for pending or failed actions.
Preview
Open previewInstallation
Add dialog to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-dialog.jsonUsage
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?"
/>Props
Key options and their defaults.
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.