Avatar Notifications Demo

Installation

Props

Prop	Type	Default	Description
`items`	`NotificationItem[]`	`defaultNotifications`	Array of notification items

NotificationItem Interface

interface NotificationItem {
  id: string;
  user: string;
  avatarUrl?: string;
  message: string;
  time: string;
}

Features

User Avatars: Display user profile pictures or initials
Animated Status: Blinking green dot when notifications are present
Clear All: Button to clear all notifications at once
Fallback Avatars: Shows user initials when no avatar URL provided
User Messages: Display user names and their messages
Timestamps: Show when each notification occurred
Responsive Layout: Clean layout that works on different screen sizes

Usage

import AvatarNotifications from "@/components/ui/avatar-notifications";
 
export default function Example() {
  const notifications = [
    {
      id: "1",
      user: "Alice",
      avatarUrl: "https://i.pravatar.cc/40?img=1",
      message: "Sent you a message.",
      time: "2m ago",
    },
    {
      id: "2",
      user: "Bob",
      avatarUrl: "https://i.pravatar.cc/40?img=2",
      message: "Commented on your post.",
      time: "10m ago",
    },
    {
      id: "3",
      user: "Charlie",
      message: "Started following you.",
      time: "30m ago",
    },
  ];
 
  return (
    <div className="p-6">
      {/* Default avatar notifications */}
      <AvatarNotifications />
 
      {/* Custom notifications */}
      <AvatarNotifications items={notifications} />
    </div>
  );
}