KPI Card Component Playground

Interactive playground to test all KPI Card props and configurations

Props

The title displayed at the top left of the card

The main value displayed in the card. Can be a number (formatted) or string.

Currency symbol to use when formatting numbers (default: $)

Card width: Small (280px), Medium (100%), Large (480px)

Date displayed at the top right of the card

Link text and optional href displayed at the bottom left

Badge displayed at the bottom right of the card

Current State

Title: Total Sales

Value: 45823 (number)

Date: Jun 12th, 2023

Link: View Transactions

Badge: Paid (success)

Width: medium

Preview

Total Sales

$45,823

Jun 12th, 2023

Paid

<KPICard
  title="Total Sales"
  value={45823}
  date="Jun 12th, 2023"
  linkText="View Transactions"
  badgeText="Paid"
/>
{
  "title": "Total Sales",
  "value": 45823,
  "date": "Jun 12th, 2023",
  "linkText": "View Transactions",
  "badgeText": "Paid",
  "badgeVariant": "success",
  "currency": "$",
  "formatAsCurrency": true,
  "width": "medium"
}

Full Card (Default)

Total Sales

$45,823

View Transactions

Jun 12th, 2023

Paid

Minimal (Title + Value Only)

Active Users

$1,234

Badge Variants

Status

$100

Success

Status

$100

Error

Status

$100

Warning

Status

$100

Info

Convenience Props (Title Icon, Value Unit, Trend)

Storage

$45,823

TiB

10%

Compared to last month

Slots-Based (Full Control)

Total Sales
45,823TiB
10%
Compared to last month
<KPICard
  titleSlot={
    <>
      <Icon icon="TrendingUp" size="small" />
      <span>Total Sales</span>
    </>
  }
  valueSlot={
    <>
      <span>45,823</span>
      <span>TiB</span>
    </>
  }
  trendSlot={
    <div className="flex gap-2">
      <Badge>10%</Badge>
      <span>Compared to last month</span>
    </div>
  }
  metadataSlot={<Icon icon="BarChart" size="large" />}
/>

String Value

Conversion Rate

12.5%

Today

Active

Width Variants

Small (max 280px)

Small Card

$1,234

Medium (100%)

Medium Card

$5,678

Large (max 480px)

Large Card

$9,012