## Sheet Drawer (S—025)

A bottom sheet you can drag to dismiss, plus a side-panel mode that becomes a sheet on phones.

- URL: https://sundaeui.dev/components/sheet-drawer
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/sheet-drawer.json`
- Tags: tailwind, overlay, gesture, drawer, animated, react, bottom-sheet, sheet, mobile

A drawer with real physics. Grab the handle and the sheet follows your finger 1:1 downward and resists upward. Let go past a third of its height, or flick it, and it closes. Anything less springs back. The page dims behind it, and the body scrolls independently with overscroll contained.
Side mode slides a panel in from the right on larger screens and automatically becomes a bottom sheet on phones, where a side panel would be cramped. A sticky footer holds the primary actions and respects the iOS safe area.
Use it for mobile filters, quick edits, carts and detail panels that shouldn’t take people off the page. Use a dialog for decisions that need full attention.

### Usage

```tsx
import { SheetDrawer } from '@/components/sundae/sheet-drawer'

<SheetDrawer
  open={open}
  onOpenChange={setOpen}
  title="Filter products"
  description="248 results"
  footer={<button onClick={apply}>Show results</button>}
>
  {filters}
</SheetDrawer>
```

### Props

- `open / onOpenChange` (`boolean / (open) => void`, required): Controlled visibility.
- `title` (`string`, required): Heading (aria-labelledby).
- `description` (`string`): Secondary line (aria-describedby).
- `side` (`'bottom' | 'right'`, default `'bottom'`): Right becomes bottom below the sm breakpoint.
- `footer` (`ReactNode`): Sticky action row.

### Accessibility

- A native modal <dialog>: focus is trapped and returned, and the page behind is inert.
- Escape, the close button and backdrop clicks all dismiss it. Dragging is never required.
- Reduced motion removes the slide, so it opens and closes instantly.