# Scroll Area

A custom-scrollbar container built on Radix Scroll Area that keeps native scrolling and keyboard behaviour while theming the track and thumb.

- Category: Overlays & Navigation
- License: MIT
- Page: https://www.saasuji.com/components/scroll-area
- Install: npx shadcn@latest add https://www.saasuji.com/r/scroll-area.json

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| type (ScrollArea) | `"auto" | "always" | "scroll" | "hover"` | `"hover"` | When the scrollbar is visible: always, while scrolling, on hover, or automatically. |
| scrollHideDelay (ScrollArea) | `number` | `600` | Delay in milliseconds before the scrollbar hides again. |
| dir (ScrollArea) | `"ltr" | "rtl"` | — | Reading direction inherited by the scrollbar. |
| orientation (ScrollBar) | `"horizontal" | "vertical"` | `"vertical"` | Axis of the scrollbar; horizontal adds a bottom scrollbar. |
| forceMount (ScrollBar) | `true` | — | Keeps the scrollbar mounted regardless of the ScrollArea type. |
| className (ScrollArea, ScrollBar) | `string` | — | Additional classes merged onto the scroll area or scrollbar. |
| children (ScrollArea) | `React.ReactNode` | — | Scrollable content rendered inside the viewport; a vertical scrollbar and corner are added automatically. |
| ...props (ScrollArea) | `React.ComponentProps<typeof ScrollAreaPrimitive.Root>` | — | All remaining Radix ScrollArea root props and native div attributes are forwarded. |
| ...props (ScrollBar) | `React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>` | — | All remaining Radix scrollbar props are forwarded. |

## Source

```tsx
"use client"

import * as React from "react"
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function ScrollArea({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn("relative", className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

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="relative flex-1 rounded-full bg-border"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}

export { ScrollArea, ScrollBar }

```