Cards de indicadores
Cartões KPI para cabeçalhos de painel, em dois looks - a linha compacta que os modelos de painel usam, e uma variante de rodapé com um ladrilho de ícones gradiente, uma dica de info opcional, um valor de tamanho de exibição, e uma faixa de rodapé carregando a legenda de comparação e uma pílula delta.
Total das receitas
$152,313.92
A partir do mês passado
16%Total das encomendas
25,162
A partir do mês passado
20%Novos clientes
3,847
A partir do mês passado
8.1%Montante das restituições
$4,209.44
A partir do mês passado
2.4%Instalação
Você pode adicionar as cartas de estatísticas usando o nosso CLI ou manualmente. O CLI também puxa o chip e as ferramentas primitivas que eles compõem:
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.
npx boardui@latest add stat-cardsUsando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Variantes
Dois olhares através do variant Prop. plain (o padrão) é o cartão compacto dos modelos do painel - azulejo de ícone neutro, etiqueta, valor e um chip delta. rodapé leads com um ladrilho de ícones de gradiente colorido ao lado da etiqueta, define o valor no tamanho da tela, e move a comparação para uma faixa de rodapé com uma pílula delta branca cujo glifo segue deltaColor.
<StatCards /> {/* compact: icon, label, value, delta chip */}<StatCards variant="footer" /> {/* icon tile + label, display value, footer band */}Traga seus próprios dados
Passar stats para substituir as métricas demo. A variante do rodapé lê três campos opcionais extras por stat: tone pinta o ícone azulejo (azul, laranja, roxo, rosa, céu, ou esmeralda), caption troca o texto do rodapé, e hint adiciona um glifo de informação com uma dica.
import { RiCoinsFill, RiShoppingBasket2Fill } from "@remixicon/react";import { StatCards, type Stat } from "@/components/application/dashboard/stat-cards";
const stats: Stat[] = [ { icon: RiCoinsFill, label: "Total revenue", value: "$152,313.92", delta: "16%", deltaColor: "lime", // lime | rose | neutral - picks the pill glyph too tone: "blue", // icon tile tint (footer variant) caption: "From last month", // footer band caption (footer variant) hint: "Gross revenue across all channels.", // info tooltip (footer variant) }, { icon: RiShoppingBasket2Fill, label: "Total orders", value: "25,162", delta: "20%", deltaColor: "lime", tone: "orange", },];
<StatCards variant="footer" stats={stats} />