Scroll Area
A vertical scroll container with a scrollbar that fades in on use and soft edges that hint at more content.
Preview
Usage
import { ScrollArea } from '@vitnode/core/components/ui/scroll-area'<ScrollArea className="h-72 w-56 rounded-lg border">
<ul className="flex flex-col divide-y p-4">...</ul>
</ScrollArea>Give it a fixed height. Everything taller than that scrolls.
Behaviour
- The scrollbar stays hidden until you scroll or hover, then fades out again.
- The top or bottom edge fades whenever there's more to scroll that way.
- The edge fade drops while the viewport has keyboard focus, so the focus ring is never masked.
- It only renders a vertical scrollbar, and the edge fade is vertical too. For horizontal rows, use Scroll Fade.