# Nested Dialog

> A versatile and accessible nested dialog component that enables stacking multiple dialogs within each other. Perfect for complex user interactions like payment flows, multi-step forms, or any scenario requiring hierarchical modal interfaces.  Features - Nested Dialog Support: Stack multiple dialogs with proper focus management and keyboard navigation - Responsive Design: Fully responsive layout that works seamlessly on mobile and desktop - Keyboard Accessibility: Full keyboard navigation support with ESC key handling for nested dialogs - Customizable Positioning: Support for different dialog positions (top, bottom, left, right) - Shadcn/UI Integration: Built with shadcn/ui components for consistent styling - Animation Support: Smooth enter/exit animations for both parent and child dialogs - Type-Safe: Written in TypeScript with full type safety  Example Use Cases - Payment Flows: Multi-step payment processes with method selection - Settings Panels: Nested configuration options - Form Wizards: Multi-step form processes - Confirmation Dialogs: Nested confirmation within existing dialogs - Detail Views: Showing detailed information without leaving the current context

- Author: [Victor Welander](https://21st.dev/@victorwelander)
- License: mit
- Tags: Form, shadcn/ui, Modal
- npm dependencies: lucide-react, @radix-ui/react-dialog
- Live preview: https://21st.dev/@victorwelander/components/nested-dialog

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/victorwelander/nested-dialog?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/form.md