Browse components
Scroll Area
Native scrolling with slim overlay scrollbars that fade in on hover or scroll, draggable thumbs and soft fading edges where there is more to see.
Installation
npx shadcn@latest add @glint-ui/scroll-areaFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/scroll-area.json
Usage
import { ScrollArea } from "@/components/ui/scroll-area";
<ScrollArea className="h-72 w-56 rounded-xl border">
{items.map((item) => <div key={item}>{item}</div>)}
</ScrollArea>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "hover" | "scroll" | "always" | "hover" | When the scrollbars are visible. |
| orientation | "vertical" | "horizontal" | "both" | "vertical" | Scroll axes. |
| fade | boolean | true | Fade content at edges with more to scroll. |
| fadeSize | number | 32 | Fade length in px. |
| viewportClassName | ReactNode | — | Classes for the scrolling viewport. |
| className | string | — | Extra classes for the root element. |