home-assistant.io/source/developers/frontend_creating_custom_ui.markdown

layout, title, description, date, sidebar, comments, sharing, footer, ha_release

layout	title	description	date	sidebar	comments	sharing	footer	ha_release
page	Creating custom UI	Introduction to create custom ui for Home Assistant.	2017-02-04 13:00	true	false	true	true	0.38

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 homeassistant config directory.

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

That file should implement <state-card-my_custom_light_card> tag with Polymer.

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

• In the customize: section of configuration.yaml put custom_ui_state_card: <element-name>.

For example:

homeassistant:
  customize:
    - entity_id: light
      custom_ui_state_card: my_custom_light_card

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