Dashboard Block

Usage

This block is a real dashboard surface, not a component demo. It is built from existing 5h3ll-ui primitives and meant to be copied as a starting point for admin, analytics, or product overviews.

Dashboard block preview

Drag the slider to resize the preview like a live responsive canvas.

Width1100px

Dashboard

Operations overview

Track revenue, user growth, and team activity from one responsive workspace.

Monthly revenue

$84,240

+18.4% vs last month

Active workspaces

12,482

842 added this week

Avg. conversion

7.26%

Healthy trend across paid traffic

Revenue trend

Last 6 months

Updated 2m ago

Team activity

Recent actions

Billing plan upgraded

Growth team moved to the annual plan.

Now

Three new teammates invited

Access granted to engineering and support.

12m

Quarterly report generated

Shared with finance and operations.

Goals

Progress snapshots for the current cycle.

Onboarding completion78%

Enterprise conversions64%

Retention health86%

Release checklist

Everything remains plain HTML.

Token QA

Validated across style packs.

Responsive pass

Tested through the resizable preview frame.

Stakeholder review

Ready for product sign-off.

<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">Dashboard block preview</p>
      <p class="text-xs text-muted-foreground">Drag the slider to resize the preview like a live responsive canvas.</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="1100">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="dashboard-block-range">Width</label>
    <input id="dashboard-block-range" class="w-full min-w-40 flex-1 accent-primary" type="range" min="360" max="1280" value="1100" data-preview-range />
    <output class="rounded-md bg-muted px-2.5 py-1 font-mono text-xs tabular-nums" data-preview-output>1100px</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 xl:grid-cols-[1.35fr_0.65fr]">
  <article class="card">
    <header class="gap-4 md:flex md:items-start md:justify-between">
      <div class="min-w-0">
        <span class="badge" data-variant="secondary">Dashboard</span>
        <h2 class="mt-3 text-2xl">Operations overview</h2>
        <p>Track revenue, user growth, and team activity from one responsive workspace.</p>
      </div>
      <div class="card-action flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
        <button type="button" class="btn w-full sm:w-auto" data-variant="outline">Export</button>
        <button type="button" class="btn w-full sm:w-auto">Create report</button>
      </div>
    </header>
    <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
      <div class="rounded-xl border bg-muted/40 p-4">
        <p class="text-sm text-muted-foreground">Monthly revenue</p>
        <p class="mt-3 text-3xl font-semibold tabular-nums">$84,240</p>
        <p class="mt-1 text-sm text-emerald-600 dark:text-emerald-400">+18.4% vs last month</p>
      </div>
      <div class="rounded-xl border bg-muted/40 p-4">
        <p class="text-sm text-muted-foreground">Active workspaces</p>
        <p class="mt-3 text-3xl font-semibold tabular-nums">12,482</p>
        <p class="mt-1 text-sm text-muted-foreground">842 added this week</p>
      </div>
      <div class="rounded-xl border bg-muted/40 p-4">
        <p class="text-sm text-muted-foreground">Avg. conversion</p>
        <p class="mt-3 text-3xl font-semibold tabular-nums">7.26%</p>
        <p class="mt-1 text-sm text-muted-foreground">Healthy trend across paid traffic</p>
      </div>
    </section>
    <section class="grid gap-4 xl:grid-cols-[1.2fr_0.8fr]">
      <div class="rounded-xl border p-4">
        <div class="mb-4 flex items-center justify-between">
          <div>
            <h3 class="text-base font-semibold">Revenue trend</h3>
            <p class="text-sm text-muted-foreground">Last 6 months</p>
          </div>
          <span class="badge" data-variant="outline">Updated 2m ago</span>
        </div>
        <div class="grid h-48 grid-cols-6 items-end gap-2 sm:h-64 sm:gap-3">
          <div class="rounded-t-lg bg-primary/25" style="height: 42%"></div>
          <div class="rounded-t-lg bg-primary/35" style="height: 58%"></div>
          <div class="rounded-t-lg bg-primary/45" style="height: 51%"></div>
          <div class="rounded-t-lg bg-primary/55" style="height: 74%"></div>
          <div class="rounded-t-lg bg-primary/65" style="height: 69%"></div>
          <div class="rounded-t-lg bg-primary" style="height: 88%"></div>
        </div>
      </div>
      <div class="rounded-xl border p-4">
        <div class="mb-4">
          <h3 class="text-base font-semibold">Team activity</h3>
          <p class="text-sm text-muted-foreground">Recent actions</p>
        </div>
        <div class="space-y-3">
          <div class="item gap-3 rounded-lg border px-3 py-3">
            <section>
              <h4>Billing plan upgraded</h4>
              <p>Growth team moved to the annual plan.</p>
            </section>
            <span class="badge" data-variant="secondary">Now</span>
          </div>
          <div class="item gap-3 rounded-lg border px-3 py-3">
            <section>
              <h4>Three new teammates invited</h4>
              <p>Access granted to engineering and support.</p>
            </section>
            <span class="badge" data-variant="outline">12m</span>
          </div>
          <div class="item gap-3 rounded-lg border px-3 py-3">
            <section>
              <h4>Quarterly report generated</h4>
              <p>Shared with finance and operations.</p>
            </section>
            <span class="badge" data-variant="outline">1h</span>
          </div>
        </div>
      </div>
    </section>
  </article>

  <div class="grid gap-4">
    <article class="card">
      <header>
        <h2>Goals</h2>
        <p>Progress snapshots for the current cycle.</p>
      </header>
      <section class="space-y-4">
        <div class="space-y-2">
          <div class="flex items-center justify-between text-sm"><span>Onboarding completion</span><span>78%</span></div>
          <div class="progress" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"><div style="width: 78%"></div></div>
        </div>
        <div class="space-y-2">
          <div class="flex items-center justify-between text-sm"><span>Enterprise conversions</span><span>64%</span></div>
          <div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><div style="width: 64%"></div></div>
        </div>
        <div class="space-y-2">
          <div class="flex items-center justify-between text-sm"><span>Retention health</span><span>86%</span></div>
          <div class="progress" role="progressbar" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100"><div style="width: 86%"></div></div>
        </div>
      </section>
    </article>
    <article class="card">
      <header>
        <h2>Release checklist</h2>
        <p>Everything remains plain HTML.</p>
      </header>
      <section class="space-y-3">
        <label class="item gap-3 rounded-lg border px-3 py-3">
          <input type="checkbox" class="input" checked />
          <section><h3>Token QA</h3><p>Validated across style packs.</p></section>
        </label>
        <label class="item gap-3 rounded-lg border px-3 py-3">
          <input type="checkbox" class="input" checked />
          <section><h3>Responsive pass</h3><p>Tested through the resizable preview frame.</p></section>
        </label>
        <label class="item gap-3 rounded-lg border px-3 py-3">
          <input type="checkbox" class="input" />
          <section><h3>Stakeholder review</h3><p>Ready for product sign-off.</p></section>
        </label>
      </section>
    </article>
  </div>
</section>
      </div>
    </div>
  </div>
</section>

HTML

<section class="grid gap-4 xl:grid-cols-[1.35fr_0.65fr]">
  <article class="card">
    <header class="gap-4 md:flex md:items-start md:justify-between">
      <div>
        <span class="badge" data-variant="secondary">Dashboard</span>
        <h2 class="mt-3 text-2xl">Operations overview</h2>
        <p>Track revenue, user growth, and team activity from one responsive workspace.</p>
      </div>
    </header>
  </article>
</section>

Use this as the starting point for product dashboards, internal ops panels, or analytics overviews. The resizable preview is intentionally included so layout breakpoints can be checked in-place before copying the block.