StatCard

A card component for displaying key metrics and statistics. Shows a label-value pair with optional icon, trend indicator (up/down/neutral with percentage), subtitle, and link support. Includes a loading skeleton state.

Import

import { StatCard } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<StatCard
  label="Total Bookings"
  value={142}
  icon={<Icon name="TicketIcon" />}
  trend={{ value: 12, direction: 'up' }}
  subtitle="Last 30 days"
/>

<StatCard
  label="Revenue"
  value="$4,250"
  icon={<Icon name="CurrencyDollarIcon" />}
  iconBgClass="bg-green-100 text-green-600"
  href="/dashboard/earnings"
/>

<StatCard label="Sessions" value={8} loading />

Props

Prop	Type	Default	Description
`label`*	string	-	Label or title for the statistic.
`value`*	string \| number	-	The main metric value to display.
`icon`	ReactNode	-	Icon displayed to the left of the stat.
`iconBgClass`	string	`'bg-primary-100 text-primary-600'`	Background and text color classes for the icon container.
`trend`	{ value: number; direction: "up" \| "down" \| "neutral" }	-	Trend indicator with percentage value and direction arrow.
`subtitle`	string	-	Subtitle text shown below the value.
`href`	string	-	Optional link URL. Makes the entire card a clickable Next.js Link.
`loading`	boolean	`false`	Whether to show a skeleton loading state.
`className`	string	-	Additional CSS classes for the card.