The Ultimate Guide to the Home Assistant Clock Weather Card in 2026

Last updated on February 8, 2026

If you’re looking for a sleek and functional way to display the time and weather forecast on your Home Assistant dashboard, the Clock Weather Card is still one of the top contenders in 2026. This custom card elegantly combines a digital clock, the current date, and a detailed weather forecast into a single, visually appealing component—perfect for centralizing the most critical info on your dashboard.

In this definitive guide, I’ll walk you through how to install and configure the Clock Weather Card in Home Assistant using HACS, which is the gold standard for managing community components. Forget about outdated manual methods; we’re doing this the easy and efficient way.

Installing the Clock Weather Card via HACS

In 2026, installing any custom card or integration is a job for the Home Assistant Community Store (HACS). This component manager handles downloading, installing, and updating everything for you automatically, making the process incredibly simple.

If you don’t have HACS installed yet, I highly recommend checking out our ultimate guide to getting started with Home Assistant before you continue.

With HACS ready to go, the steps are a piece of cake:

1. Navigate to HACS from your Home Assistant side menu.
2. Select the Frontend tab.
3. Click the blue “Explore & Download Repositories” button in the bottom-right corner.
4. In the search bar, type “Clock Weather Card” and select it from the list.
5. In the next window, click “Download.” HACS will handle the entire process, including automatically adding the resource to your Lovelace configuration. No more messing with YAML files for this step!

How to Configure the Clock Weather Card

Once installed, you can add the card to any of your dashboards. You can do this through the visual UI editor or by editing the raw YAML code directly.

To get started, enter your dashboard’s edit mode (click the three dots in the top-right corner and select “Edit Dashboard”) and then click “Add Card.” Search for the “Custom: Clock Weather Card” in the list.

Minimum Required Configuration

The only thing you absolutely need to get the card working is a weather entity. Most of the official Home Assistant weather integrations, like OpenWeatherMap, will provide one for you.

type: custom:clock-weather-card
entity: weather.your_city

Just swap out weather.your_city with the entity ID of your weather integration.

Full Configuration (Advanced Example)

The real power of this card is in its customization options. Here’s an example with some of the most common settings tweaked so you can get a feel for what’s possible.

type: custom:clock-weather-card
entity: weather.home # Replace with your weather entity
title: My House
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_days: 7
locale: en-US
time_format: '12'
date_pattern: P
hide_today_section: false
hide_forecast_section: false

Detailed Configuration Options

Below is a complete breakdown of every available option, so you can consult it and customize your Home Assistant setup to perfection.

Troubleshooting Common Issues

Even though the installation is straightforward, you might run into a snag. Here are the fixes for the most common problems.

Error: “Custom element doesn’t exist: clock-weather-card”

This is the classic ‘it’s not loaded yet’ error. It means Home Assistant hasn’t loaded the card’s file. 99% of the time, one of these two fixes will solve it:

• Clear your browser cache: Your browser is often holding onto an old version of the page. Press Ctrl + F5 (or Cmd + Shift + R on a Mac) to force a hard refresh.
• Restart Home Assistant: A full restart can help ensure all custom components are loaded correctly.

The forecast shows fewer days than I configured

This issue depends entirely on the Home Assistant weather integration you’re using. Some integrations only provide hourly forecasts (usually for the next 48 hours), which translates to just 1 or 2 days on the card. To see a multi-day forecast, make sure you’re using a weather entity that provides daily forecast data, like the one from OpenWeatherMap.

The card shows “Unavailable” or “Entity not found”

This is almost always a typo. Double-check that the entity_id you’ve entered in the card’s configuration is correct. Go to Developer Tools > States and search for your weather entity (e.g., search for weather.) to confirm its exact name.

Advanced Customization with Card-Mod

If you want to take your customization to the next level, you can use the Card-Mod component to apply CSS styles directly to the card. With it, you can change colors, font sizes, spacing, and much more.

For example, to change the title color and make the time a bit bigger, you could add this code to your card’s configuration:

type: custom:clock-weather-card
entity: weather.home
title: My House
card_mod:
  style: |
    .card-header {
      color: var(--primary-color);
      font-size: 24px !important;
    }
    .time {
      font-size: 5em !important;
    }

The possibilities are endless, allowing you to integrate the Home Assistant weather card perfectly with your dashboard’s theme.