# Dialog: Scrollable content

> Without a footer the body scrolls under the header and keeps its bottom padding.

Example: https://hextaui.com/docs/dialog/examples/scrollable-content
Component docs: https://hextaui.com/docs/dialog.md

## Add this example

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

This adds `components/examples/dialog/scrollable-content.tsx` with the Dialog component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/dialog/scrollable-content.tsx"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export function DialogScrollableContent() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>
        Release notes
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>What’s new</DialogTitle>
          <DialogDescription>Version 2.4.0</DialogDescription>
        </DialogHeader>
        <DialogBody>
          <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>
        </DialogBody>
      </DialogContent>
    </Dialog>
  )
}
```

## Props in this example

### DialogTrigger

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

## More Dialog examples

- [Form](https://hextaui.com/docs/dialog/examples/form.md)
- [Custom close button](https://hextaui.com/docs/dialog/examples/custom-close-button.md)
- [No close button](https://hextaui.com/docs/dialog/examples/no-close-button.md)
- [Sizes](https://hextaui.com/docs/dialog/examples/sizes.md)
- [Sticky footer](https://hextaui.com/docs/dialog/examples/sticky-footer.md)
- [Controlled](https://hextaui.com/docs/dialog/examples/controlled.md)
- [Nested](https://hextaui.com/docs/dialog/examples/nested.md)
- [Detached triggers](https://hextaui.com/docs/dialog/examples/detached-triggers.md)
- [Right to left](https://hextaui.com/docs/dialog/examples/rtl.md)