Custom Lovelace Card - Homekit style card

Hi, the tiles have a width that doesnt change so the fix is easy can you test in your setup with what font-size it does fit? than i can change it :slight_smile:

Mhmm, I just found out that the problem of truncated text only occurs when I open Homeassistant via the official Android app. If I open Homeassistant on the same device directly in the browser, the text is displayed correctly.

Thanks for the background!
Yes toggle for the input_boolean would be great.
It doesn’t work for me a switch entity either by the way.

That is strange gonna check it myself how it looks for me

Did an update of the card

  • External need of card tools is not longer needed maybe this fixed the cast issue @CM000n and @hijinx
  • Sensors show last time they changed
  • Switch and input_boolean can now be toggle by tapping it @Klex1404

Amazing, working perfectly! Many thanks.

For people that use HACS you can now install it through the store as a custom repo.


Very cool, thank you very much! This definitely makes the update process more comfortable.

Short hint:
For installation via HACS, the correct path in the Lovelace Resources will be this one…:

  - url: /community_plugin/Homekit-panel-card/homekit-panel-card.js
    type: module

…instead of the path on the Github Readme for the (old) manual installation method:

  - url: /local/homekit-panel-card.js
    type: module

Best regards

Aaaand I had a little time to play around again today. Accordingly I have some questions/suggestions again :wink:

I also converted my Climate View to the Homekit Style Card today. I only have two heating controls and mainly sensors on it. The view now looks like this:

As you can see, the two tiles of the climate entities (at the top) currently offer little information and look a little empty. Here it would be cool if you could design them similar to the original homekit view. So with the target temperature and the current temperature. See this screenshot found via google search:

But I don’t know what green means in the original homekit? Is it the only colour, or is there a colour code here depending on the heating state? Maybe someone who has homekit at home and uses it can tell us something about it?

I also wanted to ask if the display of the custom:mini-graph-card could be adjusted a bit? I have not used a personalized cardStyle, but the default one.
As you can see, the font size for indicating the units of measurement (°C, %, mbar) is very large and proportionally does not fit the text size of the measured values. Can this be adjusted?

I also feel the size of the header text for mini-graph-cards is a bit too big compared to the other tiles. It should have, for my feeling, the same size as the state text in light tiles. But of course this is a personal matter of taste :wink:

It would also be nice if the graph could fill the whole tile. Currently there is a somewhat strange gap between the graph and the tile border.

Well, so much for my input.
As always best regards and many thanks!

1 Like

Hey man,

I Will see what i can do.
For you last point you can add this to your config
noPadding: true

This removed the gap and let the custom card fill the tile

Thanks for the hint. This indeed makes the graphs IMHO look a little nicer. But of course the text display doesn’t quite fit anymore:


I will fix that soon!

I can’t find it in the store.
Should I add a repo? which one please?

I just added the link to the repository from the first post and it worked

Hope this works for you as well.


It is not in the store but you can add it as custom repo like @geoffrey is saying

1 Like

@CM000n i wanna add a tile for climate entities but i don’t have one my self. Can you make a screenshot of that state and attributes in the developer tools of home assistant so i now what data is available and i can use. thank you!

Would it be possible to add support for Camera’s and a popup to set fan speed?


He man,

The camera i will add soon!
Here you can find some stuff im working on:

The Fan speed would best be a seperate card which can be used as pop up. If you can set me screenshot of the developer tools of the entity that you want to control i can see the attributes and can take a look how to make it. You got idea how it should look?

Great. These are the fan attributes


Something similar to this, but instead of the slider maybe just four buttons (off,low, med, high) as per the last screenshot



I admit I haven’t yet tested this, but I love the light slider popup. Just wondering if it has to be a scene that is referenced in the bottom of it, or if one can set a service call instead? Like maybe set 50% brightness, without having to make a scene for each light.