Display
Scroll Area
Thin custom scrollbars with edge fades.
A scroll area gives a container slim, consistent scrollbars over native scrolling, so keyboard, touch and wheel all still work. Optional edge fades signal that there is more.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/scroll-area.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/scroll-area.
Usage
import { ScrollArea } from "@/components/ui/scroll-area";
<ScrollArea fade className="h-64">…</ScrollArea>API reference
ScrollArea
| Prop | Type | Default | Description |
|---|---|---|---|
| fade | boolean | false | Fade the scroll edges. |
| orientation | "vertical" | "horizontal" | "both" | "vertical" | Scroll axis. |
ScrollBar
Accessibility
- Native scrolling underneath; the viewport is focusable for keyboard scrolling.
FAQ
Also searched as: react scroll area · custom scrollbar · shadcn scroll area · scrollable container · radix scroll area