Components
Loading preview...
A customizable scroll area component with smooth scrolling and accessible scrollbars.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/scroll-areaimport { ScrollArea } from "@/components/ui/scroll-area";
export default function DemoOne() {
return (
<div className="max-w-sm w-full">
<ScrollArea className="h-72 w-full rounded-md border border-border p-4">
<div className="space-y-4">
{Array.from({ length: 50 }).map((_, i) => (
<div
key={i}
className="text-sm text-foreground p-2 rounded bg-accent"
>
Item {i + 1}: This is a scrollable item with some content
</div>
))}
</div>
</ScrollArea>
</div>
);
}