# Roadmap Card

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

- Author: [beratberkay](https://21st.dev/@beratberkayg)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@beratberkayg/components/roadmap-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/beratberkayg/roadmap-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