Device Card

A comprehensive card to display and organize your Home Assistant device entities

Built with the tools and technologies:

Overview

A custom card for Home Assistant that provides a comprehensive overview of any device in your system. The card organizes device information into expandable sections, displaying sensors, controls, configuration options, and diagnostic data in a clean, user-friendly interface.

Features

Device Information Display

Shows device name and model information
Organizes entities into logical categories:
- Controls - for interactive elements like buttons and switches
- Sensors - for data readings and status information
- Configuration - for device settings
- Diagnostic - for troubleshooting information

Problem Detection

Automatically detects entities labeled as "problem" in the device based on their device_class
Visual indication when problems are detected (card border turns red)
Easy identification of issues requiring attention
Problem entities show a green or red indicator to their left

Entity Pictures

With an optional flag, you can showcase entity pictures when available. There must exist an entity with an entity_picture attribute.

Expandable Sections

Collapsible sections for better organization of information
Preview counts for sensors to reduce visual clutter
Ability to expand sections to see all entities

Entity Attributes

Click an entity to expand it and show it's attributes

Visual Styling

Consistent with Home Assistant design language
Responsive layout that works on both desktop and mobile
Clear visual hierarchy for easy reading

Installation

HACS (Recommended)

Open HACS in your Home Assistant instance
Click the menu icon in the top right and select "Custom repositories"
Add this repository URL and select "Dashboard" as the category
- https://github.com/homeassistant-extras/device-card
Click "Install"

Manual Installation

Download the device-card.js file from the latest release in the Releases tab.
Copy it to your www/community/device-card/ folder
Add the following to your configuration.yaml (or add as a resource in dashboards menu)

lovelace:
  resources:
    - url: /local/community/device-card/device-card.js
      type: module

Usage

Add the card to your dashboard using the UI editor or YAML:

Card Editor

The card is fully configurable in the UI editor. Simply select "Custom: Device Card" when adding a new card to your dashboard, then select your device from the dropdown.

YAML

This is the most minimal configuration needed to get started:

type: custom:device-card
device_id: YOUR_DEVICE_ID

The card will automatically:

Display the device name and model information
Organize all entities related to the device into appropriate sections
Show collapsible sections for Controls, Configuration, Sensors, and Diagnostics
Highlight any detected problems

Configuration Options

Name	Type	Default	Description
device_id	string	Required	The Home Assistant device ID for your device
title	string	Device name	Optional custom title for the card
preview_count	number	All items	Number of items to preview before showing "Show More" button
exclude_sections	list	none	Sections of entities to exclude. See below.
exclude_entities	list	none	Entities to remove from the card.
features	list	See below	Optional flags to toggle different features

Feature Options

Name	Type	Description
entity_picture	flag	Show entity picture when available

Section Exclude Options

controls
configurations
sensors
diagnostics

Example Configurations

Basic Configuration

type: custom:device-card
device_id: 1a2b3c4d5e6f7g8h9i0j

Custom Title and Preview Count

type: custom:device-card
device_id: 1a2b3c4d5e6f7g8h9i0j
title: Living Room Thermostat
preview_count: 3

With Entity Picture

type: custom:device-card
device_id: 1a2b3c4d5e6f7g8h9i0j
features:
  - entity_picture

Excluding some enities and sections

type: custom:device-card
device_id: 1a2b3c4d5e6f7g8h9i0j
exclude_sections:
  - controls
  - configurations
  - diagnostics
exclude_entities:
  - update.home_assistant_core_update

Project Roadmap

Initial design: Create initial card design
Enhanced customization: Add more customization options
Status badges: Quick status badges for device state
Device filtering: Filter specific entities from display

Contributing

💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
🐛 Report Issues: Submit bugs found or log feature requests for the device-card project.
💡 Submit Pull Requests: Review open PRs, and submit your own PRs.
📣 Check out discord: Need further help, have ideas, want to chat?
🃏 Check out my other cards! Maybe you have an integration that I made cards for.

Contributing Guidelines

Fork the Repository: Start by forking the project repository to your github account.
Clone Locally: Clone the forked repository to your local machine using a git client.
```
git clone https://github.com/homeassistant-extras/device-card
```
Create a New Branch: Always work on a new branch, giving it a descriptive name.
```
git checkout -b new-feature-x
```
Make Your Changes: Develop and test your changes locally.
Commit Your Changes: Commit with a clear message describing your updates.
```
git commit -m 'Implemented new feature x.'
```
Push to github: Push the changes to your forked repository.
```
git push origin new-feature-x
```
Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!