How do I add custom cards with the Lovelace UI?

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?


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).


Excellent, worked like a charm, thanks!

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
  - entity: sensor.icloud3_event_log
    type: 'custom:icloud3-event-log-card'
    icon: 'mdi:map-marker'
show_header_toggle: false

1 Like

Did you paster this in the wrong place?

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

1 Like

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?

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