# Scrollbars

Native scrolling with subtle, macOS-like pointer scrollbars.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



Scrollbars help answer two questions: **is there more content, and where am I within it?**
However, a permanently prominent track can compete with the content. In the Monolith Design System, scrollbars are designed to be extremely subtle and stay out of the way until needed.

This foundation uses custom, cross-browser scrollbars that mimic macOS behavior. The thumb offers a direct drag target for a pointer, while the content still uses the browser's native scroll physics.

## Behavior [#behavior]

The custom scrollbar track is 10px wide, but the visible thumb is a thin **4px pill shape** (`rounded-full`) to minimize visual noise.
When the user hovers over the scrollbar track, the thumb smoothly expands to **8px** in width over a strict `150ms ease-out` duration. This provides immediate, snappy tactile feedback indicating that the scrollbar is draggable, without permanently cluttering the interface.

## Preview [#preview]



<ComponentPreview name="scroll-area-demo">
  <div className="flex items-center justify-center py-12">
    <ScrollArea className="h-[200px] w-[350px] border">
      <div className="p-4">
        <h4 className="mb-4 text-sm font-medium leading-none">
          Tags
        </h4>

        {Array.from({ length: 50 }).map((_, i, a) => (
                  <div key={i} className="text-sm">
                    v1.2.0-beta.{a.length - i}
                    <div className="my-2 border-b" />
                  </div>
                ))}
      </div>
    </ScrollArea>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/scroll-area.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

```tsx
import { ScrollArea } from "@/components/ui/scroll-area"

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-[200px] w-[350px] border rounded-none">
      <div className="p-4">
        Your scrollable content here.
      </div>
    </ScrollArea>
  )
}
```

## API Reference [#api-reference]

The component wraps Radix UI's `<ScrollArea.Root>`.

| Prop              | Type                                   | Default      | Description                                   |
| ----------------- | -------------------------------------- | ------------ | --------------------------------------------- |
| `orientation`     | `"vertical" \| "horizontal" \| "both"` | `"vertical"` | The scrolling axis to display.                |
| `className`       | `string`                               | `undefined`  | Classes applied to the root element.          |
| `scrollHideDelay` | `number`                               | `600`        | Delay in milliseconds before scrollbars hide. |

Our custom implementation automatically handles the padding transitions on the `<ScrollBar />` component to create the thickness-changing effect.