Scroll Area
A custom scrollable container with styled scrollbars.
A scrollable area with custom-styled scrollbars.
Usage
import { ScrollArea } from "@delphi/ui";
export function Example() {
return (
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">
{/* Long content here */}
</div>
</ScrollArea>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | "auto" | "always" | "scroll" | "hover" | "hover" | When scrollbar is visible |
scrollHideDelay | number | 600 | Delay before hiding scrollbar in ms |
dir | "ltr" | "rtl" | - | Reading direction |
Use ScrollArea for custom-styled scrollbars that match your design
Set a fixed height or max-height on the container
Consider
type="always" to show scrollbar presenceTest keyboard scrolling and focus behavior
Ensure content is reachable via keyboard navigation
Use ScrollArea when native scrolling is sufficient
Nest multiple scroll areas — it's confusing
Hide scrollbars completely — users need visual feedback
Make scroll areas too small to be usable