# Sheet: Detached triggers

> Share one sheet between several triggers with `createSheetHandle`. Each trigger passes a `payload` that the sheet renders through a function child.

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

## Add this example

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

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

## Source

```tsx title="components/examples/sheet/detached.tsx"
"use client"

import { Button } from "@/components/ui/button"
import {
  createSheetHandle,
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const orders = createSheetHandle<{ id: string; status: string }>()

export function SheetDetached() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <SheetTrigger
        handle={orders}
        payload={{ id: "#1042", status: "Shipped" }}
        render={<Button variant="outline" size="sm" />}
      >
        Order #1042
      </SheetTrigger>
      <SheetTrigger
        handle={orders}
        payload={{ id: "#1043", status: "Processing" }}
        render={<Button variant="outline" size="sm" />}
      >
        Order #1043
      </SheetTrigger>
      <Sheet handle={orders}>
        {({ payload }) => (
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Order {payload?.id}</SheetTitle>
              <SheetDescription>Status: {payload?.status}</SheetDescription>
            </SheetHeader>
          </SheetContent>
        )}
      </Sheet>
    </div>
  )
}
```

## Props in this example

### Sheet

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `handle` | `SheetHandle<Payload>` | – |  |

### SheetTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `handle` | `SheetHandle<Payload>` | – |  |
| `payload` | `Payload` | – |  |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

## More Sheet examples

- [Sides](https://hextaui.com/docs/sheet/examples/sides.md)
- [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)
- [Right to left](https://hextaui.com/docs/sheet/examples/rtl.md)