# Drawer: Scrollable content

> `<DrawerBody />` scrolls on its own, so the header and footer stay in place. Swiping only starts once the body is scrolled back to the top.

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

## Add this example

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

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

## Source

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

const sections = Array.from({ length: 12 }, (_, index) => index + 1)

export function DrawerScrollable() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>
        Terms of service
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Terms of service</DrawerTitle>
          <DrawerDescription>Last updated October 2026.</DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <div className="flex flex-col gap-4 text-sm text-muted-foreground">
            {sections.map((section) => (
              <p key={section}>
                {section}. By using the service you agree to these terms. We may
                update them from time to time, and we will let you know when
                something important changes. Keep your account details safe and
                tell us if you think someone else has access.
              </p>
            ))}
          </div>
        </DrawerBody>
        <DrawerFooter>
          <DrawerClose render={<Button />}>Accept</DrawerClose>
          <DrawerClose render={<Button variant="outline" />}>
            Decline
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}
```

## Props in this example

### 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

- [Directions](https://hextaui.com/docs/drawer/examples/directions.md)
- [Snap points](https://hextaui.com/docs/drawer/examples/snap-points.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)