shadcn.io is an independent project built on shadcn/ui
Open Drawer slides a panel up from the bottom. It shows Drawer Title, a short description, one line of body text, and Submit and Cancel.
Start here and swap in your own content. If the panel should not cover the page, use a Collapsible in the page. In Svelte, Ark UI closes it when the panel is swiped away.
Installation
Anatomy
Usage
<Drawer><DrawerTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Open Drawer</Button>{/snippet}</DrawerTrigger><DrawerContent><DrawerHeader><DrawerTitle>Drawer Title</DrawerTitle><DrawerDescription>This is a simple bottom drawer with header and footer.</DrawerDescription></DrawerHeader><div class="p-4"><p class="text-muted-foreground text-sm">Add your content here. This drawer slides up from the bottom.</p></div><DrawerFooter><Button>Submit</Button><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Cancel</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer>FAQ
Why does it open from the bottom?
Bottom is the default, so Drawer sets no direction. It slides up from the bottom edge, and a downward swipe closes it.
Set swipeDirection on Drawer to up, left or right for the other edges; it names the swipe that closes the drawer.
What's inside the drawer?
DrawerHeader with the title Drawer Title and a description, a paragraph of muted text, and DrawerFooter with Submit and Cancel stacked full width.
How does Cancel close it?
Cancel is a DrawerClose, so pressing it dismisses the drawer. Submit is a plain Button with no handler.
asChild on DrawerClose receives props: spread them onto the button.
Is there a drag bar?
Yes, a bar at the top edge shows the drawer can be dragged.
DrawerContent draws it by default; showBar={false} hides it.
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.
