DS Razac
Figma

CounterCard

Card de KPI com número grande, label e variação. 14 variants conforme contexto (etapa, status, urgência).

v1.0.0data-display
Preview
Em trânsito
38
4
Canal Verde
22
3

Variações

Default
Em trânsito
38
4
Canal Verde
22
3
Pré-embarque
Em trânsito
38
4
Canal Verde
22
3
Em trânsito
Em trânsito
38
4
Canal Verde
22
3
Registro
Em trânsito
38
4
Canal Verde
22
3
Desembaraço
Em trânsito
38
4
Canal Verde
22
3
Faturamento
Em trânsito
38
4
Canal Verde
22
3
Entrega
Em trânsito
38
4
Canal Verde
22
3
Fechamento
Em trânsito
38
4
Canal Verde
22
3
Canal Verde
Em trânsito
38
4
Canal Verde
22
3
Canal Amarelo
Em trânsito
38
4
Canal Verde
22
3
Canal Vermelho
Em trânsito
38
4
Canal Verde
22
3
Atrasados
Em trânsito
38
4
Canal Verde
22
3
Hoje
Em trânsito
38
4
Canal Verde
22
3
Semana
Em trânsito
38
4
Canal Verde
22
3

Props

PropTypeDefaultDescription
label*string—Nome do indicador.
value*number | string—Valor principal.
variant'default' | 'positive' | 'negative' | 'warning' | 'info'defaultCor semântica.
deltanumber—Variação vs período anterior.
iconLucideIcon—Ícone.

Código

tsx
import { CounterCard } from '@/components/ds/CounterCard'
import { Plane } from 'lucide-react'

<CounterCard label="Em trânsito" value={38} variant="info" delta={4} icon={Plane} />

Telas que usam

Follow-up Consulta — ImportaçãoDetalhe ProcessoLoginLoader (Login Callback)Documentos TomadosClientesFornecedoresFichas OperacionaisKanbanDashboardsIDA ChatIDA Vibe

Histórico

  1. v1.0.007 de mai. de 2026Versão inicial com 14 variants.PRJ-000

Projetos relacionados

PRJ-000DS Razac — Captura inicial do portalEntregue