ObjectUIComponentsData 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
{
"type": "statistic",
"label": "Total Revenue",
"value": "$45,231.89"
}With Trend Indicators
Positive Trend
{
"type": "statistic",
"label": "Active Users",
"value": "12,543",
"trend": "up",
"description": "+12.5% from last month"
}Negative Trend
{
"type": "statistic",
"label": "Bounce Rate",
"value": "24.8%",
"trend": "down",
"description": "-3.2% from last month"
}Neutral
{
"type": "statistic",
"label": "Conversion Rate",
"value": "3.24%",
"trend": "neutral",
"description": "No change"
}With Descriptions
With Description
{
"type": "statistic",
"label": "Total Sales",
"value": "145,892",
"description": "Across all products this quarter"
}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;
}Examples
Dashboard Metrics
Metrics Grid
{
"type": "grid",
"cols": 3,
"gap": 4,
"children": [
{
"type": "statistic",
"label": "Total Revenue",
"value": "$45,231.89",
"trend": "up",
"description": "+20.1% from last month"
},
{
"type": "statistic",
"label": "Subscriptions",
"value": "2,350",
"trend": "up",
"description": "+180 this month"
},
{
"type": "statistic",
"label": "Active Now",
"value": "573",
"trend": "up",
"description": "+201 since last hour"
}
]
}Sales Dashboard
Sales Dashboard
{
"type": "div",
"className": "max-w-4xl",
"children": [
{
"type": "text",
"content": "Sales Overview",
"className": "text-2xl font-bold mb-6"
},
{
"type": "grid",
"cols": 2,
"gap": 4,
"children": [
{
"type": "statistic",
"label": "Revenue",
"value": "$125,430",
"trend": "up",
"description": "+15.2% vs last quarter"
},
{
"type": "statistic",
"label": "Orders",
"value": "3,842",
"trend": "up",
"description": "+8.7% vs last quarter"
},
{
"type": "statistic",
"label": "Average Order",
"value": "$32.65",
"trend": "down",
"description": "-2.1% vs last quarter"
},
{
"type": "statistic",
"label": "Refund Rate",
"value": "2.4%",
"trend": "neutral",
"description": "No significant change"
}
]
}
]
}Simple Stats Row
Social Stats
{
"type": "flex",
"gap": 6,
"className": "p-4",
"children": [
{
"type": "statistic",
"label": "Views",
"value": "124.5K"
},
{
"type": "statistic",
"label": "Likes",
"value": "8.2K"
},
{
"type": "statistic",
"label": "Comments",
"value": "342"
},
{
"type": "statistic",
"label": "Shares",
"value": "89"
}
]
}