Scroll Area

Custom-styled scrollable container with thin scrollbar overlays. Built on Radix UI.

Default

A fixed-height container with a vertical scrollbar for overflowing content.

Horizontal

Use the ScrollBar sub-component with orientation="horizontal" for horizontal scrolling.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Installation

npx visor add scroll-area

This copies two files into your project:

components/ui/scroll-area/scroll-area.tsx — the component
components/ui/scroll-area/scroll-area.module.css — the styles

Usage

import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area/scroll-area';

<ScrollArea style={{ height: '300px' }}>
  <div style={{ padding: '1rem' }}>
    {items.map(item => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
</ScrollArea>

API Reference

ScrollAreaProps

No props data available for “scroll-area”.

Sub-components

Component	Element	Purpose
`ScrollArea`	`<div>`	Root scrollable container with viewport and scrollbar.
`ScrollBar`	`<div>`	Custom scrollbar track and thumb, supports `vertical` and `horizontal` orientation.

Accessibility

Built on @radix-ui/react-scroll-area for cross-browser consistent custom scrollbars.
Native scroll semantics are preserved — the viewport is a standard scrollable element.
Custom scrollbar thumb is interactive and draggable.
Keyboard scrolling works as expected with arrow keys and page up/down.