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 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.

Add shadcn Scroll Area

npx shadcn@latest add @assistant-ui/scroll-area

npx shadcn@latest add @assistant-ui/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:

@/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:

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>
  );
};

Thread - The main chat interface where the scrollbar is used

Add shadcn Scroll Area

Additional Styles

Integration

Related Components