# Shadcn All Sides

> Drawers opening from different sides

- Type: example, free and open source (MIT)
- Component: [Drawer](https://reui.io/components/drawer.md)
- Page: https://reui.io/components/drawer/c-drawer-5
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/drawer.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/drawer.md
- MCP: `get_example("c-drawer-5")`
- Registry item: https://reui.io/r/styles/base-nova/c-drawer-5.json
- Uses: Button, Drawer

## Best for

A row of 4 triggers, one drawer per edge, for comparing the directions side by side

## Agent notes

- Keep 1 entry of `SIDES` and pass its `swipeDirection`, or `direction` on radix, to `Drawer`; the demo mounts a drawer per edge

## Install

```bash
npx shadcn@latest add @reui/c-drawer-5
```

## About Shadcn Drawer

### When to use

- Touch panels that slide in from a screen edge and close with a swipe
- Mobile tasks with a scrolling body between a title and footer actions

### When not to use

- A desktop side panel opened by mouse or keyboard with no swipe gesture: use [Sheet](https://reui.io/components/sheet.md) (`get_component("sheet")`)
- A slide out mini bag with quantity steppers, subtotal and checkout: use the [Shopping Cart blocks](https://reui.io/blocks/ecommerce/shopping-cart.md)
- A centered modal for a short form or a confirmation: use [Dialog](https://reui.io/components/dialog.md) (`get_component("dialog")`)

### Agent notes

- Set the edge with `swipeDirection` down, up, left or right on the base twin and `direction` bottom, top, left or right on radix
- The base `Drawer` draws no grab handle unless you pass `showSwipeHandle`; the radix one draws it on every bottom drawer
- The footer Submit `Button` has no handler and leaves the drawer open, unlike the `DrawerClose` Cancel beside it

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.