104Get started
HextaUI

Scroll area: On a colored surface

The fade is a mask on the content, not an overlay color, so it works on any background.

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

export function ScrollAreaColoredSurface() {
  return (
    <div className="w-full max-w-sm rounded-xl bg-muted p-2">
      <ScrollArea className="h-56">
        <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-background"
            >
              <span className="truncate font-medium">
                {person.id}. {person.name}
              </span>
              <span className="text-muted-foreground">{person.role}</span>
            </li>
          ))}
        </ul>
      </ScrollArea>
    </div>
  )
}

Add this example

This adds the example as components/examples/scroll-area/colored-surface.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-colored-surface.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
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