Dashboard Overview Page

Dashboard Overview Page is a high-level analytics template that surfaces key KPIs, trends, and recent activity in a single view.

Features:

• Top-level KPI cards (revenue, users, conversion, orders, etc.)
• Key metrics grid with clear up/down trend indicators (↑/↓)
• Latest activity / transactions list with built-in pagination
• Date range filter that can drive KPI and metric updates
• Primary and secondary call-to-action buttons for key flows (e.g. “Export report”, “View details”)
• Gradient-enhanced background and cards for a modern, polished UI

---

Preview

Dashboard Overview

Monitor key metrics and recent activity

Date range

–

Revenue

$124.5k

+12.5% vs last period

Active Users

12,345

+8.2% vs last period

Conversion Rate

3.24%

-0.4% vs last period

Orders

1,892

+15.1% vs last period

Key metrics

Overview for selected period

Page Views

48.2k

+5.2%

Avg. Session

4m 32s

-2.1%

Bounce Rate

42%

-1.8%

Sign-ups

892

+12%

Support Tickets

24

0%

NPS Score

72

+3

Latest activity

Recent transactions and events

Payment received

Invoice #1024

+$1,2502 min ago

New user sign-up

john@example.com

15 min ago

Order shipped

Order #8821

$89.001 hour ago

Support ticket closed

#4421

2 hours ago

Subscription renewed

Premium plan

$29/mo3 hours ago

Code

import {
  Dashboard,
  DashboardHeader,
  DashboardKPICards,
  DashboardMetrics,
  DashboardLastActivity,
} from "@ignix-ui/dashboard-overview-page";

const kpiCards = [/* ...KPICard[] */];
const keyMetrics = [/* ...KeyMetric[] */];
const activityItems = [/* ...ActivityItem[] */];

export function Example() {
  return (
    <Dashboard>
      <DashboardHeader
        title="Dashboard Overview"
        description="Monitor key metrics and recent activity"
        onDateRangeChange={(range) => console.log("Range:", range)}
        onExportReport={() => console.log("Export report")}
        onViewDetails={() => console.log("View details")}
      />
      <DashboardKPICards cards={kpiCards} />
      <DashboardMetrics metrics={keyMetrics} />
      <DashboardLastActivity items={activityItems} pageSize={5} />
    </Dashboard>
  );
}

---

Installation

CLI

ignix add component dashboard-overview-page

Manual

Install the template and use the same composable API shown in the demo.
Import Dashboard, DashboardHeader, DashboardKPICards, DashboardMetrics, and DashboardLastActivity from your design system (or copy the implementation from apps/docs/src/components/UI/dashboard-overview) and wire them up with your own KPI, metrics, and activity data.

---

Features

• KPI cards for top-level metrics like revenue, active users, conversion, and orders
• Key metrics grid with clear trend indicators (↑ for up, ↓ for down, neutral state)
• Gradient-enhanced UI: background, KPI cards, and metric borders for a modern analytic look
• Latest activity list with built-in pagination
• Date range filter that can drive KPI and metric updates via callback
• Composable API that lets you build your own layouts from smaller building blocks

---

Usage

Basic usage

import {
  Dashboard,
  DashboardHeader,
  DashboardKPICards,
  DashboardMetrics,
  DashboardLastActivity,
} from "@ignix-ui/dashboard-overview-page";

export function DashboardScreen() {
  return (
    <Dashboard>
      <DashboardHeader
        title="Dashboard Overview"
        description="Monitor key metrics and recent activity"
        onExportReport={() => console.log("Export report")}
        onViewDetails={() => console.log("View details")}
      />
      <DashboardKPICards cards={kpiCards} />
      <DashboardMetrics metrics={keyMetrics} />
      <DashboardLastActivity items={activityItems} pageSize={5} />
    </Dashboard>
  );
}

With custom data and date range callback

