Noarka UI logonoarka ui

Scroll Area

Styled scrollbars for overflowing content.

Installation

npx @noarka/cli add scroll-area

Usage

tsx
import { ScrollArea } from "@noarka/ui";
tsx
<ScrollArea className="h-48 w-full max-w-sm rounded-xl border">  <div className="space-y-2 p-4">    <p className="text-sm font-medium">Changelog</p>    <p className="text-sm text-muted-foreground">v2.4: Faster sync.</p>    <p className="text-sm text-muted-foreground">v2.3: New dashboard.</p>    <p className="text-sm text-muted-foreground">v2.2: Bug fixes.</p>    <p className="text-sm text-muted-foreground">v2.1: First release.</p>  </div></ScrollArea>

Examples

Horizontal

Add a horizontal scrollbar for wide content.

Contact list

A realistic scrollable roster.

Both axes

Combine vertical and horizontal scrollbars for grids.

API reference

ScrollArea

PropTypeDefault
children

Scrollable content. Give the area a fixed height.

ReactNode-
className

Additional classes merged on the root. rounding inherits to the viewport.

string-

ScrollAreaScrollbar

PropTypeDefault
orientation

Scrollbar direction. Render one per axis you need.

"horizontal" | "vertical""vertical"
className

Additional classes merged with the default scrollbar styles.

string-