HeaderStats

Cards de estatísticas com efeito 3D para dashboards e painéis de controle.

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add header-stats

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import { Button } from "@scmposs/hollow-ui"
          
export default function MyComponent() {
  return (
    <div>
      <Button variant="outline">Button</Button>
    </div>
  );
}

Preview - Dashboard Administrativo

Exemplo de uso do HeaderStats em um dashboard real

Total

2,431

Registros no sistema

Pendentes

143

Aguardando aprovação

Concluídos

2,108

Finalizados com sucesso

Problemas

Requerem atenção

Preview - Dashboard Comercial

Variação com métricas de vendas e negócios

Vendas

R$ 45,2k

+12% em relação ao mês anterior

Clientes

1,234

+5 novos esta semana

Produtos

No catálogo ativo

Preview - HeaderStatsGrid (4x2)

Grid fixo com 4 colunas, ideal para dashboards compactos

Total

2,431

Registros no sistema

Pendentes

143

Aguardando aprovação

Concluídos

2,108

Finalizados com sucesso

Problemas

Requerem atenção

Preview - HeaderStatsGrid (Colunas Personalizáveis)

Demonstração das diferentes configurações de colunas

3 Colunas

Total

2,431

Registros no sistema

Pendentes

143

Aguardando aprovação

Concluídos

2,108

Finalizados com sucesso

4 Colunas

Total

2,431

Registros no sistema

Pendentes

143

Aguardando aprovação

Concluídos

2,108

Finalizados com sucesso

Problemas

Requerem atenção

Preview - HeaderStatCardMini

Versão compacta sem animação 3D, ideal para sidebars

Pedidos

567

Em processamento

Receita

R$ 78,9k

Último trimestre

Feedbacks

4.8/5

Avaliação média

Alertas

Pendentes hoje

Preview - HeaderStatCardCompact

Versão ultra compacta inline, ideal para dashboards densos e sidebars

Módulo Mais Ativo

Gerenciamento

45 atualizações

Taxa de Conclusão

87%

Status Geral

Ativo

12 pendentes de 143 totais

Preview - HeaderStatCardCompact (Cores da Barra de Progresso)

Demonstração das diferentes cores da barra de progresso

Progresso Baixo

25%

Progresso Médio

50%

Progresso Alto

85%

Uso Básico

Exemplo básico

import { HeaderStats } from "@scmposs/hollow-ui"
import { FileText, CheckCircle2, AlertCircle } from "lucide-react"

const stats = [
  {
    title: "Total",
    value: "2,431",
    description: "Registros no sistema",
    icon: FileText,
    borderColor: "border-l-4 border-l-slate-500",
    iconBgColor: "bg-slate-100 dark:bg-slate-900/20",
    iconColor: "text-slate-600 dark:text-slate-400"
  },
  {
    title: "Concluídos",
    value: "2,108", 
    description: "Finalizados com sucesso",
    icon: CheckCircle2,
    borderColor: "border-l-4 border-l-green-500",
    iconBgColor: "bg-green-100 dark:bg-green-900/20",
    iconColor: "text-green-600 dark:text-green-400"
  }
]

<HeaderStats stats={stats} />

Características

🎨 Efeito 3D

Cards com efeito de profundidade que respondem ao hover

🌙 Suporte a Temas

Funciona com light, dark e contrast mode

📱 Responsivo

Layout adaptável para diferentes tamanhos de tela

🎯 Clicável

Suporte a funções onClick para navegação

Variantes do Componente

Quatro versões disponíveis para diferentes necessidades

HeaderStats (Grid Responsivo)

import { HeaderStats } from "@/components/ui/header-stats";

<HeaderStats stats={stats} />
// Grid: 1 coluna (mobile) → 2 colunas (tablet) → 4 colunas (desktop)

HeaderStatsGrid (Grid Personalizável)

import { HeaderStatsGrid } from "@/components/ui/header-stats";

// Grid padrão (2 colunas)
<HeaderStatsGrid stats={stats} />

// Grid personalizado (3 colunas)
<HeaderStatsGrid stats={stats} columns={3} />

// Grid personalizado (4 colunas)
<HeaderStatsGrid stats={stats} columns={4} />

// Grid personalizado (1 coluna)
<HeaderStatsGrid stats={stats} columns={1} />

HeaderStatCardMini (Compacto)

import { HeaderStatCardMini } from "@/components/ui/header-stats";

<HeaderStatCardMini
  title="Usuários"
  value="1,234"
  description="Ativos no sistema"
  icon={Users}
  borderColor="border-l-4 border-l-purple-500"
  iconBgColor="bg-purple-100 dark:bg-purple-900/20"
  iconColor="text-purple-600 dark:text-purple-400"
/>
// Sem animação 3D, mais compacto

HeaderStatCardCompact (Ultra Compacto)

import { HeaderStatCardCompact } from "@/components/ui/header-stats";

// Exemplo simples
<HeaderStatCardCompact
  title="Módulo Ativo"
  value="Dashboard"
  description="45 atualizações"
  icon={Package}
  borderColor="border-l-4 border-l-purple-500"
  iconBgColor="bg-purple-100 dark:bg-purple-900/30"
  iconColor="text-purple-600 dark:text-purple-400"
  hasShadow={true}
  shadowColor="purple"
/>

// Com badge e barra de progresso
<HeaderStatCardCompact
  title="Taxa de Conclusão"
  icon={Target}
  borderColor="border-l-4 border-l-green-500"
  iconBgColor="bg-green-100 dark:bg-green-900/30"
  iconColor="text-green-600 dark:text-green-400"
  badgeValue="87%"
  progressValue={87}
  hasShadow={true}
  shadowColor="green"
/>
// Versão inline, super compacto para dashboards densos

Props

HeaderStats Props

statsStatItem[]

Array de objetos com dados dos cards de estatística

StatItem Interface

titlestring

valuestring | number

descriptionstring

iconLucideIcon

borderColorstring

iconBgColorstring

iconColorstring

onClick?function