Custom Scrollbar
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 scroll-area@radix-ui/react-scroll-area v1.2.0 release candidate required
The v1.2.0-rc.x release candidate can be installed via
pnpm add @radix-ui/react-scroll-area@nextAdditional Styles
The Radix UI Viewport component adds an intermediate <div data-radix-scroll-area-content> element.
Add the following CSS to your globals.css:
.thread-viewport > [data-radix-scroll-area-content] {
@apply flex flex-col items-center self-stretch bg-inherit;
}Integration
- Wrap
Thread.Rootwith<ScrollAreaPrimitive.Root asChild> - Wrap
Thread.Viewportwith<ScrollAreaPrimitive.Viewport className="thread-viewport" asChild> - Add shadcn's
<ScrollBar />toThread.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>
);
};