# Avatar Notifications

> This Avatar Notifications with Blinking Indicator component is a refined and modern way to handle user alerts. Instead of relying on plain badges, it introduces a subtle status dot at the top-right corner of the notification icon. When there are new messages, the dot blinks green to draw attention, and when there are none, it switches to a calm static gray state. The popover is neatly centered below the icon, keeping the interaction natural and balanced. Each notification is presented with an avatar, sender name, message, and timestamp, making it easy to recognize at a glance.

- 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/avatar-notifications

## Install

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