Scroll Area
Native scrolling with a slim custom scrollbar that fades in on hover, plus optional edge fades.
Data DisplayRadix Scroll Area
Playground
Tweak the props, the preview and the code follow.
Props
220
<ScrollArea fade className="h-[220px] w-48 rounded-lg border"> … </ScrollArea>
Installation
npx @plumsydev/plum-ui add scroll-areaAlso pulls in separator automatically.
Usage
import { ScrollArea } from "@/components/ui/scroll-area"<ScrollArea fade className="h-72 w-48 rounded-md border">
…
</ScrollArea>Examples
Horizontal
orientation="horizontal" with a masked edge.
Live log
Follows new lines only when you're at the bottom, with a jump button otherwise.
API Reference
ScrollArea
Accepts every Radix ScrollArea.Root prop.
| Prop | Type | Default |
|---|---|---|
orientationWhich scrollbars to render. | "vertical" | "horizontal" | "both" | "vertical" |
fadeMasks the edges of the viewport to hint at more content. | boolean | false |
typeWhen scrollbars are visible. | "auto" | "always" | "scroll" | "hover" | "hover" |