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({
7  className,
8  children,
9  ...props
10}: ScrollAreaPrimitive.Root.Props) {
11  return (
12    <ScrollAreaPrimitive.Root
13      data-slot="scroll-area"
14      className={cn("relative", className)}
15      {...props}
16    >
17      <ScrollAreaPrimitive.Viewport
18        data-slot="scroll-area-viewport"
19        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
20      >
21        <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
22      </ScrollAreaPrimitive.Viewport>
23      <ScrollBar />
24      <ScrollAreaPrimitive.Corner />
25    </ScrollAreaPrimitive.Root>
26  );
27}
28 
29function ScrollBar({
30  className,
31  orientation = "vertical",
32  ...props
33}: ScrollAreaPrimitive.Scrollbar.Props) {
34  return (
35    <ScrollAreaPrimitive.Scrollbar
36      data-slot="scroll-area-scrollbar"
37      orientation={orientation}
38      className={cn(
39        "flex touch-none p-px transition-[colors,opacity] select-none opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 duration-150 delay-300 data-[hovering]:duration-75 data-[scrolling]:duration-75  data-[hovering]:delay-0 data-[scrolling]:delay-0",
40        orientation === "vertical" &&
41          "h-full w-2.5 border-l border-l-transparent",
42        orientation === "horizontal" &&
43          "h-2.5 flex-col border-t border-t-transparent",
44        className
45      )}
46      {...props}
47    >
48      <ScrollAreaPrimitive.Thumb
49        data-slot="scroll-area-thumb"
50        className="bg-border relative flex-1 rounded-full"
51      />
52    </ScrollAreaPrimitive.Scrollbar>
53  );
54}
55 
56export { ScrollArea, ScrollBar };