Statistic

<Statistic>TailwindCSS Modules

A prominent Key Performance Indicator (KPI) display for dashboards with optional trends, icons, and descriptions.

InstallationColoxo CLI
npx coloxo add statistic --style coloxo-css
ES Module ImportPlayground / npm package
import { Statistic } from '@coloxo/ui';

Design Tokens:

--cx-success-600: #059669--cx-error-600: #DC2626--cx-text-primary: #0F172A--cx-text-tertiary: #64748B

1. Variant Matrix

Statistics support various configurations for financial data, raw counts, and percentage changes, along with optional icons and trend indicators.

BasicWith Small IconWith Featured IconWith Trend & Description
Standard Count
Total Employees
1,248
Total Employees
1,248
Total Employees
1,248
Total Employees
1,248
+12
vs last year
Financial (Prefix)
Monthly Revenue
$84,293
Monthly Revenue
$84,293
Monthly Revenue
$84,293
Monthly Revenue
$84,293
-4.2%
vs last month
Percentage (Suffix)
Bounce Rate
42.3%
Bounce Rate
42.3%
Bounce Rate
42.3%
Bounce Rate
42.3%
0%
no change

2. Interactive Props Configurator

Visual Render Canvas
Total Revenue
1,248
+12.4%
vs last month
tsx
<Statistic  label="Total Revenue"  value="1,248"  trend="+12.4%"  trendDirection="up"  description="vs last month"/>

3. Dark theme

Text colors and trend badges adapt to dark backgrounds automatically.

Active Users
12.4k
+12%
vs last month
Total Revenue
$84,293
-4.2%

4. Enterprise layout compositions

Statistics are usually laid out in responsive dashboard grids.

Total Employees
1,248
Active Projects
42
+3
This week
Total Revenue
$84,293
+12.4%

Accessibility

Trend Colors

Trend colors (red/green) are accompanied by a small up/down arrow icon, ensuring the meaning is not conveyed by color alone.

Accessible Labels

The label is rendered visibly, which inherently provides an accessible name for the metric.

Props

NameTypeDefaultDescription
trendDirection"up" | "down" | "neutral"—Overrides automatic trend color.