How to style scrollbar?

[apudiu]

Hello, I'm trying ScrollArea component with following structure

<section className="relative xl:w-[400px]">
    <div className="fixed lg:w-[395px]">
            <ScrollArea className="w-full h-[100vh]">
                <div className="p-5">
                    <h4 className="text-xl font-bold mb-3">Contacts</h4>
                    {
                        Array(30).fill(null).map((u, i) => (
                            <OnlineUser key={i}/>
                        ))
                    }
                </div>
                <ScrollBar
                    className="scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar scrollbar-thumb-sky-700 scrollbar-track-sky-300"
                />
            </ScrollArea>
        </div>
</section>

scrollbar-* classes are from the package tailwind-scrollbar. This classes work perfectly with any element but this or any other custom class is not working with the Scrollbar component. Am I doing anything worng? Whats the way to style the scrollbar?

[matheralvs]

@apudiu When installing the scrollarea component, there will be:

const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
     orientation={orientation}
     className={cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb
       className={cn(
         "relative rounded-full bg-border",
         orientation === "vertical" && "flex-1"
       )}
     />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

The ScrollAreaPrimitive.ScrollAreaThumb will be where you do the styling. If you want to use it outside the component, use a children in ScrollBar, to better understand see doc (link).

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[FrancescoSaverioZuppichini]

ScrollArea is a little hard to use, something it is just easier to drop a overflow-auto, was wondering if we can have matching style from the ScrollArea to the normal scroll bar

[galletafromjell666]

@FrancescoSaverioZuppichini You can paste the following styles on your globals.css, it gives most of Scroll-area component styles to the normal scrollbar

::-webkit-scrollbar {
    @apply w-2.5 h-2.5;

}

::-webkit-scrollbar-track {
    @apply bg-transparent
}

::-webkit-scrollbar-thumb {
    @apply rounded-full bg-border border-[1px] border-transparent border-solid bg-clip-padding;
}

[Afrin127329]

@FrancescoSaverioZuppichini You can paste the following styles on your globals.css, it gives most of Scroll-area component styles to the normal scrollbar

::-webkit-scrollbar {
    @apply w-2.5 h-2.5;

}

::-webkit-scrollbar-track {
    @apply bg-transparent
}

::-webkit-scrollbar-thumb {
    @apply rounded-full bg-border border-[1px] border-transparent border-solid bg-clip-padding;
}

For me, this classes wasn't working as I was also putting html styles within the base directory 😅 html { scrollbar-width: thin; scrollbar-color: rgb(20 21 27) transparent; scrollbar-gutter: stable; scroll-behavior: smooth; scroll-margin: 0; scroll-padding: 0; }