AI KPI Card

Overview

The AI KPI Card component provides a standardized way to display metrics and KPIs across ActiveCampaign’s applications. It supports multiple metric formats, comparison indicators, secondary metrics, and interactive states to create comprehensive data visualization experiences.

Resources

Variations

Size

The AI KPI Card comes in two sizes to accommodate different layout needs and information density.

Medium size (Default)


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard title="Total Revenue" metric={12345} metricFormat="integer" />;

Small size


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard title="Total Revenue" metric={12345} metricFormat="integer" size="small" />;

Metric formatting

The component supports various metric formats to display different types of data appropriately.


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard title="Total Users" metric={1234567} metricFormat="integer" />;


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard title="Average Score" metric={95.67} metricFormat="float" />;


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard title="Conversion Rate" metric={15.5} metricFormat="percent" />;


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard title="Total Revenue" metric={12345.67} metricFormat="currency" currency="USD" />;

Comparison metric

Display trend indicators by comparing current metrics with previous values.


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard
  title="Monthly Revenue"
  metric={15000}
  compareMetric={12000}
  metricFormat="currency"
  currency="USD"
/>;


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard
  title="Monthly Revenue"
  metric={10000}
  compareMetric={12000}
  metricFormat="currency"
  currency="USD"
/>;


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard
  title="Monthly Revenue"
  metric={12000}
  compareMetric={12000}
  metricFormat="currency"
  currency="USD"
/>;

Secondary metric

Add contextual information with secondary metrics that provide additional context to the primary metric.


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard
  title="Campaign Performance"
  metric={15000}
  metricFormat="currency"
  currency="USD"
  secondaryMetric={25}
  variant="contact"
  locale="en"
/>;

Loading state

Show loading indicators while data is being fetched or processed.


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard title="Loading Metric" metric={12345} metricFormat="integer" isLoading={true} />;


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard
  title="Loading Metric"
  metric={12345}
  compareMetric={10000}
  metricFormat="integer"
  isLoading={true}
/>;

Provide additional context and information through tooltips on the title.


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard
  title="Hover for details"
  metric={12345}
  metricFormat="integer"
  titleTooltip="This metric shows the total number of active users in the system"
/>;

Display full formatted values in tooltips when metrics are abbreviated for display.


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard title="Large Number Metric" metric={123456789} metricFormat="integer" />;

Locale

Support different locales for proper number and currency formatting.


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard
  title="Deutsche Metrik"
  metric={12345.67}
  metricFormat="currency"
  currency="EUR"
  locale="de-DE"
/>;


import { AiKpiCard } from '@camp/ai-kpi-card';
 
<AiKpiCard
  title="Métrique Française"
  metric={12345.67}
  metricFormat="currency"
  currency="EUR"
  locale="fr-FR"
/>;

Container width

The AI KPI Card adapts to different container widths and can be used within responsive layouts.


import { AiKpiCard, AiKpiContainer } from '@camp/ai-kpi-card';
 
<div style={{ width: '450px' }}>
  <AiKpiContainer count={3}>
    <AiKpiCard title="Total Revenue" metric={12345} metricFormat="integer" />
    <AiKpiCard title="Total Users" metric={5678} metricFormat="integer" />
    <AiKpiCard title="Conversion Rate" metric={15.5} metricFormat="percent" />
  </AiKpiContainer>
</div>;


import { AiKpiCard, AiKpiContainer } from '@camp/ai-kpi-card';
 
<div style={{ width: '1000px' }}>
  <AiKpiContainer count={6}>
    <AiKpiCard title="Total Revenue" metric={12345} metricFormat="integer" />
    <AiKpiCard title="Total Users" metric={5678} metricFormat="integer" />
    <AiKpiCard title="Conversion Rate" metric={15.5} metricFormat="percent" />
    <AiKpiCard title="Average Score" metric={95.67} metricFormat="float" />
    <AiKpiCard title="Monthly Revenue" metric={15000} metricFormat="currency" currency="USD" />
    <AiKpiCard title="Error Rate" metric={5} metricFormat="percent" />
  </AiKpiContainer>
</div>;

Usage

Best practices

Use clear, descriptive titles that explain what the metric represents
Choose appropriate metric formats that match your data type
Include comparison metrics when trend information is valuable
Use secondary metrics to provide additional context
Implement loading states for better user experience during data fetching
Add tooltips for complex metrics or when space is limited
Consider locale-specific formatting for international applications

Content guidelines

✅ DO

Use clear, concise titles that describe the metric
Choose appropriate metric formats (integer, float, percent, currency)
Include comparison metrics when showing trends
Use secondary metrics to provide additional context
Implement loading states for better UX
Add tooltips for complex or abbreviated metrics

🚫 DON’T

Use vague or unclear metric titles
Mix different metric formats inappropriately
Show comparison metrics without clear context
Overload cards with too much information
Forget to handle loading and error states
Use tooltips for obvious information

Accessibility

The AI KPI Card component includes comprehensive accessibility features:

Keyboard navigation: All interactive elements are keyboard accessible
Screen reader support: Proper ARIA labels and semantic markup
Tooltip accessibility: Tooltips are properly announced to screen readers
Color contrast: Meets WCAG guidelines for text and background contrast
Focus management: Clear focus indicators for interactive elements