Blocks
KPI Grid
Grid 4 colunas com KPIs — métricas com valor, label e trend pill.
KPIs no topo do dashboard — número grande + label + delta pill verde/vermelho.
- Receita
- R$ 84.230 +12.4%
- Usuários ativos
- 1.892 +5.1%
- Conversão
- 3.7% -0.3%
- Churn
- 1.1% -0.4%
<dl class="grid grid-cols-2 gap-3 md:grid-cols-4">
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Receita</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">R$ 84.230</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">+12.4%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Usuários ativos</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">1.892</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">+5.1%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Conversão</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">3.7%</dd>
<span class="self-start rounded-full bg-danger-default px-2 py-0.5 text-xs font-medium text-danger-default">-0.3%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Churn</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">1.1%</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">-0.4%</span>
</div>
</dl>
<dl class="grid grid-cols-2 gap-3 md:grid-cols-4">
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Receita</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">R$ 84.230</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">+12.4%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Usuários ativos</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">1.892</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">+5.1%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Conversão</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">3.7%</dd>
<span class="self-start rounded-full bg-danger-default px-2 py-0.5 text-xs font-medium text-danger-default">-0.3%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Churn</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">1.1%</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">-0.4%</span>
</div>
</dl><dl class="grid grid-cols-2 gap-3 md:grid-cols-4">
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Receita</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">R$ 84.230</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">+12.4%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Usuários ativos</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">1.892</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">+5.1%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Conversão</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">3.7%</dd>
<span class="self-start rounded-full bg-danger-default px-2 py-0.5 text-xs font-medium text-danger-default">-0.3%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Churn</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">1.1%</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">-0.4%</span>
</div>
</dl>
<dl class="grid grid-cols-2 gap-3 md:grid-cols-4">
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Receita</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">R$ 84.230</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">+12.4%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Usuários ativos</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">1.892</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">+5.1%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Conversão</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">3.7%</dd>
<span class="self-start rounded-full bg-danger-default px-2 py-0.5 text-xs font-medium text-danger-default">-0.3%</span>
</div>
<div class="flex flex-col gap-1 rounded-2xl border border-border bg-card p-5">
<dt class="text-sm text-muted-foreground">Churn</dt>
<dd class="text-3xl font-bold tracking-tight text-foreground">1.1%</dd>
<span class="self-start rounded-full bg-success-default px-2 py-0.5 text-xs font-medium text-success-default">-0.4%</span>
</div>
</dl>