# Live Notification Feed

> Live notification feed for React and Tailwind CSS (shadcn/ui): a notification center where every alert acts out its news as it lands. It is built to make updates feel alive and worth reading: instead of another row of text, a parcel slides to its next stop, a chat bubble types before it speaks, a sign-in code spins into place, a car creeps along its route and a gate sign flips to the new gate, so people understand what happened at a glance. Eight ready-made kinds cover payments with rolling digits, calendar invites with torn-off date pages and Accept or Decline, fitness goals with a ring that closes in a burst, deliveries, messages, verification codes with copy and expiry, rides and flight gate changes, each tinted with its own brand color. New items land on top with a bell swing and an unread count, hovering pauses the stream, clicking a card marks it read and replays its story, and cards can be dismissed, marked read or cleared. Pass your own items and append new ones to animate them in; autoplay is off by default and can loop a showcase stream for demos and landing pages. Theme tokens for light and dark, and a reduced-motion fallback that shows every card in its final state. Use it for app dashboards, landing page hero demos, product tours and status centers.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Notification, Notification Center, Inbox, Toast, Animation
- Live preview: https://21st.dev/@dhxwhy/components/live-notification-feed

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/live-notification-feed?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/notification.md