Встроенные карточки Home Assistant функциональны, но их дизайн — это базовый минимум. Если вы хотите, чтобы дашборд выглядел как готовый продукт, а не как черновик разработчика, потребуются кастомные карточки. В этой статье разберём, что они дают, как их устанавливать и какие карточки стоит поставить первыми.

Что такое кастомные карточки и зачем они нужны

Кастомная карточка (custom card) — это JavaScript-модуль, который расширяет возможности встроенного редактора дашбордов Home Assistant (Lovelace UI). Встроенных карточек около 30, и они покрывают базовые сценарии: переключатель света, график, камера, погода. Кастомные карточки добавляют то, чего нет «из коробки»:

• Минималистичный дизайн в стиле Material UI (Mushroom)
• Попапы и плавающую навигацию для телефонов (Bubble Card)
• Графики с тонкой настройкой осей, цветов и легенды (ApexCharts, mini-graph-card)
• Полностью настраиваемые кнопки с CSS-стилизацией (Button Card)
• CSS-инъекции в любую карточку (card-mod)
• Табы внутри одного экрана, свайпы, стопки без рамок и многое другое

Все кастомные карточки распространяются через HACS (Home Assistant Community Store) — неофициальный магазин с более чем 3000 репозиториев. Если HACS ещё не установлен, это первый шаг: без него установка кастомных карточек превращается в ручное копирование файлов по FTP.

Как установить кастомную карточку

Способ 1: через HACS (рекомендуемый)

Установка через HACS занимает около минуты. Общая последовательность:

1. Откройте HACS в боковой панели Home Assistant.
2. Перейдите в раздел Frontend.
3. Нажмите кнопку «+» в правом нижнем углу — откроется каталог.
4. Введите название карточки (например, «Mushroom») в строку поиска.
5. Выберите нужный репозиторий и нажмите «Download».
6. Дождитесь загрузки и нажмите «Reload».
7. Очистите кэш браузера: Ctrl+Shift+R (Windows) или Cmd+Shift+R (Mac) — повторите 2–3 раза.

После установки карточка появляется в редакторе дашборда: три точки в правом верхнем углу → Edit Dashboard → + Add Card → прокрутите вниз до «Custom: [название карточки]». Большинство популярных карточек имеет визуальный редактор — YAML не нужен.

Способ 2: вручную (без HACS)

Если HACS не установлен или карточки нет в каталоге, можно установить вручную. Это сложнее, и обновления придётся отслеживать самостоятельно. Пошагово:

• Скачайте .js файл карточки из GitHub-репозитория (раздел Releases).
• Поместите файл в папку /config/www/ на сервере Home Assistant. Если папки www нет — создайте её.
• В Home Assistant перейдите в Settings → Dashboards → три точки в правом верхнем углу → Resources.
• Нажмите «Add Resource».
• URL: /local/название-файла.js (например, /local/mushroom.js).
• Resource type: JavaScript Module.
• Нажмите «Create» и обновите страницу браузера.

Важно: если пункт «Resources» не виден, включите Advanced Mode в профиле пользователя (иконка пользователя в левом нижнем углу → Advanced Mode).

Способ 3: через YAML-конфигурацию

Если вы используете дашборд в YAML-режиме (а не в режиме storage), ресурсы нужно объявить в configuration.yaml:

lovelace:
  mode: yaml
  resources:
    — url: /local/mushroom.js
      type: module
    — url: /hacsfiles/bubble-card/bubble-card.js
      type: module

При установке через HACS URL будет начинаться с /hacsfiles/, при ручной установке — с /local/. Это важно: если путь указан неверно, карточка не загрузится.

Популярные кастомные карточки

Mushroom Cards

Mushroom — самая популярная коллекция кастомных карточек для Home Assistant. Это набор из 16+ минималистичных карточек для разных типов сущностей: свет, климат, медиа, замки, пылесосы, будильники, кофеварки и другие. Каждая карточка имеет визуальный редактор — без YAML.

Доступные карточки в коллекции:

• Light Card — управление светом с слайдером яркости и температуры цвета
• Climate Card — термостат с визуальной обратной связью
• Media Card — управление медиаплеером с обложкой
• Chips Card — компактные чипы-индикаторы (погода, температура, статус)
• Template Card — карточка с поддержкой шаблонов Jinja2
• Person Card — кто дома и где
• Alarm Card — панель сигнализации
• Cover Card — управление шторами и жалюзи
• Vacuum Card — управление пылесосом
• Update Card — статус обновлений
• Title Card — заголовок для дашборда
• Entity Card — универсальная карточка для любой сущности

Пример конфигурации Light Card:

type: custom:mushroom-light-card
entity: light.living_room
use_light_color: true
show_brightness_control: true
show_color_temp_control: true

