DEV Community

Cover image for shadcn-dialog: Nested & Draggable Modal Component for shadcn/ui
jQueryScript
jQueryScript

Posted on

shadcn-dialog: Nested & Draggable Modal Component for shadcn/ui

shadcn-dialog, a custom modal/dialog component for shadcn/ui that lets you create nested dialogs. It's useful for complex user flows where you need to stack modals.

Key features:

🔄 Multiple dialog stacking with proper state management

🎯 Automatic focus handling between dialog layers

⌨️ Custom escape key navigation for nested hierarchies

📱 Optional drag-to-dismiss functionality for mobile

🎨 Multiple position options (bottom, top, left, right)

⚡ TypeScript ready with full type definitions

🎭 Built-in animations with Tailwind CSS

Great for multi-step forms, confirmation workflows, settings panels, and any scenario requiring layered information presentation.

The component maintains proper accessibility standards while providing smooth user experience across desktop and mobile devices.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)