---
name: "@react-easy-modals"
slug: "react-easy-modals"
description: "react-easy-modals is a lightweight, zero-dependency, headless modal stack manager for React with a promise-based async/await API. The shadcn registry item integrates it with shadcn Dialog for drop-in use. Key features: ModalProvider context wrapper, useModal / useModalAt / useBeforeClose hooks, nested modal support, lazy loading, transition support, TypeScript-first. No animation library dependency. Free and open-source. Use for: replacing ad-hoc useState modal patterns with a clean imperative API when building multi-step flows or confirmation dialogs inside shadcn/ui projects."
category: "Niche/single-purpose"
tags: ["aesthetic", "animation", "forms", "hooks", "loaders", "overlays"]
framework: "react"
license: null
author: "AlexDemzz"
website: "https://react-easy-modals-docs.vercel.app"
github: "https://github.com/AlexDemzz/react-easy-modals"
registry: "https://react-easy-modals-docs.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 8
component_count: 2
generated_at: "2026-07-28T08:00:50.948Z"
---

# @react-easy-modals

react-easy-modals is a lightweight, zero-dependency, headless modal stack manager for React with a promise-based async/await API. The shadcn registry item integrates it with shadcn Dialog for drop-in use. Key features: ModalProvider context wrapper, useModal / useModalAt / useBeforeClose hooks, nested modal support, lazy loading, transition support, TypeScript-first. No animation library dependency. Free and open-source. Use for: replacing ad-hoc useState modal patterns with a clean imperative API when building multi-step flows or confirmation dialogs inside shadcn/ui projects.

## Links

- Website: https://react-easy-modals-docs.vercel.app
- GitHub: https://github.com/AlexDemzz/react-easy-modals
- Registry JSON: https://react-easy-modals-docs.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/react-easy-modals
- This file: https://sh4dcn.vercel.app/md/react-easy-modals.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://react-easy-modals-docs.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://react-easy-modals-docs.vercel.app/r/registry.json
bunx shadcn@latest add https://react-easy-modals-docs.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/AlexDemzz/react-easy-modals.git
# fetch the raw registry index
curl -s https://react-easy-modals-docs.vercel.app/r/registry.json
```

## Components (2)

| name | type | description | install |
| --- | --- | --- | --- |
| modal | registry:ui | Modal component for react-easy-modals with Radix Dialog. | `npx shadcn@latest add https://react-easy-modals-docs.vercel.app/r/styles/{style}/modal.json` |
| modal-baseui | registry:ui | Modal component for react-easy-modals with Base UI Dialog. Supports nested modals. | `npx shadcn@latest add https://react-easy-modals-docs.vercel.app/r/styles/{style}/modal-baseui.json` |

## For AI agents

```text
You are adding components from @react-easy-modals to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/react-easy-modals.md) for the component list.
2. Fetch the machine-readable index: https://react-easy-modals-docs.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: react-easy-modals).
```