# Live Activity Dock – Dock Navigation with Progress Rings and Expanding Live Cards

> Live Activity Dock for React and Tailwind CSS (shadcn/ui): dock tiles carry live state — progress ring, rolling badge, running dot, error shake — and grow a live card out of the tile with title, percent, time left and actions. It is built to show how far a task has got without leaving the page. The icon flies into the card, other tiles dim, Escape closes it. Controlled or uncontrolled expandedId, animated progress and badge updates. Keyboard, aria, reduced motion, light and dark. Use it for exports, uploads, sync and builds. The included demo scripts an export, a badge change and a failed upload with retry, and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Dock, Navigation, Progress, Notification, Menu
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/live-activity-dock

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/live-activity-dock?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 · More like this: https://21st.dev/community/components/s/dock.md