Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/avatar-notificationsimport AvatarNotifications from "@/components/ui/avatar-notifications";
export default function DemoOne() {
return <AvatarNotifications />;
}