Analytics Block

Usage

This block groups compact metrics, service health, recent invoices, and a lightweight team snapshot into a single analytics-oriented workspace. It uses existing 5h3ll-ui cards, badges, tables, and items so the pattern stays copyable without introducing new block-only APIs.

Analytics block preview

Resize the frame to test how compact status and reporting cards regroup across breakpoints.

Width1120px

Analytics

Executive summary

Compact reporting patterns regrouped into a higher-signal workspace with clearer hierarchy and denser surface composition.

ARR

$1.82M

+8.4% from last cycle

Churn

2.1%

-0.3% lower than target

NPS

+6 points quarter-over-quarter

Quarter health

Weighted retention and conversion blend

Stable

Pipeline coverage74%

Renewal confidence83%

Recent invoices

Compact billing records paired with a denser table treatment.

Account	Plan	Amount
Atlas Labs	Scale	$820
Northwind	Pro	$420
Hemlock	Pro	$420
Stoic & Co.	Starter	$120

Services

Operational status with compact uptime rows and clear state badges.

API

Operational

99.99%

Ingest

Degraded

99.82%

Billing

Operational

99.97%

Workers

Operational

99.95%

Leadership snapshot

Team overview with compact people rows and visual reporting lines.

Kian Okafor

VP Engineering

Andrea Kim

Staff Eng

Beste Sozen

Design Lead

Jules Park

Sr. PM

<section class="rounded-xl border bg-card text-card-foreground shadow-xs" data-resizable-preview>
  <header class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <div class="min-w-0">
      <p class="text-sm font-medium">Analytics block preview</p>
      <p class="text-xs text-muted-foreground">Resize the frame to test how compact status and reporting cards regroup across breakpoints.</p>
    </div>
    <div class="ms-auto flex flex-wrap items-center gap-2">
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="375">Mobile</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="768">Tablet</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="1120">Desktop</button>
      <button type="button" class="btn" data-variant="ghost" data-size="sm" data-preview-preset="1280">Full</button>
    </div>
  </header>
  <div class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <label class="text-xs font-medium text-muted-foreground" for="analytics-block-range">Width</label>
    <input id="analytics-block-range" class="w-full min-w-40 flex-1 accent-primary" type="range" min="360" max="1280" value="1120" data-preview-range />
    <output class="rounded-md bg-muted px-2.5 py-1 font-mono text-xs tabular-nums" data-preview-output>1120px</output>
  </div>
  <div class="overflow-x-auto bg-muted/30 p-4 md:p-6">
    <div class="mx-auto w-full max-w-full overflow-hidden rounded-xl border bg-background shadow-sm transition-[width] duration-150" data-preview-viewport>
      <div class="w-full p-4 md:p-6">
