Scroll Area
Visually or semantically separates content.
Demo
Line 1: This is scrollable content that demonstrates the scroll area component.
Line 2: This is scrollable content that demonstrates the scroll area component.
Line 3: This is scrollable content that demonstrates the scroll area component.
Line 4: This is scrollable content that demonstrates the scroll area component.
Line 5: This is scrollable content that demonstrates the scroll area component.
Line 6: This is scrollable content that demonstrates the scroll area component.
Line 7: This is scrollable content that demonstrates the scroll area component.
Line 8: This is scrollable content that demonstrates the scroll area component.
Line 9: This is scrollable content that demonstrates the scroll area component.
Line 10: This is scrollable content that demonstrates the scroll area component.
Usage
import { ScrollArea } from "@/components/ui/scroll-area"
export function ScrollAreaDemo() {
return (
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
<div className="space-y-4">
<h4 className="text-sm font-medium leading-none">Scrollable Content</h4>
<div className="text-sm">
{Array.from({ length: 50 }, (_, i) => (
<p key={i}>This is line {i + 1} of scrollable content.</p>
))}
</div>
</div>
</ScrollArea>
)
}API Reference
ScrollArea
A custom scrollable container with styled scrollbars.