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`	—	❌