All things Dialog
Components
Examples
Animated DialogAnimating a modal Dialog and its backdrop element using CSS. The component waits for the transition to finish before completely hiding the dialog or removing it from the React tree.
Dialog with scrollable backdropRendering a modal Dialog component inside a scrollable backdrop container for dialogs that are
taller than the viewport.
Command MenuCombining Dialog and Combobox to enable users to search a command list in a Raycast-style modal.
Dialog with details & summaryCombining Dialog with the native details element in React so users can interact with it before JavaScript finishes loading.
Dialog with Framer MotionUsing Framer Motion to add initial and exit animations to a modal Dialog and its backdrop element.
Warning on Dialog hidePreventing users from accidentally closing a modal Dialog component with unsaved changes by displaying a nested confirmation dialog.
Dialog with MenuShowing a nested dropdown Menu component inside a modal Dialog using React.
Nested DialogRendering a modal Dialog to confirm an action inside another modal dialog using React.
Radix DialogCreating a modal dialog primitive offering the same API as Radix UI but using the Ariakit Dialog component instead.
Dialog with React RouterUsing React Router to create a modal Dialog that's controlled by the browser history.
Dialog with React-ToastifyShowing notification toasts using libraries like react-toastify and react-hot-toast while keeping a modal Dialog open with the getPersistentElements prop.
Dialog with Next.js App RouterUsing Next.js Parallel Routes to create an accessible modal Dialog that is rendered on the server and controlled by the URL, with built-in focus management.
API Reference
useDialogContextReturns the dialog store from the nearest dialog container.
useDialogStoreCreates a dialog store to control the state of
Dialog components.
DialogRenders a dialog similar to the native dialog element that's rendered in a
portal by default.
DialogDescriptionRenders a description in a dialog. This component must be wrapped with
Dialog so the aria-describedby
prop is properly set on the dialog element.
DialogDisclosureRenders a button that toggles the visibility of a
Dialog component when clicked.
DialogDismissRenders a button that hides a
Dialog when clicked.
DialogHeadingRenders a heading in a dialog. This component must be wrapped with
Dialog so the aria-labelledby
prop is properly set on the dialog element.
DialogProviderProvides a dialog store to Dialog
components.