notification-feed component
Drop-in semantic component. See examples, sizes, variants, and source.
A scrollable feed of notification-item rows wrapped in a
notification-feed container with optional header, tabs, and footer.
Each item has a type modifier (message, file,
alert, success) and state modifiers like
unread and dismissible. Dynamic mark-as-read,
dismiss, and filter behavior is powered by notification-feed.js.
Notification Feed System
A comprehensive notification system with support for different notification types, states, and interactive features like mark as read, dismiss, and action buttons.
Complete Notification Feed
All
Unread
Messages
Files
Sarah Chen sent you a message2 min ago
Hey! Just wanted to follow up on our discussion about the new design system implementation...
James Brown shared a file with you8 min ago
Here's the updated project documentation
Project_Documentation_v2.pdf
2.4 MB
Security Alert 1 hour ago
We noticed a new sign-in to your account from Chrome on Windows
Yes, that was me
No, secure my account
Deployment Successful 2 hours ago
Your application has been successfully deployed to production
Version 2.1.0
Environment: Production
<div class="notification-feed">
<div class="header">
<div class="title">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
Notifications
<span class="badge">3</span>
</div>
<div class="actions">
<span class="action" data-action="mark-all-read">Mark all as read</span>
</div>
</div>
<div class="tabs">
<div class="tab active" data-tab="all">All</div>
<div class="tab" data-tab="unread">Unread</div>
<div class="tab" data-tab="message">Messages</div>
<div class="tab" data-tab="file">Files</div>
</div>
<div class="list">
<div class="notification-item message unread dismissible">
<div class="avatar-container">
<div class="avatar">
<img src="https://i.pravatar.cc/150?u=sarah" alt="Sarah Chen" />
</div>
<span class="status online"></span>
</div>
<div class="content">
<div class="title">
<span><strong>Sarah Chen</strong> sent you a message</span>
<span class="timestamp">2 min ago</span>
</div>
<div class="description">
Hey! Just wanted to follow up on our discussion about the new design system
implementation...
</div>
<div class="meta">
<span class="meta-item">
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
Direct Message
</span>
</div>
</div>
<button class="dismiss" style="opacity: 0">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="notification-item file unread">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span><strong>James Brown</strong> shared a file with you</span>
<span class="timestamp">8 min ago</span>
</div>
<div class="description">Here's the updated project documentation</div>
<div class="file-preview">
<div class="file-icon">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<div class="file-info">
<div class="file-name">Project_Documentation_v2.pdf</div>
<div class="file-size">2.4 MB</div>
</div>
</div>
</div>
</div>
<div class="notification-item alert">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span><strong>Security Alert</strong></span>
<span class="timestamp">1 hour ago</span>
</div>
<div class="description">
We noticed a new sign-in to your account from Chrome on Windows
</div>
<div class="actions">
<button class="action-btn primary" data-action="approve">Yes, that was me</button>
<button class="action-btn secondary" data-action="deny">No, secure my account</button>
</div>
</div>
</div>
<div class="notification-item success">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span><strong>Deployment Successful</strong></span>
<span class="timestamp">2 hours ago</span>
</div>
<div class="description">Your application has been successfully deployed to production</div>
<div class="meta">
<span class="meta-item">Version 2.1.0</span>
<span class="meta-item">Environment: Production</span>
</div>
</div>
</div>
</div>
<div class="footer">
<span class="footer-link">Manage Notifications</span>
</div>
</div>
Compact Notification Feed
Alex Johnson mentioned you in a comment5m
Emma Wilson uploaded 3 files12m
Task completed successfully
1h
<div class="notification-feed compact">
<div class="header">
<div class="title">
Recent Activity
<span class="badge">2</span>
</div>
</div>
<div class="list">
<div class="notification-item message unread">
<div class="avatar-container">
<div class="avatar">
<img src="https://i.pravatar.cc/150?u=alex" alt="Alex" />
</div>
<span class="status online"></span>
</div>
<div class="content">
<div class="title">
<span><strong>Alex Johnson</strong> mentioned you in a comment</span>
<span class="timestamp">5m</span>
</div>
</div>
</div>
<div class="notification-item file unread">
<div class="avatar-container">
<div class="avatar">
<img src="https://i.pravatar.cc/150?u=emma" alt="Emma" />
</div>
</div>
<div class="content">
<div class="title">
<span><strong>Emma Wilson</strong> uploaded 3 files</span>
<span class="timestamp">12m</span>
</div>
</div>
</div>
<div class="notification-item success">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span>Task completed successfully</span>
<span class="timestamp">1h</span>
</div>
</div>
</div>
</div>
</div>
Empty State
No notifications
You're all caught up!
<div class="notification-feed">
<div class="header">
<div class="title">Notifications</div>
</div>
<div class="list">
<div class="empty">
<svg class="empty-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
<div class="empty-title">No notifications</div>
<div class="empty-description">You're all caught up!</div>
</div>
</div>
</div>
Notification Types & Variations
Message Notifications
John Doe sent you a message5 min ago
Hey, are we still on for the meeting tomorrow?
Jane Smith mentioned you in a commentJust now
@you Great work on the latest feature!
<div class="space-y-3">
<div class="notification-item message">
<div class="avatar-container">
<div class="avatar">
<img src="https://i.pravatar.cc/150?u=user1" alt="User" />
</div>
<span class="status online"></span>
</div>
<div class="content">
<div class="title">
<span><strong>John Doe</strong> sent you a message</span>
<span class="timestamp">5 min ago</span>
</div>
<div class="description">Hey, are we still on for the meeting tomorrow?</div>
</div>
</div>
<div class="notification-item message unread">
<div class="avatar-container">
<div class="avatar">
<img src="https://i.pravatar.cc/150?u=user2" alt="User" />
</div>
<span class="status online"></span>
</div>
<div class="content">
<div class="title">
<span><strong>Jane Smith</strong> mentioned you in a comment</span>
<span class="timestamp">Just now</span>
</div>
<div class="description">@you Great work on the latest feature!</div>
</div>
</div>
</div>
File Notifications
Mike Johnson shared 3 files2 hours ago
Design_Assets.zip
24.5 MB
<div class="space-y-3">
<div class="notification-item file unread">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span><strong>Mike Johnson</strong> shared 3 files</span>
<span class="timestamp">2 hours ago</span>
</div>
<div class="file-preview">
<div class="file-icon">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 7h10M7 12h10m-7 5h4"
/>
</svg>
</div>
<div class="file-info">
<div class="file-name">Design_Assets.zip</div>
<div class="file-size">24.5 MB</div>
</div>
</div>
</div>
</div>
</div>
Alert Notifications with Actions
Security Alert 10 min ago
New login detected from iPhone 14 Pro in San Francisco, CA
Yes, it's me
Not me
System Update Available 1 day ago
Version 2.5.0 is ready to install
Update Now
Remind Me Later
<div class="space-y-3">
<div class="notification-item alert unread">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span><strong>Security Alert</strong></span>
<span class="timestamp">10 min ago</span>
</div>
<div class="description">New login detected from iPhone 14 Pro in San Francisco, CA</div>
<div class="actions">
<button class="action-btn primary" data-action="approve">Yes, it's me</button>
<button class="action-btn secondary" data-action="deny">Not me</button>
</div>
</div>
</div>
<div class="notification-item alert">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span><strong>System Update Available</strong></span>
<span class="timestamp">1 day ago</span>
</div>
<div class="description">Version 2.5.0 is ready to install</div>
<div class="actions">
<button class="action-btn primary" data-action="update">Update Now</button>
<button class="action-btn secondary" data-action="later">Remind Me Later</button>
</div>
</div>
</div>
</div>
Success Notifications
Export Complete Just now
Your data has been exported successfully
Report_2024.csv (2.3 MB)
Deployment Successful 15 min ago
Production deployment completed without errors
v2.1.0
3 services updated
Duration: 2m 34s
<div class="space-y-3">
<div class="notification-item success">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span><strong>Export Complete</strong></span>
<span class="timestamp">Just now</span>
</div>
<div class="description">Your data has been exported successfully</div>
<div class="meta">
<span class="meta-item">Report_2024.csv (2.3 MB)</span>
</div>
</div>
</div>
<div class="notification-item success">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span><strong>Deployment Successful</strong></span>
<span class="timestamp">15 min ago</span>
</div>
<div class="description">Production deployment completed without errors</div>
<div class="meta">
<span class="meta-item">v2.1.0</span>
<span class="meta-item">3 services updated</span>
<span class="meta-item">Duration: 2m 34s</span>
</div>
</div>
</div>
</div>
Dismissible Notifications
Team Announcement 30 min ago
All-hands meeting scheduled for Friday at 2 PM
Reminder 2 hours ago
Your subscription will expire in 7 days
<div class="space-y-3">
<div class="notification-item message dismissible unread">
<div class="avatar-container">
<div class="avatar">
<img src="https://i.pravatar.cc/150?u=user3" alt="User" />
</div>
</div>
<div class="content">
<div class="title">
<span><strong>Team Announcement</strong></span>
<span class="timestamp">30 min ago</span>
</div>
<div class="description">All-hands meeting scheduled for Friday at 2 PM</div>
</div>
<button class="dismiss" style="opacity: 0">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div class="notification-item alert dismissible">
<div class="avatar-container">
<div class="avatar">
<span class="avatar-icon">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
</span>
</div>
</div>
<div class="content">
<div class="title">
<span><strong>Reminder</strong></span>
<span class="timestamp">2 hours ago</span>
</div>
<div class="description">Your subscription will expire in 7 days</div>
</div>
<button class="dismiss" style="opacity: 0">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
Class API Reference
Type
Class
Usage
Notes
Base
notification-feedOuter container with border, header, list, and footer slots
Hosts .header, .tabs, .list, .footer
notification-itemIndividual notification row with avatar + content
Always required on each item
listScrollable container that holds the items
Caps at max-h-96
tabs / tabFilter tab strip; mark current tab with active
Optional
Sizes
(default) Standard density with full descriptions
No size class needed
compactTighter rows with smaller avatar; descriptions hidden
Modifier on notification-feed
Item Types
messageBlue avatar — direct messages, mentions
Modifier on notification-item
filePurple avatar — file shares, uploads
Pair with .file-preview child
alertRed avatar — security, system alerts
Often paired with .actions children
successGreen avatar — confirmations, completions
Modifier on notification-item
States
unreadBlue tint background + dot indicator
Removed by markAsRead
dismissibleReserves right padding for the close button
Pair with a .dismiss button child
newSlide-down entrance animation
Auto-applied by JS on insert
Item Children
avatar-container / avatarWrapper for the leading avatar image or icon
Add .status.online for presence dot
contentMain column with title, description, meta, actions
Required
title / description / timestampStandard text rows inside .content
Description is hidden in compact
meta / meta-itemInline metadata row beneath the description
Optional
file-previewInline file card with name + size
Use with file type
actions / action-btnInline action buttons; primary or secondary
Use with alert type
Empty / Footer
empty + empty-icon + empty-titlePlaceholder shown when the list has no items
Place inside .list
footer / footer-linkBottom action bar with a manage / view-all link
Optional