Пример конфигурации Template Card (приветствие по времени суток):

type: custom:mushroom-template-card
primary: «Доброе утро, {{ user }}!»
secondary: >
  {% if is_state(‘device_tracker.phone’, ‘home’) %}
    Дома, температура {{ states(‘sensor.temp_inside’) }}°C
  {% else %}
    Нет дома
  {% endif %}
icon: mdi:home-account
icon_color: blue

Ключевые особенности Mushroom:

• Визуальный редактор для всех карточек — YAML не нужен
• Ноль зависимостей — не требует других карточек или плагинов
• Цвета на основе Material UI, поддержка светлой и тёмной темы
• Поддержка мультиязычности (включая русский)
• Выбор иконок через встроенный пикер
• Кастомные действия на тап, двойной тап и долгое нажатие

Bubble Card

Bubble Card — вторая по популярности коллекция, заточенная под мобильные устройства и настенные планшеты. Главное отличие от Mushroom — попапы и плавающая навигация в стиле iOS.

Типы карточек Bubble Card:

• Pop-up — всплывающее окно с дополнительными элементами управления
• Horizontal Buttons Stack — плавающая панель навигации снизу экрана
• Button — кнопка с цветным фоном
• Climate — управление климатом
• Cover — управление шторами
• Media-player — управление медиаплеером
• Calendar — встроенный календарь
• Select — выпадающий список
• Separator — разделитель
• Sub-buttons — под-кнопки внутри основной кнопки
• Empty-column — пустая колонка для выравнивания

Пример конфигурации кнопки-попапа:

type: custom:bubble-card
card_type: button
entity: light.kitchen
name: Кухня
icon: mdi:lightbulb
tap_action:
  action: navigate
  navigation_path: «#kitchen»

При тапе на кнопку откроется попап с расширенным управлением. Попап создаётся отдельной карточкой с card_type: pop-up и тем же hash-путём (#kitchen). Bubble Card имеет встроенный Module Store с более чем 100 модулями от сообщества для расширения функциональности.

Для корректной работы попапов может потребоваться фикс. Добавьте в configuration.yaml:

frontend:
  extra_module_url:
    — /hacsfiles/Bubble-Card/bubble-pop-up-fix.js

Для работы Module Store добавьте template-сенсор:

template:
  — trigger:
      — trigger: event
        event_type: bubble_card_update_modules
    sensor:
      — name: «Bubble Card Modules»
        state: «saved»
        icon: «mdi:puzzle»
        attributes:
          modules: «{{ trigger.event.data.modules }}»
          last_updated: «{{ trigger.event.data.last_updated }}»

Custom Button Card

Button Card — самая гибкая карточка в экосистеме Home Assistant. Если Mushroom — это «конструктор без кода», то Button Card — «конструктор с полным доступом к коду». Поддерживает шаблоны Jinja2, CSS-стилизацию, анимации, условия, множество действий на тап/двойной тап/удержание.

Основные возможности:

• Работает с любой сущностью, которую можно переключать
• 6 действий: toggle, more-info, navigate, url, call-service, none
• Кастомный цвет, иконка и текст на основе состояния сущности
• Кастомный размер иконки, ширины и высоты кнопки
• Поддержка шаблонов Jinja2 для динамического контента
• CSS-стилизация через встроенный стиль

Пример кнопки, меняющей цвет по состоянию:

type: custom:button-card
entity: switch.fan
name: Вентилятор
icon: mdi:fan
state:
  — value: «on»
    color: green
    icon: mdi:fan
    spin: true
  — value: «off»
    color: gray
    icon: mdi:fan-off
tap_action:
  action: toggle

Button Card — выбор для тех, кто готов писать YAML и хочет полного контроля над каждым пикселем. Для большинства пользователей Mushroom даёт 90% того же результата с визуальным редактором.

Mini Graph Card

Mini Graph Card — минималистичная карточка-график для отображения истории сенсоров. Показывает текущее значение и график за выбранный период. Проще и легче, чем ApexCharts, идеально для компактного размещения.

Пример конфигурации температуры за 24 часа:

type: custom:mini-graph-card
entities:
  — sensor.living_room_temperature
hours_to_show: 24
points_per_hour: 2
show:
  extrema: true
  average: true
  labels: true
line_color: «#ff9800»
line_width: 3

Возможности:

• Линейные, столбчатые и комбинированные графики
• Несколько сенсоров на одном графике
• Цветовые пороги (color_thresholds) — меняют цвет линии в зависимости от значения
• Скрытие/показ иконки, имени, состояния, легенды
• Выравнивание иконки и состояния (left, right, center)
• Группировка для встраивания в stack без рамок

ApexCharts Card

ApexCharts Card — продвинутая альтернатива mini-graph-card, основанная на библиотеке ApexCharts.js. Подходит для сложных графиков: несколько осей Y, временные интервалы, группировка данных, преобразования, аннотации.

Пример графика температуры и влажности с двумя осями Y:

type: custom:apexcharts-card
header:
  show: true
  title: Микроклимат
  show_states: true
graph_span: 24h
span:
  end: hour
yaxis:
  — id: temp
    min: 0
    max: 40
    decimals: 1
    apex_config:
      tickAmount: 4
  — id: hum
    min: 0
    max: 100
    decimals: 0
    opposite: true
series:
  — entity: sensor.temperature
    name: Температура
    yaxis_id: temp
    color: «#e74c3c»
    stroke_width: 2
    type: area
  — entity: sensor.humidity
    name: Влажность
    yaxis_id: hum
    color: «#3498db»
    stroke_width: 2
    group_by:
      duration: 10min
      func: avg

Возможности ApexCharts:

• Типы графиков: line, column, area, scatter, radialBar, pie, donut
• Несколько осей Y с независимыми шкалами
• Группировка данных (last, min, max, mean, delta)
• Преобразование данных через JavaScript (transform)
• Кэширование в браузере для снижения нагрузки на сервер
• Совместимость с Section Dashboards через section_mode: true

Важно: параметр span.end принимает значения minute, hour, day, week, month, year, isoWeek. Использование «now» вызывает ошибку парсинга.

card-mod

card-mod — это не карточка, а плагин, который позволяет внедрять CSS-стили в практически любую карточку Home Assistant: встроенную или кастомную. С его помощью можно менять фон, тени, скругления, отступы, цвета и даже добавлять анимации иконок.

Базовый пример — убрать рамку и тень у карточки:

type: entities
entities:
  — light.living_room
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
      border: none;
    }

