Dialog

A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts.

Made by imskyleen

Edit on GitHub

Open in

Installation

Usage

<Dialog>
  <DialogBackdrop />
  <DialogPanel>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    <p>Dialog Content</p>
    <DialogFooter>
      <button>Close</button>
    </DialogFooter>
  </DialogPanel>
</Dialog>

Examples

From Left

Use the from prop to change the direction of the dialog flip animation.

Open in

Props

Animate UI props

DialogPanel

Prop

Type

Credits

We use Headless UI for the dialog component.
We take our inspiration from Shadcn UI for the dialog style.

Checkbox

Checkboxes provide the same functionality as native HTML checkboxes, without any of the styling, giving you a clean slate to design them however you'd like.

Disclosure

A simple, accessible foundation for building custom UIs that show and hide content, like togglable accordion panels.

Dialog

On this page