Scroll Area

A vertical scroll container with a thin scrollbar and faded edges.

import { ScrollArea } from "@openperf/deft";

import { Preview } from "../../src/Preview";

const services = [
  "Accounts API",
  "Analytics Service",
  "Billing Worker",
  "Catalog API",
  "Checkout API",
  "Gateway",
  "Inventory API",
  "Invoicing Service",
  "Loyalty Worker",
  "Media API",
  "Messaging Service",
  "Notifications",
  "Orders API",
  "Payments",
];

export default function ScrollAreaBasic() {
  return (
    <Preview>
      <ScrollArea.Root className="max-h-48 w-64">
        <ul className="flex flex-col">
          {services.map((service) => (
            <li className="flex h-8 items-center px-2 text-body-md text-secondary" key={service}>
              {service}
            </li>
          ))}
        </ul>
      </ScrollArea.Root>
    </Preview>
  );
}

Use it for a list that can outgrow its place, such as a checklist in a sidebar. Set the height limit on Root, for example max-h-64; the area grows with its content up to that limit.
The scrollbar is thin and shows while the pointer is over the area or while it scrolls.
An edge fades out only while there is more content past it, so the fade tells the reader the list goes on.

API

PropType

fade?boolean

Fade the top and bottom edges while there is content past them.

Typeboolean

Defaulttrue

Parts: Root. Other props go to the Base UI Scroll Area root.