Pro Cards
Docs with live examples: https://malte-wessel.github.io/pro-cards/
Beautiful, customizable cards for Home Assistant dashboards.
Pro Cards are polished dashboard cards that look like they belong in Home Assistant: same spacing, typography and colours, dark mode included. Every detail can be adjusted, from icons, colours and labels driven by values and templates to layouts, graphs and actions. Themes change the look of all cards at once.
- High quality. Crisp rendering, sensible defaults, smooth graphs, tested against a real Home Assistant and pixel by pixel in CI.
- Highly customizable. Rules switch icon, colour, label and card tint by value or state; templates fill names and values; six layouts, eight visuals, a weather card with forecasts, animated wind and rain cards, a power flow tree, every action Home Assistant offers.
- Home Assistant design. The cards use the theme's colours, fonts, radii and state colours, so they blend in with the built-in tile cards, and a custom theme restyles them along with the rest of the dashboard.
| Card | Type | What it does | Editor |
|---|
| Entity Card Pro | custom:entity-card-pro | One entity as a tile with icon, ring, gauge, bar, sparkline, columns, badge or strip. Rules and Jinja templates drive colour, icon and label. | YAML only |
| Entity Group Card Pro | custom:entity-group-card-pro | Many entities as list, grid, hero, row, column or table, with header entities on the title line. | YAML only |
| Entity Sections Card Pro | custom:entity-sections-card-pro | Several groups with their own layout under one header: room and device cards. | YAML only |
| Multi Trend Card Pro | custom:multi-trend-card-pro | Tile-style trend graph for several sensors with a hover/touch tooltip. | Visual |
| Sun Path Card Pro | custom:sun-path-card-pro | Today's sun elevation with sunrise, sunset, dawn, noon and dusk. | Visual |
| Sun Azimuth Card Pro | custom:sun-azimuth-card-pro | Where the sun is around the house: 3D scene or sky dial, and the sides it shines on today. | YAML only |
| Illuminance Card Pro | custom:illuminance-card-pro | Illuminance as gauge arc, log-scale trend with zones or a colour band. | Visual |
| Weather Card Pro | custom:weather-card-pro | Current conditions, attributes and the hourly / daily forecast of a weather entity, with rules, sections and templates. | YAML only |
| Wind Card Pro | custom:wind-card-pro | Wind speed, direction and gusts as a tile, a flow tile or a hero, with an animated wind field in four styles that rules colour. | YAML only |
| Rain Card Pro | custom:rain-card-pro | Rain rate and today's total as a tile, a flow tile or a hero, with falling drops, ripples or a filling gauge that rules colour. | YAML only |
| Power Flow Card Pro | custom:power-flow-card-pro | Solar, battery and grid → home → rooms and devices as a tree with animated flow, the state of the home and its self-sufficiency. | YAML only |
| Energy Flow Card Pro | custom:energy-flow-card-pro | The power flow's tree over a period (today, this week, month or year) from energy meters and their long-term statistics. |
All cards support the sections grid (grid_options). Requires Home Assistant 2025.3 or newer.
Installation
HACS (recommended)
Or open HACS, search for Pro Cards, download it and reload the browser. HACS registers the resource /hacsfiles/pro-cards/pro-cards.js automatically.
If HACS does not list it yet, add it as a custom repository first:
- HACS → three-dot menu → Custom repositories.
- Add
https://github.com/malte-wessel/pro-cards with category Dashboard.
- Search for Pro Cards, download it and reload the browser.
Manual
- Copy
dist/pro-cards.js to config/www/pro-cards/pro-cards.js.
- Settings → Dashboards → three-dot menu → Resources → add
/local/pro-cards/pro-cards.js as JavaScript module.
- Reload the browser. Bump the URL (
?v=2) after every update to bypass the cache.
Look and themes
The cards read the Home Assistant theme: card background, text colours, dividers, radii and the named
colour tokens (primary, red, amber, blue-grey, ...). Dark mode and custom themes apply without
configuration. Wherever a card accepts a colour you can use a named token, a hex, rgb or hsl value or a
CSS variable. See Look & themes.
The cards
Each card starts with two lines and grows with options. The docs pages take you from the basic example
to the advanced ones step by step.
Entities
Entity Card Pro
One entity as a tile. Rules pick colour, icon and label by value or state.
type: custom:entity-card-pro
entity: sensor.living_room_temperature
rules:
- { below: 19, color: blue, icon: mdi:snowflake, label: Cold }
- { below: 24, color: green, icon: mdi:thermometer, label: Comfortable }
- { above: 24, color: orange, icon: mdi:sun-thermometer, label: Warm }
Entity Card Pro docs ·
Entity options
Entity Group Card Pro
Many entities in one layout: list, grid, hero, row, column or table.
type: custom:entity-group-card-pro
title: Living room
entities:
- { entity: light.living_room, toggle: true }
- { entity: cover.living_room_blinds, attribute: current_position, unit: "%", visual: bar }
- { entity: sensor.living_room_temperature, visual: sparkline }
Entity Group Card Pro docs
Entity Sections Card Pro
Several groups with their own layout under one header: room and device cards.
type: custom:entity-sections-card-pro
title: Living room
sections:
- layout: row
entities: [sensor.living_room_temperature, sensor.living_room_humidity]
- layout: row
entities: [light.living_room, cover.living_room_blinds, media_player.living_room_tv]
Entity Sections Card Pro docs
Multi Trend Card Pro
Several sensors as smooth lines with a hover tooltip. Visual editor.
type: custom:multi-trend-card-pro
entities:
- { entity: sensor.outdoor_temperature, name: Temperature, color: red }
- { entity: sensor.dew_point, name: Dew point, color: blue }
Multi Trend Card Pro docs
Energy
Power Flow Card Pro
Where the electricity comes from and where it goes: solar, battery and grid on the left, the home in the middle, rooms and devices on the right, joined by lines that carry the power as moving dots. The line above says whether the home imports, exports or runs on battery, and how self-sufficient it is.
type: custom:power-flow-card-pro
home: sensor.power_consumption
sources:
- { type: solar, entity: sensor.solar_power }
- { type: battery, power: sensor.battery_power, soc: sensor.battery_soc }
- { type: grid, power: sensor.grid_power, price: sensor.electricity_price }
consumers:
- { entity: sensor.heat_pump_power, name: Heat pump, icon: mdi:heat-pump }
- { entity: sensor.washer_power, name: Washer, icon: mdi:washing-machine }
Power Flow Card Pro docs
Energy Flow Card Pro
Where the energy came from and where it went today, this week, this month or this year: the power flow card's tree, drawn from energy meters and their long-term statistics, with what the grid imported and exported and how self-sufficient the home was.
type: custom:energy-flow-card-pro
period: today
sources:
- { type: solar, entity: sensor.solar_energy }
- { type: battery, charge: sensor.battery_charge_energy, discharge: sensor.battery_discharge_energy }
- { type: grid, import: sensor.grid_import_energy, export: sensor.grid_export_energy }
consumers:
- { entity: sensor.heat_pump_energy, name: Heat pump, icon: mdi:heat-pump }
Energy Flow Card Pro docs
Layout
Layout Card Pro
Cards, Pro Cards and Home Assistant's own, arranged inside a section in a grid or masonry, as separate cards or one seamless surface. The breakpoints are view columns: the cards can take two columns when the section spans one view column (a phone) and four when it spans two. Each card's view_layout sets its span and order, per view columns, and the cards keep their own visibility.
type: custom:layout-card-pro
columns: 2
breakpoints:
2: { columns: 4 }
cards:
- type: custom:weather-card-pro
entity: weather.home
view_layout: { span: { 1: full, 2: [2, 2] } }
- type: tile
entity: light.kitchen
Layout Card Pro docs
Heading Card Pro
A heading for a room or a part of a view, without a card around it. Its badges are entities with rules and actions, and can draw a ring, a bar, a sparkline, a trend, a count or a switch.
type: custom:heading-card-pro
title: Living room
icon: mdi:sofa
badges:
- sensor.living_room_temperature
- { entity: sensor.power_consumption, visual: sparkline, format: power }
- { entity: light.living_room, control: toggle }
Heading Card Pro docs
Swipe Card Pro
Cards, Pro Cards and Home Assistant's own, side by side in a strip you swipe through. It snaps to each card, the next one peeks in, and dots below show the page. Like the layout card's, its options change at breakpoints by view columns: more cards per page, or a grid instead of the strip.
type: custom:swipe-card-pro
per_page: 1.15
breakpoints:
2: { per_page: 2.2 }
3: { unfold: 4 }
cards:
- type: custom:entity-card-pro
entity: sensor.living_room_temperature
visual: sparkline
- type: tile
entity: light.kitchen
Swipe Card Pro docs
Weather
Weather Card Pro
A weather entity as a tile, or as sections you compose like the sections card: the hero lead, rows of attributes and entities, trend charts and forecast rows.
type: custom:weather-card-pro
entity: weather.home
title: Home
sections:
- { type: hero }
- { type: row, entities: [humidity, wind_speed, pressure] }
- { type: trend, mode: hourly, hours: 12 }
- { type: forecast, mode: daily, days: 7 }
Weather Card Pro docs
Wind Card Pro
Wind speed, direction and gusts from sensors or a weather entity, with an animated wind field: dots, streamlines, swooshes or an arrow field that travel where the wind blows, faster with the speed, wavier with the gusts, coloured by your rules.
type: custom:wind-card-pro
entity: sensor.wind_speed
direction: sensor.wind_direction
gust: sensor.wind_gust
layout: hero
rules:
- { below: 5, color: blue-grey, label: Calm }
- { below: 20, color: teal, label: Light breeze }
- { below: 35, color: amber, label: Fresh }
- { above: 35, color: red, label: Storm, tint_card: true }
Wind Card Pro docs
Rain Card Pro
The rain rate and today's total, animated: drops that fall harder and slant with the wind, ripples on a puddle, or a rain gauge that fills through the day, coloured by your rules.
type: custom:rain-card-pro
entity: sensor.rain_rate
today: sensor.rain_today
wind: sensor.wind_speed
direction: sensor.wind_direction
layout: hero
flow: { style: drops }
rules:
- { below: 0.1, color: blue-grey, label: Dry }
- { below: 2.5, color: light-blue, label: Light rain }
- { below: 7.6, color: blue, label: Moderate rain }
- { above: 7.6, color: indigo, label: Heavy rain, tint_card: true }
Rain Card Pro docs
Sun Path Card Pro
Today's sun elevation with sunrise, sunset, dawn, noon and dusk, computed from your location. Visual editor.
type: custom:sun-path-card-pro
title: Sun today
Sun Path Card Pro docs
Sun Azimuth Card Pro
Where the sun is around your house: a 3D scene with the house, its shadow and the sky dome, or a sky dial seen from above. On request, sunrise, noon and sunset, and the sides of the house with their sun window today.
type: custom:sun-azimuth-card-pro
title: Sun
house:
front: 20
sides: { front: Street, back: Garden }
show_sun_times: true
show_sides: true
Sun Azimuth Card Pro docs
Illuminance Card Pro
An illuminance sensor on a log scale with zones, as gauge arc, trend or colour band. Visual editor.
type: custom:illuminance-card-pro
entity: sensor.illuminance
mode: arc
Illuminance Card Pro docs
Config schema
schema/ holds JSON Schemas for every card (pro-cards.schema.json accepts any of them). Add # yaml-language-server: $schema=https://malte-wessel.github.io/pro-cards/schema/pro-cards.schema.json to a YAML file for completion in editors, or validate with node scripts/validate.ts card.yaml.
Development
npm install
npm run build # bundles src/ into dist/pro-cards.js
npm run watch # rebuild on change
npm run docs:dev # docs site with live examples at http://localhost:5173/pro-cards/
npm run docs:build # static site in docs/.vitepress/dist (deployed to GitHub Pages on push to main)
AGENTS.md lists the project rules; .claude/skills/ holds step-by-step workflows (docs example, visual case, release).
The docs run the real card sources against a simulated home (docs/.vitepress/theme/ha-shim/). To add a live example to a page, wrap a YAML code block in a ::: live container.
Each card lives as its own TypeScript module in src/; src/index.ts imports them all. The committed
dist/pro-cards.js must match the sources (CI checks this). Releases are cut by pushing a v* tag,
which attaches the bundle to a GitHub release.
Testing
npm test # unit tests (Vitest, happy-dom): pure helpers of every card, the docs' template engine and demo world
npm run test:e2e # integration tests (Playwright, Chromium): real cards mounted in a browser against the simulated home
npm run test:visual # visual regression (Playwright in Docker): screenshots compared with tests/visual/__snapshots__
npm run test:visual:update # re-generate the baselines after an intended visual change
Details, the harness API and how to add cases: tests/README.md
Visual baselines are rendered on Linux only, inside mcr.microsoft.com/playwright, so the same pixels are compared locally and in CI. Docker Desktop must be running for the two visual commands. The browser tests use tests/harness/, a tiny Vite page that loads the card sources and the docs' Home Assistant shim; the clock is frozen at 21 June 2026, 12:00 Europe/Berlin.
License
MIT
