- MMarta te ha mencionado en «Rediseño»hace 2 min
- ITu informe semanal está listohace 1 h
- JJavier ha aceptado la invitaciónayer
- PPago de octubre recibidohace 2 días
Notification center dropdown
The bell opens a panel with tabs, unread items and a button that marks everything as read.
Settings
Code
<div class="uv-onc"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-label="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9.5a6 6 0 0 1 12 0c0 4.5 2 6 2 6H4s2-1.5 2-6M10 19a2 2 0 0 0 4 0"/></svg><b class="bd">2</b></button><div class="scr"></div><div class="pn" role="dialog" aria-label="Notifications"><header><b>Notifications</b><button type="button" class="rd">Mark all as read</button></header><div class="tb" role="tablist"><button type="button" role="tab" aria-selected="true">All</button><button type="button" role="tab" aria-selected="false">Mentions</button></div><ul><li class="un me"><span class="av" style="--c:#ec4899">M</span><span class="tx"><span>Marta mentioned you in “Redesign”</span><small>2 min ago</small></span><i aria-label="Unread"></i></li><li class="un"><span class="av" style="--c:#3b82f6">I</span><span class="tx"><span>Your weekly report is ready</span><small>1 h ago</small></span><i aria-label="Unread"></i></li><li class=""><span class="av" style="--c:#10b981">J</span><span class="tx"><span>Javier accepted the invitation</span><small>yesterday</small></span><i aria-label="Unread"></i></li><li class=""><span class="av" style="--c:#f59e0b">P</span><span class="tx"><span>October payment received</span><small>2 days ago</small></span><i aria-label="Unread"></i></li></ul></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Every product with activity needs a place to catch up. Tapping the bell grows a panel from its corner with a title, a mark all as read action, tabs for all and mentions, and a list of notifications with colored avatars, relative times and a blue dot on unread items. Marking all as read clears the dots one after another and pops the badge away.
The Mentions tab filters the list without reloading, and Escape or a click outside closes the panel. Feed the list from your API and keep each notification to one line plus the time.