Blocos
StatGrid
Grade responsiva para múltiplos StatCards com breakpoints opinados.
StatGrid centraliza o contrato de breakpoints para listas de KPI cards. Todo dashboard ganha o mesmo ritmo horizontal sem reimplementar grid grid-cols-… em cinco telas diferentes.
Usuários
1.2k
Ativos
892
Novos
34
'use client';
import { StatCard, StatGrid } from '@uranus-workspace/blocks';
import { Users } from 'lucide-react';
export default function StatGridDefault() {
return (
<StatGrid columns={3}>
<StatCard label="Usuários" value="1.2k" icon={<Users aria-hidden className="size-4" />} />
<StatCard label="Ativos" value="892" />
<StatCard label="Novos" value="34" intent="positive" />
</StatGrid>
);
}
Uso
import { StatGrid, StatCard } from '@uranus-workspace/blocks';
<StatGrid columns={4}>
<StatCard label="Receita recorrente (MRR)" value="R$ 48.200" />
<StatCard label="Churn" value="3,4%" />
<StatCard label="Usuários ativos" value="1.284" />
<StatCard label="Novos clientes" value="148" />
</StatGrid>Modos
columns="auto"(default) —auto-fitcom largura mínima de 220px. Use quando o número de cards é variável.columns={1|2|3|4}— colunas fixas no breakpointlg+. Sempre 1 coluna no mobile e 2 emsm.
Todos os modos usam gap-4 consistente.