Scroll Area
Augments native scroll functionality for custom, cross-browser styling. Built on Base UI's scroll area primitive.
Last updated August 9, 2026
CreditsUnchangedPublished
Copied from shadcn/ui.
Overview
import { ScrollArea } from "@/components/ui/scroll-area"
const tags = Array.from({ length: 30 }, (_, i) => `Tag ${i + 1}`)
export function ScrollAreaDemoExample() {
return (
<ScrollArea className="h-56 w-48 rounded-lg border border-border">
<div className="flex flex-col gap-2 p-4">
{tags.map((tag) => (
<div key={tag} className="text-sm">
{tag}
</div>
))}
</div>
</ScrollArea>
)
}Installation
$ npx shadcn@latest add https://ui.persian-labs.ir/r/scroll-area.jsonUsage
import { ScrollArea } from "@/components/ui/scroll-area"
export function Example() {
return (
<ScrollArea className="h-56 w-48 rounded-lg border">
{/* long content */}
</ScrollArea>
)
}Horizontal
Set scrollbarOrientation="horizontal" for a horizontally scrolling row.
import { ScrollArea } from "@/components/ui/scroll-area"
const colors = ["#f87171", "#fb923c", "#facc15", "#4ade80", "#22d3ee", "#818cf8", "#f472b6"]
export function ScrollAreaHorizontalExample() {
return (
<ScrollArea
scrollbarOrientation="horizontal"
className="w-72 rounded-lg border border-border"
>
<div className="flex gap-3 p-4">
{colors.map((color) => (
<div
key={color}
className="size-16 shrink-0 rounded-lg"
style={{ backgroundColor: color }}
/>
))}
</div>
</ScrollArea>
)
}RTL
The vertical scrollbar uses a logical border-s rather than a physical side, so it correctly sits on the visual left when the viewport is RTL.
import { ScrollArea } from "@/components/ui/scroll-area"
const tags = [
"طراحی",
"توسعه",
"بازاریابی",
"فروش",
"پشتیبانی",
"مدیریت",
"محصول",
"امنیت",
]
export function ScrollAreaRtlExample() {
return (
<ScrollArea className="h-56 w-48 rounded-lg border border-border">
<div className="flex flex-col gap-2 p-4">
{tags.map((tag) => (
<div key={tag} className="text-sm">
{tag}
</div>
))}
</div>
</ScrollArea>
)
}