# Drawer: Controlled

> Pass `open` and `onOpenChange` to open it from anywhere, without a trigger.

Example: https://hextaui.com/docs/drawer/examples/controlled
Component docs: https://hextaui.com/docs/drawer.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/drawer-controlled.json
```

This adds `components/examples/drawer/controlled.tsx` with the Drawer component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/drawer/controlled.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer"

export function DrawerControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open from anywhere
      </Button>
      <Drawer open={open} onOpenChange={setOpen}>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Controlled drawer</DrawerTitle>
            <DrawerDescription>
              Opened from a plain button, without a trigger.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>
              Close
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  )
}
```

## Props in this example

### Drawer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | – |  |
| `onOpenChange` | `(open: boolean, details) => void` | – |  |

## More Drawer examples

- [Directions](https://hextaui.com/docs/drawer/examples/directions.md)
- [Snap points](https://hextaui.com/docs/drawer/examples/snap-points.md)
- [Scrollable content](https://hextaui.com/docs/drawer/examples/scrollable.md)
- [Forms and the keyboard](https://hextaui.com/docs/drawer/examples/keyboard.md)
- [Nested](https://hextaui.com/docs/drawer/examples/nested.md)
- [Confirm from a drawer](https://hextaui.com/docs/drawer/examples/confirm.md)
- [Responsive](https://hextaui.com/docs/drawer/examples/responsive.md)
- [Non-modal](https://hextaui.com/docs/drawer/examples/non-modal.md)
- [Detached triggers](https://hextaui.com/docs/drawer/examples/detached.md)
- [Right to left](https://hextaui.com/docs/drawer/examples/rtl.md)