---
title: Scroll Area
description: A vertical scroll container with a thin scrollbar and faded edges.
---

```tsx
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

| Prop | Type | Default | Description |
| - | - | - | - |
| `fade?` | `boolean` | `true` | Fade the top and bottom edges while there is content past them. |

Parts: `Root`. Other props go to the Base UI [Scroll Area](https://base-ui.com/react/components/scroll-area) root.