DUStatCard
WidgetsMetric tile with tone gradients; optional interactive increment.
import { DUStatCard } from 'deri-ui';Live preview
Downloads
1280+
typescript
<DUStatCard label="Users" value={1200} tone="success" suffix="+" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label / value / suffix | string | number | — | Metric |
| tone | primary | success | warning | danger | info | — | Color |
| interactive | boolean | false | Click increments |
Usage
import { DUStatCard } from 'deri-ui';
<DUStatCard label="Users" value={1200} tone="success" suffix="+" />Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.