Best Home Assistant Energy Cards for Custom Dashboards

The built-in Home Assistant energy dashboard is a solid starting point. But if you want a dashboard that shows exactly what you need—at a glance, on a wall tablet, or on your phone—you need custom Lovelace cards. The right cards turn raw energy data into something you actually look at every day.

Here are the best energy cards for Home Assistant, with ready-to-use YAML for each one.

1. Power Flow Card (Tesla Style)

The power-flow-card (available through HACS) shows real-time energy flow between grid, solar, battery, and home consumption. It's the card most people picture when they think "energy dashboard."

type: custom:power-flow-card
entities:
  grid:
    entity: sensor.grid_power
    name: Grid
  solar:
    entity: sensor.solar_power
    name: Solar
  battery:
    entity: sensor.battery_power
    name: Battery
    state_of_charge: sensor.battery_soc
  home:
    entity: sensor.home_power
    name: Home
watt_threshold: 50
kw_decimals: 1

This card shows animated lines indicating energy direction. When solar is producing, you see energy flowing from solar to home and (if surplus) to battery or grid. At night, flow reverses from grid or battery to home.

2. Energy Distribution Card (Built-in)

Home Assistant includes a native energy distribution card since 2023.x. No HACS needed—it uses your energy dashboard configuration automatically:

type: energy-distribution
link_dashboard: true

Simple, clean, and zero configuration. It pulls data from your energy dashboard settings and shows a flow diagram with current power values. The link_dashboard option makes it clickable to jump to the full energy dashboard.

3. Gauge Cards for Real-Time Power

Gauge cards give instant visual feedback on current power consumption. Color-coded severity levels make it obvious when usage is normal, elevated, or high:

type: gauge
entity: sensor.grid_power
name: Grid Power
min: 0
max: 8000
unit: W
severity:
  green: 0
  yellow: 3000
  red: 5000
needle: true

Set the max value to your typical peak consumption. The severity thresholds should match your peak shaving targets—green for normal, yellow for elevated, red for "something big is running."

Solar Production Gauge

type: gauge
entity: sensor.solar_power
name: Solar Production
min: 0
max: 6000
unit: W
severity:
  red: 0
  yellow: 1000
  green: 3000
needle: true

For solar, reverse the severity colors—green means good production, red means low output.

4. Daily Cost and Consumption Summary

An entities card showing today's key numbers. This answers "how much have I spent today?" without any clicks:

type: entities
title: Today's Energy
entities:
  - entity: sensor.daily_energy
    name: Consumption
    icon: mdi:lightning-bolt
  - entity: sensor.daily_energy_cost
    name: Cost
    icon: mdi:currency-eur
  - entity: sensor.daily_solar_production
    name: Solar Produced
    icon: mdi:solar-power
  - entity: sensor.electricity_price
    name: Current Rate
    icon: mdi:tag-outline

5. History Graph for Trends

A 24-hour history graph shows consumption patterns throughout the day. Useful for identifying when your peaks happen and whether automations are working:

type: history-graph
title: Power Usage (24h)
hours_to_show: 24
entities:
  - entity: sensor.grid_power
    name: Grid
  - entity: sensor.solar_power
    name: Solar

6. ApexCharts Card (Advanced)

For more sophisticated visualizations, the apexcharts-card (HACS) creates professional charts. Here's a stacked bar chart showing daily consumption by source:

type: custom:apexcharts-card
header:
  title: Weekly Energy
  show: true
graph_span: 7d
span:
  end: day
series:
  - entity: sensor.daily_energy
    type: column
    name: Grid
    group_by:
      func: max
      duration: 1d
    color: "#e74c3c"
  - entity: sensor.daily_solar_production
    type: column
    name: Solar
    group_by:
      func: max
      duration: 1d
    color: "#f1c40f"

ApexCharts is the most flexible charting card available. It supports line, bar, area, scatter, and radial charts with extensive customization options.

7. Mushroom Cards (Modern UI)

The mushroom cards (HACS) offer a clean, modern aesthetic that works well on tablets and phones. The chips card is perfect for a quick energy status bar:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.grid_power
    icon: mdi:transmission-tower
    content_info: state
  - type: entity
    entity: sensor.solar_power
    icon: mdi:solar-power
    content_info: state
  - type: entity
    entity: sensor.battery_soc
    icon: mdi:battery
    content_info: state
  - type: entity
    entity: sensor.daily_energy_cost
    icon: mdi:currency-eur
    content_info: state

These compact chips show the essentials in a single row. Add them at the top of your dashboard as a status bar.

Putting It All Together

A well-designed energy dashboard typically uses this layout:

1. Top row: Status chips (current power, solar, battery, today's cost)
2. Main area: Power flow card or energy distribution card
3. Middle: Gauges for grid power and solar production side by side
4. Bottom: History graph or ApexCharts weekly comparison

Final Tip: Design for Glanceability

The best energy dashboard is one you can understand in 3 seconds. When you walk past a wall tablet, you should immediately know: Am I producing? Am I consuming a lot? What's today costing me?

Big numbers, clear colors, minimal text. That's the goal. Save the detailed charts for when you sit down to analyze trends.