Drawer
A panel that slides in from the edge of the screen, built on the Base UI `Drawer` primitive. Supports swipe gestures via `DrawerSwipeHandle`.
A panel that slides in from the edge of the screen, built on the Base UI Drawer primitive. Supports swipe gestures via DrawerSwipeHandle.
For the common bottom-edge mobile pattern (drag handle on by default), prefer BottomSheet.
tsx
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger,} from "@celestia-project/ui/primitive/drawer"import { Button } from "@celestia-project/ui/primitive/button"
<Drawer> <DrawerTrigger render={<Button variant="outline" />}>Open Drawer</DrawerTrigger> <DrawerContent> <DrawerHeader> <DrawerTitle>Edit profile</DrawerTitle> <DrawerDescription>Make changes to your profile here.</DrawerDescription> </DrawerHeader> <DrawerFooter> <Button>Save changes</Button> <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose> </DrawerFooter> </DrawerContent></Drawer>