shadcn.io is an independent project built on shadcn/ui
Open Top Drawer slides a panel down from the top. It shows Top Drawer, a short description, one line of text, and Close.
Use it for a notice that belongs at the top of the screen. A notice that must stay can be an Alert. In Svelte, Ark UI closes it when the panel is swiped away.
Installation
Anatomy
Usage
<Drawer swipeDirection="up"><DrawerTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Open Top Drawer</Button>{/snippet}</DrawerTrigger><DrawerContent showBar={false}><DrawerHeader><DrawerTitle>Top Drawer</DrawerTitle><DrawerDescription>This drawer slides down from the top.</DrawerDescription></DrawerHeader><div class="p-4"><p class="text-muted-foreground text-sm">Top drawers are useful for search bars, notifications, and quick action panels.</p></div><DrawerFooter><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Close</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer>FAQ
How does this drawer open from the top?
swipeDirection="up" on Drawer puts it on the top edge. The prop names the swipe that closes the drawer, so up docks it at the top; leave it out for a bottom drawer.
What's inside the drawer?
DrawerHeader with Top Drawer and This drawer slides down from the top, one paragraph, and DrawerFooter with Close.
How does Close work?
It's a DrawerClose, so it dismisses the drawer. Swiping it back toward its edge, Escape and a click on the overlay all close it, and focus goes back to the trigger.
asChild on DrawerClose receives props: spread them onto the button.
Is there a drag bar?
No. A side or top drawer still follows a swipe, but it doesn't draw the bar.
showBar={false} on DrawerContent hides it.
How does the trigger open it?
An outline button opens the drawer. Its text, Open Top Drawer, is the accessible name.
asChild on DrawerTrigger receives props: spread them onto the button.
API Reference
Drawer
Sets swipeDirection="up" and showBar={false}. The rest is on the Drawer page.
Button
Sets props and variant="outline". The rest is on the Button page.
