MetricCard

KPI card with value, label, and trend.

import { MetricCard } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<MetricCard label="Active Users" value="12,345" variant="success" />

<MetricCard label="Pending Tasks" value="42" variant="warning" />

Prop	Type	Default	Description
`label` *	`string`	—	Metric label (e.g., "Total Projects").
`value` *	`string \| number`	—	Metric value (e.g., "2,500" or 42).
`variant`	`'default' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'accent'`	`'default'`	Color variant for the value.
`icon`	`JSX.Element`	—	Optional icon element shown before the label.
`trend`	`string`	—	Optional trend indicator (e.g., "+12%", "-3").
`trendDirection`	`'up' \| 'down' \| 'neutral'`	`'neutral'`	Direction of the trend (affects color).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant.
`onClick`	`() => void`	—	Click handler.
`class`	`string`	—	Additional CSS class for root element.
`style`	`JSX.CSSProperties`	—	Inline styles for root element.
`unstyled`	`boolean`	`false`	Remove all default styles, only apply classNames.
`children`	`JSX.Element`	—	Optional children rendered in extra section.

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.