---
title: Scroll Area
description: A native scroll container with custom scrollbars.

links:
  doc: https://base-ui.com/react/components/scroll-area#api-reference
---

<ComponentPreview name="p-scroll-area-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/scroll-area
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Copy and paste the following code into your project.</Step>

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

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

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

```tsx
<ScrollArea className="h-64 rounded-md border">
  <div className="p-4">
    Just as suddenly as it had begun, the sensation stopped, leaving Alice
    feeling slightly disoriented. She looked around and realized that the room
    hadn't changed at all - it was she who had grown smaller, shrinking down to
    a fraction of her previous size. Alice felt herself growing larger and
    larger, filling up the entire room until she feared she might burst. The
    sensation was both thrilling and terrifying, as if she were expanding beyond
    the confines of her own body. She wondered if this was what it felt like to
    be a balloon, swelling with air until it could hold no more.
  </div>
</ScrollArea>
```

## API Reference

### ScrollArea

Root component. Styled wrapper for `ScrollArea.Root` from Base UI with custom scrollbar styling.

| Prop                    | Type      | Default | Description                                      |
| ----------------------- | --------- | ------- | ------------------------------------------------ |
| `scrollFade`            | `boolean` | `false` | Masks viewport edges so content fades in/out as you scroll |
| `scrollbarGutter`       | `boolean` | `false` | Reserves space for the scrollbar to prevent layout shifts |
| `fill`                  | `boolean` | `false` | Applies `size-full` to the scroll area content wrapper so flex layouts (e.g. `mt-auto` footers) can fill the viewport height |
| `clampContentMinWidth`  | `boolean` | `true`  | Sets `minWidth: 0` on the content wrapper to avoid spurious horizontal scrollbars in vertical layouts |
| `overscrollContain`     | `boolean` | `false` | Prevents scroll chaining into parent scrollers when the viewport overflows |

### ScrollAreaViewport

Scrollable viewport container. Styled wrapper for `ScrollArea.Viewport` from Base UI.

### ScrollAreaScrollbar

Scrollbar track. Styled wrapper for `ScrollArea.Scrollbar` from Base UI.

### ScrollAreaThumb

Scrollbar thumb. Styled wrapper for `ScrollArea.Thumb` from Base UI.

### ScrollAreaCorner

Corner element when both scrollbars are visible. Alias for `ScrollArea.Corner` from Base UI.

## Examples

### Scroll Fade

Use `scrollFade` to mask the viewport edges so content subtly fades in and out as you scroll, hinting that more content is available without adding extra UI chrome.

<ComponentPreview name="p-scroll-area-4" />

### Horizontal Scroll

<ComponentPreview name="p-scroll-area-2" />

### Scrollbar Gutter

Enable `scrollbarGutter` to reserve space for the scrollbar when overflow appears, preventing layout shifts as the bar shows or hides.

<ComponentPreview name="p-scroll-area-5" />

### Both Scrollbars

<ComponentPreview name="p-scroll-area-3" />

### Fill viewport (flex layouts)

Use `fill` when the scroll area wraps a flex column that should stretch to the full viewport height—for example, pinning a footer with `mt-auto` inside a sidebar. The built-in **`SidebarContent`** part already passes `fill`; opt in manually for custom layouts:

```tsx
<ScrollArea className="flex-1 min-h-0" fill>
  <div className="flex h-full flex-col">
    <nav>{/* main items */}</nav>
    <footer className="mt-auto">{/* pinned footer */}</footer>
  </div>
</ScrollArea>
```

Leave `fill` at the default (`false`) for content-sized areas such as lists, comboboxes, and dialogs where overflow should track child height.

### Overscroll contain

Use **`overscrollContain`** to stop wheel/touch scrolling from chaining into a parent scroller once the viewport hits its edge. Dialog, sheet, drawer, combobox, autocomplete, and sidebar already opt in; pass it yourself for custom nested scroll surfaces.

```tsx
<ScrollArea className="h-64" overscrollContain>
  <div className="p-4">{/* Long content */}</div>
</ScrollArea>
```

Leave it at the default (`false`) for standalone scroll areas where natural scroll chaining is preferred.

### Content min-width

Base UI sets `min-width: fit-content` on the content wrapper, which often causes unwanted horizontal scroll in vertical lists and panels (dialogs, comboboxes, sidebars). **`clampContentMinWidth`** defaults to **`true`** and applies `minWidth: 0` to prevent that.

Horizontal scroll still works when children define their own width (e.g. `w-max`, table min-width). Set **`clampContentMinWidth={false}`** only if horizontal scroll stops working and the child has no explicit width—rare cases like certain flex chains or long unbreakable inline text without overflow handling.

## Changelog

- [July 31, 2026](/ui/docs/changelog#scroll-area--overscroll-contain) — **`ScrollArea`** no longer applies overscroll contain by default; pass optional **`overscrollContain`** for nested surfaces. Dialog, sheet, drawer, combobox, autocomplete, and sidebar already opt in.
- [May 29, 2026](/ui/docs/changelog#scroll-area) — **`ScrollArea`** adds optional **`fill`** (default **`false`**); pass **`fill`** for flex layouts that need the content wrapper to stretch (e.g. sidebar footers with **`mt-auto`**).