Installation
You can add this modal component using our CLI or manually:
npx untitledui add modal
Modals examples
Below are examples and variations of this modals component:
FAQs
You can control modal visibility using the isOpen and onOpenChange props on the DialogTrigger component. This allows you to programmatically open and close modals, and respond to user interactions that change the modal state.
You can prevent users from closing a modal by setting the isDismissable prop to false on the ModalOverlay component. This will disable the close button, prevent closing when clicking outside the modal, and disable the Escape key for closing.
A complete modal consists of: DialogTrigger (manages open state), ModalOverlay (backdrop and positioning), Modal (container with animations), and Dialog (content wrapper). You can also use CloseButton for manual close functionality.
Modal animations are built-in and use CSS classes for enter/exit transitions. The ModalOverlay handles fade-in/out effects, while the Modal component handles zoom-in/out animations. You can customize these by overriding the animation classes.
Yes, the modal component is built with accessibility in mind using React Aria. It automatically manages focus trapping, supports keyboard navigation (Escape to close), provides proper ARIA attributes, and ensures screen readers announce the modal appropriately.