UI Lovelace Card

I am trying to include https://github.com/custom-cards/button-card.

I put the file button-card.js in config/www folder, and where should I create ui-lovelace-card.yaml?

in config I created a file called ui-lovelace.yaml and copied everything from overview and in configuration I added

mode: yaml

but where should I create this: ui-lovelace-card.yaml

I think this might be the wrong section of the forum for this kind of question, but it’s up to the mods to decide.

You can create your lovelace yaml files in your config folder, where your configuration.yaml file is. From here, have a look at the doc and use the default examples to begin with.

Two things :

  • Using lovelace in yaml mode is fine, but I’d suggest starting with storage in order to retain UI’s editability within HA’s web interface. This could help you better understand what’s going on.
  • You seem to have added your button card manually. have a look at HACS, it’ll make your life easier.
1 Like

It looks like those installation docs are pretty poorly written.

I assume you are using ui mode for lovelace (since you don’t already have a ui-lovelace.yaml file).

So, once you add the file above to the ‘config/www/’ folder then go to the “configuration->lovelace dashboards” section of HA from the left side menu.

Then select “resources” tab.

Then click “add resource” in the bottom left.

then add the file local where you put the js file above.

if you put it in “config/www” then you will write that as “/local/”

so you should end up with something like:


But the advice to install and run HACS is highly recommended since it will do all of the installation stuff for you.


got working. Thanks a lot

1 Like

I’m at the same place you were a year ago. I did add it though HACS and in my Resources tab I have this:

I updated the web browser as instructed. I’m using Chrome, which I’m told is up to date - Version 97.0.4692.71 (Official Build) (64-bit).

I then tried to add the person-entity-card as follows:

What am I doing incorrectly?

It all turned out to be a double quote rather than a single quote!!

In other words
type: 'custom: person-entity-card' fails,
type: "custom: person-entity-card" works just fine.

Why then does HA default to the single quote when one selects to add a manual or custom card?

I don’t get an error, but I also do not see anything in the card.