# TimelineUpload

> The Timeline Upload component is a versatile and interactive file and folder upload interface built with Shadcn UI and Lucide icons. Each uploaded file or folder is displayed as an event on a vertical timeline, showing the file name, upload progress, and status in real time. Ongoing uploads are represented with a progress bar and a blue dot, while completed uploads automatically turn into a green check mark. Users can easily remove any file using the trash icon next to the status text. The component is fully configurable, supporting callback functions such as onRemove, making it highly reusable and ideal for modern web applications that require intuitive, user-friendly file management.

- 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
- Live preview: https://21st.dev/@ruixen.ui/components/timeline-upload

## Install

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