Drawer
A drawer component that slides in from the edge of the screen.
Import
import {
Drawer,
DrawerTrigger,
DrawerContent,
DrawerHeader,
DrawerTitle,
DrawerDescription,
DrawerFooter,
DrawerClose,
} from "@retents/ui/drawer"Usage Guidelines
When to use
- For mobile-friendly bottom panels that slide up, such as action sheets, pickers, or quick forms.
- When you want a swipe-to-dismiss interaction on touch devices.
- For secondary content that benefits from the bottom sheet pattern.
When NOT to use
- For desktop-first side panels — use Sheet instead.
- For focused tasks requiring full attention — use Dialog instead.
- For long or complex forms — use a dedicated page.
Preview
Peer dependencies
This component requires: vaul