---
title: Scroll Area
description: A native scroll container with custom scrollbars.
links:
  doc: https://base-ui.com/react/components/scroll-area
  anatomy: https://base-ui.com/react/components/scroll-area#anatomy
  api: https://base-ui.com/react/components/scroll-area#api-reference
---

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

const tags = Array.from({ length: 20 }, (_, i) => `Item - ${i}`);

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-64 w-xs rounded-lg border">
      <div className="flex flex-col gap-2 p-4">
        {tags.map((tag) => (
          <div
            key={tag}
            className="flex h-20 items-center justify-center rounded-md border bg-muted text-sm"
          >
            {tag}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```

## Installation

Copy and paste the following code into your project.

<ComponentSource name="scroll-area" title="components/ui/scroll-area.tsx" />

## Usage

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

```tsx
<ScrollArea className="h-64 rounded-md border">
  <div className="p-4">
    lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
    sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum.
  </div>
</ScrollArea>
```

## Examples

### Horizontal scroll

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

const tags = Array.from({ length: 20 }, (_, i) => `Item - ${i}`);

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-fit max-w-xs rounded-lg border">
      <div className="inline-flex gap-2 p-4">
        {tags.map((tag) => (
          <div
            key={tag}
            className="flex h-20 w-40 shrink-0 items-center justify-center rounded-md border bg-muted text-sm"
          >
            {tag}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```

### Both horizontal and vertical scroll

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

const tags = Array.from({ length: 100 }, (_, i) => `Item - ${i}`);

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-80 w-xs rounded-lg border">
      <div className="inline-grid grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-2 p-4">
        {tags.map((tag) => (
          <div
            key={tag}
            className="flex shrink-0 items-center justify-center rounded-md border bg-muted text-xs"
          >
            {tag}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```

### Scroll with fade effect

Pass `scrollFade` prop to `ScrollArea` to add fade effect at the edges.

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

const tags = Array.from({ length: 20 }, (_, i) => `Item - ${i}`);

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-64 w-xs rounded-lg border" scrollFade>
      <div className="flex flex-col gap-2 p-4">
        {tags.map((tag) => (
          <div
            key={tag}
            className="flex h-20 items-center justify-center rounded-md border bg-muted text-sm"
          >
            {tag}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```

### Scrollbar gutter

Enable `scrollbarGutter` prop to add space for the scrollbar to avoid layout shift.

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

const tags = Array.from({ length: 20 }, (_, i) => `Item - ${i}`);

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-64 w-xs rounded-lg border" scrollbarGutter>
      <div className="flex flex-col gap-2 p-4">
        {tags.map((tag) => (
          <div
            key={tag}
            className="flex h-20 items-center justify-center rounded-md border bg-muted text-sm"
          >
            {tag}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```

### Scrollbar custom size and margin

Customize the scrollbar size using **CSS** variable `--scrollbar-size`. Default size is `6px`.

You can also customize the scrollbar margin using **CSS** variable `--scrollbar-margin`. Default margin is `4px`.

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

const tags = Array.from({ length: 100 }, (_, i) => `Item - ${i}`);

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-80 w-xs rounded-lg border [--scrollbar-margin:--spacing(0.5)] [--scrollbar-size:--spacing(1)]">
      <div className="inline-grid grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-2 p-4">
        {tags.map((tag) => (
          <div
            key={tag}
            className="flex shrink-0 items-center justify-center rounded-md border bg-muted text-xs"
          >
            {tag}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}
```

### Scroll area with max-height

If you want to use `max-height` instead of `height` for the `ScrollArea` component, you have to follow one of the following approaches:

1. Set `display: flex` and `flex-direction: column` to the `ScrollArea` component. This will make the `ScrollArea` component take the full height of its parent container and allow it to scroll when the content exceeds the max-height.

```tsx
<ScrollArea className="flex max-h-40 max-w-sm flex-col rounded-md border">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur laborum sequi laudantium
  aliquid laboriosam corporis, reiciendis maxime sunt qui recusandae ducimus dolores libero
  quibusdam nemo, voluptas, odio ea repudiandae provident. Ut, in praesentium. Error iste excepturi
  dicta fuga sequi sit! Possimus aliquam ab sapiente explicabo! Modi sunt, quam ratione asperiores
  aut officia cupiditate nesciunt adipisci optio nemo voluptatibus. Qui, impedit! Eligendi, ducimus
  obcaecati! Libero dolor illum magni dolorem. Alias iste sunt veniam incidunt assumenda a aliquid
  fuga, esse reiciendis perspiciatis, laboriosam maxime itaque? Dicta placeat tempore optio beatae
  numquam aut? Consequatur laborum doloribus praesentium laudantium delectus illum, libero ullam
  pariatur molestias suscipit modi. Accusantium vel officia quae perspiciatis, eius sapiente
  pariatur quia incidunt beatae saepe blanditiis culpa? Voluptas, dolor rerum! Tenetur autem facere
  molestiae velit ipsa aliquid officiis repudiandae quia dolorem tempora excepturi, culpa provident
  harum? Modi quam consequatur asperiores qui quo? Qui mollitia molestias hic esse natus praesentium
  error?
</ScrollArea>
```

2. Wrap the `ScrollArea` component inside a parent container and set the `display: grid` to the parent container. This will make the `ScrollArea` component take the full height of its parent container and allow it to scroll when the content exceeds the max-height.

```tsx
<div className="grid max-w-sm rounded-md border">
  <ScrollArea className="max-h-40">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur laborum sequi laudantium
    aliquid laboriosam corporis, reiciendis maxime sunt qui recusandae ducimus dolores libero
    quibusdam nemo, voluptas, odio ea repudiandae provident. Ut, in praesentium. Error iste
    excepturi dicta fuga sequi sit! Possimus aliquam ab sapiente explicabo! Modi sunt, quam ratione
    asperiores aut officia cupiditate nesciunt adipisci optio nemo voluptatibus. Qui, impedit!
    Eligendi, ducimus obcaecati! Libero dolor illum magni dolorem. Alias iste sunt veniam incidunt
    assumenda a aliquid fuga, esse reiciendis perspiciatis, laboriosam maxime itaque? Dicta placeat
    tempore optio beatae numquam aut? Consequatur laborum doloribus praesentium laudantium delectus
    illum, libero ullam pariatur molestias suscipit modi. Accusantium vel officia quae perspiciatis,
    eius sapiente pariatur quia incidunt beatae saepe blanditiis culpa? Voluptas, dolor rerum!
    Tenetur autem facere molestiae velit ipsa aliquid officiis repudiandae quia dolorem tempora
    excepturi, culpa provident harum? Modi quam consequatur asperiores qui quo? Qui mollitia
    molestias hic esse natus praesentium error?
  </ScrollArea>
</div>
```

## API Reference

### Scroll Area props

<ApiReferenceAccordion
  type={{
    scrollFade: {
      description: "Whether to enable scroll fade effect at the edges.",
      type: `boolean`,
      default: `false`,
    },
    scrollbarGutter: {
      description: "Whether to add space for the scrollbar to avoid layout shift.",
      type: `boolean`,
      default: `false`,
    },
  }}
/>

### Scroll Area CSS variables

<ApiReferenceAccordion
  type={{
    "--scrollbar-size": {
      description: "Custom size of the scrollbar.",
      type: `string`,
      default: `--spacing(1.5) /* 6px */`,
    },
    "--scrollbar-margin": {
      description: "Custom margin of the scrollbar.",
      type: `string`,
      default: `--spacing(1) /* 4px */`,
    },
  }}
/>
```