# Scrollbar
URL: /design/components/scrollbar

A quiet overlay scrollbar for panes that keep their own scroll.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component ScrollbarSample omitted]

Code for ScrollbarSample preview:

```tsx
"use client";

import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";

function ScrollbarSample() {
  return (
    <ScrollAreaPrimitive.Root className="relative h-48 w-full overflow-hidden">
      <ScrollAreaPrimitive.Viewport className="h-full w-full rounded p-4">
        <div className="space-y-4">
          {Array.from({ length: MESSAGE_COUNT }, (_, i) => (
            <p key={i} className="text-sm">
              Message {i + 1}: This is a sample message to demonstrate the
              custom scrollbar styling with Radix UI ScrollArea.
            </p>
          ))}
        </div>
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
    </ScrollAreaPrimitive.Root>
  );
}
```

## Installation

The scrollbar ships with the assistant-ui thread styles. The docs page covers wiring it into your own scroll containers.

## Usage

Any pane that owns its scroll, like a thread viewport or a sidebar, renders the overlay scrollbar instead of the native one so the hairline stays quiet until you scroll.