# Custom Scrollbar
URL: /docs/ui/scrollbar

Replace the default scrollbar with a custom Radix UI scroll area.

***

title: Custom Scrollbar
description: Replace the default scrollbar with a custom Radix UI scroll area.
------------------------------------------------------------------------------

import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
import { ScrollbarSample } from "@/components/docs/samples/scrollbar-sample";

<ScrollbarSample />

If you want to show a custom scrollbar UI of the Thread.Viewport in place of the system default, you can integrate `@radix-ui/react-scroll-area`.
An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).

## Add shadcn Scroll Area

<InstallCommand shadcn={["scroll-area"]} />

## Additional Styles

The Radix UI Viewport component adds an intermediate `<div data-radix-scroll-area-content>` element.
Add the following CSS to your `globals.css`:

```css title="@/app/globals.css"
.thread-viewport > [data-radix-scroll-area-content] {
  @apply flex flex-col items-center self-stretch bg-inherit;
}
```

## Integration

* Wrap `Thread.Root` with `<ScrollAreaPrimitive.Root asChild>`
* Wrap `Thread.Viewport` with `<ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>`
* Add shadcn's `<ScrollBar />` to `Thread.Root`

The resulting MyThread component should look like this:

```tsx {1-2,6,8,12-13,15}
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { ScrollBar } from "@/components/ui/scroll-area";

const MyThread: FC = () => {
  return (
    <ScrollAreaPrimitive.Root asChild>
      <ThreadPrimitive.Root className="...">
        <ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>
          <ThreadPrimitive.Viewport className="...">
            ...
          </ThreadPrimitive.Viewport>
        </ScrollAreaPrimitive.Viewport>
        <ScrollBar />
      </ThreadPrimitive.Root>
    </ScrollAreaPrimitive.Root>
  );
};
```

## Related Components

* [Thread](/docs/ui/thread) - The main chat interface where the scrollbar is used