I'll create a nested modal component that demonstrates a modal within a modal within a modal using shadcn/ui components.
This implementation creates three nested modals:
- The first modal opens when you click the "Open First Modal" button
- Inside the first modal, you can click "Open Second Modal" to open a second modal on top
- Inside the second modal, you can click "Open Third Modal" to open a third modal on top
Each modal has:
- Its own state management using React useState hooks
- Different sizes to create a visual hierarchy
- Proper focus management (handled by the shadcn/ui Dialog component)
- Proper accessibility attributes
When you close a parent modal, all child modals will also close automatically. The escape key will close only the top-most modal, allowing you to navigate back through the modal hierarchy.