How do I add custom cards with the Lovelace UI?

Stefan_Fasth · February 9, 2019, 1:49pm

Hi
Im not sure how to add custom cards using the UI. Can I do with the UI? When I read about a custom card, they all say I should edit ui-lovelace.yaml but I dont have it couse I use the UI.

Can someone please guide me on how to add the google calender card for example?
What goes here?

tom_l · February 9, 2019, 2:01pm

Yes.

Hit the three dots button twice (once to edit UI, next to open raw editor).

Paste the required configuration at the top of this file (above everything else).

Stefan_Fasth · February 10, 2019, 2:32pm

Excellent, worked like a charm, thanks!

FutureTense · January 5, 2020, 7:42am

For those who want to add the iCloud3 card with the UI (+) button, add a new blank card and paste the following

title: icloud3 event log
type: entities
entities:
  - entity: sensor.icloud3_event_log
    type: 'custom:icloud3-event-log-card'
    icon: 'mdi:map-marker'
show_header_toggle: false

tom_l · January 5, 2020, 8:12am

Did you paster this in the wrong place?

It has nothing to do with this year old, solved, topic.

NCO3 · July 23, 2022, 6:37am

I am sorry for this dumb question, but you are talking about the three dots on the Dashboard I would like to add a card to, right?

If I do this and click the three dots again and open “raw”, I don’t get the view you have shown (no resources).
In my case it looks like:

Is this the right thing you mean?

tom_l · July 23, 2022, 6:50am

This is a two year old topic. Things have changed. Add the resources via the UI now. Settings > Dashboard > three dot icon.