Components
Loading preview...
The ProjectProgressCard is a visually engaging dashboard component built entirely with Shadcn UI and Framer Motion. It provides a clear overview of a project’s status, showing key details such as the project title, manager, due date, and a list of milestones. Each milestone is displayed in a vertical timeline with a progress line, with completed milestones marked distinctly from pending ones. The card includes smooth animations for loading and interactions, making it feel dynamic and responsive. A “Next Step” button at the bottom allows users to take immediate action, making this component ideal for project management dashboards or workflow tracking. Its clean layout, vertical progress visualization, and interactive design help users quickly understand project progress at a glance.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/project-progress-card"use client";
import React from "react";
import { ProjectProgressCard } from "@/components/ui/project-progress-card";
const ProjectProgressCardDemo = () => {
const milestones = [
{
icon: "",
title: "Wireframe Design",
description: "Initial sketches and design structure completed.",
completed: true,
},
{
icon: "",
title: "Frontend Development",
description: "Integrating layouts and responsive components.",
completed: true,
},
{
icon: "",
title: "Backend Setup",
description: "Database and API routes configuration in progress.",
completed: false,
},
{
icon: "",
title: "Final QA & Launch",
description: "Testing, debugging, and deployment preparation.",
completed: false,
},
];
return (
<div className="flex min-h-screen items-center justify-center bg-background p-6">
<ProjectProgressCard
title="Ruvy Project Development"
projectManager="Srinath G"
dueDate="25 Oct 2025"
milestones={milestones}
onNextStep={() => alert("Next step clicked!")}
/>
</div>
);
};
export default ProjectProgressCardDemo;