Introducing shadcn-modal-manager

We're excited to open source shadcn-modal-manager - a simple yet robust modal manager for shadcn/ui.

The problem

Managing modals in React typically involves a lot of boilerplate:

const [isOpen, setIsOpen] = useState(false);
const [modalData, setModalData] = useState(null);

// Scattered across your component
<Button onClick={() => {
  setModalData(someData);
  setIsOpen(true);
}}>
  Open Modal
</Button>

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  {/* Modal content using modalData */}
</Dialog>

This pattern becomes unwieldy when you have multiple modals, need to open modals from deeply nested components, or want to trigger modals from outside React (like event handlers or utility functions).

The solution

shadcn-modal-manager provides a context-driven system that lets you manage modals globally through hooks:

• Open any modal from anywhere in your app
• Pass typed data to modals
• No prop drilling or state lifting
• Works with shadcn's Dialog and Drawer components

Features

• Lightweight - Built with pure React, no external dependencies
• Type-safe - Fully typed with TypeScript
• shadcn/ui compatible - Works seamlessly with Dialog and Drawer components
• Global state - Manage multiple modals through centralized context
• React 16+ - Supports React 16 and later versions

Installation

npm install shadcn-modal-manager

Why we built this

While building our starter kits, we found ourselves repeatedly implementing modal management patterns. Confirmation dialogs, edit forms, detail views - they all needed a clean way to be triggered from various places in the app.

Rather than copy-pasting the same context setup across projects, we extracted it into a reusable package.

Open source

shadcn-modal-manager is MIT licensed and available on GitHub:

• GitHub Repository
• npm Package

Contributions are welcome!

Building a SaaS with shadcn/ui? Check out our starter kits - they come with modal management patterns built in.