shadcn.io is an independent project built on shadcn/ui
Parent Drawer holds a button labeled Open Nested Drawer. That opens Nested Drawer on top, with its own Close button.
Use it for a short second step that should not lose the first panel. Deeper than two levels, send people to a Dialog. In Svelte, Ark UI stacks the second panel on the first.
Installation
Anatomy
Usage
<Drawer><DrawerTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Open Parent Drawer</Button>{/snippet}</DrawerTrigger><DrawerContent><DrawerHeader><DrawerTitle>Parent Drawer</DrawerTitle><DrawerDescription>This drawer contains another drawer inside.</DrawerDescription></DrawerHeader><div class="flex flex-col items-start gap-4 p-4"><p class="text-muted-foreground text-sm">Nested drawers allow you to create multi-level interactions.</p><Drawer><DrawerTrigger>{#snippet asChild(props)}<Button {...props()}>Open Nested Drawer</Button>{/snippet}</DrawerTrigger><DrawerContent><DrawerHeader><DrawerTitle>Nested Drawer</DrawerTitle><DrawerDescription>This is a drawer inside another drawer.</DrawerDescription></DrawerHeader><div class="p-4"><p class="text-muted-foreground text-sm">Nested content goes here. You can close this to return to the parent drawer.</p></div><DrawerFooter><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Close Nested</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer></div><DrawerFooter><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Close</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer>FAQ
How is the second drawer nested?
The nested Drawer, with its own trigger and content, sits inside the parent's DrawerContent. Opening it stacks the new panel above the parent.
How do people get back to the parent?
Close Nested is a DrawerClose inside the nested drawer, so it closes only that one. Escape and a swipe down also close the top drawer first.
asChild on DrawerClose receives props: spread them onto the button.
What happens to the parent while the nested drawer is open?
It stays open underneath. The parent dims its content and steps back behind the nested drawer, then comes forward again when it closes.
How deep should drawers nest?
One level is usually enough. Past two, people lose track of where they are; move the flow to a page instead.
API Reference
Drawer
No extra props in this demo. The rest is on the Drawer page.
Button
Sets props and variant="outline". The rest is on the Button page.
