A scrollable container that fades its edges and keeps a visible or hidden scrollbar, so users always know there is more content to scroll past.
import { ScrollArea } from "@/components/ui/scroll-area";
import { FileText } from "lucide-react";
const FILES = [
"Q3 board deck",
"Pricing research",
"Onboarding flow",
"Churn analysis",
"Hiring plan",
"Roadmap 2027",
"Brand refresh",
];
export default function ScrollAreaHorizontalDemo() {
return (
<div className="flex w-full items-center justify-center bg-background p-10">
<div className="w-full max-w-[520px] rounded-xl border border-border bg-card p-2">
<ScrollArea
label="Recent files"
orientation="horizontal"
className="pb-2"
>
<ul className="m-0 flex w-max list-none gap-3 p-1">
{FILES.map((name) => (
<li key={name}>
<div className="flex w-40 flex-col gap-1 rounded-lg border border-border bg-muted/40 p-3">
<FileText
size={16}
aria-hidden="true"
className="text-muted-foreground"
/>
<span className="text-xs font-semibold text-foreground">
{name}
</span>
</div>
</li>
))}
</ul>
</ScrollArea>
</div>
</div>
);
}
