A vertical timeline card that lists version release notes with type badges (new, fix, update, breaking) and a staggered reveal animation.
import Changelog from "@/components/ui/changelog";
export default function ChangelogDemo() {
return (
<div className="mx-auto w-full max-w-md p-6">
<Changelog
label="RELEASE LOG"
entries={[
{
version: "2.4.0",
date: "2026-03-01",
title: "Real-time collaboration",
description:
"Multiple users can now edit the same session simultaneously.",
type: "feature",
},
{
version: "2.3.2",
date: "2026-02-18",
title: "Fixed sync timeout on slow networks",
type: "fix",
},
{
version: "2.3.1",
date: "2026-02-10",
title: "Improved dashboard load time",
description: "Reduced initial payload by 40%.",
type: "improvement",
},
{
version: "2.3.0",
date: "2026-01-28",
title: "Removed legacy API endpoints",
description: "v1 endpoints are no longer supported.",
type: "breaking",
},
]}
/>
</div>
);
}