# Sheet: Sides

> Set `side` to slide in from any edge. Each sheet can be swiped back towards its own edge, and the close gesture follows your finger with momentum.

Example: https://hextaui.com/docs/sheet/examples/sides
Component docs: https://hextaui.com/docs/sheet.md

## Add this example

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

This adds `components/examples/sheet/sides.tsx` with the Sheet component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/sheet/sides.tsx"
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const sides = ["top", "right", "bottom", "left"] as const

export function SheetSides() {
  return (
    <div className="grid grid-cols-2 gap-2">
      {sides.map((side) => (
        <Sheet key={side}>
          <SheetTrigger render={<Button variant="outline" />}>
            {side}
          </SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle>Opens from the {side}</SheetTitle>
              <SheetDescription>
                Swipe towards the {side} edge or press Esc to close it.
              </SheetDescription>
            </SheetHeader>
            <SheetFooter>
              <SheetClose render={<Button />}>Done</SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}
```

## Props in this example

### SheetTrigger

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

### SheetContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` |  |

### SheetClose

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

## More Sheet examples

- [Long content](https://hextaui.com/docs/sheet/examples/long-content.md)
- [Without the close button](https://hextaui.com/docs/sheet/examples/no-close-button.md)
- [Nested](https://hextaui.com/docs/sheet/examples/nested.md)
- [Controlled](https://hextaui.com/docs/sheet/examples/controlled.md)
- [Detached triggers](https://hextaui.com/docs/sheet/examples/detached.md)
- [Right to left](https://hextaui.com/docs/sheet/examples/rtl.md)