Custom UI: Weather state card

#126 entity has 10 day forecast.


I’m also getting an invalid config error using input_boolean or input_text

Like @p1neapples and @Jokerigno both requested, is there a good example in one place that we can look at?


hey @gerard33 im using your code ( thanks for posting) and its working good except when the forecast is clear doesn’t show any icon i look on the variables for icon names but i could not find anywhere were to put the name for the clear or night icon


I’m having the same problem. Please let me know if you find a solution!

By the way does anyone know how to theme the custom weather card? I’m trying to implement a night theme but the text stays grey.

I’m guessing I can just hardcode it into the custom-weather-card.html css but I’m not sure how to go about adding conditions to the section. Any ideas?


Okay I managed to figure out a solution for the above, albeit very un-elegant.

I created a new binary sensor called weathernight and created a copy of custom-weather-card.html called custom-weather-card-night, then created an automation that shows the day card if the sun is up and the night card when the sun sets. It looks like some of the icons disappeared but I’ll work that out later.

Would still love to hear a more streamlined solution that lets me set conditional CSS in the one card!



@gerard33 could you please add Air Quality sensors to the layout as an additional fields?
This could be useful for those who wants to know it.
Thank you


I figured out my input_boolean issue.

Some of the examples in the different posts have this:

  - weather:

It needs to be this:



well this is starting to be quite frustrating…

keep getting this error message:

Failed config
    - Invalid config for [input_text]: expected a dictionary for dictionary value @ data['input_text']['weather']. Got None. (See ?, line ?). Please check the docs at

my package is:


    name: Weer custom Home

      custom_ui_state_card: custom-weather-card
        weather: weather.home

  - platform: yweather
    name: Home


well finally,

in my setup, the input_text had to get a name.

      custom_ui_state_card: custom-weather-card
        weather: weather.home
        pressure: sensor.br_pressure
        visibility: sensor.br_visibility
        precipitation: sensor.br_precipitation
        precipitationfc: sensor.br_precipitation_forecast_average

    name: Anything

    name: Weerkaart

quite blurry…


quite: did you solve this already, makes it really ugly…defeating the purpose of the card somewhat

Hi @gerard33

could you share these templates?interested what your templating, and if that would be different from what Buienradar does serve us here.

What do you think: are the double entries necessary or useful for visibility and hPa? Or is this a misconfiguration on my part.

btw, is it a typo in your config code: precipation: should be precipitation:? I see it in the card.html also, maybe correct that ?

Although I do like the very clean card you’ve made , I wonder if it could be possible to also show the graph we had before. That really creates the at-a-glance view of the coming weather conditions, we now have to miss.

Maybe you’d consider adding it?


@Mariusthvdb no didn’t solve it yet. I believe it’s a rendering bug so the only thing I can think of is change the location and name of the smaller forecast icons so it doesn’t use the same image. Just haven’t tried this yet.


thanks, let us know if you have :slight_smile:
also, shouldn’t these little icons above the forecast be more distinguishable? We now have 2 sets of identical icons, though im not sure why only in my screenshots there are 6…? tried to edit the custom card for that, but cant get it to change in the frontend.


Can you share a screenshot from the States page of such an entity so I can add this?


That’s something in your config. It shows the pressure and visibility from weather.home and sensor.br_pressure and sensor.br_visibility. If you remove these then only one value will be shown.

You’re right. I have updated it so this is changed when I share a new version.

All credits go to @Bram_Kragten and @eddi89. All I did was making some changes in their version.
The graph is something that is standard available if you add e.g. Yahoo weather. That has nothing to do with this card.

Guess you already have those as you have a double entry for the pressure and visibility?
But this is what I use. Data is used from De Bilt weather station.

# Buienradar gegevens De Bilt
  value_template: '{{ }}'
  friendly_name: "Luchtdruk"
  unit_of_measurement: 'hPa'
  value_template: '{{ }}'
  friendly_name: "Zicht"
  unit_of_measurement: 'm'


yes they where there after all and north icons have changed as i set them in the html:


remarkably, the values are quite different, especially the visibility values…

I have that indeed, doubling the Yahoo info into 2 cards, just thought it would be nice to have it all in 1 card.

i see, why do you use a template for that if I may ask, and not just a direct sensor? You must have the station configured, so all options available ?

And thanks again,


@gerard33 I use platform that gets the following data


@Mariusthvdb I’ve been experimenting with the blurry image and I seemed to resolve it by making a copy of the animated directory and then changing the reference to one of the image lookup line (you’ll see there’s two of them, sorry can’t look it up just yet since I’m not at my computer). You’ll have to delete the cache on your device you’re using but it seems to have resolved the issue.


Anyone know what to put in the custom-weather-card.html to use the night icons instead of day? Last night it showed “Sunny” lol


There is the Openweathermap custom component that works with this card


I just map icon and string to 31 value like this:

  var _WEATHER_TO_ICON = {
    cloudy: 'cloudy',
    fog: 'cloudy-fog',
    hail: 'rainy-7',
    lightning: 'thunder',
    'lightning-rainy': 'thunder-rainy',
    partlycloudy: 'cloudy-day-3',
    pouring: 'rainy-6',
    rainy: 'rainy-5',
    snowy: 'snowy-6',
    'snowy-rainy': 'rainy-7',
    sunny: 'day',
    windy: 'windy-1',
    'windy-variant': 'windy-1',
    exceptional: '!!',
    31: 'night',

  var _WEATHER_TO_NAME = {
    cloudy: 'Pochmurno',
    fog: 'Mglisto',
    hail: 'Gradobicie',
    lightning: 'Burzowo',
    'lightning-rainy': 'Deszcz z błyskawicami',
    partlycloudy: 'Częściowe zachmurzenie',
    pouring: 'Ulewnie',
    rainy: 'Deszczowo',
    snowy: 'Śnieżnie',
    'snowy-rainy': 'Deszcz ze śniegiem',
    sunny: 'Słonecznie',
    windy: 'Wietrznie',
    'windy-variant': 'Wiatr zmienny',
    exceptional: '!',
    31: 'Bezchmurnie',

and it works.


Thank you so much! I’ve been looking for a fix for this for ages.