Drawer

Drawer

Slide-in side panel with backdrop, focus trapping, position variants, and slot-based content. Built on GlobalOverlay and Framer Motion. Also exports useDrawer hook.

Import

import { Drawer, DrawerHeader, DrawerContent, DrawerFooter, useDrawer } from 'reablocks';

Drawer Props

Slot-Based Usage (Recommended)

<Drawer open={isOpen} position="end" size="400px">
  <DrawerHeader>Settings</DrawerHeader>
  <DrawerContent>
    <p>Drawer body content here.</p>
  </DrawerContent>
  <DrawerFooter>
    <Button color="primary">Save</Button>
  </DrawerFooter>
</Drawer>

Positions

<Drawer position="end" ...>   {/* Slides from right (default) */}
<Drawer position="start" ...> {/* Slides from left */}
<Drawer position="top" ...>   {/* Slides from top */}
<Drawer position="bottom" ...>{/* Slides from bottom */}

Slide animations per position: start = x: -100% → 0%, end = x: 100% → 0%, top = y: -100% → 0%, bottom = y: 100% → 0%.

useDrawer Hook

const { isOpen, setOpen, toggleOpen, Drawer: DrawerComponent } = useDrawer();

<Button => setOpen(true)}>Open</Button>
<DrawerComponent size="400px">
  <DrawerHeader>Title</DrawerHeader>
  <DrawerContent>Content</DrawerContent>
</DrawerComponent>

Hook Returns

DrawerTheme Interface

interface DrawerTheme {
  base: string;       // Fixed panel (fixed, overflow-y-auto, bg)
  header: { base: string; text: string };
  content: string;    // Content area (padding)
  footer: string;     // Footer area
  disablePadding: string;
  closeButton: { base: string; headerless: string };
  positions: {
    top: string;      // w-full, inset-x-0, top-0
    end: string;      // h-full, inset-y-0, right-0
    bottom: string;   // w-full, inset-x-0, bottom-0
    start: string;    // h-full, inset-y-0, left-0
  };
}