Network Switch Card

Features

• Header with a status-colored icon, name, subtitle and power toggle; turning the switch off asks for a confirmation first (it can cut the network Home Assistant runs on)
• Chips for connectivity, global status and uptime (SNMP timeticks, seconds, or a boot-time timestamp sensor)
• Two cards: ha-switch-card and its mini version ha-switch-mini-card (front panel and rates side by side; a detail button shows the full card)
• Live state of every port on the device; tap a port to open its entity
• Port names under the drawn ports and in their tooltips; a port without link is grey (nothing plugged in), red only when it is one of the watched ports
• Ports up out of all next to the status (Online · 6/8)
• Download / upload rate computed from the byte counters (kB/s, MB/s), with the total under it (GiB), and the last 24 hours drawn behind (recorder statistics, on a real time axis, broken where data is missing)
• Built-in devices: a drawn generic front panel (1–52 ports) that follows the light or dark theme, or a drawn Netgear GS308T (S350) front panel with its ports and link LEDs
• Custom image support with an adjustable port overlay
• Status colors from the Home Assistant theme
• Visual editor in the dashboard UI (no YAML needed), in every supported language
• Single file, no dependencies (no mushroom, card-mod or button-card)

Supported integrations

Integration	What the card reads
SNMP (built in, YAML)	One sensor per port with its operational status, plus optional status, connectivity, uptime (timeticks) and traffic sensors

Any other integration works as long as its port entities follow a pattern (port_pattern, with {n} for the port number); status, connectivity, uptime (seconds), traffic and power switch entities are optional.

Prerequisites

Home Assistant 2024.8 or later, and:

Entities describing your switch, usually from the SNMP integration: one sensor per port with its operational status (1 = up), plus optional status, connectivity, uptime and traffic sensors and a power switch. Every entity is optional; the card shows what is configured.

Configuration

Visual editor#

Edit a dashboard, click Add card and search for Network switch card. Every option below is available in the editor, grouped by entities, ports, status and appearance.

Full options#

type: custom:ha-switch-card
name: Living room switch Netgear S350 (GS308T)
subtitle: 8 monitored ports
icon: mdi:switch
switch_entity: switch.living_room_switch
status_entity: sensor.living_room_switch_global_status
connectivity_entity: binary_sensor.living_room_switch
uptime_entity: sensor.living_room_switch_uptime
traffic_in_entity: sensor.living_room_switch_port_1_in
traffic_out_entity: sensor.living_room_switch_port_1_out
ports: 8
port_pattern: sensor.living_room_switch_port_{n}_status
model: gs308t
url: http://switch.local

Options reference#

Tapping any chip, tile or port opens its more-info dialog.

How it works

Ports are read from port_pattern with {n} replaced by the port number, and drawn green when their state equals port_on_state. A port without link is grey (nothing plugged in), or red when it is one of the watched_ports; a missing, unavailable or unknown entity is grey too (so a failed SNMP poll does not show every port as down).

The mini card shows the header (status and ports up, no power toggle), the front panel and the two rates beside it. On a card 330 px wide or less (a phone, 6 columns of a section) the panel takes the whole width and the rates go under it side by side, one per line under 200 px, where the status pill keeps only the port count (its colour and icon still tell the status, its tooltip has the whole text). Drawn front panels have square corners (1 px); a custom image keeps its rounded frame. The header icon and the power LED follow status_entity (online_state green, idle_state orange, unavailable / unknown or missing grey, anything else red), or connectivity_entity when no status is set (on green, unavailable / unknown grey, otherwise red).

As in the other juju35 cards, the status pill sits on the right of the header, on the title's line (left of the power toggle): it shows status_entity, or connectivity_entity when no status is set. The other chips (connectivity when a status is set, uptime) are shown under the header. On a narrow card the name gives way to the pill down to a few characters; past that the pill moves under the name with its whole text, and is only shortened with an ellipsis when even that line is too short (the full text stays in the tooltip). In the Sections view the card is at least 8 columns wide.

The generic front panel is an SVG drawn by the card: up to 12 ports on one row, beyond that odd ports on top and even ports below, like real switches. Its body is derived from the theme's card and text colors, so it stays readable in light and dark mode.

Support

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

Features

• show_title option (also in the visual editor) hides the header's name (the status pill stays), 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 (114 KB → 102 KB) and each other language is its own ha-switch-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

• Rates computed from the byte counters divided by 1024 while switching units at 1000: 3.4 MB/s read "3.2 MB/s". They are now in powers of 1000 (kB/s, MB/s), one decimal under 100, as on the system-monitor and internet-box cards.

Changes

• Totals in binary units (KiB, MiB, GiB) with 2 / 1 / 0 decimals (trailing zeros dropped), as on the other cards.
• Traffic tiles labelled Download / Upload in every language (the system-monitor card's words) instead of "Incoming / Outgoing traffic"; the editor keeps the sensor labels.

Fixes

• The header power toggle now has an accessible name ("Power: ", in the card's language), and it keeps the keyboard focus when the card is redrawn.
• A new traffic rate or state now updates the card in place instead of rebuilding it, so focus, hover and the power toggle are kept and only the changed text is rewritten.

Maintenance

• CI and the release workflow now install Playwright's Chromium, which the new browser test of the in-place update needs.

Fixes

• A traffic rate computed from a byte counter now drops to 0 when the counter stops changing (no traffic, or a stalled poll), instead of staying at its last non-zero value.
• An uptime sensor that reports the boot time (a timestamp) now shows the time since then, updated every minute, instead of "0h 0min"; rates and totals use the decimal separator of the card's language.