Drawer
Slide-out panel for secondary content, forms, and actions.
Basic
<HStack justify="center">
<Drawer>
<DrawerTrigger render={<Button variant="outline" />}>
Open drawer
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Drawer title</DrawerTitle>
<DrawerDescription>
This is a drawer panel that slides in from the bottom.
</DrawerDescription>
</DrawerHeader>
<div className="p-4">
<p className="text-muted-foreground">Drawer content goes here.</p>
</div>
<DrawerFooter>
<Button>Save changes</Button>
<DrawerClose render={<Button variant="outline" />}>
Cancel
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
</HStack> From right
<HStack justify="center">
<Drawer direction="right">
<DrawerTrigger render={<Button variant="outline" />}>
Open from right
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Settings</DrawerTitle>
<DrawerDescription>
Manage your account settings and preferences.
</DrawerDescription>
</DrawerHeader>
<div className="p-4 space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium">Display name</label>
<input className="w-full rounded-lg border px-3 py-2 text-sm" placeholder="Enter your name" />
</div>
<div className="space-y-2">
<label className="text-sm font-medium">Email</label>
<input className="w-full rounded-lg border px-3 py-2 text-sm" placeholder="Enter your email" />
</div>
</div>
<DrawerFooter>
<Button>Save</Button>
<DrawerClose render={<Button variant="outline" />}>
Cancel
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
</HStack> From left
<HStack justify="center">
<Drawer direction="left">
<DrawerTrigger render={<Button variant="outline" />}>
Open from left
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Navigation</DrawerTitle>
<DrawerDescription>
Browse sections of the application.
</DrawerDescription>
</DrawerHeader>
<div className="p-4">
<nav className="space-y-2">
<a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Dashboard</a>
<a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Orders</a>
<a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Products</a>
<a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Customers</a>
<a href="#" className="block rounded-lg px-3 py-2 text-sm hover:bg-muted">Settings</a>
</nav>
</div>
</DrawerContent>
</Drawer>
</HStack> From top
<HStack justify="center">
<Drawer direction="top">
<DrawerTrigger render={<Button variant="outline" />}>
Open from top
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Notifications</DrawerTitle>
<DrawerDescription>
You have 3 unread messages.
</DrawerDescription>
</DrawerHeader>
<div className="p-4 space-y-3">
<div className="rounded-lg border p-3">
<p className="text-sm font-medium">New order received</p>
<p className="text-xs text-muted-foreground">2 minutes ago</p>
</div>
<div className="rounded-lg border p-3">
<p className="text-sm font-medium">Payment confirmed</p>
<p className="text-xs text-muted-foreground">1 hour ago</p>
</div>
<div className="rounded-lg border p-3">
<p className="text-sm font-medium">Shipment delivered</p>
<p className="text-xs text-muted-foreground">Yesterday</p>
</div>
</div>
</DrawerContent>
</Drawer>
</HStack>