Skip to content
OTF Kit logoOTF Kit

Metric Card

Data

Self-contained KPI card block with trend, icon, and comparison period.

View in Storybook
Metric Card
Loading Storybook preview…

Installation

bun add @otfdashkit/ui

Usage

Import MetricCard from @otfdashkit/ui.

Code
// Metric Card — Self-contained KPI card block with trend, icon, and comparison period.
//
// Install:
//   bun add @otfdashkit/ui

import { MetricCard } from '@otfdashkit/ui'

export function Example() {
  return (
    <MetricCard>
      {/* your content */}
    </MetricCard>
  )
}

Props

Props declared in the MetricCard source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
changestring'+12.5%'
classNamestring
labelstring'Total Revenue'
trend'up' | 'down''up'
valuestring'$48,295'

Related