Team Notifications

Component 3

About

A team notification center card that lists mentions, AI events, file shares and system alerts with type and read/unread filtering, mark-as-read, delete and empty states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Team Notifications to your project and fits it to your theme.

Code

How Team Notifications is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import type { ComponentProps } from "react";
import TeamNotifications from "@/components/ui/team-notifications";

export default function TeamNotificationsDemo() {
  const now = 1_763_460_000_000;
  const exampleProps = (() => {
    return {
      notifications: [
        {
          id: "notif-1",
          type: "mention" as const,
          title: "You were mentioned",
          message: "Mike Chen mentioned you in a chat message",
          user: {
            id: "user-2",
            name: "Mike Chen",
            avatar: "https://cdn.21st.dev/assets/mirror/7f/7f56cf12e535e4ebbd06892209ef48bafd662c15cebbf96a21bb5c0c063192fc.svg",
          },
          read: false,
          timestamp: new Date(now - 10 * 60 * 1000),
          link: "#chat",
        },
        {
          id: "notif-2",
          type: "ai_event" as const,
          title: "AI Session Completed",
          message:
            "Your AI session in Website Redesign project has finished processing",
          read: false,
          timestamp: new Date(now - 30 * 60 * 1000),
          link: "#ai-room",
        },
        {
          id: "notif-3",
          type: "file_shared" as const,
          title: "File Shared",
          message: "Sarah Johnson shared project-plan.pdf with you",
          user: {
            id: "user-1",
            name: "Sarah Johnson",
            avatar: "https://cdn.21st.dev/assets/mirror/f0/f03f6bda4d1485d552d668204306285ab5e5f7e420106f07d3c371e1de0742c0.svg",
          },
          read: true,
          timestamp: new Date(now - 2 * 60 * 60 * 1000),
          link: "#files",
        },
      ],
      unreadCount: 3,
      onMarkAsRead: async (notificationId: string) => {
        /* mark as read */
      },
      onMarkAllAsRead: async () => {
        /* mark all as read */
      },
      onDelete: async (notificationId: string) => {
        /* delete notification */
      },
    };
  })();

  return (
    <div className="mx-auto w-full max-w-2xl p-4">
      <TeamNotifications
        {...(exampleProps as unknown as ComponentProps<
          typeof TeamNotifications
        >)}
      />
    </div>
  );
}