Flexible Horseshoe Card

Build advanced Home Assistant dashboards with your favourite horse.

release Get started
AmoebeLabs Flexible Horseshoe custom card for Home Assistant triple example

Design. Build. Enjoy.

Powerful, Highly configurable

Configure your card with custom sizing and populate it with any number of entities, horseshoes, lines, circles, and more. Position elements individually or as groups. Design once, reuse configurations, duplicate components, and create cards exactly the way you imagine them.

Build faster with less YAML

Use same_as to reuse similar items within sections instead of copying blocks. Define constants, and use them with ref() for shared color stops between items, or calc() to calculate positions and sizes so layouts stay consistent.

Build for and with Home Assistant

The horseshoe card integrates deeply with Home Assistant, automatically using locales, translations, icons, and state-based icon colors for a seamless experience. Override icons, precision, units, and names in the entities section whenever needed.

Templating

Support for JavaScript templating throughout most areas of the card configuration enables highly dynamic cards with custom logic and behavior. Support for card templates, but also color stops, state maps and more, enable reusing the same card for different sensors.

Color stops

Use fixed colors, entity state-based color stops, or gradients to dynamically style horseshoes, names, lines, circles, icons, and more.

Themes & palettes

Fully compatible with existing Home Assistant themes. Load external JSON color palettes with built-in light and dark mode support to create your own unique look and branding.

Built on SVG and CSS

100% built with Scalable Vector Graphics (SVG), using CSS styling and animations to fully control the appearance and behavior of most horseshoe elements.

Backwards compatible

The rejuvenated horseshoe implementation remains fully compatible with the original horseshoe YAML configuration Existing cards continue to work without modification. ** CSS or card-mod customizations targeting the previous HTML/SVG structure may need adjustments.