Drawer
A panel that slides up from the bottom and can be swiped away. The mobile counterpart of Dialog.
Usage
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@zynactra/ui/drawer"<Drawer>
<DrawerTrigger render={<Button variant="outline" />}>Open</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Seats</DrawerTitle>
<DrawerDescription>Billed monthly per member.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<Button>Update plan</Button>
<DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>Change the edge with swipeDirection (down by default, or up, left, right) and add a grab handle with showSwipeHandle.
Guidelines
- Use it for short tasks on touch screens. On desktop, the same content usually belongs in a Dialog or Sheet.
- Stack footer buttons full width, primary first.
- Keep the content under about two thirds of the screen height so the page behind stays visible.
API reference
Behaviour and props come from Base UI. See the Base UI Drawer docs.