Use of HA Web components in custom UI

Development
1

Hi,

I’m working on the UI for my custom component, following Creating custom panels | Home Assistant Developer Docs

Can I use existing ha-* web components for my UI? I would like to, they’re super convenient, but the documentation isn’t very clear about it. Here Lovelace: Custom Cards | Home Assistant Developer Docs example shows how to use ha-card, but, when I’m trying to use for ex. hass-tabs-subpage-data-table, it doesn’t work, because of the lazy loading. But after I visit any built-in panel which is using that component, my panel is also being loaded. I understand all webpack, modules, import stuff, and that I can’t import ha-* components directly into my custom JS.

Why am I facing this?
I originally started making my UI using the tutorial above, importing lit and custom UI web components, and I’ve realized that I can’t import @paper, @mwc web components, as they’re already registered inside the page. So, I either would like to find a way to re-use HA stuff as much as possible (preferred) or will be forced to use some completely different UI library to avoid customElements conflicts.

Is it possible (recommended) to re-use HA web components for the custom UI?

1 Like
2

I’m having the same exact problem, it would be very very convinient to be able to use all ha
web components inside custom panels.
It’s also very strange because some components are loaded like

ha-switch

and

ha-textfield

3

Did you find an answer to your question? I am currently trying to develop a custom React Dashboard and it would be so convenient to use the HA custom elements inside.

4

To find out what custom elements are available on a dashboard, bring up the console (CMD+Shift+C in Chrome for Mac) and run the following code:

Array.from(customElements.l.keys()).sort().join(", ");

You’ll see there’s a bunch of elements available but not every one.

5

Here’s what I got when running the dev branch today:

action-handler
array-selector
custom-style
dom-bind
dom-if
dom-module
dom-repeat
entity-registry-settings
entity-registry-settings-editor
ha-alert
ha-area-picker
ha-attributes
ha-button-menu
ha-button-toggle-group
ha-call-service-button
ha-camera-stream
ha-card
ha-chart-base
ha-circular-progress
ha-climate-state
ha-combo-box
ha-control-button
ha-control-button-group
ha-control-select
ha-control-slider
ha-cover-controls
ha-cover-tilt-controls
ha-dialog
ha-dialog-header
ha-drawer
ha-entity-toggle
ha-expansion-panel
ha-fab
ha-formfield
ha-full-calendar
ha-hls-player
ha-icon
ha-icon-button
ha-icon-button-arrow-next
ha-icon-button-arrow-prev
ha-icon-button-next
ha-icon-button-prev
ha-icon-next
ha-icon-picker
ha-init-page
ha-label-badge
ha-list-item
ha-logbook
ha-logbook-renderer
ha-menu-button
ha-more-info-dialog
ha-more-info-history
ha-more-info-history-and-logbook
ha-more-info-info
ha-more-info-logbook
ha-more-info-settings
ha-panel-lovelace
ha-progress-button
ha-radio
ha-related-items
ha-relative-time
ha-select
ha-settings-row
ha-sidebar
ha-slider
ha-state-icon
ha-state-label-badge
ha-svg-icon
ha-switch
ha-tabs
ha-textfield
ha-tile-badge
ha-tile-icon
ha-tile-image
ha-tile-info
ha-toast
ha-user-badge
ha-vacuum-state
ha-water_heater-state
ha-web-rtc-player
hass-error-screen
hass-loading-screen
home-assistant
home-assistant-main
hui-alarm-modes-tile-feature
hui-attribute-row
hui-button-card
hui-button-row
hui-calendar-card
hui-call-service-row
hui-conditional-element
hui-cover-open-close-tile-feature
hui-cover-tilt-tile-feature
hui-entities-card
hui-entities-toggle
hui-entity-button-card
hui-entity-card
hui-error-badge
hui-error-card
hui-fan-speed-tile-feature
hui-generic-entity-row
hui-glance-card
hui-grid-card
hui-icon-element
hui-image
hui-image-element
hui-light-brightness-tile-feature
hui-light-card
hui-masonry-view
hui-media-player-entity-row
hui-root
hui-scene-entity-row
hui-script-entity-row
hui-sensor-card
hui-sensor-entity-row
hui-service-button-element
hui-simple-entity-row
hui-state-badge-element
hui-state-icon-element
hui-state-label-badge
hui-state-label-element
hui-thermostat-card
hui-tile-card
hui-timestamp-display
hui-toggle-entity-row
hui-vacuum-commands-tile-feature
hui-view
hui-warning
hui-warning-element
hui-weather-forecast-card
iron-a11y-announcer
iron-icon
iron-iconset-svg
iron-input
iron-meta
iron-overlay-backdrop
more-info-content
more-info-default
mwc-button
mwc-circular-progress
mwc-formfield
mwc-icon
mwc-icon-button
mwc-list
mwc-list-item
mwc-menu
mwc-menu-surface
mwc-notched-outline
mwc-ripple
mwc-tab
mwc-tab-bar
mwc-tab-indicator
mwc-tab-scroller
notification-manager
paper-icon-button
paper-icon-item
paper-input
paper-input-char-counter
paper-input-container
paper-input-error
paper-item
paper-listbox
paper-progress
paper-ripple
paper-slider
paper-tab
paper-tabs
paper-toast
partial-panel-resolver
polr-android-tv-remote-card
polr-open-card
polr-open-card-editor
round-slider
simple-tooltip
state-badge
state-card-button
state-card-climate
state-card-configurator
state-card-content
state-card-cover
state-card-display
state-card-input_button
state-card-input_number
state-card-input_select
state-card-input_text
state-card-lock
state-card-media_player
state-card-number
state-card-scene
state-card-script
state-card-select
state-card-text
state-card-timer
state-card-toggle
state-card-vacuum
state-card-water_heater
state-history-chart-line
state-history-chart-timeline
state-history-charts
state-info
statistics-chart
vaadin-combo-box-item
vaadin-combo-box-light
vaadin-combo-box-overlay
vaadin-combo-box-scroller
vaadin-material-styles
vaadin-overlay
6

I had the same problem while trying to use chips.

The scheduler-card needs some ha- elements that are not loaded by default. This is how they fixed it:
Add this file to the project. The elements in the first if statements are to check if the needed elements are already present.
https://github.com/nielsfaber/scheduler-card/blob/5b94a56b8f02c01b6922b81ba927fc391bb4f48d/src/load-ha-form.js
The function is called when creating the element you are working on.
https://github.com/nielsfaber/scheduler-card/blob/5b94a56b8f02c01b6922b81ba927fc391bb4f48d/src/components/variable-slider.ts#L41C5-L41C40

This makes more elements available. Such as ha-checkbox, ha-chip and hass-tabs-subpage-data-table.
Before this fix I had 239 available elements and after this fix 330.
It does not work for everything. The element ha-chip-set is a container for the ha-chip, but it is still not available after this code is ran.

I hope this helps.