# Drawer: Directions

> Set `swipeDirection` on `<Drawer />` to pick the edge. The drawer opens from that edge and swipes back towards it. Top and bottom drawers show a handle by default.

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

## Add this example

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

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

## Source

```tsx title="components/examples/drawer/directions.tsx"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const directions = [
  { value: "up", label: "Top" },
  { value: "right", label: "Right" },
  { value: "down", label: "Bottom" },
  { value: "left", label: "Left" },
] as const

export function DrawerDirections() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      {directions.map(({ value, label }) => (
        <Drawer key={value} swipeDirection={value}>
          <DrawerTrigger render={<Button variant="outline" />}>
            {label}
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Swipe {value} to close</DrawerTitle>
              <DrawerDescription>
                The drawer follows your finger and keeps the momentum when you
                let go.
              </DrawerDescription>
            </DrawerHeader>
            <DrawerFooter>
              <DrawerClose render={<Button variant="outline" />}>
                Close
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      ))}
    </div>
  )
}
```

## Props in this example

### Drawer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `swipeDirection` | `"up" \| "down" \| "left" \| "right"` | `"down"` | The edge it opens from and the direction that dismisses it. |

### DrawerTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### DrawerClose

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

## More Drawer examples

- [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)
- [Controlled](https://hextaui.com/docs/drawer/examples/controlled.md)
- [Detached triggers](https://hextaui.com/docs/drawer/examples/detached.md)
- [Right to left](https://hextaui.com/docs/drawer/examples/rtl.md)