Compact Team Tracker Card – A sleek, space-saving sports card

chamesbont · April 25, 2026, 4:44pm

Hi everyone,

I wanted to share a project (my first one) I’ve been working on (with ai support): the Compact Team Tracker Card.

While I love the data provided by the ha-teamtracker integration, I found the default card a bit too bulky for my minimalist dashboard. My goal was to create a “UI-first” version that keeps all the essential information while significantly reducing the footprint.

Credits

This card is a frontend enhancement and wouldn’t be possible without the fantastic work of vasqued2 and their ha-teamtracker integration. This card requires that integration to be installed and configured first.

Key Features in v2.0.5:

Space-Efficient Design: Optimized for dense dashboards.
Ultra-Compact Layout: An optional one-line mode for the ultimate minimalist look.
Smart Visibility: Automatically hides finished matches from previous days at midnight to keep your view fresh.
Multi-Entity Support: Display and manage multiple teams within a single card.
Priority Sensor: Choose a “main” team to be prioritized when multiple games start simultaneously.
Full Visual Editor: No YAML required. Configure everything via the native Home Assistant UI.

Screenshots

Installation

The card is HACS-ready. You can add it as a Custom Repository:

Go to HACS → Frontend.
Click the three dots in the top right and select Custom repositories.
Paste this URL: https://github.com/ChamesBont/compact-team-tracker-card/
Select Dashboard as the category.
Click Install and refresh your browser.

Repo & Feedback

Check out the code and full documentation here: GitHub: Compact Team Tracker Card

I’d love to hear your thoughts! If you find it useful, feel free to drop a on GitHub.

OvalZyre · May 7, 2026, 1:50pm

This is great! Thank you. I'm unfortunately not able to add a team at all when trying to add the card. Not sure if I missed something?

chamesbont · May 7, 2026, 3:58pm

Thanks
Can you try the "Pre-Release v2.0.6-beta.4"?
Do you have the Team Tracker integration installed?

OvalZyre · May 7, 2026, 4:25pm

Thanks. Just grabbed the beta and restarted, same issue. And I do have Team Tracker installed already.

chamesbont · May 7, 2026, 6:37pm

Okay, I've now tested it on a fresh HA installation and am encountering the same issue as you. For now, you can create the map in the code editor and define the entities there; see my example:

type: custom:compact-team-tracker
entities:
  - sensor.bund_vfb_stuttgart
  - sensor.bund_bayern_munich
  - sensor.dfb_pokal_vfb_stuttgart
  - sensor.dfb_pokal_bayern_munich
  - sensor.cl
show_record: true
layout: standard
show_scorers: true
only_today: true
show_next_only: false
priority_entity: sensor.bund_vfb_stuttgart
show_league: true
show_last_play: true
last_play_marquee: false

I'll take a closer look at the problem over the next few days.

EDIT:
There seems to be a problem loading the dropdown menu. If you click the dropdown menu in the visual editor on any standard dashboard card, it will then work on my card as well.

OvalZyre · May 7, 2026, 6:46pm

Sounds good, appreciate it!

chamesbont · May 7, 2026, 7:16pm

It looks like the problem has been fixed. Could you please test version 2.0.6 when you get a chance?

OvalZyre · May 8, 2026, 11:01am

chamesbont:

type: custom:compact-team-tracker
entities:
  - sensor.bund_vfb_stuttgart
  - sensor.bund_bayern_munich
  - sensor.dfb_pokal_vfb_stuttgart
  - sensor.dfb_pokal_bayern_munich
  - sensor.cl
show_record: true
layout: standard
show_scorers: true
only_today: true
show_next_only: false
priority_entity: sensor.bund_vfb_stuttgart
show_league: true
show_last_play: true
last_play_marquee: false

Working now, thanks so much!

Is there a way to show the previous game as well? For example, once the Mets game was done the score was gone, but I'd like to have the previous game show for some time before the next one, seeing the score in the morning for example.

chamesbont · May 8, 2026, 2:56pm

Is the “Hide finished matches” option turned off?
If so, the reason the games aren't visible is likely the Team Tracker integration itself. I'm not exactly sure how the MLB schedule is displayed there. In the Bundesliga, all games remain visible until the end of the matchday.

Linx-ESP · June 20, 2026, 3:56pm

Very clean card and just easy to setup, good job:

A couple of questions/suggestions/issues:

Would it be possible to remove the venue/location on the bottom?
In ultra compact mode it seems it isn't vertically centered. Might be something on my setup tho

image956×148 7.88 KB
Would it be possible to add an option to limit the number of matches so only the first x appear so the card size would stay the same even with more than x teams set up? Or maybe make it scrollable and respect home assistant's size settings?

snorth · August 8, 2026, 1:04am

