Drawer
OverlaysStable
Slide-out drawer panel built on Vaul. Supports snap points, multiple directions, and a drag handle.
Quick Import
import { Drawer } from "@cohere-ai/waypoint-ui/drawer";Live Preview
Loading Drawer...
Props
| Name | Type | Default | Description |
|---|---|---|---|
showHandle | boolean | true | Shows the drag handle at the top of the drawer (on DrawerContent) |
direction | string | - | Slide direction (from Vaul) |
snapPoints | number[] | - | Snap point percentages (from Vaul) |
modal | boolean | - | Modal behavior (from Vaul) |
Examples
Bottom Drawer
Standard bottom drawer with header
1 import { 2 Drawer, DrawerTrigger, DrawerContent, 3 DrawerHeader, DrawerTitle, 4 } from '@cohere-ai/waypoint-ui/drawer'; 5 6 <Drawer> 7 <DrawerTrigger asChild> 8 <Button variant="outline">Open drawer</Button> 9 </DrawerTrigger> 10 <DrawerContent> 11 <DrawerHeader> 12 <DrawerTitle>Are you sure?</DrawerTitle> 13 </DrawerHeader> 14 <div className="p-4">Content here</div> 15 </DrawerContent> 16 </Drawer>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Drawer component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.