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

Family

widgets

Tier

base

Kind

component

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.