Was glad to see this, as the full card does take up a lot of real estate. Looks great. Is there any way to flip the home and away positions like you can in the full card?

chamesbont · August 24, 2026, 6:23pm

Hi, thanks so much for the feedback, and sorry for the late reply.

Yes, the event location could be shown or hidden using a switch. I’ll include that in the next set of updates.

There have been a few updates in the meantime. It’s now possible to set a slider view.

chamesbont · August 24, 2026, 6:25pm

Hi, thanks for the feedback. As of today, you can set the positions of the home and away teams.

chamesbont · August 24, 2026, 6:27pm

Release v2.0.9.3

Smart Filter: Option to show only the next upcoming or currently live match.
Custom background color: Set your own background color for each Team.
Score Delimiter Option: Choose between colon ( : ) and dash ( - ) as the score separator.
Home Team Position: Display the home team on the Left (European standard) or Right (US style: Away @ Home).
And some bugfixes

Carousel Layout / Slider

Another space-saving view.

Visual Editor

Multiple options for customization.

Installation

Method 1: via HACS (recommended):

Method 2: Manually add repository to HACS:

Open HACS section in Home Assistant.
Click on the 3 dots in the top right corner.
Select “Custom repositories”.
Add the URL to the repository.
- URL: https://github.com/ChamesBont/compact-team-tracker-card/
- Type: Dashboard
Click the “ADD” button.

Method 3: Manual Installation

Download the compact-team-tracker-card.js file from this repository.
Upload it to your Home Assistant /config/www/ folder.
Add the resource in Home Assistant:
- Settings → Dashboards → Three dots (top right) → Resources → Add Resource.
- URL: /local/compact-team-tracker-card.js
- Type: JavaScript Module

snorth · August 24, 2026, 7:24pm

Excellent! Thanks!

snorth · August 24, 2026, 8:20pm

I have another suggestion to kind of build on this update. Now that home/away positioning is configurable, I would generally know where the game is being played (with a few exceptions). What about an option to include the TV network info in the small banner on the bottom instead of the detailed game location info? Maybe there are other data points that could be options to include in that spot (with limit to select only 1 choice to keep this “compact” card compact).

chamesbont · August 25, 2026, 3:37pm

I’ve been thinking about the suggestion. I’ll include the following options in the next release:

You can use a toggle to show or hide the location
You can use a toggle to display the TV schedule (if available)
If someone doesn’t need the location, they can hide it and make the map even more compact.

No additional data points are planned for now. As you said, it’s meant to be a compact card, and I don’t want to overload the editor too much.

chamesbont · August 25, 2026, 5:51pm

Release Notes - Release v2.1.0

Highlights

Individual Sports & Motorsport Engine: Added dynamic support for UFC/MMA, Tennis, Golf (PGA), and Racing (F1/NASCAR) with custom headshot/flag badge rendering and tournament/event layouts.
Granular Match Filtering: Split the off-season and match filtering controls into dedicated options for past completed matches and unscheduled/off-season teams.
Visual Glow & Customization: Introduced a global logo drop-shadow toggle and added options for TV network/broadcast badges and location display.

Full Changelog

Sports & Layout Expansions

Added dynamic headshot URL generation for athlete portraits using ESPN athlete IDs.
Added country flag badge positioning in the top-right corner of athlete headshots.
Integrated dedicated single-competitor event/racing layout rendering rank/position instead of team scores.
Added tournament event name banners for individual sports (e.g., PGA/Golf, UFC Fight Nights).

Display & Styling Refinements

Restructured name rendering to allow multi-line wrapping and eliminated ellipsis (...) clipping.
Filtered out placeholder characters (such as *) in abbreviation fields, falling back to full athlete names.
Added a dedicated fallback placeholder for TBD / unassigned opponents to eliminate broken image icons.
Redesigned the Ultra-Compact live match indicator into a centered vertical pill.

Configuration & Switch Additions

Added logo_shadow switch to apply a glow/drop-shadow across all team crests and headshots.
Added show_tv_network toggle to display broadcasting channels and streams.
Added show_location switch to manage venue and match location visibility.
Split filter settings into only_today (hide past games) and hide_offseason (hide unscheduled teams).

Linx-ESP · September 2, 2026, 7:27am

I’ve seen the motorsport changes and wanted to replace the F1 integration one to have a consistent one but is not working.

I have both a “F1 - *” sensor and a “F1 - Ferrari” one.

I imagine it is due to how the atributes differ:
**F1 - ***

state:
  translated: NOT_FOUND
  raw: NOT_FOUND
  last_changed: '2026-09-02T07:12:42.499Z'
  last_updated: '2026-09-02T07:22:42.201Z'
