# Scroll area: Peek

> Both lists have the same height. With `peek`, on the right, the box trims itself so the last visible item is cut partway through, which shows there is more to scroll before anyone tries. It never trims the box below half its height.

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

## Add this example

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

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

## Source

```tsx title="components/examples/scroll-area/peek.tsx"
import { ScrollArea } from "@/components/ui/scroll-area"

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],
}))

function PeopleList() {
  return (
    <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>
  )
}

export function ScrollAreaPeek() {
  return (
    <div className="grid w-full max-w-xl grid-cols-2 gap-4">
      <ScrollArea className="h-80 rounded-lg border">
        <PeopleList />
      </ScrollArea>
      <ScrollArea peek className="h-80 rounded-lg border">
        <PeopleList />
      </ScrollArea>
    </div>
  )
}
```

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

- [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)
- [Inside a sheet](https://hextaui.com/docs/scroll-area/examples/sheet.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)