1 variants

Dashboard

An analytics dashboard in one section. A date range switch, a row of numbers, a bar run, a donut, a ranked list and a year of activity.

Analytics

KPI cards and a goal tracker, a full width bar run, a donut beside a ranked list, and an activity heatmap. Stacks on a phone, with the charts scrolling sideways.

Overview

Everything that happened across your workspace.

Monthly revenue

$48.2K

+12.4%vs last month

Active users

6,912

+6.1%vs last month

Q3 new revenue

74% of goal

$184K/ $250K

On pace to reach the goal.

New signupsWeekly, last six months

Week 1Week 26

New signups
	Signups
Week 1	182
Week 2	204
Week 3	196
Week 4	221
Week 5	240
Week 6	232
Week 7	258
Week 8	249
Week 9	271
Week 10	266
Week 11	290
Week 12	305
Week 13	298
Week 14	322
Week 15	340
Week 16	331
Week 17	356
Week 18	372
Week 19	365
Week 20	391
Week 21	410
Week 22	402
Week 23	428
Week 24	447
Week 25	439
Week 26	468

Traffic by device

Desktop18,42056%
Mobile12,31037%
Tablet2,1407%

Top pages

PageVisitors

/pricing8,420
/components/data-table6,130
/blocks/hero4,870
/docs/install3,210

Agent runs1,430 runs in the period

page.tsx

import { DashboardAnalytics } from "@/components/blocks/dashboard-analytics";

export default function Page() {
  return (
    <DashboardAnalytics
      title="Overview"
      kpis={[{ label: "Revenue", value: "$48.2K", delta: 0.12 }]}
      bars={{ name: "Signups", labels, values }}
      donut={{ title: "Traffic by device", slices }}
      list={{ title: "Top pages", items }}
      onRangeChange={refetch}
    />
  );
}

"use client";

import { motion, useReducedMotion } from "motion/react";
import { useId, useState } from "react";
import { type ActivityHeatmapProps, ActivityHeatmap } from "@/components/registry/activity-heatmap";
import { type BarChartProps, BarChart } from "@/components/registry/bar-chart";
import { type BarListProps, BarList } from "@/components/registry/bar-list";
import { type DonutChartProps, DonutChart } from "@/components/registry/donut-chart";
import { type KpiCardProps, KpiCard } from "@/components/registry/kpi-card";
import { type KpiTargetProps, KpiTarget } from "@/components/registry/kpi-target";
import { cn } from "@/lib/utils";

98 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/dashboard-analytics

Traffic by device
Slice	Value	Share
Desktop	18,420	56%
Mobile	12,310	37%
Tablet	2,140	7%