# Scroll Area

An accessible React scroll area for Next.js and Tailwind CSS: native scrolling with a slim scrollbar and soft fades at the edges, built on Radix.

Source: https://ui.fewtone.com/components/scroll-area

## Installation

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

## Usage

```tsx
import { ScrollArea } from "@/components/ui/scroll-area"

export function Tags({ tags }: { tags: string[] }) {
  return (
    <ScrollArea aria-label="Tags" className="h-72 w-48 rounded-lg">
      <div className="p-4">
        {tags.map((tag) => (
          <div key={tag} className="text-sm">
            {tag}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}
```

## API reference

### ScrollArea

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-label` | `string` | – | Names the area. A named area is a focusable region, so keyboard users can reach it and scroll with the arrow keys. |
| `aria-labelledby` | `string` | – | Names the area after a visible heading's id, with the same effect as aria-label. |
| `type` | `"hover" \| "scroll" \| "auto" \| "always"` | `"hover"` | When the scrollbar shows: while the pointer is over the area, while scrolling, whenever there's more to scroll, or always. |
| `scrollHideDelay` | `number` | `600` | Milliseconds before the scrollbar fades out, for the hover and scroll types. |
| `className` | `string` | – | The fades take the area's background, bg-background by default. On a card or a popover, add bg-card or bg-popover so they match. |

### ScrollBar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Which way it scrolls. |

**When to use it:** Use ScrollArea for a fixed-size box whose content can be longer than it, such as a list of tags, a sidebar or a row of cards, when you want a slim scrollbar and fades at the edges. Let the page scroll normally for main content.
**Built on:** Radix Scroll Area.
**npm packages (installed by the CLI):** radix-ui@^1.7.0.

## Examples

### Vertical and horizontal

A fade shows at each edge with more to scroll to, and goes when you reach it. Point at the area and the scrollbar appears; point at the bar and it thickens. To scroll sideways, add a horizontal ScrollBar inside.

```tsx
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { FileTextIcon } from "lucide-react";
import { Fragment } from "react";

const tags = Array.from({ length: 40 }, (_, index) => `v1.2.0-beta.${40 - index}`);

const files = [
  { name: "Q3 report.pdf", size: "2.4 MB" },
  { name: "Roadmap.fig", size: "18 MB" },
  { name: "Invoices.csv", size: "84 KB" },
  { name: "Brand guide.pdf", size: "9.1 MB" },
  { name: "Logo.svg", size: "6 KB" },
  { name: "Launch notes.md", size: "3 KB" },
  { name: "Pitch.key", size: "42 MB" },
];

/*
 * Both directions side by side, named underneath. Scroll either one and a soft fade appears at the edge you
 * left; point at it and the scrollbar shows, thickening under the pointer.
 */
export default function ScrollAreaDirections() {
  return (
    <ul className="flex flex-wrap items-end justify-center gap-x-10 gap-y-6">
      <li className="flex flex-col items-center gap-2">
        <ScrollArea aria-label="Tags" className="h-64 w-48 rounded-lg">
          <div className="p-4">
            <p className="mb-3 text-sm font-medium">Tags</p>
            {tags.map((tag, index) => (
              <Fragment key={tag}>
                {index > 0 ? <div aria-hidden className="my-2 h-px bg-border" /> : null}
                <p className="text-sm">{tag}</p>
              </Fragment>
            ))}
          </div>
        </ScrollArea>
        <span className="text-xs text-muted-foreground">Vertical</span>
      </li>
      <li className="flex flex-col items-center gap-2">
        <ScrollArea aria-label="Recent files" className="w-72 rounded-lg">
          <ul className="flex w-max gap-3 p-4">
            {files.map((file) => (
              <li key={file.name} className="flex w-32 flex-col gap-3 rounded-md bg-muted p-3">
                <FileTextIcon aria-hidden className="size-(--size-icon-lg) text-muted-foreground" />
                <span className="flex flex-col gap-0.5">
                  <span className="truncate text-sm font-medium">{file.name}</span>
                  <span className="text-xs text-muted-foreground">{file.size}</span>
                </span>
              </li>
            ))}
          </ul>
          <ScrollBar orientation="horizontal" />
        </ScrollArea>
        <span className="text-xs text-muted-foreground">Horizontal</span>
      </li>
    </ul>
  );
}
```

## Related

- [Table](https://ui.fewtone.com/components/table.md): An accessible React table for Next.js and Tailwind CSS: rows and columns with sortable headers, selectable rows and rows that glide when sorted.
- [Select](https://ui.fewtone.com/components/select.md): An accessible React select with a gliding highlight, groups, labels and a scrollable list, built on Radix Select.