ScrollBar() — ui Function Reference

Architecture documentation for the ScrollBar() function in scroll-area.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ScrollBar() — ui Function Reference

Dependency Diagram

graph TD
  7a6bdafd_93b5_62cf_d740_6e411ea579be["ScrollBar()"]
  b342dec3_b110_5cbe_e60e_04a7eb899811["scroll-area.tsx"]
  7a6bdafd_93b5_62cf_d740_6e411ea579be -->|defined in| b342dec3_b110_5cbe_e60e_04a7eb899811
  style 7a6bdafd_93b5_62cf_d740_6e411ea579be fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/ui/scroll-area.tsx lines 31–56

function ScrollBar({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        "flex touch-none p-px transition-colors select-none",
        orientation === "vertical" &&
          "h-full w-2.5 border-l border-l-transparent",
        orientation === "horizontal" &&
          "h-2.5 flex-col border-t border-t-transparent",
        className
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="bg-border relative flex-1 rounded-full"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}