# Roadmap

> This Timeline component is a responsive, animated timeline built with React, Framer Motion, and Tailwind CSS. It displays chronological events with dates, titles, optional descriptions, and icons. The component supports both desktop and mobile layouts, automatically adjusting its structure for each. Users can view an initial number of items and toggle to show or hide additional entries using a smooth "Show More/Less" animation. It offers customizable styles, animation settings, and button variants, making it ideal for showcasing project milestones, work history, or event sequences in a clean, interactive way.

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

## Install

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