<section class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))]">
  <div class="contents">
    <article class="card rounded-[calc(var(--radius-xl)+4px)] border bg-linear-to-br from-background via-background to-primary/5 p-5 sm:p-6 [grid-column:1/-1]">
      <header class="flex flex-wrap items-start justify-between gap-4">
        <div class="min-w-0">
          <span class="badge" data-variant="secondary">Analytics</span>
          <h2 class="mt-3 text-2xl">Executive summary</h2>
          <p class="max-w-2xl text-sm leading-relaxed text-muted-foreground">Compact reporting patterns regrouped into a higher-signal workspace with clearer hierarchy and denser surface composition.</p>
        </div>
        <div class="card-action flex w-full flex-wrap gap-2 sm:w-auto">
          <button type="button" class="btn flex-1 sm:flex-none" data-variant="outline">Export CSV</button>
          <button type="button" class="btn flex-1 sm:flex-none">Share report</button>
        </div>
      </header>
      <section class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))]">
        <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(min(100%,9.75rem),1fr))]">
          <div class="rounded-xl border bg-background/90 p-4 shadow-sm">
            <p class="text-xs uppercase tracking-wide text-muted-foreground">ARR</p>
            <p class="mt-2 whitespace-nowrap font-mono text-2xl font-semibold tabular-nums">$1.82M</p>
            <p class="mt-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">+8.4% from last cycle</p>
          </div>
          <div class="rounded-xl border bg-background/90 p-4 shadow-sm">
            <p class="text-xs uppercase tracking-wide text-muted-foreground">Churn</p>
            <p class="mt-2 whitespace-nowrap font-mono text-2xl font-semibold tabular-nums">2.1%</p>
            <p class="mt-1 text-xs font-medium text-rose-600 dark:text-rose-400">-0.3% lower than target</p>
          </div>
          <div class="rounded-xl border bg-background/90 p-4 shadow-sm">
            <p class="text-xs uppercase tracking-wide text-muted-foreground">NPS</p>
            <p class="mt-2 whitespace-nowrap font-mono text-2xl font-semibold tabular-nums">48</p>
            <p class="mt-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">+6 points quarter-over-quarter</p>
          </div>
        </div>
        <div class="rounded-xl border bg-background/80 p-4 shadow-sm">
          <div class="flex items-center justify-between gap-3">
            <div>
              <p class="text-sm font-medium">Quarter health</p>
              <p class="text-xs text-muted-foreground">Weighted retention and conversion blend</p>
            </div>
            <span class="badge" data-variant="outline">Stable</span>
          </div>
          <div class="mt-4 space-y-3">
            <div class="space-y-2">
              <div class="flex items-center justify-between text-xs"><span>Pipeline coverage</span><span>74%</span></div>
              <div class="progress" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"><div style="width: 74%"></div></div>
            </div>
            <div class="space-y-2">
              <div class="flex items-center justify-between text-xs"><span>Renewal confidence</span><span>83%</span></div>
              <div class="progress" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100"><div style="width: 83%"></div></div>
            </div>
          </div>
        </div>
      </section>
    </article>

    <article class="card rounded-[calc(var(--radius-xl)+4px)] border p-5 sm:p-6">
      <header class="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h2>Recent invoices</h2>
          <p>Compact billing records paired with a denser table treatment.</p>
        </div>
        <div class="card-action">
          <button type="button" class="btn" data-variant="ghost" data-size="sm">View billing</button>
        </div>
      </header>
      <section class="table-container overflow-x-auto rounded-xl border">
        <table class="table min-w-[28rem]">
          <thead>
            <tr><th>Account</th><th>Plan</th><th class="text-right">Amount</th></tr>
          </thead>
          <tbody>
            <tr><td>Atlas Labs</td><td>Scale</td><td class="text-right font-mono tabular-nums">$820</td></tr>
            <tr><td>Northwind</td><td>Pro</td><td class="text-right font-mono tabular-nums">$420</td></tr>
            <tr><td>Hemlock</td><td>Pro</td><td class="text-right font-mono tabular-nums">$420</td></tr>
            <tr><td>Stoic &amp; Co.</td><td>Starter</td><td class="text-right font-mono tabular-nums">$120</td></tr>
          </tbody>
        </table>
      </section>
    </article>
  </div>

  <div class="contents">
    <article class="card rounded-[calc(var(--radius-xl)+4px)] border bg-muted/20 p-5 sm:p-6">
      <header>
        <h2>Services</h2>
        <p>Operational status with compact uptime rows and clear state badges.</p>
      </header>
      <section class="grid gap-2 [grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))]">
        <div class="item gap-3 rounded-xl border bg-background/80 p-3">
          <section><h3>API</h3><p>Operational</p></section>
          <span class="badge" data-variant="secondary">99.99%</span>
        </div>
        <div class="item gap-3 rounded-xl border bg-background/80 p-3">
          <section><h3>Ingest</h3><p>Degraded</p></section>
          <span class="badge" data-variant="outline">99.82%</span>
        </div>
        <div class="item gap-3 rounded-xl border bg-background/80 p-3">
          <section><h3>Billing</h3><p>Operational</p></section>
          <span class="badge" data-variant="secondary">99.97%</span>
        </div>
        <div class="item gap-3 rounded-xl border bg-background/80 p-3">
          <section><h3>Workers</h3><p>Operational</p></section>
          <span class="badge" data-variant="secondary">99.95%</span>
        </div>
      </section>
    </article>

    <article class="card rounded-[calc(var(--radius-xl)+4px)] border p-5 sm:p-6">
      <header>
        <h2>Leadership snapshot</h2>
        <p>Team overview with compact people rows and visual reporting lines.</p>
      </header>
      <section class="grid gap-4">
        <div class="flex flex-col items-center gap-2 text-center">
          <div class="avatar" data-size="lg">
            <img src="https://images.unsplash.com/photo-1611695434369-a8f5d76ceb7b?w=200&auto=format&fit=crop&q=60" alt="Kian Okafor" />
          </div>
          <div>
            <p class="font-medium">Kian Okafor</p>
            <p class="text-sm text-muted-foreground">VP Engineering</p>
          </div>
        </div>
        <div class="mx-auto hidden w-2/3 flex-col items-stretch min-[520px]:flex">
          <span class="mx-auto h-4 w-px bg-border"></span>
          <span class="h-px w-full bg-border"></span>
          <div class="flex justify-between">
            <span class="h-4 w-px bg-border"></span>
            <span class="h-4 w-px bg-border"></span>
            <span class="h-4 w-px bg-border"></span>
          </div>
        </div>
        <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr))]">
          <a href="#" class="flex flex-col items-center gap-2 rounded-xl p-2 text-center transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
            <div class="avatar" data-size="default">
              <img src="https://images.unsplash.com/photo-1558507652-2d9626c4e67a?w=200&auto=format&fit=crop&q=60" alt="Andrea Kim" />
            </div>
            <div>
              <p class="text-sm font-medium">Andrea Kim</p>
              <p class="text-xs text-muted-foreground">Staff Eng</p>
            </div>
          </a>
          <a href="#" class="flex flex-col items-center gap-2 rounded-xl p-2 text-center transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
            <div class="avatar" data-size="default">
              <span>BS</span>
            </div>
            <div>
              <p class="text-sm font-medium">Beste Sozen</p>
              <p class="text-xs text-muted-foreground">Design Lead</p>
            </div>
          </a>
          <a href="#" class="flex flex-col items-center gap-2 rounded-xl p-2 text-center transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
            <div class="avatar" data-size="default">
              <img src="https://images.unsplash.com/photo-1674932668403-33398b81c92f?w=200&auto=format&fit=crop&q=60" alt="Jules Park" />
            </div>
            <div>
              <p class="text-sm font-medium">Jules Park</p>
              <p class="text-xs text-muted-foreground">Sr. PM</p>
            </div>
          </a>
        </div>
      </section>
    </article>
  </div>
</section>
      </div>
    </div>
  </div>
</section>

Notes

This page merges several compact reporting patterns into a coherent 5h3ll-ui block example that uses the public component surface and stays easy to copy into real product dashboards.