attributes:
  attribution: Data provided by ESPN
  state: NOT_FOUND
  sport: racing
  sport_path: racing
  league: F1
  league_path: f1
  league_logo: https://a.espncdn.com/combiner/i?img=/i/teamlogos/leagues/500/f1.png
  league_name: Fórmula 1
  season: null
  alt_game_note: null
  team_abbr: '*'
  opponent_abbr: null
  event_id: null
  event_name: Pirelli Italian GP
  event_url: null
  event_stream: null
  date: 2026-09-04T10:30Z
  kickoff_in: null
  series_summary: null
  venue: null
  location: null
  tv_network: null
  odds: null
  overunder: null
  team_name: null
  team_long_name: null
  team_id: null
  team_record: null
  team_rank: null
  team_conference_id: null
  team_homeaway: null
  team_logo: null
  team_url: null
  team_stream: null
  team_colors: null
  team_score: null
  team_win_probability: null
  team_winner: null
  team_timeouts: null
  opponent_name: null
  opponent_long_name: null
  opponent_id: null
  opponent_record: null
  opponent_rank: null
  opponent_conference_id: null
  opponent_homeaway: null
  opponent_logo: null
  opponent_url: null
  opponent_stream: null
  opponent_colors: null
  opponent_score: null
  opponent_win_probability: null
  opponent_winner: null
  opponent_timeouts: null
  quarter: null
  clock: null
  possession: null
  last_play: null
  down_distance_text: null
  outs: null
  balls: null
  strikes: null
  on_first: null
  on_second: null
  on_third: null
  team_shots_on_target: null
  team_total_shots: null
  opponent_shots_on_target: null
  opponent_total_shots: null
  team_sets_won: null
  opponent_sets_won: null
  last_update: '2026-09-02 09:15:30+02:00'
  api_message: >-
    Cached data: Drivers not found, qualifying not complete for Pirelli Italian
    GP
  api_url: >-
    https://site.api.espn.com/apis/site/v2/sports/racing/f1/scoreboard?lang=es&limit=50&dates=20260901-20261201
  private_fast_refresh: false
  icon: mdi:flag-checkered
  friendly_name: F1 - *

F1 - Ferrari

state:
  translated: NOT_FOUND
  raw: NOT_FOUND
  last_changed: '2026-09-02T07:15:30.314Z'
  last_updated: '2026-09-02T07:15:30.314Z'
attributes:
  attribution: Data provided by ESPN
  state: NOT_FOUND
  sport: racing
  sport_path: racing
  league: F1
  league_path: f1
  league_logo: https://a.espncdn.com/combiner/i?img=/i/teamlogos/leagues/500/f1.png
  league_name: Fórmula 1
  season: null
  alt_game_note: null
  team_abbr: JK
  opponent_abbr: null
  event_id: null
  event_name: Pirelli Italian GP
  event_url: null
  event_stream: null
  date: 2026-09-04T10:30Z
  kickoff_in: null
  series_summary: null
  venue: null
  location: null
  tv_network: null
  odds: null
  overunder: null
  team_name: null
  team_long_name: null
  team_id: '106842'
  team_record: null
  team_rank: null
  team_conference_id: null
  team_homeaway: null
  team_logo: null
  team_url: null
  team_stream: null
  team_colors: null
  team_score: null
  team_win_probability: null
  team_winner: null
  team_timeouts: null
  opponent_name: null
  opponent_long_name: null
  opponent_id: null
  opponent_record: null
  opponent_rank: null
  opponent_conference_id: null
  opponent_homeaway: null
  opponent_logo: null
  opponent_url: null
  opponent_stream: null
  opponent_colors: null
  opponent_score: null
  opponent_win_probability: null
  opponent_winner: null
  opponent_timeouts: null
  quarter: null
  clock: null
  possession: null
  last_play: null
  down_distance_text: null
  outs: null
  balls: null
  strikes: null
  on_first: null
  on_second: null
  on_third: null
  team_shots_on_target: null
  team_total_shots: null
  opponent_shots_on_target: null
  opponent_total_shots: null
  team_sets_won: null
  opponent_sets_won: null
  last_update: '2026-09-02 09:15:30+02:00'
  api_message: Drivers not found, qualifying not complete for Pirelli Italian GP
  api_url: >-
    https://site.api.espn.com/apis/site/v2/sports/racing/f1/scoreboard?lang=es&limit=50&dates=20260901-20261201
  private_fast_refresh: false
  icon: mdi:flag-checkered
  friendly_name: F1 - Ferrari

Less relevant, but the UEFA Champions League logo provided by ESPN is dark so there is little contrast. I don’t know if anything could be done

chamesbont · September 3, 2026, 5:52pm

It looks like the Team Tracker integration isn’t providing any information—or perhaps ESPN doesn’t have any data—about the events.

Yes, there will always be a logo that’s harder to see because of the contrast. With large logos, you can add a glow effect. But with the small ones in the header, that’s not something you can do very cleanly.