About this component
Stat Card
A minimal stat card with a bold value, label, and optional trend delta for metrics rows.
Usage
The import and the props worth knowing about, in one place.
import { Card21 } from "@/components/beste/component/card21";
<Card21
value="98%"
label="Customer satisfaction"
delta="+2.1%"
trend="up" // "up" (default) | "down"
description="vs last quarter"
/>
<Card21
value="12k+"
label="Active teams"
tone="primary" // value: "foreground" (default) | "primary"
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | The headline value (e.g. "98%") |
label* | string | — | Label under the value |
delta | string | — | Optional delta chip (e.g. "+2.1%") |
trend | "up" | "down" | — | Delta direction, controls its color and arrow |
description | string | — | Muted context line under the label (e.g. "vs last quarter") |
tone | "foreground" | "primary" | — | Value color |
className | string | — | Additional classes merged onto the root |
