Destructive-confirm dialog.

The component#

html
<div class="fixed inset-0 z-50 grid place-items-center bg-black/50 p-4"><div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl"><h2 class="font-bold">Delete project?</h2><p class="mt-2 text-sm text-slate-500">This cannot be undone.</p><div class="mt-6 flex justify-end gap-3"><button class="rounded-lg border px-4 py-2">Cancel</button><button class="rounded-lg bg-red-600 px-4 py-2 text-white">Delete</button></div></div></div>

Responsive & dark#

Add dark: twins to every surface and text color (bg-white dark:bg-slate-900, border-slate-200 dark:border-slate-800). Because this recipe is pure utilities, dark mode is a per-class decision — see concepts/dark-mode-strategies|dark mode strategies.

Customization#

  • Swap palette classes to re-theme instantly
  • Adjust radii (rounded-lg → rounded-2xl) for tone
  • Add transition + state variants for polish
  • Extract into a framework component when reused 3+ times

recipes/index|Recipe index · components/index|Design components