Drawer

A panel that slides in from the edge of the screen, used for navigation or supplementary content.

Import

tsx

import { Drawer, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter } from '@tac-ui/web';

Sides

The drawer can slide in from any of the four edges using the side prop. Left and right drawers are fixed-width (360px); top and bottom drawers span the full width with a max-height of 80vh.

tsx

const [open, setOpen] = useState(false);

<Button onClick={() => { setSide('left'); setOpen(true); }}>Open Left</Button>
<Button onClick={() => { setSide('right'); setOpen(true); }}>Open Right</Button>
<Button onClick={() => { setSide('top'); setOpen(true); }}>Open Top</Button>
<Button onClick={() => { setSide('bottom'); setOpen(true); }}>Open Bottom</Button>

<Drawer open={open} onClose={() => setOpen(false)} side={side}>
  <DrawerHeader>
    <DrawerTitle>Drawer Title</DrawerTitle>
    <DrawerDescription>Drawer description text.</DrawerDescription>
  </DrawerHeader>
  <DrawerBody>
    <p>Drawer body content goes here.</p>
  </DrawerBody>
  <DrawerFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={() => setOpen(false)}>Save Changes</Button>
  </DrawerFooter>
</Drawer>

Without Backdrop

Set backdrop={false} to remove the dark overlay. The drawer still closes on Escape key press and traps focus while open.

tsx

const [open, setOpen] = useState(false);

<Button variant="outline" onClick={() => setOpen(true)}>Open Without Backdrop</Button>
<Drawer open={open} onClose={() => setOpen(false)} side="right" backdrop={false}>
  <DrawerHeader>
    <DrawerTitle>No Backdrop</DrawerTitle>
    <DrawerDescription>This drawer renders without a backdrop overlay.</DrawerDescription>
  </DrawerHeader>
  <DrawerBody>
    <p>Content remains visible behind this drawer.</p>
  </DrawerBody>
  <DrawerFooter>
    <Button onClick={() => setOpen(false)}>Close</Button>
  </DrawerFooter>
</Drawer>

With Content

DrawerBody scrolls independently when content overflows, while DrawerHeader and DrawerFooter remain fixed in place.

tsx

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Settings</Button>
<Drawer open={open} onClose={() => setOpen(false)} side="right">
  <DrawerHeader>
    <DrawerTitle>Settings</DrawerTitle>
    <DrawerDescription>Manage your account preferences.</DrawerDescription>
  </DrawerHeader>
  <DrawerBody>
    {/* scrollable content */}
  </DrawerBody>
  <DrawerFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Discard</Button>
    <Button onClick={() => setOpen(false)}>Save</Button>
  </DrawerFooter>
</Drawer>

API Reference

Drawer props. Sub-components (DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter) all accept standard HTML attributes and className.

Prop	Type	Default	Description
open	boolean	false	Controls whether the drawer is visible.
onClose	() => void	-	Callback fired when the drawer should close (backdrop click or Escape key).
side	"left" \| "right" \| "top" \| "bottom"	"right"	Edge of the screen the drawer slides in from.
backdrop	boolean	true	When false, the dark backdrop overlay is hidden.
children	React.ReactNode	-	Compose with DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter.
className	string	-	Additional CSS class names applied to the drawer panel.