Dashboard

Command Center Shell

Use this block for SaaS dashboards, admin portals, or analytics views that need a calm but technical feel.

dashboardadminanalyticssaas

Vista previa

MRR

$42k

Churn

1.8%

Activation

68%

Weekly activity

+12%

HTML + Tailwind

Código listo para copiar

<section class="rounded-[32px] bg-slate-950 p-4 text-white shadow-2xl shadow-slate-950/20">
  <div class="grid gap-4 lg:grid-cols-[220px_1fr]">
    <aside class="rounded-[28px] border border-white/10 bg-white/5 p-4">
      <div class="rounded-2xl bg-white/10 px-4 py-3 text-sm font-semibold">Northstar</div>
      <nav class="mt-4 space-y-2 text-sm text-slate-300">
        <div class="rounded-2xl bg-white/10 px-4 py-3 text-white">Overview</div>
        <div class="rounded-2xl px-4 py-3">Revenue</div>
        <div class="rounded-2xl px-4 py-3">Automation</div>
      </nav>
    </aside>
    <div class="space-y-4">
      <div class="grid gap-3 sm:grid-cols-3">
        <div class="rounded-[24px] border border-white/10 bg-white/5 p-4">
          <p class="text-xs uppercase tracking-[0.24em] text-slate-400">MRR</p>
          <p class="mt-3 text-3xl font-semibold">$42k</p>
        </div>
        <div class="rounded-[24px] border border-white/10 bg-white/5 p-4">
          <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Churn</p>
          <p class="mt-3 text-3xl font-semibold">1.8%</p>
        </div>
        <div class="rounded-[24px] border border-white/10 bg-white/5 p-4">
          <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Activation</p>
          <p class="mt-3 text-3xl font-semibold">68%</p>
        </div>
      </div>
      <div class="rounded-[28px] border border-white/10 bg-white/5 p-5">
        <div class="flex items-center justify-between">
          <p class="text-sm font-semibold text-white">Weekly activity</p>
          <span class="rounded-full bg-emerald-400/15 px-3 py-1 text-xs text-emerald-300">+12%</span>
        </div>
        <div class="mt-4 grid h-28 grid-cols-7 items-end gap-2">
          <div class="rounded-t-xl bg-sky-400/70" style="height:38%"></div>
          <div class="rounded-t-xl bg-sky-400/70" style="height:54%"></div>
          <div class="rounded-t-xl bg-sky-400/70" style="height:44%"></div>
          <div class="rounded-t-xl bg-sky-400/70" style="height:72%"></div>
          <div class="rounded-t-xl bg-sky-400/70" style="height:63%"></div>
          <div class="rounded-t-xl bg-sky-400/70" style="height:82%"></div>
          <div class="rounded-t-xl bg-sky-400/70" style="height:66%"></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bloques relacionados

Balance

$84,200

Expenses

$12,400

Runway

19 mo

Budget allocation

Product42%

Growth31%

Ops18%

Dashboard

Finance Metrics Board

A cleaner dashboard metrics strip with progress, allocations, and compact balance cards.

dashboardfinancecardsmetrics

Abrir bloque

Shipping fast UI systems for modern apps

Build a sharper product surface before your first user lands.

Layered typography, strong spacing, and conversion-ready CTAs for startup launches, product reveals, and campaign microsites.

Start free See demo

Teams

1.2k

Launches

184

Avg. uplift

31%

Hero Sections

Aurora Launch Hero

A cinematic hero with layered gradients, trust stats, and two focused calls to action.

herolanding pagesaascta

Abrir bloque

Starter

$19

For early products and single operators.

Unlimited blocks
Email support
Basic exports

Popular

Growth

$49

For teams shipping every week.

Shared libraries
Advanced exports
Priority support

Scale

$129

For larger teams and multi-brand systems.

Unlimited seats
Approval flows
Dedicated onboarding

Pricing

Prism Pricing Grid

A three-tier pricing layout with a highlighted middle plan and compact benefit density.

pricingplanssaascards

Abrir bloque