The Best React Modal Library in 2026
For most React apps, the best modal is an accessible headless primitive with your own styling: Base UI Dialog, Radix Dialog, or React Aria Modal. If you use shadcn/ui, you already have one. For a quick styled start, copy a ready-made dialog built on those primitives.
The options
| Library | Package | License | Notes |
|---|---|---|---|
| Base UI Dialog | @base-ui/react | MIT | Default base for new shadcn/ui projects |
| Radix Dialog | @radix-ui/react-dialog | MIT | Widely used, also available in shadcn/ui |
| React Aria Modal | react-aria-components | Apache-2.0 | Strong accessibility and internationalization |
| Headless UI Dialog | @headlessui/react | MIT | From the Tailwind CSS team |
| Native dialog | HTML <dialog> | Web standard | No dependency, supported in all modern browsers |
What a good modal must handle
All the libraries above handle these. Hand-rolled modals usually miss at least one.
- Focus moves into the modal and is trapped while it is open.
- Escape closes it, and focus returns to the trigger.
- Content behind it is hidden from screen readers and does not scroll.
- It renders in a portal so it sits above other content.
Styled, ready to copy
Watermelon UI has dialog components and animated dialog interactions you can install with the shadcn CLI.