Пример с анимацией иконки вентилятора (вращение при включении):

type: custom:mushroom-template-card
primary: Вентилятор
icon: mdi:fan
entity: fan.bedroom
icon_color: «{{ ‘blue’ if is_state(‘fan.bedroom’, ‘on’) else ‘grey’ }}»
card_mod:
  style: |
    ha-state-icon {
      {% if is_state(‘fan.bedroom’, ‘on’) %}
      animation: rotation 1s linear infinite;
      {% endif %}
      @keyframes rotation {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

card-mod работает с карточками, содержащими элемент ha-card (почти все встроенные и большинство кастомных). Для карточек без ha-card можно использовать обёртку mod-card.

Дополнительные полезные карточки

Помимо основных, есть десятки карточек для специфических задач:

Темы: зачем они нужны и какие выбрать

Кастомные карточки + тема = готовый дизайн. Тема меняет цвета, шрифты, отступы и скругления для всех карточек сразу, включая встроенные. Устанавливается через HACS в разделе Frontend → Themes.

Популярные темы:

• Mushroom Shadow — тёмная тема, оптимизированная под Mushroom Cards
• Catppuccin — тёплые пастельные тона, несколько вариантов (Latte, Frappe, Macchiato, Mocha)
• Noctis — глубокий тёмно-синий, минималистичный
• iOS Theme — стиль Apple, светлые и тёмные варианты
• Google Theme — Material Design от Google

Активация темы: Settings → Dashboards → Themes (или в профиле пользователя). Тему можно менять в зависимости от времени суток через автоматизацию.

Советы по созданию красивого дашборда

1. Начните с Mushroom + тёмная тема (Mushroom Shadow или Catppuccin Mocha). Это даст 80% результата за 20% усилий.
2. Используйте Chips Card (Mushroom) вверху экрана для быстрых индикаторов: погода, кто дома, статус сигнализации, температура.
3. Группируйте устройства по комнатам с помощью Sections (встроенный режим с HA 2025+). Создайте секцию для каждой комнаты.
4. Для настенного планшета используйте Bubble Card с плавающей навигацией снизу — удобно нажимать большим пальцем.
5. Не устанавливайте больше 3 кастомных карточек за один раз — тестируйте каждую отдельно, чтобы выявить конфликты.
6. Используйте card-mod для точечной настройки: убрать рамки, скруглить углы, спрятать заголовки. Но не злоупотребляйте — избыток CSS замедляет загрузку.
7. Сделайте резервную копию дашборда перед большими изменениями. В YAML-режиме — сохраните копию файла. В storage-режиме — экспортируйте конфигурацию.
8. Добавляйте графики (mini-graph-card или ApexCharts) для ключевых сенсоров: температура, влажность, энергопотребление. Это делает дашборд информативнее.
9. Используйте Template Card (Mushroom) для динамических подписей: «2 света включено», «Дома 18°C, на улице 5°C». Шаблоны Jinja2 делают карточки живыми.
10. Тестируйте дашборд на телефоне и на планшете/мониторе. То, что отлично выглядит на десктопе, может быть неудобным на мобильном.

Типичные проблемы и решения

Карточка не появляется в редакторе дашборда

Очистите кэш браузера (Ctrl+Shift+R × 3). Проверьте, что файл .js загружен и ресурс добавлен в Settings → Dashboards → Resources. Убедитесь, что Advanced Mode включён.

Ошибка «Custom element doesn’t exist: [card-name]»

Файл карточки не загрузился. Проверьте URL ресурса: /hacsfiles/… для HACS, /local/… для ручной установки. Очистите кэш браузера.

Карточка загружается, но не отображает данные

Проверьте, что entity_id указан верно. Откройте Developer Tools → States и найдите нужную сущность. Убедитесь, что сущность доступна (не unavailable).

Конфликт карточек после обновления Home Assistant

После обновления HA некоторые кастомные карточки могут ломаться. Проверьте логи: Settings → System → Logs. Обновите карточки через HACS. Если карточка сломалась и нет обновления, временно удалите её из дашборда.

card_mod не работает

Убедитесь, что card_mod установлен и активирован (HACS → Frontend). Проверьте, что карточка содержит элемент ha-card (card_mod работает только с такими карточками). Для карточек без ha-card используйте обёртку custom:mod-card.

Дашборд медленно загружается

Слишком много кастомных карточек или тяжёлых CSS-стилей. Отключите ненужные карточки. Используйте меньше card_mod-стилей. Разделите дашборд на несколько views.

Попап Bubble Card не открывается

Добавьте bubble-pop-up-fix.js в configuration.yaml (см. раздел Bubble Card). Очистите кэш браузера после изменения.

Mushroom-карточка не показывает цвет света

Установите use_light_color: true в конфигурации карточки. Убедитесь, что лампочка поддерживает RGB или цветовую температуру.

Безопасность при работе с кастомными карточками

Кастомные карточки — это сторонний JavaScript-код, который выполняется в вашем браузере при загрузке дашборда. Home Assistant не проверяет и не ратифицирует эти карточки. Несколько правил:

• Устанавливайте карточки только из проверенных репозиториев. Смотрите количество звёзд на GitHub, активность автора и последнее обновление.
• Популярные карточки (Mushroom, Bubble Card, Button Card, mini-graph-card, ApexCharts) имеют тысячи звёзд и активное сообщество — их можно считать безопасными.
• Не устанавливайте карточки из малоизвестных репозиториев без проверки кода. Откройте .js файл и просмотрите содержимое — там не должно быть обращений к внешним серверам или загрузки скриптов со сторонних доменов.
• Делайте резервные копии перед установкой новых карточек. Settings → System → Backups → Create Backup.
• После обновления Home Assistant проверяйте логи на ошибки от кастомных карточек. Если карточка вызывает ошибку, временно отключите её, удалив из дашборда.
• HACS показывает предупреждение при установке: «This is a custom component and may cause problems». Это не баг, а напоминание о том, что вы устанавливаете сторонний код.

Чек-лист по созданию красивого дашборда

• Установите HACS (если ещё не установлен).
• Установите Mushroom Cards через HACS → Frontend.
• Установите тему (Mushroom Shadow, Catppuccin или Noctis) через HACS → Frontend → Themes.
• Создайте новый дашборд: Settings → Dashboards → Add Dashboard, режим Sections.
• Добавьте Chips Card вверху: погода, температура, статус дома.
• Создайте секции по комнатам: кухня, спальня, гостиная, ванная.
• Добавьте Mushroom Light Card для каждого источника света.
• Добавьте Mushroom Climate Card для термостатов.
• Установите mini-graph-card или ApexCharts для графиков температуры/энергии.
• Установите card-mod для точечной стилизации (убрать рамки, скруглить углы).
• Установите Bubble Card, если нужен мобильный/планшетный дашборд с попапами.
• Проверьте дашборд на телефоне и на настенном планшете.
• Сделайте резервную копию после завершения настройки.

Заключение

Кастомные карточки — это то, что превращает Home Assistant из технического инструмента в красивый и удобный интерфейс для всего дома. Если бы нужно было выбрать минимум, с чего начать:

Mushroom Cards + тёмная тема + card-mod для полировки. Эти три компонента дают 80% визуального улучшения за 20% усилий. Остальное — Bubble Card для мобильных, ApexCharts для графиков и Button Card для тех, кто хочет полного контроля.

Установка занимает 5–10 минут через HACS, а результат — дашборд, которым приятно пользоваться каждый день.