║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Dialog description: A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-07

<ComponentPreview name="demo-primitives-headless-dialog" />

Installation

<ComponentInstallation name="primitives-headless-dialog" />

Usage

<Dialog>
  <DialogBackdrop />
  <DialogPanel>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <button>Accept</button>
    </DialogFooter>
    <DialogClose>Close</DialogClose>
  </DialogPanel>
</Dialog>

API Reference

Dialog

<ExternalLink href="https://headlessui.com/react/dialog#dialog" text="Headless UI API Reference - Dialog" />

DialogBackdrop

<ExternalLink href="https://headlessui.com/react/dialog#dialog-backdrop" text="Headless UI API Reference - DialogBackdrop" />

<TypeTable type={{ transition: { description: 'The transition of the dialog backdrop', type: 'Transition', required: false, default: "{ duration: 0.2, ease: 'easeInOut' }", }, '...props': { description: 'The props of the dialog backdrop.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

DialogClose

<ExternalLink href="https://headlessui.com/react/dialog#dialog-close" text="Headless UI API Reference - DialogClose" />

DialogPanel

<ExternalLink href="https://headlessui.com/react/dialog#dialog-panel" text="Headless UI API Reference - DialogPanel" />

<TypeTable type={{ from: { description: 'The direction the dialog should flip from', type: "'top' | 'bottom' | 'left' | 'right'", required: false, default: 'top', }, transition: { description: 'The transition of the dialog panel', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 150, damping: 25 }", }, '...props': { description: 'The props of the dialog panel.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

DialogHeader

<TypeTable type={{ '...props': { description: 'The props of the dialog header.', type: "React.ComponentProps<'div'>", required: false, }, }} />

DialogTitle

<ExternalLink href="https://headlessui.com/react/dialog#dialog-title" text="Headless UI API Reference - DialogTitle" />

DialogDescription

<ExternalLink href="https://headlessui.com/react/dialog#dialog-description" text="Headless UI API Reference - DialogDescription" />

DialogFooter

<TypeTable type={{ '...props': { description: 'The props of the dialog footer.', type: "React.ComponentProps<'div'>", required: false, }, }} />

Credits

• Headless Dialog

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║