104Get started
HextaUI

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.

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

Add this example

This adds the example as components/examples/scroll-area/peek.tsx, together with the Scroll area component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/scroll-area-peek.json

To add only the component, follow the Scroll area installation.

Props in this example

The Scroll area props this example sets, from the API reference.

ScrollArea

PropTypeDefault
peekTrim the height so the last visible item is cut partway. Mark items with data-scroll-area-item to choose which elements count.
booleanfalse
className
string | (state) => string–

Every prop is in the Scroll area API reference.

More Scroll area examples

See them all, with keyboard support and accessibility notes, on the Scroll area page.

Related components