Scroll Area
Scrollable container with custom scrollbars
Overview
Scroll Area is a container that adds a styled, cross-browser scrollbar to overflowing content, replacing the inconsistent native one. It’s built on Radix UI Scroll Area , so the scrollbar is themable and unobtrusive while normal wheel, touch, and keyboard scrolling continue to work.
Give the Scroll Area a constrained height (via className or style); when its content is taller, a vertical scrollbar appears. Use it for long lists, panels, and menus where you want a consistent scrollbar treatment.
Usage
Import the component:
import { ScrollArea } from "@eqtylab/equality";Set a height on the Scroll Area and place your content inside:
<ScrollArea className="h-48 max-w-lg">
<div>{/* long content */}</div>
</ScrollArea>Example
Slots
| Name | Description |
|---|---|
ScrollArea | The scrollable container. Wraps your content and renders a styled vertical scrollbar. |
ScrollBar | The scrollbar element, exported for advanced composition (e.g. a horizontal bar). |
Props
Scroll Area forwards the underlying Radix Scroll Area Root props (such as type and scrollHideDelay) in addition to the props below.
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
children | The content to render inside the scrollable viewport. | ReactNode | — | ✅ |
className | Additional CSS classes applied to the container. | string | — | ❌ |