# Sheet: Long content

> `<SheetBody />` scrolls on its own, so the header and footer stay in place however long the content gets.

Example: https://hextaui.com/docs/sheet/examples/long-content
Component docs: https://hextaui.com/docs/sheet.md

## Add this example

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

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

## Source

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

export function SheetLongContent() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Release notes
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>What’s new</SheetTitle>
          <SheetDescription>Version 2.4.0</SheetDescription>
        </SheetHeader>
        <SheetBody>
          <div className="flex flex-col gap-3 text-sm text-muted-foreground">
            {Array.from({ length: 24 }, (_, index) => (
              <p key={index}>
                {index + 1}. Improved performance of the dashboard charts and
                fixed an issue where filters reset after navigation.
              </p>
            ))}
          </div>
        </SheetBody>
        <SheetFooter>
          <SheetClose render={<Button />}>Got it</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

## Props in this example

### SheetTrigger

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

### SheetClose

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

## More Sheet examples

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