Dialog

Ready

Modal dialogs for focused user interactions and confirmations

Basic Dialog

Simple dialog with title and description

Confirmation Dialog

Destructive action with warning

Form Dialog

Dialog with form inputs

Controlled Dialog

Programmatically control dialog state

Installation

Install the required dependencies

npm install @radix-ui/react-dialog

Usage

Basic implementation example

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>
            Dialog description goes here
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline">Cancel</Button>
          <Button>Confirm</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Features

Built-in functionality

Focus trap - Keyboard focus stays within dialog
ESC to close - Press ESC key to dismiss
Backdrop click - Click outside to close
Accessible - ARIA roles and keyboard navigation
Smooth animations - Fade and zoom transitions
16px border radius - Consistent with Eidetic design system