StatCard

Displays key metrics and statistics with label, value, trend indicator, and optional icon. Ideal for dashboards and analytics views.

Installation
# Install @opencosmos/ui to use StatCard
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
*— The metric label
*— The metric value
— Percentage change (positive or negative number)
— Direction of the trend
— Visual style variant
— Size of the stat card
— Additional description text
Usage
Import
import { StatCard } from '@opencosmos/ui';
Example
<StatCard>
  Content
</StatCard>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
label*text"Total Revenue"The metric label
value*text"$45,231"The metric value
changetext"12.5"Percentage change (positive or negative number)
trendup | down | flat"up"Direction of the trend
variantdefault | outline | glass"default"Visual style variant
sizesm | default | lg"default"Size of the stat card
descriptiontext"from last month"Additional description text

Accessibility

  • Uses semantic <dl>/<dt>/<dd> for label/value pairs
  • Trend conveyed via icon + color (not color alone)
  • role="article" for logical grouping
  • WCAG AA compliant color contrast

Examples

Revenue (Up)
Total Revenue
$45,231
+12.5%from last month
Users (Down)
Active Users
2,350
-3.1%from last week
Flat Trend
Bounce Rate
42.3%
0%
Glass Variant
Subscribers
8,120
+8.2%

Code Examples

Basic Usage

A simple stat card with trend indicator

import { StatCard } from '@opencosmos/ui'

<StatCard
  label="Total Revenue"
  value="$45,231"
  change={12.5}
  trend="up"
  description="from last month"
/>

Dashboard Grid

A responsive grid of stat cards

import { StatCard, StatCardGroup } from '@opencosmos/ui'

<StatCardGroup>
  <StatCard label="Revenue" value="$45,231" change={12.5} />
  <StatCard label="Users" value="2,350" change={-3.1} />
  <StatCard label="Orders" value="1,203" change={8.2} />
  <StatCard label="Conversion" value="3.2%" change={0.4} />
</StatCardGroup>