This Timeline component is a responsive, animated timeline built with React, Framer Motion, and Tailwind CSS. It displays chronological events with dates, titles, optional descriptions, and icons. The component supports both desktop and mobile layouts, automatically adjusting its structure for each. Users can view an initial number of items and toggle to show or hide additional entries using a smooth "Show More/Less" animation. It offers customizable styles, animation settings, and button variants, making it ideal for showcasing project milestones, work history, or event sequences in a clean, interactive way.
"use client";
import * as React from "react";
import { Roadmap, type RoadmapItem } from "@/components/ui/roadmap";
export default function RoadmapDemoPage() {
const items: RoadmapItem[] = [
// Q4 2025
{
date: "2025-11-06",
title: "CLI: Add scaffold for Templates",
description: "Generate a new project with pre‑wired auth, pricing, and docs.",
href: "/changelog/cli-scaffold",
status: "in-progress",
},
{
date: "2025-10-22",
title: "Pro Components: DataTable v2",
description: "Column pinning, row virtualization, CSV/Excel export.",
href: "/changelog/datatable-v2",
status: "planned",
},
{
date: "2025-10-10",
title: "Changelog revamp",
description: "Better search & filters, RSS feed for releases.",
href: "/changelog/changelog-revamp",
status: "planned",
},
// Q3 2025
{
date: "2025-09-08",
title: "Templates: SaaS Landing",
description: "Hero, pricing, testimonials, FAQ, blog, and auth-ready shell.",
href: "/templates/saas-landing",
status: "shipped",
},
{
date: "2025-08-15",
title: "Playground: Copy-to-Stack",
description: "Save snippets to your account and sync to CLI.",
href: "/changelog/playground-copy-to-stack",
status: "in-progress",
},
// Q2 2025
{
date: "2025-06-21",
title: "Docs: Installation Wizard",
description: "Step-by-step installer with framework presets.",
href: "/docs/installation-wizard",
status: "shipped",
},
{
date: "2025-05-09",
title: "Deprecated: Old Gradient Pack",
description: "Replaced by the 4K Gradient Collection.",
href: "/changelog/gradient-pack-deprecated",
status: "deprecated",
},
// Q1 2025
{
date: "2025-02-18",
title: "Templates: Marketing Blog",
description: "MDX-based blog with tags, search, and author pages.",
href: "/templates/marketing-blog",
status: "shipped",
},
{
date: "2025-01-28",
title: "Pro Components: Charts",
description: "Composable charts with sensible defaults.",
href: "/components/charts",
status: "shipped",
},
{
date: "2025-01-10",
title: "Accessibility Pass",
description: "Color contrast fixes and keyboard navigation across components.",
href: "/changelog/a11y-pass",
status: "shipped",
},
];
return (
<div className="container mx-auto max-w-4xl px-4 py-10">
<Roadmap
items={items}
initialVisiblePerGroup={3}
defaultFilter="all"
showTimelineDecoration
dateFormat={{ month: "long", day: "numeric", year: "numeric" }}
/>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.