Stats Card
Display key metrics with trends and icons.
Installation
bash
npx @smicolon/cli add stats-cardRun init once per project before adding components. See Installation.
Preview
Revenue
SAR 48,200
+12.5%vs last month
Orders
1,284
+8%vs last month
Returns
36
-2.1%vs last month
Features
- Title and value display
- Trend indicator (up/down with percentage)
- Optional icon
- Description text
- Loading state
- StatsGrid for layout
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Label above the value. |
value | string | number | — | The main value. |
description | string | — | Text below the value. |
icon | ReactNode | — | Icon in the corner. |
trend | { value, direction: "up" | "down" | "neutral" } | — | Change, with an up or down arrow. |
loading | boolean | false | Shows a skeleton while loading. |
StatsGrid | { columns: 2 | 3 | 4 } | — | Lays the cards out in 2, 3 or 4 columns. |
className | string | — | Extra classes for the component. |