Dialog

Forms

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";

export default function DialogDemo() {
  return (
    <div className="flex min-h-[480px] w-full items-center justify-center bg-background p-10 text-foreground">
      <Dialog
        trigger={
          <button
            type="button"
            className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90"
          >
            Invite teammate
          </button>
        }
        title="Invite a teammate"
        description="They'll get an email with a link to join."
        footer={
          <button
            type="button"
            className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90"
          >
            Send invite
          </button>
        }
      >
        <label className="grid gap-1.5" style={{ fontSize: "var(--yarcl-fs)" }}>
          <span style={{ color: "var(--yarcl-neutral-text)" }}>Email</span>
          <input
            type="email"
            defaultValue="jordan@acme.dev"
            className="h-10 rounded-md border px-3 outline-none"
            style={{
              borderColor: "var(--yarcl-neutral-border)",
              background: "var(--yarcl-neutral-surface)",
              color: "var(--yarcl-neutral-text)",
            }}
          />
        </label>
      </Dialog>
    </div>
  );
}