boardui

Notification Center

Component

Notification Center previewPreview
About

A tabbed notification inbox that groups mentions and system alerts, tracks unread/read state, and supports avatars, status icons, and inline reply/action buttons.

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

Code

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

Usage.tsx

"use client";

import { NotificationCenter } from "@/components/ui/notification-center";

const notifications = [
  {
    id: "mention-notes",
    category: "mentions",
    group: "Today",
    title: "Livia mentioned you",
    description: "Can you review the new empty state before we ship?",
    timestamp: "2m",
    unread: true,
    avatar: {
      src: "data:image/webp;base64,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",
      alt: "Livia Saris",
    },
    actions: [
      { id: "reply", label: "Reply", variant: "primary" },
      { id: "view", label: "View thread", variant: "secondary" },
    ],
  },
  {
    id: "backup-ready",
    category: "system",
    group: "Today",
    title: "Workspace backup is ready",
    description: "The latest backup finished successfully.",
    timestamp: "18m",
    unread: true,
    status: "success",
  },
];

export default function NotificationCenterDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <NotificationCenter
        notifications={notifications}
        onAction={(notificationId, actionId) => {
          console.log(notificationId, actionId);
        }}
      />
    </div>
  );
}

Dependencies

More by boardui

View all
  • Social Button

    Social Button

  • Spinner

    Spinner

  • Dropdown

    Dropdown

  • Icon Button

    Icon Button

  • Chip

    Chip

Explore more

Notification components247