A responsive, accessible, and fully themable Timeline / Roadmap component built with ShadCN UI and Tailwind CSS. Supports vertical and horizontal layouts, animated progress, dark/light modes, and rich content like icons, dates, and status badges. Ideal for SaaS roadmaps, onboarding flows, or project timelines. Cleanly structured and highly customizable via props.
"use client"
import React from "react"
import { Timeline } from "@/components/ui/modern-timeline"
import { TimelineItem } from "@/components/ui/timeline"
const timelineItems: TimelineItem[] = [
{
title: "Company Founded",
description: "Started our journey with a simple idea: to revolutionize how teams collaborate. Founded by our CEO with a vision to build the ultimate productivity platform for modern businesses.",
date: "2024-01-15",
category: "Foundation",
image: "https://cdn.21st.dev/assets/mirror/d8/d8e0b55ba06cb79571a9d9eec1fe7c784fe0a180438410700bbc6f24a7ff8c76.jpg",
status: "completed"
},
{
title: "MVP Launch & First Customers",
description: "Successfully launched our minimum viable product after 6 months of development. Onboarded our first 100 customers and achieved product-market fit with 95% user satisfaction.",
date: "2024-03-20",
category: "Product",
image: "https://cdn.21st.dev/assets/mirror/d8/d8e0b55ba06cb79571a9d9eec1fe7c784fe0a180438410700bbc6f24a7ff8c76.jpg",
status: "completed"
},
{
title: "Series A Funding",
description: "Raised $5M in Series A funding led by top-tier VCs. This milestone enables us to scale our team, enhance our product, and expand into new markets globally.",
date: "2024-06-10",
category: "Funding",
image: "https://cdn.21st.dev/assets/mirror/ad/adf63af8a991aa82fc7bc0b822f223842c22d4b6386fbd927575f34f5eb4abef.jpg",
status: "completed"
},
{
title: "Global Team Expansion",
description: "Expanded our team to 50+ talented individuals across 12 countries. Built diverse engineering, design, and sales teams to support our growing customer base and product development.",
date: "2024-09-15",
category: "Team",
image: "https://cdn.21st.dev/assets/mirror/96/966f29c63764a4003893329a1fdeb568fdbe0185949f0be799f4d376e6bafb85.jpg",
status: "completed"
},
{
title: "Enterprise Platform Launch",
description: "Launching our enterprise-grade platform with advanced security, SSO integration, and enterprise-level support. Currently in beta with 25+ Fortune 500 companies testing the platform.",
date: "2024-12-01",
category: "Product",
image: "https://cdn.21st.dev/assets/mirror/3d/3d64b9d7add7cb63c450083d08cdd3124e5390daf2ede9bd75f84670266b35de.jpg",
status: "current"
},
{
title: "AI Integration & Automation",
description: "Implementing cutting-edge AI features including smart task automation, predictive analytics, and intelligent insights to help teams work more efficiently and make better decisions.",
date: "2025-03-01",
category: "Innovation",
image: "https://cdn.21st.dev/assets/mirror/b5/b5e0a51f3f066510ff95875091d4de806e305cccf601826efce880394443ab2c.jpg",
status: "upcoming"
},
{
title: "International Market Expansion",
description: "Expanding operations to European and Asian markets with localized products, dedicated support teams, and partnerships with regional technology leaders.",
date: "2025-06-01",
category: "Growth",
image: "https://cdn.21st.dev/assets/mirror/bb/bba7fe34f6367afb53bf99c6029fbfcfa0751b033c180c93d543c2dda2be6ea1.jpg",
status: "upcoming"
},
{
title: "IPO Preparation",
description: "Begin preparations for initial public offering with financial audits, compliance frameworks, and strategic partnerships to position the company for public markets.",
date: "2025-10-01",
category: "Milestone",
image: "https://cdn.21st.dev/assets/mirror/b6/b6dda538feb3388f4b421016ee940a3e7d8e74dbdf973e9e3415b2e25bf89847.jpg",
status: "upcoming"
}
]
export default function TimelineDemo() {
return (
<div className="min-h-screen bg-background">
<header className="text-center py-16 px-6">
<h1 className="text-4xl sm:text-5xl font-bold text-foreground mb-4">
Our Journey
</h1>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
From a simple idea to a global platform serving thousands of teams worldwide.
Follow our story of innovation, growth, and the amazing people who made it possible.
</p>
</header>
<main>
<Timeline items={timelineItems} />
</main>
<footer className="text-center py-12 px-6 border-t bg-muted/20">
<p className="text-muted-foreground">
Ready to be part of our next chapter? <span className="text-primary font-medium">Join our team</span>
</p>
</footer>
</div>
)
}