Drawer
A sliding panel you can swipe away, from the bottom or any other edge. Built for phones, fine on desktop.
Preview
Usage
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from '@vitnode/core/components/ui/drawer'<Drawer>
<DrawerTrigger asChild>
<Button variant="outline">Report post</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>What's wrong with this post?</DrawerTitle>
<DrawerDescription>Moderators see your report.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<DrawerClose asChild>
<Button variant="ghost">Cancel</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>DrawerTrigger and DrawerClose take asChild or Base UI's render to use
your own button. Wrap wide content in mx-auto max-w-sm so it doesn't stretch
across a desktop.
Direction and swipe
direction picks the edge: bottom (default), top, left or right. Swipe
toward that edge to close. A quick flick closes it even from a short drag, a
slow nudge springs back, and the backdrop fades as you drag.
<Drawer direction="right">...</Drawer>Bottom drawers get a grab handle and stop at 80% of the screen height. With reduced motion on, the drawer opens and closes instantly, but dragging still follows your finger.
Props
Prop
Type