Dialog

Name: Helptribe Dubai
Address: Marina Plaza, Level 28, Dubai Marina, Dubai, AE
Telephone: +971 4 456 7890

Modal overlay for focused interactions. Includes backdrop blur, header, title, and description sub-components.

Installation

$ npx shadcn@latest add dialog

Preview

Usage (React/TSX)

"use client"
import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"

export default function ConfirmDialog() {
  const [open, setOpen] = useState(false);
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Delete Item</DialogTitle>
          <DialogDescription>
            This action cannot be undone.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  )
}

Props

Prop	Type	Default	Description
open	boolean	—	Whether the dialog is visible.
onOpenChange	(open: boolean) => void	—	Called when the dialog open state changes.
children	ReactNode	—	Content inside the dialog (use DialogContent).