Component
StatCard
Display key metrics and statistics with optional trend indicators.
tsx
import { StatCard } from 'wss3-forge'Usage
•
Use for dashboard metrics and KPIs
•
Include change percentage to show trends
•
Color code icons to match the metric meaning
•
Keep labels short and descriptive
Users
13%
1,234
Revenue
8%
$45K
Examples
With Positive Trend
Total Users
13%vs last month
1,234
tsx
1<StatCard2 icon={<People20Regular />}3 label="Total Users"4 value="1,234"5 color="var(--brand-primary)"6 change={12.5}7 changeLabel="vs last month"8/>With Negative Trend
Orders
5%vs last week
856
tsx
1<StatCard2 icon={<Cart20Regular />}3 label="Orders"4 value="856"5 color="var(--color-warning)"6 change={-5.2}7 changeLabel="vs last week"8/>Dashboard Grid
Users
13%
1,234
Revenue
8%
$45,678
Orders
2%
856
Views
16%
12.4K
tsx
1<Grid columns={{ xs: 1, sm: 2, lg: 4 }} gap="md">2 <StatCard icon={<People20Regular />} label="Users" value="1,234" color="var(--brand-primary)" change={12.5} />3 <StatCard icon={<Money20Regular />} label="Revenue" value="$45,678" color="var(--color-success)" change={8.3} />4 <StatCard icon={<Cart20Regular />} label="Orders" value="856" color="var(--color-warning)" change={-2.1} />5 <StatCard icon={<Eye20Filled />} label="Views" value="12.4K" color="var(--color-info)" change={15.7} />6</Grid>Previous
ImageCard
Next
VStack
Last updated: December 2025