logoassistant-ui
shadcn-ui

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@next

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

Previous

Markdown

Next

Composition

On this page

Edit on Github