Pro Components
Base Components
Charts Group 3
Full dashboard with preset date buttons, custom date range picker, stats row, and multiple chart cards that respond to date selection.
Example
Dashboard Overview
Track your business performance
Total Revenue
$215,236
+12.5%
Total Orders
1,994
+8.2%
Visitors
44,045
-2.4%
Conversion Rate
4.5%
+5.1%
Revenue Trend
Daily revenue for selected period
Sales by Category
Revenue breakdown
Electronics
Clothing
Home
Sports
Traffic Sources
Where your visitors come from
Quick Stats
Key metrics summary
Avg Order Value$108
Orders/Day64
Revenue/Day$6,943
Visitors/Day1421
Introduction
Charts Group 3 is a complete dashboard section:- Date controls: Preset buttons (7d, 30d, 90d) and custom date range picker.
- Stats row: Four metric cards (revenue, orders, conversion, avg. order).
- Bento grid: Area chart, donut chart, quick stats card, and horizontal bar chart.
- Responsive: Grid collapses on smaller screens; all sections can react to date range.
Usage
import { ChartGroup12 } from "@/components/ui/chart-group-12";
<ChartGroup12 />;