Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA dialog that can open another dialog on top of itself: each level keeps its own focus trap and Escape, and the covered dialog scales back and dims.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when a task inside a dialog genuinely needs a second, smaller decision: reviewing permissions from an invite dialog, picking a file from a settings dialog. The stacked look shows that the first dialog is still there.
Do not nest more than two levels, and do not use it for a flow with steps; use step-dialog for that. If the second dialog could be a section of the first, make it a section.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled state. |
defaultOpen | boolean | false | Initial state. |
onOpenChange | (open: boolean) => void | - | Called when it opens or closes. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Classes for the panel. It also receives data-depth (1, 2, ...) and data-covered. |
role="dialog", a title and description, a focus trap and focus return to the trigger that opened it.data-covered and pointer-events: none, so only the top layer is operable.prefers-reduced-motion.| Key | Action |
|---|---|
| Escape | closes only the top dialog |
| Tab | cycles inside the top dialog |
| Enter or Space on a trigger | opens the next level |
The component ships a Testing Library test (nested-dialog.test.tsx) that covers stacking and the covered state, Escape closing only the top dialog and focus return.