UV Index Card

Features

• Animated icon for every UV index from 0 to 11+ (Meteocons), bundled in the card file
• Value and WHO risk level (Low, Moderate, High, Very High, Extreme) in the level's colour
• Horizontal or vertical layout, transparent mode, top alignment for stacks
• Sections view support, card picker entry with preview
• Optional daily max UV and sun protection window line (e.g. from OpenUV)
• Tap to open the sensor's more-info dialog
• 22 languages, following Home Assistant's language setting

Prerequisites

• Home Assistant 2024.11 or later
• A sensor whose state is the UV index (e.g. from OpenUV or a weather station), or a weather entity that has a uv_index attribute (e.g. Met.no)

Configuration

type: custom:ha-uv-card
entity: sensor.uv_index

Options reference#

With OpenUV, the max UV and the protection window go on a line under the value (times follow Home Assistant's 12/24 h and time zone settings):

type: custom:ha-uv-card
entity: sensor.openuv_current_uv_index
max_entity: sensor.openuv_max_uv_index
protection_entity: binary_sensor.openuv_protection_window

With Met.no (or another weather integration that provides the UV index):

type: custom:ha-uv-card
entity: weather.forecast_home

Risk levels#

Icon	UV index	Level	Color
	0–2	Low	green
	3–5	Moderate	yellow
	6–7	High	orange
	8–10	Very High	red
	11+	Extreme	purple

How it works

The card reads the sensor's state (or a weather entity's uv_index attribute), rounds it, then uses that rounded value both to pick one of the 12 icons (0 to 11, higher values use 11) and to map it to the WHO bands, so the value, icon and risk level always agree. The card is built once; afterwards it only updates its text, colour and layout attributes when the state, name, language or configuration change, and swaps the icon only when the rounded index changes, so the icon animation doesn't restart on every Home Assistant update. The animation is paused while the card is off-screen or the browser tab is hidden. Any non-numeric or empty state shows the unavailable icon, labelled "Unknown" while the sensor has not reported yet (unknown) and "Unavailable" otherwise; a negative reading shows 0.

Support

If you find this project useful, you can support its development:

Features

• show_title option (also in the visual editor) hides the card's title (the name), for a card placed under a section heading of its own (asked in juju35/ha-vehicle-card#72).

Fixes

• Translations: the cards are defined once the page's language file has arrived (at most 1.5 s; Home Assistant builds a card when its element gets defined), so the first render is already translated instead of English then redrawn; until a language file is in, a missing text reads the English one wherever the card has no fallback of its own.

Performance

• Translations load on demand: the bundle keeps English only (63 KB → 52 KB) and each other language is its own ha-uv-card.i18n.<lang>.js file next to it, fetched the first time a card needs it. Home Assistant loads every dashboard resource on every dashboard, so each page used to download and parse all 22 languages to use one. Until a language file has arrived (a few milliseconds), texts fall back to English, and the cards redraw once it is there.

Maintenance

• Build: scripts/i18n-split.mjs splits the built bundle and rebuilds every table from the split files to check them (the build fails on any difference); src/ keeps every language as before.
• Release: every file of dist/ is attached. Manual installation copies the translation files too.

Fixes

• A sensor that has not reported yet (unknown state) is now labelled "Unknown", in every language, instead of "Unavailable", which stays for a sensor that is offline.

Changes

• The card accepts a weather entity (Met.no and others) and reads its uv_index attribute; before, only sensors could be picked although the README listed Met.no.
• New max_entity and protection_entity options show the day's max UV and the sun protection window (e.g. from OpenUV) on a line under the value, highlighted while protection is needed.
• The icon animation is paused while the card is off-screen or the browser tab is hidden, which saves CPU.

Documentation

• README: images and links use absolute URLs, so the screenshots, icons, badges and links display in HACS (relative paths broke there).
• README: screenshots get a display size, so cards no longer show oversized in HACS and on GitHub.