👥 Material Users Card
🌟 Overview
The material-users-card is a custom card for Home Assistant that elegantly displays all registered users with their avatars. It provides live presence status, map more-info access, and a button for quickly accessing user management or your personal profile.
☀️ Light Mode | 🌙 Dark Mode |
🔧 Requirements
To use this card in the Free version, the following custom components are required:
📌 Card Mod
📌 Button Card
📌 Auto Entities
TIP
💡 HACS installation is recommended to keep components up to date.
⚙️ Configuration
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
type | string | custom:material-users-card | Required | ✅ Yes |
is_add_button_enabled | boolean | If enabled, non-admin users will also be able to see the button to add a new user. However, non-admin users will not be able to complete the addition and will be redirected to their own profile page. If disabled, the button will only be visible to users with administrative privileges. | false | ❌ No |
is_user_map_enabled | boolean | If enabled, non-admin users will be able to see the location of other users on the map by clicking on their cards. If disabled, location information will not be visible to non-admin users. | false | ❌ No |
🍃 Basic Configuration
The card will automatically generate buttons for all registered users. The "+" button will not be visible by default.
type: custom:material-users-card✨ Advanced Configuration
type: custom:material-users-card
is_add_button_enabled: true
is_user_map_enabled: true🎨 Extended Customization
⚠️ LICENSE
Only for PRO and ULTIMATE users, get your licence now 🚀.
🚀 Pro & Ultimate Features
The Paid (PRO/ULTIMATE) version of material-users-card has been completely rewritten from scratch in pure native LitElement and Material 3 Expressive design system:
- ⚡ Zero External Dependencies: Eliminates
auto-entities,button-card,mod-card, and YAML template generators (materialUsersTemplate), drastically improving loading speed and UI responsiveness. - 👤 Smart Avatar Fallbacks: Renders high-resolution user profile pictures or generates clean Material 3 monogram initials when no picture is set.
- 📍 Real-Time Presence Badges: Features dynamic color-coded presence status dots directly on avatars (home vs away).
- 👆 Tactile
pression-clickMicro-Interactions: Expressive physical press scaling animation (scale(0.94)) and subtle tactile haptic vibration pulses (light) on every touch. - 🗺️ One-Tap Map & Profile Navigation: Click any user avatar to open the native more-info dialog with location map, or tap the "+" button to access user management (
/config/personfor admins,/profilefor regular users). - 🛠️ Visual Editor (
ha-form): Features an intuitive GUI editor with collapsible expansion panels and full multi-language localization.
🛠️ Configuration Options
| Option | Type | Description | Default | Required |
|---|---|---|---|---|
type | string | Must be custom:material-users-card. | - | ✅ Yes |
is_user_map_enabled | boolean | Allows non-admin users to open the more-info map dialog on avatar tap (admins always have map access). | false | ❌ No |
is_add_button_enabled | boolean | Displays the "+" action button for all users (admins always see it by default). | false | ❌ No |
users | list | Optional list of specific person.* entity IDs to display (shows all active persons if omitted). | All registered person.* | ❌ No |
🚀 Usage Examples
1. Automatic User Discovery
Display all registered users automatically with their live presence states.
type: custom:material-users-card2. Full Access with User Map & Add Button
Allow non-admin users to inspect user location maps and display the add button.
type: custom:material-users-card
is_user_map_enabled: true
is_add_button_enabled: true3. Specific Users Filter
Filter and show only specific persons in a designated dashboard view.
type: custom:material-users-card
users:
- person.giovanni
- person.maria
is_user_map_enabled: true🎨 Extended Customization
⚠️ LICENSE
Only for PRO and ULTIMATE users, get your licence now 🚀.
This card includes its own native version of Card-Mod. You can inject custom CSS to override any style or create unique animations.
💡 ADVANCED STYLING
👉 Check out the Styling Guide.