ComponentsData Display
Statistic
Display key metrics and statistical values with trend indicators
The Statistic component displays numerical data and key metrics with optional labels, descriptions, and trend indicators.
Basic Usage
Simple Statistic
With Trend Indicators
Positive Trend
Negative Trend
Neutral
With Descriptions
With Description
Schema
interface StatisticSchema {
type: 'statistic';
// Content
label?: string; // Label/title of the statistic
value: string | number; // Main value to display
description?: string; // Additional description text
icon?: string; // Optional icon name
// Trend indicator
trend?: 'up' | 'down' | 'neutral'; // Trend direction
// Styling
className?: string; // Tailwind CSS classes
// Base properties
id?: string;
visible?: boolean | string;
testId?: string;
}