notification alert inbox widget dashboard notification list unread badge alert feed inbox widget show recent notifications notification inbox panel alert list widget
Notification Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/notification-widget/base.json base.html
<div class="ws-notification-widget rounded-2xl border p-6 max-w-sm w-full"
style="
--ws-notification-widget-bg: oklch(0.99 0.005 75);
--ws-notification-widget-text: oklch(0.25 0.02 75);
--ws-notification-widget-text-soft: oklch(0.40 0.015 75);
--ws-notification-widget-text-muted: oklch(0.55 0.01 75);
--ws-notification-widget-border: oklch(0.90 0.01 75);
--ws-notification-widget-accent: oklch(0.55 0.15 250);
--ws-notification-widget-accent-soft: oklch(0.92 0.04 250);
--ws-notification-widget-danger: oklch(0.55 0.2 25);
--ws-notification-widget-warning: oklch(0.70 0.15 85);
--ws-notification-widget-success: oklch(0.55 0.15 155);
background: var(--ws-notification-widget-bg);
color: var(--ws-notification-widget-text);
border-color: var(--ws-notification-widget-border);
">
<header class="flex items-center justify-between mb-5">
<h2 class="text-lg font-semibold tracking-tight">Notifications</h2>
<span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold text-white"
style="background: var(--ws-notification-widget-danger);">3</span>
</header>
<ul class="flex flex-col gap-1" role="list">
<li class="flex items-start gap-3 rounded-xl px-3 py-3"
style="background: var(--ws-notification-widget-accent-soft);">
<span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
style="background: var(--ws-notification-widget-accent);"></span>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold leading-snug"
style="color: var(--ws-notification-widget-text);">New comment on your post</p>
<p class="mt-0.5 text-xs leading-relaxed"
style="color: var(--ws-notification-widget-text-soft);">Sarah left a comment on "Getting Started with Design Systems"</p>
</div>
<time class="shrink-0 text-xs tabular-nums"
style="color: var(--ws-notification-widget-text-muted);">2m ago</time>
</li>
<li class="flex items-start gap-3 rounded-xl px-3 py-3"
style="background: var(--ws-notification-widget-accent-soft);">
<span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
style="background: var(--ws-notification-widget-success);"></span>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold leading-snug"
style="color: var(--ws-notification-widget-text);">Deployment successful</p>
<p class="mt-0.5 text-xs leading-relaxed"
style="color: var(--ws-notification-widget-text-soft);">Production build v2.4.1 deployed to all regions</p>
</div>
<time class="shrink-0 text-xs tabular-nums"
style="color: var(--ws-notification-widget-text-muted);">15m ago</time>
</li>
<li class="flex items-start gap-3 rounded-xl px-3 py-3"
style="background: var(--ws-notification-widget-accent-soft);">
<span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
style="background: var(--ws-notification-widget-danger);"></span>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold leading-snug"
style="color: var(--ws-notification-widget-text);">API rate limit exceeded</p>
<p class="mt-0.5 text-xs leading-relaxed"
style="color: var(--ws-notification-widget-text-soft);">Endpoint /api/users hit 429 — throttling active</p>
</div>
<time class="shrink-0 text-xs tabular-nums"
style="color: var(--ws-notification-widget-text-muted);">1h ago</time>
</li>
<li class="flex items-start gap-3 rounded-xl px-3 py-3">
<span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
style="background: var(--ws-notification-widget-warning);"></span>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium leading-snug"
style="color: var(--ws-notification-widget-text-soft);">Storage usage at 85%</p>
<p class="mt-0.5 text-xs leading-relaxed"
style="color: var(--ws-notification-widget-text-muted);">Consider upgrading your plan or clearing old files</p>
</div>
<time class="shrink-0 text-xs tabular-nums"
style="color: var(--ws-notification-widget-text-muted);">3h ago</time>
</li>
<li class="flex items-start gap-3 rounded-xl px-3 py-3">
<span class="mt-1.5 block h-2.5 w-2.5 shrink-0 rounded-full"
style="background: var(--ws-notification-widget-accent);"></span>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium leading-snug"
style="color: var(--ws-notification-widget-text-soft);">Team invitation accepted</p>
<p class="mt-0.5 text-xs leading-relaxed"
style="color: var(--ws-notification-widget-text-muted);">Marcus joined the Engineering workspace</p>
</div>
<time class="shrink-0 text-xs tabular-nums"
style="color: var(--ws-notification-widget-text-muted);">1d ago</time>
</li>
</ul>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
notificationalertinboxwidgetdashboard
A notification list widget with unread count badge, colored status dots for severity levels (info, success, warning, error), and relative timestamps. Unread items are visually emphasized with a subtle accent background.