Scroll Area

1
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
2

3
import { cn } from "@/lib/utils";
4

5
function ScrollArea({
6
  className,
7
  children,
8
  ...props
9
}: ScrollAreaPrimitive.Root.Props) {
10
  return (
11
    <ScrollAreaPrimitive.Root
12
      data-slot="scroll-area"
13
      className={cn("relative", className)}
14
      {...props}
15
    >
16
      <ScrollAreaPrimitive.Viewport
17
        data-slot="scroll-area-viewport"
18
        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
19
      >
20
        {children}
21
      </ScrollAreaPrimitive.Viewport>
22
      <ScrollBar />
23
      <ScrollAreaPrimitive.Corner />
24
    </ScrollAreaPrimitive.Root>
25
  );
26
}
27

28
function ScrollBar({
29
  className,
30
  orientation = "vertical",
31
  ...props
32
}: ScrollAreaPrimitive.Scrollbar.Props) {
33
  return (
34
    <ScrollAreaPrimitive.Scrollbar
35
      data-slot="scroll-area-scrollbar"
36
      data-orientation={orientation}
37
      orientation={orientation}
38
      className={cn(
39
        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
40
        className,
41
      )}
42
      {...props}
43
    >
44
      <ScrollAreaPrimitive.Thumb
45
        data-slot="scroll-area-thumb"
46
        className="relative flex-1 rounded-none bg-ring ml-[calc(var(--pixel-size)*0.5)]"
47
      />
48
    </ScrollAreaPrimitive.Scrollbar>
49
  );
50
}
51

52
export { ScrollArea, ScrollBar };