Documentation

KPI

Dashboard-ready key performance indicator cards for stat and progress use cases.

Examples

Open Orders

18

+3 vs last month
import { KpiStatCard, Tooltip } from 'kalki-design'
import { Info } from '@phosphor-icons/react'

const infoIcon = (
  <Tooltip content="More info">
    <Info size={14} weight="regular" />
  </Tooltip>
)


export default function Example() {
  return (
    <KpiStatCard
      title="Open Orders"
      value="18"
      change="+3 vs last month"
      trend="up"
      icon={infoIcon}
    />
  )
}

Installation

npx kalki-design add kpi

Usage

import { Info } from '@phosphor-icons/react'
import { KpiGrid, KpiProgressCard, KpiStatCard, Tooltip } from 'kalki-design'

const infoIcon = (
  <Tooltip content="More info">
    <Info size={14} weight="regular" />
  </Tooltip>
)

export default function Example() {
  return (
    <KpiGrid columns={2}>
      <KpiStatCard
        title="Open Orders"
        value="$18"
        change="+3 vs last month"
        trend="up"
        icon={infoIcon}
      />

      <KpiProgressCard
        title="Credit Balance"
        value="$728K"
        subtitle="78.5% of $1M credit limit used"
        progress={78.5}
        progressGradient="linear-gradient(to left, #DE1010 0%, rgba(222,16,16,0.4) 17.788%, rgba(222,16,16,0.4) 100%)"
        icon={infoIcon}
      />
    </KpiGrid>
  )
}

API Reference

NameTypeDefaultDescription
NameKpiStatCardTypeComponentDefault—DescriptionShows title, value, trend delta, and optional sparkline/icon.
NameKpiProgressCardTypeComponentDefault—DescriptionShows KPI value with a progress bar and completion label.
NameKpiTrendBadgeTypeComponentDefault—DescriptionCompact trend badge for up/down/neutral states.
NameKpiGridTypeComponentDefault—DescriptionResponsive KPI layout grid with 1-4 column options.