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";
const RELEASES: [string, string][] = [
["2.8.0", "Saved views can be shared with a link."],
["2.7.2", "Fixed CSV exports dropping the last row."],
["2.7.1", "Faster dashboard loads on large workspaces."],
["2.7.0", "Alerts can post to more than one channel."],
["2.6.4", "SSO sessions now respect the idle timeout."],
["2.6.3", "Chart tooltips no longer clip at the edge."],
["2.6.0", "Workflows: run a check every hour."],
["2.5.1", "Audit log filters remember your last choice."],
["2.5.0", "Team spaces with their own permissions."],
];
export default function ScrollAreaDemo() {
return (
<div className="flex w-full items-center justify-center bg-background p-10">
<div className="w-full max-w-[420px] rounded-xl border border-border bg-card p-2">
<ScrollArea label="Release notes" maxHeight={220} className="px-2">
<ul className="m-0 flex list-none flex-col p-0">
{RELEASES.map(([version, note]) => (
<li
key={version}
className="flex gap-3 border-b border-border py-2.5 last:border-0"
>
<span className="h-fit shrink-0 rounded-full bg-muted px-2 py-0.5 text-[11px] font-semibold text-muted-foreground">
{version}
</span>
<p className="text-sm text-muted-foreground">{note}</p>
</li>
))}
</ul>
</ScrollArea>
</div>
</div>
);
}
