Components
Loading preview...
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.
@beratberkay
npx shadcn@latest add https://21st.dev/r/beratberkayg/roadmap-cardimport { 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>;
}