React Easy Modals

Overview

React Easy Modals is a headless, zero-dependency modal stack for React by Alexandre Joly. A modal is opened like a function call with await modals.open(Component, props), and the promise resolves with whatever value the modal closes with, which suits confirmations and multi-step prompts. It is MIT licensed and has no dependencies besides React.

A ModalProvider at the app root renders the stack, its backdrop and loading state. For shadcn/ui projects, the registry provides a ready-made Modal built on the project's Dialog, serving a Radix or Base UI version to match the style in components.json.

Features

• Promise-based API: Await a modal's result instead of managing open state and callbacks.
• Modal stack: A new modal hides the one below it until it closes.
• Nested modals: Open modals inside modals and close any level of the chain.
• Close guards: useBeforeClose keeps a modal open until the user is ready, or delays close for an exit animation.
• Lazy loading: Load a modal's code with dynamic imports only when it opens.
• Hooks: useModals, useModal and useModalAt for opening modals and reading props from parents or the root.
• shadcn Modal: A Dialog-based Modal for both Radix and Base UI styles.

Tech stack

• React, TypeScript, shadcn/ui Dialog (Radix or Base UI)

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @react-easy-modals/component-name