Home/Componentes/StatCard

StatCard

Padrão hollow-UI

Componente para exibir estatísticas com gradientes coloridos e diferentes variantes.

Preview

Exemplo baseado nos cards de resumo do hollow-UI

Dashboard de Problemas

247

Total de Problemas

Em Aberto

158

Resolvidos

2.3h

Tempo Médio

Estatísticas de Vendas

R$ 45,2k

Vendas Totais

+12% vs mês anterior

128

Novos Clientes

+8% esta semana

342

Pedidos

+23% vs ontem

3.2%

Taxa de Conversão

-0.4% vs ontem

Instalação

Como usar o StatCard em seu projeto

Uso Básico

import { StatCard } from "@scmposs/hollow-ui";

<StatCard
  title="Total de Vendas"
  value="R$ 45,2k"
  variant="green"
  icon={DollarSign}
/>

API do Componente

Propriedades disponíveis para o StatCard

Prop	Tipo	Default	Descrição
title	string	-	Título da estatística
value	string \| number	-	Valor principal a ser exibido
description	string	-	Descrição ou subtítulo opcional
icon	LucideIcon	-	Ícone a ser exibido
variant	"red" \| "yellow" \| "green" \| "blue" \| "purple" \| "orange" \| "gray"	"blue"	Variante de cor que define o gradiente
size	"sm" \| "md" \| "lg"	"md"	Tamanho do componente
compact	boolean	false	Se verdadeiro, exibe layout mais compacto
className	string	-	Classes CSS adicionais

Variantes de Cor

Diferentes gradientes disponíveis para diferentes contextos

247

Red

Yellow

158

Green

2.3h

Blue

Purple

3.2%

Orange

128

Gray

Variantes

<StatCard title="Críticos" value="12" variant="red" />
<StatCard title="Atenção" value="23" variant="yellow" />
<StatCard title="Resolvidos" value="45" variant="green" />
<StatCard title="Em Análise" value="8" variant="blue" />
<StatCard title="KPMs" value="15" variant="purple" />
<StatCard title="Moderados" value="34" variant="orange" />
<StatCard title="Total" value="127" variant="gray" />

Tamanhos

Diferentes tamanhos para diferentes contextos

Pequeno

123

Médio

1.2k

Grande

Tamanhos

<StatCard title="Pequeno" value="12" size="sm" />
<StatCard title="Médio" value="123" size="md" />
<StatCard title="Grande" value="1.2k" size="lg" />

StatCardGrid

Componente para organizar múltiplos StatCards em grid responsivo

Grid 2 Colunas

Tarefas Ativas

123

Tarefas Concluídas

StatCardGrid

import { StatCardGrid } from "@scmposs/hollow-ui";
import { Activity, Target } from "lucide-react";

const cards = [
  {
    title: "Tarefas Ativas",
    value: 45,
    variant: "blue",
    icon: Activity,
  },
  {
    title: "Tarefas Concluídas", 
    value: 123,
    variant: "green",
    icon: Target,
  },
];

<StatCardGrid cards={cards} columns={2} gap="md" />

Layout Compacto

Versão mais compacta para espaços reduzidos

R$ 12k

Vendas

248

Clientes

Pedidos

3.2%

Conversão

Layout Compacto

<StatCard 
  title="Vendas" 
  value="R$ 12k" 
  variant="green" 
  compact 
  icon={DollarSign} 
/>

Exemplo: Sistema Completo

Como usar em um sistema de gestão

StatusReportDashboard.tsx

import { StatCard, StatCardGrid } from "@scmposs/hollow-ui";
import { TrendingUp, Activity, Target, Zap } from "lucide-react";

export function StatusReportDashboard({ estatisticas }) {
  const cards = [
    {
      title: "Total de Problemas",
      value: estatisticas.totalProblemas,
      variant: "red",
      icon: TrendingUp,
    },
    {
      title: "Em Aberto",
      value: estatisticas.problemasAbertos,
      variant: "yellow", 
      icon: Activity,
    },
    {
      title: "Resolvidos",
      value: estatisticas.problemasResolvidos,
      variant: "green",
      icon: Target,
    },
    {
      title: "Tempo Médio",
      value: estatisticas.tempoMedio,
      variant: "blue",
      icon: Zap,
    },
  ];

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <TrendingUp className="w-5 h-5" />
          Resumo Atual
        </CardTitle>
      </CardHeader>
      <CardContent>
        <StatCardGrid cards={cards} columns={2} />
      </CardContent>
    </Card>
  );
}