Roadmap Card

Cards 568

About

The RoadmapCard component is a minimal, animated product roadmap built with shadcn/ui and Framer Motion. It displays key project milestones in a clean timeline format, supporting light and dark modes out-of-the-box. Features: 📅 Display quarterly milestones with title, description, and status ✨ Animated timeline dots with fade and slide-in effects 🎨 Minimal, modern design with hover scale effect on dots 🌗 Fully theme-aware (light/dark mode compatible) 🔹 Reusable and dynamic via items prop Ideal for showcasing product plans, feature releases, or project timelines in a visually appealing and interactive way.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Roadmap Card to your project and fits it to your theme.

Code

How Roadmap Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { RoadmapCard } from "@/components/ui/roadmap-card";

export default function DemoOne() {
  return <div>  <RoadmapCard
        items={[
          {
            quarter: "Q1 2023",
            title: "Core Platform",
            description: "Basic functionality and user management",
            status: "done",
          },
          {
            quarter: "Q2 2023",
            title: "Analytics",
            description: "Reporting and data visualization",
            status: "in-progress",
          },
          {
            quarter: "Q3 2023",
            title: "Integrations",
            description: "Third-party app connections",
            status: "upcoming",
          },
          {
            quarter: "Q4 2023",
            title: "AI Features",
            description: "Smart automation and predictions",
            status: "upcoming",
          },
        ]}
      />
    </div>;
}