Skip to content
viberdy.dev

Notification Center

A read/unread notification list with filtering, bulk actions, and a real empty state.

Prominimaleditorial
Category
Components
Added
2026-09-01
Deps
1
Updated
2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Sign inUnlock Pro
Preview

Notifications

3

Props

Show All/Unread tabs
Requires lucide-react
"use client";

import { useMemo, useState } from "react";
import { AlertCircle, Check, MessageSquare, Star, UserPlus } from "lucide-react";

type Notif = {
  id: string;
  icon: "message" | "star" | "alert" | "invite";
  title: string;
  body: string;
  time: string;
  read: boolean;
};

const INITIAL: Notif[] = [
  { id: "1", icon: "message", title: "New comment", body: "Priya replied to your review on Aurora.", time: "3m", read: false },
  { id: "2", icon: "star", title: "Milestone hit", body: "Aurora Redesign passed 1,000 stars.", time: "1h", read: false },
  { id: "3", icon: "invite", title: "Team invite", body: "You were added to the Northwind workspace.", time: "5h", read: false },

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this component

Most notification list mockups render a static feed and stop there — no way to acknowledge an item, no unread count, and critically, no accounting for what happens once the list is empty. This component treats read state as real per-item data (never reverting read back to unread, matching how every shipped notification UI behaves) and derives the unread badge and the Unread-tab contents from that same array rather than tracking a separate counter that can drift out of sync. The detail worth calling out: the empty state is not a generic 'nothing here' placeholder, it only renders when the FILTERED list is empty, so switching to the Unread tab after clearing everything shows a distinct 'all caught up' message instead of a blank panel that looks broken. Reach for this pattern whenever notifications are read from client state or a lightweight API; for anything with push delivery or cross-tab sync, the read/unread mutations here are exactly where you'd wire in a mutation to your backend instead of local setState.

Curator’s note

Read state only ever moves one direction (unread to read) on click — there's no click-to-unread, matching how Gmail, Slack, and every other real inbox behaves.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
NewPro

Glass Refraction Panel

components

Glass rather than frost: saturated backdrop, bent edges and a tracking specular rim.

glassbackdrop-filterpanel

Draggable Sortable List

patterns

A drag-handle-driven list that reorders with a smooth layout swap.

dragsortablelist
Featured
New

Link Peek Preview

patterns

An index list that floats a velocity-tilted preview card beside the pointer.

hoverpreviewlist