Drawer

A slide-in panel that animates in from any edge of the viewport (left, right, top, or bottom). The drawer and its optional semi-transparent overlay are rendered in a React portal attached to document.body, so they are not affected by parent stacking contexts.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the drawer is visible. | | anchor | 'left' \| 'right' \| 'top' \| 'bottom' | Yes | — | Edge of the screen from which the drawer slides in. | | onClose | () => void | No | — | Callback fired when the overlay is clicked. | | children | ReactNode | No | — | Content rendered inside the drawer panel. | | duration | number | No | 300 | Animation duration in milliseconds. | | showOverlay | boolean | No | true | When true, renders a semi-transparent backdrop behind the drawer. | | width | number \| string | No | 200 (left/right) | Width of the drawer. Applies to left and right anchors. | | height | number \| string | No | 200 (top/bottom) | Height of the drawer. Applies to top and bottom anchors. | | zIndex | number | No | 9999 | Base z-index for the drawer and overlay. | | drawerStyle | React.CSSProperties | No | — | Inline styles for the drawer panel. | | overlayStyle | React.CSSProperties | No | — | Inline styles for the backdrop overlay. |

Usage

Basic right-side drawer

import { useState } from 'react';
import Drawer from '@/components/Drawer';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Drawer</button>
      <Drawer
        isOpen={open}
        anchor="right"
        onClose={() => setOpen(false)}
        width={320}
      >
        <div style={{ padding: 24 }}>
          <h2>Drawer Content</h2>
          <p>Place any content here.</p>
        </div>
      </Drawer>
    </>
  );
}

Bottom sheet without overlay

import { useState } from 'react';
import Drawer from '@/components/Drawer';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Sheet</button>
      <Drawer
        isOpen={open}
        anchor="bottom"
        height={300}
        showOverlay={false}
        drawerStyle={{ borderRadius: '16px 16px 0 0', padding: 20 }}
      >
        <p>Bottom sheet content</p>
      </Drawer>
    </>
  );
}