StatCard

Display

A KPI / metric card displaying a value, label, and optional trend indicator.

Props

Prop	Type	Default	Description
`label`*	`string`	—	Metric label.
`value`*	`string \| number`	—	Main metric value.
`trend`	`string`	—	Trend badge text (e.g. "+12%", "-3.4%").
`trendUp`	`boolean`	—	Positive (green) or negative (red) trend.
`description`	`string`	—	Optional description below the value.

Examples

KPI Grid

Revenue

$48,200

+8.2%

vs last month

Active users

1,280

+24%

Churn rate

2.4%

-0.3%

Open tickets

vue

<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
  <DsStatCard label="Revenue"       value="$48,200" trend="+8.2%"  :trendUp="true"  description="vs last month" />
  <DsStatCard label="Active users"  value="1,280"   trend="+24%"   :trendUp="true" />
  <DsStatCard label="Churn rate"    value="2.4%"    trend="-0.3%"  :trendUp="false" />
  <DsStatCard label="Open tickets"  value="34" />
</div>

Positive trend

Revenue

$48,200

+8.2%

Negative trend

Churn rate

2.4%

-0.3%

No trend

Open tickets

With description

Active sessions

1,280

+24%

Compared to last 30 days

Skeleton

Use DsStatCardSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsStatCardSkeleton showTrend />

No trend

vue

<DsStatCardSkeleton :showTrend="false" />

With description

vue

<DsStatCardSkeleton
  showTrend
  showDescription
/>

Accessibility

Trend indicator is decorative — screen readers read the value and label.

Skeleton

StatusBadge