widget stat card metric kpi dashboard widget stat card metric kpi value icon simple stat widget card KPI metric display card
Widget Base
Fetch pattern JSON:
curl https://webspire.de/patterns/widgets/base.json base.html
<div class="ws-widgets rounded-xl border border-[var(--ws-widgets-border)] bg-[var(--ws-widgets-bg)] p-5">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-[var(--ws-widgets-text-soft)]">Total Users</p>
<p class="mt-1 text-3xl font-bold text-[var(--ws-widgets-text)]">8,249</p>
<p class="mt-1 text-xs text-emerald-600">+12.5% from last month</p>
</div>
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-[var(--ws-widgets-accent)]/10">
<svg class="h-6 w-6 text-[var(--ws-widgets-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
</svg>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
widgetstatcardmetrickpidashboard
Slots
| Name | Required | Description |
|---|---|---|
| title | Yes | Widget label text. |
| value | Yes | Primary metric value. |
| icon | No | Decorative icon for the widget. |
Simple widget card displaying a title, large metric value, trend text, and a decorative icon. Ideal for dashboard stat rows and KPI overviews.