About
A modal dialog window built on the native HTML dialog element, with trapped focus, an inert backdrop page, Esc-to-close behavior, and slots for a trigger button, title, description, body content and footer actions.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dialog to your project and fits it to your theme.
Code
How Dialog is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import Dialog from "@/components/ui/dialog";
import { useState } from "react";
export default function DialogControlledDemo() {
const [open, setOpen] = useState(false);
return (
<div className="flex min-h-[480px] w-full items-center justify-center bg-background p-10 text-foreground">
<Dialog
open={open}
onOpenChange={setOpen}
title="Delete project?"
description="This can't be undone. acme-dashboard and all of its data will be permanently removed."
size="sm"
trigger={
<button
type="button"
className="inline-flex h-10 items-center justify-center rounded-md border border-red-500 px-4 text-sm font-medium text-red-600 transition-colors hover:bg-red-50"
>
Delete project
</button>
}
footer={
<>
<button
type="button"
onClick={() => setOpen(false)}
className="inline-flex h-10 items-center justify-center rounded-md px-4 text-sm font-medium"
style={{ color: "var(--yarcl-neutral-text)" }}
>
Cancel
</button>
<button
type="button"
onClick={() => setOpen(false)}
className="inline-flex h-10 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-white hover:bg-red-700"
>
Delete
</button>
</>
}
/>
</div>
);
}
More by eugenioenko
View all
Drawer
Link
Divider