dashboard activity feed sidebar analytics dashboard activity feed events sidebar stats admin dashboard activity feed admin panel with recent events
Dashboard Activity
Fetch pattern JSON:
curl https://webspire.de/patterns/dashboard/activity.json activity.html
<section class="ws-dashboard bg-[var(--ws-dashboard-bg)] py-8">
<div class="mx-auto max-w-7xl px-6">
<div class="grid gap-6 lg:grid-cols-3">
<!-- Activity feed -->
<div class="lg:col-span-2">
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)]">
<div class="flex items-center justify-between border-b border-[var(--ws-dashboard-border)] px-6 py-4">
<h2 class="font-semibold text-[var(--ws-dashboard-text)]">Recent Activity</h2>
<button type="button" class="text-sm font-medium text-[var(--ws-dashboard-accent)] hover:opacity-80">View all</button>
</div>
<div class="divide-y divide-[var(--ws-dashboard-border)]">
<div class="flex gap-4 px-6 py-4">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-600">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-dashboard-text)]"><span class="font-medium">Sarah Chen</span> added a new pattern <span class="font-medium">hero/split</span></p>
<p class="mt-0.5 text-xs text-[var(--ws-dashboard-text-muted)]">2 hours ago</p>
</div>
</div>
<div class="flex gap-4 px-6 py-4">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-dashboard-text)]"><span class="font-medium">Marcus Kim</span> published <span class="font-medium">gallery/masonry</span></p>
<p class="mt-0.5 text-xs text-[var(--ws-dashboard-text-muted)]">5 hours ago</p>
</div>
</div>
<div class="flex gap-4 px-6 py-4">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-600">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-dashboard-text)]"><span class="font-medium">Lisa Muller</span> updated <span class="font-medium">pricing/toggle</span></p>
<p class="mt-0.5 text-xs text-[var(--ws-dashboard-text-muted)]">Yesterday</p>
</div>
</div>
<div class="flex gap-4 px-6 py-4">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-rose-100 text-rose-600">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-dashboard-text)]"><span class="font-medium">David Park</span> reported an issue with <span class="font-medium">glass/frosted</span></p>
<p class="mt-0.5 text-xs text-[var(--ws-dashboard-text-muted)]">2 days ago</p>
</div>
</div>
</div>
</div>
</div>
<!-- Quick stats sidebar -->
<div class="space-y-6">
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-6">
<h3 class="text-sm font-medium text-[var(--ws-dashboard-text-muted)]">This week</h3>
<div class="mt-4 space-y-4">
<div class="flex items-center justify-between">
<span class="text-sm text-[var(--ws-dashboard-text-soft)]">New patterns</span>
<span class="text-sm font-semibold text-[var(--ws-dashboard-text)]">12</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-[var(--ws-dashboard-text-soft)]">Downloads</span>
<span class="text-sm font-semibold text-[var(--ws-dashboard-text)]">1,284</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-[var(--ws-dashboard-text-soft)]">Active users</span>
<span class="text-sm font-semibold text-[var(--ws-dashboard-text)]">342</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-[var(--ws-dashboard-text-soft)]">Issues resolved</span>
<span class="text-sm font-semibold text-[var(--ws-dashboard-text)]">8</span>
</div>
</div>
</div>
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-6">
<h3 class="text-sm font-medium text-[var(--ws-dashboard-text-muted)]">Top patterns</h3>
<div class="mt-4 space-y-3">
<div class="flex items-center justify-between">
<span class="text-sm text-[var(--ws-dashboard-text-soft)]">hero/base</span>
<span class="rounded-full bg-black/5 px-2 py-0.5 text-xs font-medium text-[var(--ws-dashboard-text-soft)]">423</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-[var(--ws-dashboard-text-soft)]">pricing/toggle</span>
<span class="rounded-full bg-black/5 px-2 py-0.5 text-xs font-medium text-[var(--ws-dashboard-text-soft)]">387</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-[var(--ws-dashboard-text-soft)]">navbar/mega</span>
<span class="rounded-full bg-black/5 px-2 py-0.5 text-xs font-medium text-[var(--ws-dashboard-text-soft)]">291</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
dashboardactivityfeedsidebaranalytics
Slots
| Name | Required | Description |
|---|---|---|
| feed | Yes | Activity feed with icon, user, action, and timestamp. |
| sidebar | No | Quick stats and top items sidebar. |
Dashboard layout with two panels. Left (2/3 width): activity feed showing recent events with colored icons, user names, actions, and timestamps. Right (1/3 width): quick stats card and top patterns card. Responsive: stacks vertically on mobile.