Dialog

Forms

About

A modal dialog built on the native HTML dialog element, with a centered variant and a full-height sheet variant that slides in from either edge.

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 * as React from "react";
import Dialog from "@/components/ui/dialog";

export default function DialogModalDemo() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-8">
      <button
        type="button"
        className="inline-flex items-center justify-center rounded-md border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-900 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
        onClick={() => setOpen(true)}
      >
        Edit scholar
      </button>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        title="Edit scholar"
        description="Changes appear in the House of Wisdom catalog right away."
        footer={
          <>
            <button
              type="button"
              className="inline-flex items-center justify-center rounded-md border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-900 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
              onClick={() => setOpen(false)}
            >
              Cancel
            </button>
            <button
              type="button"
              className="inline-flex items-center justify-center rounded-md border border-transparent bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200"
              onClick={() => setOpen(false)}
            >
              Save changes
            </button>
          </>
        }
      >
        <label className="block text-sm">
          <span className="mb-1.5 block font-medium">Name</span>
          <input
            name="name"
            defaultValue="Maryam al-Ijliya"
            autoComplete="off"
            className="w-full rounded-md border border-neutral-300 bg-transparent px-3 py-2 text-sm outline-none focus:border-neutral-500 dark:border-neutral-700"
          />
          <span className="mt-1.5 block text-xs text-neutral-500">
            Astrolabe maker, Aleppo, 10th century.
          </span>
        </label>
      </Dialog>
    </div>
  );
}