Creating custom UI

If you would like to use your own State card without merging your code into home-assistant-polymer you can create your own implementation.

Put the element source file and its dependencies in www/custom_ui/ directory under your Home Assistant configuration directory.

For example if creating a state card for the light domain named state-card-my-custom-light put state-card-my-custom-light.html in www/custom_ui/.

That file should implement <state-card-my-custom-light> tag with Polymer.

In state-card-my-custom-light.html you should use <link rel="import"> to import all the dependencies not used by Home Assistant’s UI. Do not import any dependencies used by the Home Assistant UI. Importing those will work in development: 1 mode, but will fail in production mode.

  1. In the customize: section of the configuration.yaml file put custom_ui_state_card: state-card-my-custom-light.
  2. In the frontend section use extra_html_url to specify the URL to load.



      custom_ui_state_card: state-card-my-custom-light

    - /local/custom_ui/state-card-my-custom-light.html


<dom-module id='state-card-my-custom-light'>


class StateCardMyCustomLight extends Polymer.Element {
  static get is() { return 'state-card-my-custom-light'; }
  static get properties() {
    return {
      // Home Assistant object
      hass: Object,
      // inDialog is true if shown as more-info-card
      inDialog: {
        type: Boolean,
        value: false,
      // includes state, config and more information of the entity
      stateObj: Object,

  _toStr(obj) {
    return JSON.stringify(obj);
customElements.define(, StateCardMyCustomLight);

For more possibilities, see the Custom UI section on our Examples page.