KPI Dashboard

Dashboard template focused on KPIs and trends.

Overview

KPI Dashboard displays a collection of key performance indicators in a responsive grid layout. Each metric can include a value, description, trend indicator, and optional icon. Supports 2, 3, or 4 column layouts that adapt to screen size.

1
2
3
4
5
6
7
8
9
10
11
12
13

Code Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Props

• title - Dashboard title (optional)
• description - Dashboard description (optional)
• metrics - Array of KPI metric objects (required)
• columns - Number of columns: 2 | 3 | 4 (optional, default: 4)
• className - Additional CSS classes (optional)

KPIMetric

• id - Unique identifier for the metric (required)
• title - Metric title (required)
• value - Metric value, can be string or number (required)
• description - Metric description (optional)
• trend - Trend direction: "up" | "down" | "neutral" (optional)
• trendValue - Trend value to display (optional)
• icon - Icon element (optional)
• onClick - Click handler for the metric (optional)

Install

1

Accessibility

KPI Dashboard uses semantic HTML with proper heading hierarchy. All metrics are keyboard accessible and screen reader friendly. Trend indicators use appropriate color coding for accessibility. Compliant with WCAG 2.1.

Use Cases

• Executive dashboards with key business metrics
• Analytics overview pages
• Performance monitoring dashboards
• Business intelligence applications
• Financial dashboards