Dialog

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

Open in

Installation

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	Default
`from?`	`'top' \| 'bottom' \| 'left' \| 'right'`	`top`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 150, damping: 25 }`

Credits

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

Checkbox NEW

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 NEW

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