Metric Card
DataSelf-contained KPI card block with trend, icon, and comparison period.
Metric CardData · Web
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.
| Prop | Type | Default | Description |
|---|---|---|---|
| change | string | '+12.5%' | |
| className | string | ||
| label | string | 'Total Revenue' | |
| trend | 'up' | 'down' | 'up' | |
| value | string | '$48,295' |