assistant-ui logo/Docs

Custom Scrollbar

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

Message 1: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 2: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 3: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 4: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 5: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 6: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 7: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 8: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 9: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 10: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 11: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 12: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 13: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 14: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 15: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 16: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 17: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 18: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 19: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

Message 20: This is a sample message to demonstrate the custom scrollbar styling with Radix UI ScrollArea.

If you want to show a custom scrollbar UI of the ThreadPrimitive.Viewport in place of the system default, you can integrate radix-ui's Scroll Area. An example implementation of this is shadcn/ui's Scroll Area.

Add shadcn Scroll Area

npx shadcn@latest add scroll-area

Add 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:

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

Integrate with Thread

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

The resulting MyThread component should look like this:

import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
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>
  );
};
  • Thread - The main chat interface where the scrollbar is used