DUKpiCard
DataKPI metric with trend delta.
import { DUKpiCard } from 'deri-ui';Live preview
Revenue
$12.4k
+8%
typescript
<DUKpiCard label="MRR" value="$48k" delta="+12%" trend="up" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label / value / delta | string | number | — | Metric |
| trend | 'up' | 'down' | 'neutral' | — | Delta color |
| icon | ReactNode | — | Trailing icon |
Usage
import { DUKpiCard } from 'deri-ui';
<DUKpiCard label="MRR" value="$48k" delta="+12%" trend="up" />Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.