Anatomy

The component is built in three stacked zones inside a rounded card. The toolbar at the top shows the title, a live unread count badge, and a 'mark all read' button that only appears when there are unread items. Below it, a scrollable pill row lets the user switch between All, Unread, and the five type filters. The list takes the remaining vertical space with a max-height and overflow-y:auto. Each row has a 36px avatar (initials or type icon), title + message + timestamp, and one or two icon buttons. An absolute-positioned dot on the avatar indicates unread status.

How it works

The filtered list is a derived value computed synchronously from items state and the active filter, no effect needed. When a user deletes an item, the state update removes it from the array immediately; AnimatePresence detects the key leaving the DOM and plays the exit animation (opacity 0, height 0) before unmounting. The layout prop on each motion.div tells Framer Motion to animate the remaining siblings into their new positions so the list closes the gap smoothly. Mark-as-read is a simple map over the array setting isRead:true, which also collapses the unread dot and badge without any animation overhead.

How to build it in React

1. Model your notifications and set up state

   Define an InboxNotification interface with id, type, title, message, timestamp, isRead, and optional sender fields. Store the list in useState. Derive the filtered list and unread count synchronously from that state, no useEffect required.

   type NotificationType = "message" | "alert" | "mention" | "invite" | "system";
   interface InboxNotification {
     id: string;
     type: NotificationType;
     title: string;
     message: string;
     timestamp: string;
     isRead: boolean;
     sender?: string;
     senderInitials?: string;
   }
   const [items, setItems] = useState<InboxNotification[]>(initialNotifications);
   const filtered = items.filter(item =>
     filter === "all" ? true : filter === "unread" ? !item.isRead : item.type === filter
   );

2. Build the filter pill row

   Map over a fixed array of filter keys and render a button for each. The active pill gets an accent border and background via color-mix; inactive pills are transparent with a muted border. Set overflow-x:auto and white-space:nowrap on the container so it scrolls on narrow screens instead of wrapping.

   {(["all", "unread", "message", "alert", "mention", "invite", "system"] as FilterType[]).map(f => (
     <button
       key={f}
       onClick={() => setFilter(f)}
       style={{
         border: filter === f ? "1px solid var(--color-accent)" : "1px solid var(--color-border)",
         background: filter === f ? "color-mix(in srgb, var(--color-accent) 10%, transparent)" : "transparent",
         color: filter === f ? "var(--color-accent)" : "var(--color-foreground-muted)",
       }}
     >
       {filterLabels[f]}
     </button>
   ))}

3. Animate the list with AnimatePresence + layout

   Wrap the mapped list in AnimatePresence with initial={false} so existing items don't animate on mount. Each motion.div needs a stable key (the notification id), the layout prop, and initial/animate/exit variants that drive opacity and height. The exit to height:0 creates the collapsing effect when items are deleted or filtered out.

   <AnimatePresence initial={false}>
     {filtered.map(notif => (
       <motion.div
         key={notif.id}
         layout
         initial={{ opacity: 0, height: 0 }}
         animate={{ opacity: 1, height: "auto" }}
         exit={{ opacity: 0, height: 0 }}
         transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
         style={{ overflow: "hidden" }}
       >
         {/* row content */}
       </motion.div>
     ))}
   </AnimatePresence>

4. Wire mark-as-read and delete

   Both actions are pure state transformations wrapped in useCallback. Mark-as-read maps over the array and flips isRead; delete filters the item out. Because AnimatePresence watches the keyed list, the exit animation fires automatically on delete without any manual trigger.

   const markAsRead = useCallback((id: string) => {
     setItems(prev => prev.map(n => n.id === id ? { ...n, isRead: true } : n));
   }, []);
   
   const deleteNotification = useCallback((id: string) => {
     setItems(prev => prev.filter(n => n.id !== id));
   }, []);

When to use it

This component fits anywhere a user needs to triage a mixed stream of events: SaaS dashboards, admin panels, developer tools, internal apps. The filter pills make it practical when there are multiple notification types that users want to isolate. Avoid it for single-type feeds (pure chat, pure alerts) where a simpler list without the pill overhead reads better. On the backend side, replace the useState array with a real-time subscription (WebSocket, SSE, or SWR polling) and the component slots in unchanged.

Used by

• Linear, Inbox-style notification center with type filters, unread counts, and keyboard-driven mark-as-done.
• GitHub, Notifications inbox with reason-based filters (mentions, reviews, CI) and bulk read/dismiss actions.
• Slack, Activity feed panel with per-type filtering and unread dot indicators on each entry.
• Vercel, Dashboard notification feed with deployment, team, and billing event types, each color-coded.

FAQ