# Scroll area: Inside a sheet

> Inside a flex column, wrap it in an element with `min-h-0 flex-1` and give the scroll area `h-full` so it fills the remaining space.

Example: https://hextaui.com/docs/scroll-area/examples/sheet
Component docs: https://hextaui.com/docs/scroll-area.md

## Add this example

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

This adds `components/examples/scroll-area/sheet.tsx` with the Scroll area component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/scroll-area/sheet.tsx"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const names = [
  "Olivia Martin",
  "Jackson Lee",
  "Isabella Nguyen",
  "William Kim",
  "Sofia Davis",
  "Liam Patel",
  "Emma Garcia",
  "Noah Wilson",
]
const roles = ["Design", "Engineering", "Product", "Support"]

const people = Array.from({ length: 40 }, (_, index) => ({
  id: index + 1,
  name: names[index % names.length],
  role: roles[index % roles.length],
}))

export function ScrollAreaSheet() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Open members
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Members</SheetTitle>
        </SheetHeader>
        <div className="min-h-0 flex-1 px-4 pb-4">
          <ScrollArea peek className="h-full">
            <ul className="flex flex-col gap-1 p-2">
              {people.map((person) => (
                <li
                  key={person.id}
                  className="flex items-center justify-between gap-3 rounded-md px-3 py-2.5 text-sm hover:bg-muted"
                >
                  <span className="truncate font-medium">
                    {person.id}. {person.name}
                  </span>
                  <span className="text-muted-foreground">{person.role}</span>
                </li>
              ))}
            </ul>
          </ScrollArea>
        </div>
      </SheetContent>
    </Sheet>
  )
}
```

## Props in this example

### ScrollArea

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `peek` | `boolean` | `false` | Trim the height so the last visible item is cut partway. Mark items with data-scroll-area-item to choose which elements count. |
| `className` | `string \| (state) => string` | – |  |

## More Scroll area examples

- [Peek](https://hextaui.com/docs/scroll-area/examples/peek.md)
- [Text](https://hextaui.com/docs/scroll-area/examples/text.md)
- [Start at the bottom](https://hextaui.com/docs/scroll-area/examples/chat.md)
- [Horizontal](https://hextaui.com/docs/scroll-area/examples/horizontal.md)
- [Both axes](https://hextaui.com/docs/scroll-area/examples/both.md)
- [Dynamic content](https://hextaui.com/docs/scroll-area/examples/dynamic.md)
- [On a colored surface](https://hextaui.com/docs/scroll-area/examples/colored-surface.md)
- [Without fade](https://hextaui.com/docs/scroll-area/examples/without-fade.md)
- [Right to left](https://hextaui.com/docs/scroll-area/examples/rtl.md)