Scroll Area
A container with custom scrollbars for overflow content.
Installation
pnpm dlx shadcn@latest add @columbus/scroll-areaUsage
Give the scroll area a fixed height or width so its content can overflow.
import { ScrollArea } from "@/components/ui/scroll-area";
<ScrollArea className="h-64 rounded-lg border">
<div className="p-4">Long content…</div>
</ScrollArea>;Horizontal
Give the content a width larger than the scroll area, like w-max.
Scroll fade
scrollFade fades the edges where more content is hidden.
API reference
Also accepts every
Base UI ScrollArea.Root
prop. ScrollBar is exported too, for custom layouts.
Prop
Type