# ProjectProgressCard

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/project-progress-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/project-progress-card?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt