DashboardTemplate

Complete dashboard page template combining AppShell, NavigationHeader, and KpiStrip. A full-screen template for creating standard dashboard pages with navigation, metrics, and content.

Overview

DashboardTemplate is a ready-to-use template that combines multiple blocks into a complete dashboard page. It includes sidebar navigation, top header, KPI metrics strip, and main content area. Perfect for building dashboards quickly without composing blocks manually.

Install

1

Examples

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

Props

• sidebar - Sidebar navigation content (optional)
• sidebarHeader - Sidebar header (logo, title) (optional)
• sidebarFooter - Sidebar footer (user menu, etc.) (optional)
• headerLinks - Header navigation links (optional)
• headerLogoText - Header logo text (default: "Dashboard")
• metrics - KPI metrics to display (optional)
• kpiColumns - Number of columns for KPI strip: 2 | 3 | 4 (default: 4)
• children - Main content area (optional)
• appShellProps - Additional AppShell props (optional)

Features

• Complete dashboard structure in one component
• Combines AppShell + NavigationHeader + KpiStrip
• Optional sidebar navigation
• Optional header navigation
• Optional KPI metrics strip
• Flexible content area
• Configurable via appShellProps
• Fully accessible

Related Blocks

• AppShell - Base shell component
• NavigationHeader - Header navigation
• KpiStrip - KPI metrics strip
• KPIDashboard - Full KPI dashboard

When to Use

• ✅ Building standard dashboard pages
• ✅ Quick prototyping of dashboards
• ✅ Applications with consistent dashboard structure
• ❌ Highly custom layouts (use AppShell directly)
• ❌ Pages without sidebar/header (use simpler blocks)

Accessibility

DashboardTemplate inherits accessibility from AppShell, NavigationHeader, and KpiStrip. All components follow ARIA best practices and are keyboard navigable.