shadcn.io is an independent project built on shadcn/ui
Open Right Drawer slides a panel in from the right. It shows a title, a short description, one line of text, and Confirm and Cancel.
Use it for details beside the page on a phone. On a desktop, a Sheet is the usual side panel. In Svelte, Ark UI closes it when the panel is swiped away.
Installation
Anatomy
Usage
<Drawer swipeDirection="right"><DrawerTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Open Right Drawer</Button>{/snippet}</DrawerTrigger><DrawerContent showBar={false}><DrawerHeader><DrawerTitle>Drawer Title</DrawerTitle><DrawerDescription>This drawer slides in from the right side.</DrawerDescription></DrawerHeader><div class="p-4"><p class="text-muted-foreground text-sm">Right-side drawers are great for supplementary content, settings, or detail views.</p></div><DrawerFooter><Button>Confirm</Button><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Cancel</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer>FAQ
How does this drawer open from the right?
swipeDirection="right" on Drawer puts it on the right edge. The prop names the swipe that closes the drawer, so right docks it on the right; leave it out for a bottom drawer.
What's inside the panel?
DrawerHeader with Drawer Title and This drawer slides in from the right side, one paragraph, and DrawerFooter with Confirm and Cancel.
What do Confirm and Cancel do?
Cancel is a DrawerClose, so it dismisses the drawer. Confirm is a plain Button with no handler.
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.
API Reference
Drawer
Sets swipeDirection="right" and showBar={false}. The rest is on the Drawer page.
Button
Sets props and variant="outline". The rest is on the Button page.
