Pro Components

Base Components

Charts Group 1

Business analytics bento with date navigation, compare toggle, export menu, and switchable chart views in a bento grid.

Example

Business Analytics

30 days selected · Apr 10 - May 9, 2026

Revenue

$304,548

+12.5%

Cost

$182,440

+8.2%

Profit

$119,965

+18.3%

Orders

2,407

+5.7%

Profit Margin

39.4%

+2.1%
Performance Overview
Revenue, cost, and profit trends
Device Breakdown
Traffic by device type
Desktop
58%
Mobile
32%
Tablet
10%
Customer Types
New vs returning customers
Hourly Traffic
Visitors and conversions by hour (today)

Introduction

Charts Group 1 is a business analytics dashboard:
  • Header: Date range with navigation arrows, compare toggle, and export dropdown.
  • Stats row: Key metrics (revenue, profit, orders).
  • Main chart: Tabs to switch between revenue, profit, and orders visualizations.
  • Device breakdown: Donut chart with center text.
  • Bento grid: Responsive layout with multiple chart types.
Uses Chart, Tabs, Button, DropdownMenu, Popover, Calendar, and Recharts.

Usage

import { ChartGroup15 } from "@/components/ui/chart-group-15";

<ChartGroup15 />;
Wire the date navigation and compare toggle to your data and date state as needed.
© 2026 BlakeUI. All rights reserved.

On this page