Dashboard Patterns
Common layouts and components for building energy management dashboards.
Stat Cards
Display key metrics with icons, values, and trend indicators.
Solar Production
4.2 kW
+12% from yesterday
Battery Level
78%
Grid Export
1.8 kW
Earning €0.32/hr
Home Usage
2.4 kW
+8% from average
Stat Cards with Status
Add badges to indicate device or system status.
Inverter
Online
4.2 kW
Current output
Battery
Charging
78%
Est. full in 2h
EV Charger
Idle
0 kW
No vehicle connected
Hero Metrics
Large, prominent display for the most important metric.
Today's Earnings
€12.8423%
vs €10.43 yesterday
Device List
Display a list of devices with status and quick actions.
Connected Devices
3 devices online
Solar Inverter
4.2 kW output
Online
Home Battery
78% charged
Charging
EV Charger
Ready
Idle
Page Header
Standard dashboard page header with title, description, and actions.
Dashboard
Welcome back! Here's your energy overview.
Best Practices
- Use a 4-column grid for stat cards on desktop, 2 on tablet, 1 on mobile
- Show the most important metrics first (top-left)
- Include trend indicators (+/-%) to show change over time
- Use consistent icon sizes (h-4 w-4 for headers, h-5 w-5 for larger)
- Add status badges to indicate real-time device states
- Use color-coded backgrounds for hero metrics (green for positive, red for alerts)
- Keep card titles short and scannable
- Show units clearly (kW, %, €)