Components
LaunchRoadmap
The LaunchRoadmap component beautifully visualizes the step-by-step process of bringing an idea to life — from concept to launch. Built using shadcn/ui and Tailwind CSS, it’s fully responsive and adapts seamlessly to light and dark modes. Each stage is presented in a clean, card-based layout with clear progress indicators, making it perfect for showcasing timelines, workflows, or milestone tracking in product dashboards and marketing pages.
Loading preview...
// app/demo/page.tsx
import LaunchRoadmap from "@/components/ui/launch-roadmap";
export default function DemoPage() {
const roadmapStages = [
{
id: "01",
title: "Research",
subtitle: "Understand your users",
description:
"Interview users and analyze competitors to define clear goals and insights that drive your concept.",
progress: 30,
duration: "~3 weeks",
},
{
id: "02",
title: "Design",
subtitle: "Shape your vision",
description:
"Create wireframes, mockups, and prototypes that align your product with real-world user needs.",
progress: 70,
duration: "~5 weeks",
},
{
id: "03",
title: "Launch",
subtitle: "Bring your product to market",
description:
"Plan your go-to-market strategy, marketing campaigns, and user onboarding to ensure a smooth debut.",
progress: 100,
duration: "Launch ready",
},
];
return (
<main className="min-h-screen bg-background text-foreground">
<LaunchRoadmap
title="Startup Growth Journey"
subtitle="A step-by-step process to turn your vision into reality."
buttonText="Start Your Journey"
stages={roadmapStages}
/>
</main>
);
}