Custom card (Battery Donut Card) not showing in Lovelace card picker (new dashboard sections)

Development
1

Hi everyone :wave:
I’ve created a custom Lovelace card called Battery Donut Card (works perfectly when added manually via YAML),
but it doesn’t appear in the card picker in the new dashboard UI (2025.10.0).

It’s correctly registered with:

window.customCards.push({
  type: "battery-donut-card",
  name: "Battery Donut Card",
  description: "Smooth multi-stop battery donut (SoC + kWh)...",
  preview: true,
  documentationURL: "https://github.com/lodebo/battery-donut-card#readme",
  version: "1.0.4"
});

When I run


window.customCards

it correctly lists my card,

but the picker (the one that appears in new-style “Sections” dashboards) doesn’t show it under Custom cards.

The card loads fine manually using:


type: custom:battery-donut-card
entity: sensor.my_battery_soc

So I’m wondering:
• Is this a known limitation in the new section-based dashboards?
• Do custom cards need a specific property to appear in the picker?
• Or is there a different metadata structure expected since …… ?

  • Card resource: /hacsfiles/battery-donut-card/battery-donut-card.js?v=1.0.4
2

You need to add the getStubConfig method for the card picker…

Your card can also define a getStubConfig method that returns a default card configuration (without the type: parameter) in json form for use by the card type picker in the dashboard.
1 Like
3

Thx but I have that.

// ---- Card picker default config (per HA docs; NO 'type:' key) ----
static getStubConfig() {
  return {
    entity: "sensor.battery_soc",
    cap_kwh: 10.24,
    // layout
    ring_radius: 100,
    ring_width: 10,
    ring_offset_y: 10,
    label_ring_gap: 20,
    // colors
    track_color: "#000000",
    color_red: "#ff0000",
    color_orange: "#fb923c",
    color_yellow: "#facc15",
    color_green: "#34d399",
    color_cyan: "#00bcd4",
    // gradient stops
    stop_red_hold: 0.11,
    stop_orange: 0.25,
    stop_yellow: 0.45,
    stop_green: 0.70,
    // texts
    top_label_text: "Battery",
    top_label_weight: 300,
    top_label_color: "#ffffff",
    text_color_inside: "#ffffff",
    soc_decimals: 0,
    font_scale_kwh: 0.30,
    font_scale_soc: 0.38,
    // card chrome
    background: "transparent",
    border_radius: "0px",
    box_shadow: "none",
    border: "none",
    padding: "0px",
  };
}
4

Heh, so I found out that my own cards, which are already in the hacs default repository, are also not visible in the card picker. They are rendered correctly in the dev instance. Strange…

This is probably some kind of error when loading resources. Because when I added resources to configuration.yaml for frontend extra_module_url, it works correctly.

I’m not sure if the error is with our cards or elsewhere. You can create an issue on the frontend repo, maybe we can find out more.

# FRONT - END
frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js
    - /local/dashboard-resources/customize-css-change.js
    - /local/dashboard-resources/canary.js
    - /hacsfiles/vehicle-status-card/vehicle-status-card.js?hacstag=85937166311710
    - /hacsfiles/vehicle-info-card/vehicle-info-card.js?hacstag=81056335011130
    - /hacsfiles/battery-donut-card/battery-donut-card.js?hacstag=1069663272108
  themes: !include_dir_merge_named themes

CleanShot 2025-10-08 at 04.13.03@2x
CleanShot 2025-10-08 at 04.13.03@2x2020×2328 420 KB

5

Hey, good catch — I noticed the same thing.

My card actually loads fine (shows up in the console under window.customCards and with customElements.get(‘battery-donut-card’)), but it still doesn’t appear in the card picker.

So it’s not a loading problem — looks more like the picker just doesn’t detect some customCards anymore.

I’ll open an issue in the frontend repo to get to the bottom of it.