ScrollArea
Custom scrollbar container built on Radix UI ScrollArea
Preview
Usage
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">
<h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
{tags.map((tag) => (
<div key={tag}>
<div className="text-sm">{tag}</div>
<Separator className="my-2" />
</div>
))}
</div>
</ScrollArea>Also exports ScrollBar for horizontal scrolling scenarios. Use <ScrollBar orientation="horizontal" /> inside ScrollArea.
Install
npx shadcn add @bonsai/scroll-area