Drawer

Drawer panel that opens from left, right, top, or bottom with nested drawer support.

Placement

import { Drawer, DrawerHeader, DrawerBody, DrawerFooter, DrawerCloseButton, useDisclosure } from 'uiplex';

const { isOpen, onOpen, onClose } = useDisclosure();

<Button onClick={onOpen}>Open</Button>
<Drawer isOpen={isOpen} onClose={onClose} placement="right">
  <DrawerHeader>
    Title <DrawerCloseButton onClose={onClose} />
  </DrawerHeader>
  <DrawerBody>Content</DrawerBody>
  <DrawerFooter>Footer</DrawerFooter>
</Drawer>

Nested Drawer

<Drawer isOpen={outer} onClose={...} placement="right" level={0}>
  ...
  <Button onClick={openInner}>Open inner</Button>
</Drawer>
<Drawer isOpen={inner} onClose={...} placement="right" level={1}>
  Nested content
</Drawer>

API Reference

Drawer

Prop	Type	Default	Description
isOpen	boolean	-	Whether drawer is open
onClose	() => void	-	Close handler
placement	"left" \| "right" \| "top" \| "bottom"	"right"	Slide direction
size	"sm" \| "md" \| "lg" \| "full"	"md"	Drawer size
closeOnOverlayClick	boolean	true	Close when overlay is clicked
closeOnEsc	boolean	true	Close on Escape key
level	number	0	Z-index level for nested drawers

DrawerHeader, DrawerBody, DrawerFooter

Prop	Type	Default	Description
children	React.ReactNode	-	Section content

DrawerCloseButton

Prop	Type	Default	Description
onClose	() => void	-	Close handler