const kpiCards = [
  { id: "rev", label: "Revenue", value: "$89.2k", trend: "up", trendLabel: "+18% vs last month" },
  { id: "subs", label: "Subscriptions", value: "2,104", trend: "up", trendLabel: "+6% vs last month" },
  { id: "churn", label: "Churn Rate", value: "1.2%", trend: "down", trendLabel: "-0.3% vs last month" },
  { id: "mrr", label: "MRR", value: "$45.1k", trend: "up", trendLabel: "+9% vs last month" },
];

export function DashboardScreen() {
  const [range, setRange] = useState<DashboardDateRange | undefined>();

  return (
    <Dashboard>
      <DashboardHeader
        title="Dashboard Overview"
        description="Monitor key metrics and recent activity"
        dateRange={range}
        onDateRangeChange={setRange}
        onExportReport={() => console.log("Export report for range", range)}
      />
      <DashboardKPICards cards={kpiCards} />
      <DashboardMetrics metrics={keyMetrics} />
      <DashboardLastActivity items={activityItems} pageSize={5} />
    </Dashboard>
  );
}

Gradient theme container

<Dashboard className="bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
  {/* ...header, KPICards, metrics, last activity */} 
</Dashboard>;

---

Props

Dashboard

Prop	Type	Default	Description
children	ReactNode	required	Composed sections (header, KPI cards, metrics, activity).
className	string	-	Optional root container class (e.g. for themes/spacing).

DashboardHeader

Prop	Type	Default	Description
title	string	"Dashboard Overview"	Main heading text.
description	string	"Monitor key metrics and recent activity"	Short subheading under the title.
dateRange	DashboardDateRange	undefined	Controlled date range value (start/end).
onDateRangeChange	(range: DashboardDateRange) => void	undefined	Called when the user selects a new date range.
exportLabel	string	"Export Report"	Label for the primary CTA button.
onExportReport	() => void	undefined	Called when the primary CTA is clicked.
viewDetailsLabel	string	"View Details"	Label for the secondary CTA button.
onViewDetails	() => void	undefined	Called when the secondary CTA is clicked.
actions	ReactNode	undefined	Custom actions node (replaces default buttons when provided).
className	string	-	Optional wrapper class for the header row.

DashboardKPICards

Prop	Type	Default	Description
cards	KPICard[]	[]	Array of KPI card definitions to render in the row.
className	string	-	Optional wrapper class for the KPI cards section.

DashboardMetrics

Prop	Type	Default	Description
metrics	KeyMetric[]	[]	Metrics to render in the quick stats grid.
title	string	"Key metrics"	Section title.
description	string	"Overview for selected period"	Section description.
className	string	-	Optional wrapper class for the metrics section.

DashboardLastActivity

Prop	Type	Default	Description
items	ActivityItem[]	[]	Activity / transactions to display (paginated).
pageSize	number	5	Items per page.
title	string	"Latest activity"	Section title.
description	string	"Recent transactions and events"	Section description.
emptyMessage	string	"No activity in this period."	Message shown when there are no items.
className	string	-	Optional wrapper class for the activity section.

Data types

Type	Shape	Description
KPICard	{ id, label, value, rawValue?, trend, trendLabel }	KPI card config (revenue, users, conversion…).
KeyMetric	{ id, label, value, trend, trendValue }	Quick stat metric with trend indicator.
ActivityItem	{ id, title, subtitle?, timestamp, status?, amount? }	Latest activity / transaction item.
DashboardDateRange	{ start: Date | null; end: Date | null }	Selected date range for filtering.

---

Notes

• The dashboard is designed to be a starting point for analytic pages — you can add additional sections like charts, tables, and filters around or between the existing sections.
• Trend indicators are intentionally simple (↑ / ↓ / neutral) to keep the UI readable at a glance.
• The composable primitives (Dashboard, DashboardHeader, DashboardKPICards, DashboardMetrics, DashboardLastActivity) give you full control over layout and data. You can mirror the Storybook examples or build your own custom dashboard layout on top.