Pro Components

Base Components

Charts Group 2

Full analytics bento dashboard with date presets, stat cards with icons and badges, charts, top pages list, and active users.

Example

Analytics Dashboard

Real-time insights into your business

12.5%

Total Revenue

$475,098

8.2%

Total Sessions

81,104

5.4%

Conversion Rate

4.5%

2.1%

Bounce Rate

36%

Revenue Trend
Traffic Channels
81,104
Organic Search
38%
Direct
26%
Referral
18%
Social
12%
Email
6%
Top Pages
1/products
12,453+12.5%
2/pricing
8,234+8.2%
3/about
6,123-2.1%
4/blog/guide
4,532+15.8%
5/contact
3,421+5.4%
Most Active Users
SC

Sarah Chen

sarah@example.com

47 sessions
MJ

Mike Johnson

mike@example.com

42 sessions
EW

Emma Wilson

emma@example.com

38 sessions
JB

James Brown

james@example.com

35 sessions

Introduction

Charts Group 2 is a full analytics bento dashboard:
  • Header: Select dropdown for date presets and calendar button for custom ranges.
  • Stat cards: Colored icons and change badges (e.g. +12%, -3%).
  • Revenue chart: Area chart spanning two columns.
  • Traffic channels: Donut chart with session distribution.
  • Top pages: Ranked list with view counts; "View all" link.
  • Active users: Avatars with "View all" link.
Uses Chart, Card, NativeSelect, Popover, Calendar, Avatar, Badge, Button, and Recharts.

Usage

import { ChartGroup14 } from "@/components/ui/chart-group-14";

<ChartGroup14 />;
Connect the date select and calendar to your data range; replace top pages and active users with real data.

On this page