Scroll Area

1import * as React from "react";
2import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
3 
4import { cn } from "@/lib/utils";
5 
6function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
7  return (
8    <ScrollAreaPrimitive.Root
9      data-slot="scroll-area"
10      className={cn("relative", className)}
11      {...props}
12    >
13      <ScrollAreaPrimitive.Viewport
14        data-slot="scroll-area-viewport"
15        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
16      >
17        {children}
18      </ScrollAreaPrimitive.Viewport>
19      <ScrollBar />
20      <ScrollAreaPrimitive.Corner />
21    </ScrollAreaPrimitive.Root>
22  );
23}
24 
25function ScrollBar({
26  className,
27  orientation = "vertical",
28  ...props
29}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {
30  return (
31    <ScrollAreaPrimitive.Scrollbar
32      className={cn(
33        "m-1 flex opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-100 data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-100 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-1.5",
34        className,
35      )}
36      data-slot="scroll-area-scrollbar"
37      orientation={orientation}
38      {...props}
39    >
40      <ScrollAreaPrimitive.Thumb
41        className="relative flex-1 rounded-full bg-foreground/20"
42        data-slot="scroll-area-thumb"
43      />
44    </ScrollAreaPrimitive.Scrollbar>
45  );
46}
47 
48export { ScrollArea, ScrollBar };