Notification Center

Bell icon dropdown with notification list, unread badges, and actions.

Preview

Features

Bell icon trigger with unread count badge
6 notification types with unique icons and colors
Unread indicator dot and background highlight
Mark individual as read on click
Mark all as read action in header
Dismiss individual notifications
Relative timestamp formatting
Empty state with icon
Scrollable list with max height

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
notification-center.tsx	components/data/notification-center/notification-center.tsx
notification-list.tsx	components/data/notification-center/notification-list.tsx
notification-item.tsx	components/data/notification-center/notification-item.tsx
types.ts	components/data/notification-center/types.ts
index.ts	components/data/notification-center/index.ts

Utility Files

File	Path
format.ts	lib/format.ts
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add button popover

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. notification-center.tsx

notification-center.tsx

tsx

"use client";

import { BellRinging as Bell } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import {

2. notification-list.tsx

notification-list.tsx

tsx

"use client";

import { TrayArrowDown as Inbox } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import { NotificationItem } from "./notification-item";

3. notification-item.tsx

notification-item.tsx

tsx

"use client";

import type { ComponentType } from "react";
import type { IconProps } from "@phosphor-icons/react";
import {

4. types.ts

types.ts

tsx

export type NotificationType =
  | "comment"
  | "mention"
  | "invite"
  | "system"

5. index.ts

index.ts

tsx

export { NotificationCenter } from "./notification-center";
export { NotificationList } from "./notification-list";
export { NotificationItem } from "./notification-item";
export type {
  NotificationType,
  Notification,
  NotificationCenterProps,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

format.ts

tsx

export function formatDate(date: Date): string {
  return date.toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

export function formatRelativeTime(date: Date, now: Date = new Date()): string {
  const diff = now.getTime() - date.getTime();
  const minutes = Math.floor(diff / 60000);

  if (minutes < 1) return "Just now";
  if (minutes < 60) return `${minutes}m ago`;

  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;

  const days = Math.floor(hours / 24);
  if (days < 7) return `${days}d ago`;

  return formatDate(date);
}

export function formatPrice(amount: number, currency = "USD"): string {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency,
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
  }).format(amount);
}

export function formatNumber(num: number): string {
  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
  if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
  return num.toString();
}

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/header.tsx

tsx

import { useState } from "react";
import {
  NotificationCenter,
  type Notification,
} from "@/components/data/notification-center";

NotificationCenter Props

Prop	Type	Default
notifications	Notification[]	required
onMarkAsRead	(id: string) => void	-
onMarkAllAsRead	() => void	-
onDismiss	(id: string) => void	-
onNotificationClick	(notification: Notification) => void	-

Notification Types

Type	Icon	Color
comment	MessageSquare	Blue
mention	AtSign	Purple
invite	UserPlus	Emerald
system	Settings	Gray
billing	CreditCard	Amber
alert	AlertCircle	Red