ObjectUIDashboard Blocks
Stats cards, metrics, and dashboard layouts
Dashboard Blocks
Professional dashboard components for displaying metrics, statistics, and data visualizations.
Stats Card
Display key metrics with trend indicators.
Stats Cards Grid
{
"type": "grid",
"gap": 4,
"className": "md:grid-cols-2 lg:grid-cols-4",
"children": [
{
"type": "statistic",
"label": "Total Revenue",
"value": "$45,231.89",
"trend": "up",
"description": "+20.1% from last month",
"icon": "dollar-sign"
},
{
"type": "statistic",
"label": "New Users",
"value": "+2,350",
"trend": "up",
"description": "+180.1% from last month",
"icon": "users"
},
{
"type": "statistic",
"label": "Active Sessions",
"value": "+12,234",
"trend": "up",
"description": "+19% from last month",
"icon": "activity"
},
{
"type": "statistic",
"label": "Conversion Rate",
"value": "3.2%",
"trend": "down",
"description": "-4.3% from last month",
"icon": "percent"
}
]
}Recent Activity
Display recent user activities or transactions.
Recent Activity Card
{
"type": "card",
"className": "w-full max-w-2xl",
"children": [
{
"type": "container",
"className": "p-6",
"children": [
{
"type": "flex",
"className": "items-center justify-between mb-4",
"children": [
{
"type": "text",
"content": "Recent Transactions",
"className": "text-lg font-semibold"
},
{
"type": "button",
"label": "View All",
"variant": "ghost",
"size": "sm"
}
]
},
{
"type": "stack",
"spacing": 4,
"children": [
{
"type": "flex",
"className": "items-center justify-between pb-4 border-b",
"children": [
{
"type": "flex",
"className": "items-center space-x-4",
"children": [
{
"type": "avatar",
"fallback": "OM",
"className": "h-9 w-9"
},
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "text",
"content": "Olivia Martin",
"className": "text-sm font-medium"
},
{
"type": "text",
"content": "olivia.martin@email.com",
"className": "text-xs text-muted-foreground"
}
]
}
]
},
{
"type": "text",
"content": "+$1,999.00",
"className": "text-sm font-medium"
}
]
},
{
"type": "flex",
"className": "items-center justify-between pb-4 border-b",
"children": [
{
"type": "flex",
"className": "items-center space-x-4",
"children": [
{
"type": "avatar",
"fallback": "JL",
"className": "h-9 w-9"
},
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "text",
"content": "Jackson Lee",
"className": "text-sm font-medium"
},
{
"type": "text",
"content": "jackson.lee@email.com",
"className": "text-xs text-muted-foreground"
}
]
}
]
},
{
"type": "text",
"content": "+$39.00",
"className": "text-sm font-medium"
}
]
},
{
"type": "flex",
"className": "items-center justify-between pb-4 border-b",
"children": [
{
"type": "flex",
"className": "items-center space-x-4",
"children": [
{
"type": "avatar",
"fallback": "IN",
"className": "h-9 w-9"
},
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "text",
"content": "Isabella Nguyen",
"className": "text-sm font-medium"
},
{
"type": "text",
"content": "isabella.nguyen@email.com",
"className": "text-xs text-muted-foreground"
}
]
}
]
},
{
"type": "text",
"content": "+$299.00",
"className": "text-sm font-medium"
}
]
},
{
"type": "flex",
"className": "items-center justify-between pb-4 border-b",
"children": [
{
"type": "flex",
"className": "items-center space-x-4",
"children": [
{
"type": "avatar",
"fallback": "WK",
"className": "h-9 w-9"
},
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "text",
"content": "William Kim",
"className": "text-sm font-medium"
},
{
"type": "text",
"content": "will@email.com",
"className": "text-xs text-muted-foreground"
}
]
}
]
},
{
"type": "text",
"content": "+$99.00",
"className": "text-sm font-medium"
}
]
},
{
"type": "flex",
"className": "items-center justify-between",
"children": [
{
"type": "flex",
"className": "items-center space-x-4",
"children": [
{
"type": "avatar",
"fallback": "SD",
"className": "h-9 w-9"
},
{
"type": "stack",
"spacing": 2,
"children": [
{
"type": "text",
"content": "Sofia Davis",
"className": "text-sm font-medium"
},
{
"type": "text",
"content": "sofia.davis@email.com",
"className": "text-xs text-muted-foreground"
}
]
}
]
},
{
"type": "text",
"content": "+$39.00",
"className": "text-sm font-medium"
}
]
}
]
}
]
}
]
}Overview Dashboard
Complete dashboard layout with multiple sections.
Dashboard Overview
{
"type": "stack",
"spacing": 6,
"children": [
{
"type": "flex",
"className": "items-center justify-between",
"children": [
{
"type": "text",
"content": "Dashboard",
"className": "text-3xl font-bold tracking-tight"
},
{
"type": "button",
"label": "Download Report",
"variant": "outline",
"size": "sm"
}
]
},
{
"type": "grid",
"gap": 4,
"className": "md:grid-cols-2 lg:grid-cols-4",
"children": [
{
"type": "card",
"children": [
{
"type": "container",
"className": "p-4",
"children": [
{
"type": "text",
"content": "Total Revenue",
"className": "text-sm font-medium text-muted-foreground"
},
{
"type": "text",
"content": "$45,231",
"className": "text-2xl font-bold mt-2"
}
]
}
]
},
{
"type": "card",
"children": [
{
"type": "container",
"className": "p-4",
"children": [
{
"type": "text",
"content": "Subscriptions",
"className": "text-sm font-medium text-muted-foreground"
},
{
"type": "text",
"content": "+2,350",
"className": "text-2xl font-bold mt-2"
}
]
}
]
},
{
"type": "card",
"children": [
{
"type": "container",
"className": "p-4",
"children": [
{
"type": "text",
"content": "Sales",
"className": "text-sm font-medium text-muted-foreground"
},
{
"type": "text",
"content": "+12,234",
"className": "text-2xl font-bold mt-2"
}
]
}
]
},
{
"type": "card",
"children": [
{
"type": "container",
"className": "p-4",
"children": [
{
"type": "text",
"content": "Active Now",
"className": "text-sm font-medium text-muted-foreground"
},
{
"type": "text",
"content": "+573",
"className": "text-2xl font-bold mt-2"
}
]
}
]
}
]
},
{
"type": "grid",
"gap": 4,
"className": "md:grid-cols-2 lg:grid-cols-7",
"children": [
{
"type": "card",
"className": "lg:col-span-4",
"children": [
{
"type": "container",
"className": "p-6",
"children": [
{
"type": "text",
"content": "Overview",
"className": "text-lg font-semibold mb-4"
},
{
"type": "flex",
"className": "h-[300px] items-center justify-center text-muted-foreground",
"children": [
{
"type": "text",
"content": "Chart area - connect with plugin-charts"
}
]
}
]
}
]
},
{
"type": "card",
"className": "lg:col-span-3",
"children": [
{
"type": "container",
"className": "p-6",
"children": [
{
"type": "text",
"content": "Recent Sales",
"className": "text-lg font-semibold mb-4"
},
{
"type": "stack",
"spacing": 4,
"children": [
{
"type": "flex",
"className": "items-center",
"children": [
{
"type": "avatar",
"fallback": "OM",
"className": "h-9 w-9"
},
{
"type": "stack",
"spacing": 1,
"children": [
{
"type": "text",
"content": "Olivia Martin",
"className": "text-sm font-medium"
},
{
"type": "text",
"content": "olivia.martin@email.com",
"className": "text-xs text-muted-foreground"
}
]
},
{
"type": "text",
"content": "+$1,999.00",
"className": "ml-auto font-medium"
}
]
}
]
}
]
}
]
}
]
}
]
}Usage
Customize dashboard blocks for your needs:
Add Real Data
{
"type": "card",
"dataSource": {
"api": "/api/stats/revenue",
"method": "GET"
}
}Customize Colors
{
"type": "text",
"content": "+20.1%",
"className": "text-emerald-500"
}Add Actions
{
"type": "button",
"label": "View Details",
"action": {
"type": "navigate",
"path": "/dashboard/details"
}
}Next Steps
- Explore Form Blocks
- View Marketing Blocks
- Learn about Data Sources