Dialog

A modal dialog component built with Headless UI for confirmations, forms, and more.

Import

import { Dialog, DialogTitle, DialogDescription } from '@/components/ui';

Basic Usage

'use client';
import { useState } from 'react';
import { Dialog, DialogTitle, DialogDescription, Button } from '@/components/ui';

export function Example() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>

      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>
          Dialog description or content goes here.
        </DialogDescription>
        <div className="mt-4">
          <Button onClick={() => setIsOpen(false)}>Close</Button>
        </div>
      </Dialog>
    </>
  );
}

Props

Dialog

DialogTitle

DialogDescription

Sizes

<Dialog isOpen={isOpen} onClose={onClose} size="sm">
  Small dialog (max-w-sm)
</Dialog>

<Dialog isOpen={isOpen} onClose={onClose} size="md">
  Medium dialog (max-w-md) - Default
</Dialog>

<Dialog isOpen={isOpen} onClose={onClose} size="lg">
  Large dialog (max-w-lg)
</Dialog>

<Dialog isOpen={isOpen} onClose={onClose} size="xl">
  Extra large dialog (max-w-xl)
</Dialog>

<Dialog isOpen={isOpen} onClose={onClose} size="2xl">
  2XL dialog (max-w-2xl)
</Dialog>

Confirmation Dialog

'use client';
import { useState } from 'react';
import { Dialog, DialogTitle, DialogDescription, Button } from '@/components/ui';

export function DeleteConfirmation({ onDelete }) {
  const [isOpen, setIsOpen] = useState(false);

  const handleDelete = () => {
    onDelete();
    setIsOpen(false);
  };

  return (
    <>
      <Button color="red" onClick={() => setIsOpen(true)}>
        Delete
      </Button>

      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} size="sm">
        <DialogTitle>Confirm Deletion</DialogTitle>
        <DialogDescription>
          Are you sure you want to delete this item? This action cannot be undone.
        </DialogDescription>
        <div className="mt-6 flex gap-3 justify-end">
          <Button outline onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button color="red" onClick={handleDelete}>
            Delete
          </Button>
        </div>
      </Dialog>
    </>
  );
}

Form Dialog

'use client';
import { useState } from 'react';
import { Dialog, DialogTitle, Button, Input, Textarea } from '@/components/ui';

export function CreateProjectDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Create project
    setIsOpen(false);
  };

  return (
    <>
      <Button color="blue" onClick={() => setIsOpen(true)}>
        Create Project
      </Button>

      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} size="lg">
        <DialogTitle>Create New Project</DialogTitle>
        <form onSubmit={handleSubmit} className="mt-4 space-y-4">
          <Input
            label="Project Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Enter project name"
            required
          />
          <Textarea
            label="Description"
            placeholder="Describe your project"
          />
          <div className="flex gap-3 justify-end pt-4">
            <Button type="button" outline onClick={() => setIsOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" color="blue">
              Create Project
            </Button>
          </div>
        </form>
      </Dialog>
    </>
  );
}

Features

• Backdrop blur - Semi-transparent backdrop with blur effect
• Animations - Smooth fade and scale transitions
• Focus trap - Focus stays within dialog when open
• Escape to close - Press Escape key to close
• Click outside - Click backdrop to close
• Dark mode - Automatic dark mode support