Customizing Notification Control

Since you own the source code, you can customize everything: colors, layout, icons, behavior, and more.

Changing Colors

Styled Variant (Inline Styles)

Open notification-control.tsx and find the colors object:

const colors = {
  background: isDarkTheme ? "oklch(0.205 0 0)" : "#ffffff",
  border: isDarkTheme ? "oklch(1 0 0 / 10%)" : "#e5e7eb",
  text: isDarkTheme ? "oklch(0.985 0 0)" : "#0f172a",
  textMuted: isDarkTheme ? "oklch(0.708 0 0)" : "#64748b",
  separator: isDarkTheme ? "oklch(1 0 0 / 10%)" : "#f1f5f9",
};

Change to your brand colors:

const colors = {
  background: isDarkTheme ? "#1a1a2e" : "#f8f9fa",
  border: isDarkTheme ? "#3a3a5c" : "#dee2e6",
  text: isDarkTheme ? "#eaeaea" : "#212529",
  textMuted: isDarkTheme ? "#a0a0c0" : "#6c757d",
  separator: isDarkTheme ? "#2a2a4c" : "#e9ecef",
};

Tailwind Variant

Change classes directly in files:

// Before
<div className="bg-white dark:bg-gray-900">
// After
<div className="bg-slate-50 dark:bg-slate-950">

Modifying Layout

In notification-control.tsx:

width: "500px",  // Default is ~400px

Change Max Height

<div style={{ maxHeight: "600px" }}>  {/* Default is 500px */}

Add Custom Header

{/* Add above notification list */}
<div style={{ padding: "12px", borderBottom: `1px solid ${colors.separator}` }}>
  <h3>Notifications</h3>
</div>

Customizing Notification Items

Change Avatar Size

In notification-item.tsx:

<div className="w-10 h-10">  {/* Default is w-8 h-8 */}
  <img src={avatar} />
</div>

Remove Unread Indicator

{/* Delete or comment out: */}
{!notification.isRead && <div className="unread-dot" />}

Add Timestamp

<span className="text-xs text-gray-500">
  {new Date(notification.createdAt).toLocaleDateString()}
</span>

Changing Icons

Change Icon Colors

In notification-icon.tsx, modify getIconConfig:

"comment-reply": {
  Icon: MessageSquare,
  colorClass: "text-purple-600 dark:text-purple-400",  // Changed from blue
  bgClass: "bg-purple-100 dark:bg-purple-500/15",
},

Use Different Icons

Replace lucide-react icons:

import { CustomIcon } from '@/components/icons';

"comment-reply": {
  Icon: CustomIcon,
  colorClass: "text-blue-600",
  bgClass: "bg-blue-100",
},

Customizing Time Format

Open utils/notification-utils.ts:

export function formatRelativeTime(dateInput: string | Date): string {
  const diffInSeconds = Math.floor((Date.now() - new Date(dateInput).getTime()) / 1000);

  // Show exact time for very recent notifications
  if (diffInSeconds < 60) {
    return new Date(dateInput).toLocaleTimeString();  // "2:34 PM"
  }

  if (diffInSeconds < 3600) {
    return `${Math.floor(diffInSeconds / 60)} minutes ago`;
  }

  // ... rest of function
}

Adding Features

Add Sound on New Notification

useEffect(() => {
  if (unreadCount > previousUnreadCount) {
    const audio = new Audio('/notification-sound.mp3');
    audio.play();
  }
}, [unreadCount]);

Show Count in Page Title

useEffect(() => {
  document.title = unreadCount > 0 ? `(${unreadCount}) My App` : 'My App';
}, [unreadCount]);

Force Fixed Position

In notification-control.tsx:

position: "fixed" as const,
top: "60px",   // Below your header
right: "20px",

Align to Left

left: "0px",
right: "auto",

Animation Customization

The component uses framer-motion. Modify animations in notification-control.tsx:

<motion.div
  initial={{ opacity: 0, y: -10 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -10 }}
  transition={{ duration: 0.3 }}   // Adjust duration
>

Slide in from right instead:

initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 100 }}

Empty State

Open notification-list.tsx:

{notifications.length === 0 && (
  <div className="empty-state">
    <Bell size={48} />
    <p>You're all caught up! 🎉</p>
  </div>
)}

Common Customizations

Change badge color

In your trigger component:

<span className="bg-purple-500">  {/* was bg-red-500 */}
  {unreadCount}
</span>

Add notification categories

In notification-control.tsx, add tabs or filters:

const [filter, setFilter] = useState('all');

<div className="tabs">
  <button onClick={() => setFilter('all')}>All</button>
  <button onClick={() => setFilter('mentions')}>Mentions</button>
</div>

Add confirmation before mark all read

const handleMarkAllRead = () => {
  if (window.confirm('Mark all as read?')) {
    // existing logic
  }
};

Next Steps

Integration Examples

See real-world examples

Props & API

Component props reference

Installation

Installation guide

Overview

Back to overview

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Customization Guide

Customizing Notification Control

Changing Colors

Styled Variant (Inline Styles)

Tailwind Variant

Modifying Layout

Change Max Height

Add Custom Header

Customizing Notification Items

Change Avatar Size

Remove Unread Indicator

Add Timestamp

Changing Icons

Change Icon Colors

Use Different Icons

Customizing Time Format

Adding Features

Add Sound on New Notification

Show Count in Page Title

Force Fixed Position

Align to Left

Animation Customization

Empty State

Common Customizations

Next Steps

Integration Examples

Props & API

Installation

Overview

​Customizing Notification Control

​Changing Colors

​Styled Variant (Inline Styles)

​Tailwind Variant

​Modifying Layout

​Change Dropdown Width

​Change Max Height

​Add Custom Header

​Customizing Notification Items

​Change Avatar Size

​Remove Unread Indicator

​Add Timestamp

​Changing Icons

​Change Icon Colors

​Use Different Icons

​Customizing Time Format

​Adding Features

​Add Sound on New Notification

​Show Count in Page Title

​Dropdown Positioning

​Force Fixed Position

​Align to Left

​Animation Customization

​Empty State

​Common Customizations

​Next Steps

Integration Examples

Props & API

Installation

Overview

Customizing Notification Control

Changing Colors

Styled Variant (Inline Styles)

Tailwind Variant

Modifying Layout

Change Dropdown Width

Change Max Height

Add Custom Header

Customizing Notification Items

Change Avatar Size

Remove Unread Indicator

Add Timestamp

Changing Icons

Change Icon Colors

Use Different Icons

Customizing Time Format

Adding Features

Add Sound on New Notification

Show Count in Page Title

Dropdown Positioning

Force Fixed Position

Align to Left

Animation Customization

Empty State

Common Customizations

Next Steps