ScrollArea
scroll-areaAdds slim custom scrollbars for vertical, horizontal, or two-axis overflow.
Usage
Vertical scroll
Default orientation=vertical, a thin scroll bar is displayed when the content exceeds the height of the container.
tsx
<ScrollArea className="h-48 w-72 border border-border p-4">
{/* Content that exceeds the height of the container */}
</ScrollArea>Horizontal scrolling
orientation=horizontal, with a row of flex cards for horizontal browsing.
tsx
<ScrollArea orientation="horizontal" className="w-72 border border-border p-4">
<div className="flex gap-3">{/* Cards */}</div>
</ScrollArea>Bi-directional scrolling
orientation=both, horizontal and vertical scroll bars appear at the same time and corner is added in the lower right corner.
tsx
<ScrollArea orientation="both" className="h-48 w-72 border border-border p-4">
{/* wide and tall content */}
</ScrollArea>When to use
Use ScrollArea for constrained content that needs thin, consistent cross-platform scrollbars. It controls scrollbar styling and orientation only. Use Resizable when users should change the area's size, or Viewport for container-query layout changes.
Import
ts
import { ScrollArea } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "both" | "vertical" | Scroll direction. both renders horizontal and vertical bars plus their corner. |
| className | string | — | Consumer-supplied size constraint on Root, such as h-48 or w-64; without one, content expands instead of scrolling. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Scroll content. |
Example
tsx
// Vertical scrolling requires a height constraint
<ScrollArea className="h-48 w-72 border border-border bg-surface p-4">
{/* Long content */}
</ScrollArea>tsx
// Horizontal scrolling
<ScrollArea orientation="horizontal" className="w-72">
<div className="flex gap-3">{/* Horizontal cards */}</div>
</ScrollArea>Usage guidelines
- Scrolling requires a size constraint. ScrollArea has no intrinsic size. Apply
h-*for vertical scrolling andw-*for horizontal scrolling throughclassName; otherwise content expands the container and no scrollbar appears.
Related
Layout · AdminLayout · Viewport · Resizable · AspectRatio · FitScreen
Playground
<ScrollArea className="h-48 w-72">
{/* Content */}
</ScrollArea>