AI Components / KPI Grid
KPI Grid
Dashboard KPI grid with metric cards, trend indicators, sparklines, and loading skeletons.
ai-viz v0.3.0
Playground
Examples
1 column
<ai-kpi-grid title="Single" columns="1" style="max-width:240px;"></ai-kpi-grid>2 columns
<ai-kpi-grid title="Overview" columns="2" style="max-width:400px;"></ai-kpi-grid>3 columns
<ai-kpi-grid title="Key Metrics" columns="3" style="max-width:520px;"></ai-kpi-grid>4 columns
<ai-kpi-grid title="Dashboard" columns="4" style="max-width:640px;"></ai-kpi-grid>Loading
<ai-kpi-grid title="Loading..." loading columns="3" style="max-width:520px;"></ai-kpi-grid>Import
import { AiKpiGrid } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-kpi-grid';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Grid title |
kpis | KpiItem[] | — | Array of KPI objects with label, value, delta, trend |
columns | number | 2 | Number of grid columns |
loading | boolean | false | Show loading skeletons |