Lovelace: Alarm card


I’m using Edge


Unfortunately Edge wasn’t supposed to be supported. You could prefix CSS here: to be more specific to avoid bleeding to other elements.


@boneheadfraggle the backend needs to support arming and disarming only with code. The generic alarm implementation has this, no idea on your particular implementation, but this is not something for the card itself.


So I am having the same problem as quattro had in his post ( alarm card very thin without any text ) but I am still living in the ‘Doh’ moment. What do I need to define in configuration.yaml?
I have this in configuration.yaml
javascript_version: latest

in ui-lovelace.yaml

  • url: /local/custom-lovelace/alarm_control_panel-card/alarm_control_panel-card.js?v=2
    type: js

then under cards, i have this:

  • type: custom:alarm_control_panel-card
    entity: alarm_control_panel.alarm
    show_keypad: true
    title: Alarm
    style: ‘–alarm-color-disarmed: var(–label-badge-blue);’
    • arm_home
    • arm_away

What am I missing?


Can you please use hastebin to post your config? What is the exact error?


Posting code now. I get no ‘error’ messages, it is just the alarm card is very thin like this post

here is my ui-lovelace.yaml->

here is my configuration.yaml ->
( all I added was the javascript_version )

I did this to install the custom cards
git clone -b ‘master’ --single-branch --depth 1


@mjf55 Do you have an alarm entity configured in the backend? Make sure this entity actually exists:



No I do not. Where /how would that go?


The card presented here is just a frontend for an existing alarm. If you want to setup a new alarm and dont’ have one already you could use something like or look for any available:

An alarm system UI makes no sense without an actual alarm system controlled by the backend and state machine.


I have components (hardware) and a node-red panel UI working. I was wanting to replace the panel to a HA UI panel. I will read the linked documentation. Thank you…


Got it working. For those having the same issue as me, add this to configuration.yaml:
platform: manual
name: “Home”
code: 1234
pending_time: 60
delay_time: 60
trigger_time: 0


general question (and btw the card looks and works great so thanks for sharing).
Apart from those with kids, do people use a code to arm the house?

Been thinking about this, and essentially wondered if you only need the keycode when you move from any armed state to any disarmed state.
My reason behind this is I use Wink relays to show the lovelace UI and when i’m home i dont want the keypad to take up so much space.
To implement this it would need either a change in the HA alarm_control_panel functionality to allow arming without code.
The arm buttons in the custom:alarm_control_panel-card would trigger scripts and not directly the alarm_control_panel

Just curious as so folks thoughts here


I don’t use a code in Home Assistant because it affects the frontend only. A “bad guy” can’t disable my alarm unless he can log into HA and press the Disarm button. So, there’s no reason for a code. Just the button in the UI is fine. I think the code is useful for those who share access to the HA UI but don’t want everyone to be able to disarm/arm the alarm.

The code doesn’t play a role in the backend. Automations can disarm without a code, for instance.


How did you manage to use a code, but get automations to not need one? I tried, and got a code error, and only worked when I added the code to the auromation


Hey there, thank you a lot for this project. I have one issue now because of russian language:

Can I fix it?
Only way I know - to make the text smaller. But I do not know how to do that permanent:


I can create an option for style. Can you please raise an issue on github? I will get to it once I get more time. At the moment I’ve been a bit more busy with other things, so my activity was lower. Happy to pick this up if, but it’s best to have an issue for it so I dont’ forget.


Sure, I will try to raise an issue. Thank you!


Most of the alarm components support arming to night mode. Can you please add a button for Arm Night? Thanks!


Nevermind, figured it out, the theme was overriding badge-red into transparent. Thanks for the custom card!


Thanks for this card. Love it. I have a question. Forgive me if someone asked it before but did a quick search and couldn’t find anything. I’m wondering if there is a way to prevent arming when a door or window is already open. For exemple, on a regular alarm system, you can’t arm the system if it’S not ready. Usually the panel shows “Ready’ or 'Not ready”. And if you try to arm the system when it’s not ready, nothing happens. Is this feasible?
Thanks a lot!