Components
ScrollArea
A custom-styled scrollable area.
ScrollArea is built on the Base UI ScrollArea primitive. It renders a custom-styled scrollbar while preserving native scrolling behavior.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/scroll-area.jsonUsage
"use client";
import { ScrollArea } from "@/components/ui/scroll-area";
export default function Example() {
return (
<ScrollArea className="h-48 w-72">
<div className="p-4">
<p>Long content here.</p>
</div>
</ScrollArea>
);
}Examples
Default
Horizontal
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
ScrollAreadata-slot="scroll-area" | ScrollArea.RootBase UI | — |
ScrollBardata-slot="scroll-area-scrollbar" | ScrollArea.ScrollbarBase UI | — |
Last updated on