# Drawer

A panel that slides in from an edge for filters, details and quick edits, with all of Dialog's modal care.

- Family: Composites, imported from `mizu-ui` or `mizu-ui/composite`
- Docs: https://mizu.user64bit.world/components/drawer
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/composite/Drawer.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import {
  Drawer,
  DialogTitle,
  DialogBody,
  DialogFooter,
  DialogClose,
  Button,
  Checkbox,
} from "mizu-ui";

export function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Filter incidents</Button>
      <Drawer open={open} onOpenChange={setOpen} label="Filters">
        <DialogClose />
        <DialogTitle>Filters</DialogTitle>
        <DialogBody>
          <Checkbox label="Only open incidents" defaultChecked />
          <Checkbox label="Assigned to me" />
        </DialogBody>
        <DialogFooter>
          <Button onClick={() => setOpen(false)}>Show results</Button>
        </DialogFooter>
      </Drawer>
    </>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/drawer 0xuser64bit/mizu/dialog 0xuser64bit/mizu/button 0xuser64bit/mizu/checkbox
```

## Props

- `open / onOpenChange`: `boolean / (open: boolean) => void`. Controlled visibility. Escape, the backdrop and DialogClose ask to close through onOpenChange.
- `label`: `string`. Accessible name of the drawer.
- `side`: `"right" | "left" | "bottom"` (default `"right"`). The edge it slides from. Side drawers leave 48px of the page showing on a phone, to tap away.
- `children`: `ReactNode`. Compose DialogTitle, DialogBody, DialogFooter and DialogClose inside, as in a Dialog.

## Accessibility

A native modal dialog: focus moves inside and returns to the trigger, the page behind is inert and keeps its scroll position, and Escape closes it.

## Motion

The panel slides in from its edge with expo easing; reduced motion shows it in place.