Welcome to the future of vehicle monitoring in Home Assistant! Ultra Vehicle Card brings all your vehicle data into a beautiful, customizable interface that works with any vehicle type - electric, gas, hybrid, or even spacecraft (okay, maybe not yet, but we're working on it! 🚀).
- Universal Vehicle Support: Electric, gas, hybrid - configure it however you need
- Fully Customizable Layout: Drag and drop sections, choose column layouts, adjust spacing
- Dynamic Vehicle Images: Show different images based on vehicle status (charging, parked, etc.)
- Custom Progress Bars: Battery, fuel, range, charging speed - add as many as you need
- Interactive Icon Rows: Create custom control panels with intelligent state detection
- Beautiful Gradients: Make your bars pop with custom color transitions
- Responsive Design: Looks great on mobile, tablets, and dashboards
- Smart Template Support: Use Home Assistant templates for advanced logic
- Visual Editor: No YAML required (unless you want to!)
Ultra Vehicle Card is available in the default HACS repository:
- Open HACS in your Home Assistant instance
- Navigate to "Frontend" section
- Click the "+" button to add a new integration
- Search for "Ultra Vehicle Card"
- Click INSTALL
- Restart Home Assistant
For the DIY enthusiasts:
- Download the latest
ultra-vehicle-card.jsfile from the Releases page - Upload it to your Home Assistant
config/www/directory - Go to Settings → Dashboards → Resources
- Add
/local/ultra-vehicle-card.jsas a JavaScript Module - Restart your browser
- Add a new card to your dashboard
- Select "Custom: Ultra Vehicle Card"
- Use the visual editor to configure your card
The foundation of your card:
- Card Title: Name your vehicle and adjust title styling
- Layout Types: Choose between "Single" (vertical), "Double" (two-column), or "Dashboard" (top view)
- Main Image: Upload a photo of your vehicle or use a dynamic entity-based image
- Action Images: Configure different vehicle images based on entity states
- Section Order: Drag and drop to rearrange card sections
- Section Columns: Assign sections to specific columns in multi-column layouts
- Section Spacing: Fine-tune the margins between sections
Create unlimited progress bars for any numeric sensor:
- Main Entity: Select the entity powering the bar (battery level, fuel level, etc.)
- Limit Entity: Optionally show a marker on the bar (like charge limit)
- Left/Right Values: Show additional info below the bar (range, power, etc.)
- Bar Styling: Customize size, radius, colors, and more
- Gradients: Create beautiful color transitions based on value
- Animations: Add subtle animations based on entity states
Build custom control panels:
- Create Icon Rows: Organize icons into rows with customizable width and alignment
- Configure Icons: Each icon can display entity states and perform actions
- Smart State Detection: Decide when icons appear active using states, templates, or attributes
- Interaction: Choose what happens on click (toggle, service calls, navigation, etc.)
- Styling: Customize icon size, text position, colors, and more
Global visual settings:
- Color Scheme: Set default colors for card elements
- Gradient Settings: Configure global gradient stops for progress bars
- Animation Settings: Control default animations
Help and support:
- Version information
- Helpful links
- Support options
One of the most powerful features is template mode, which lets you use Home Assistant templates to determine icon states or values. This enables complex logic like:
{{ is_state('binary_sensor.car_charging', 'on') and states('sensor.battery_level')|int < 80 }}
This would make an icon active only when the car is charging AND battery is below 80%.
type: custom:ultra-vehicle-card
title: Tesla Model 3
vehicle_image: /local/images/tesla.png
bars:
- entity: sensor.tesla_battery_level
limit_entity: sensor.tesla_charge_limit
left_entity: sensor.tesla_range_km
left_title: Range
right_entity: sensor.tesla_charging_power
right_title: Charging
use_gradient: true
- entity: sensor.tesla_speed
left_entity: sensor.tesla_power
left_title: Power
right_entity: sensor.tesla_efficiency
right_title: Efficiency
icon_rows:
- width: '100%'
alignment: space-between
icons:
- entity: switch.tesla_climate
name: Climate
icon_active: mdi:fan
icon_inactive: mdi:fan-off
on_click_action: toggle
- entity: lock.tesla_doors
name: Locks
icon_active: mdi:lock-open
icon_inactive: mdi:lock
on_click_action: toggle
- entity: binary_sensor.tesla_sentry_mode
name: Sentry
icon_active: mdi:shield
icon_inactive: mdi:shield-off
on_click_action: toggletype: custom:ultra-vehicle-card
title: Toyota RAV4 Prime
vehicle_image: /local/images/rav4.png
bars:
- entity: sensor.rav4_battery_level
left_entity: sensor.rav4_battery_range
left_title: EV Range
use_gradient: true
- entity: sensor.rav4_fuel_level
left_entity: sensor.rav4_fuel_range
left_title: Fuel Range
use_gradient: true
gradient_stops:
- color: '#ff0000'
position: 0
- color: '#ffff00'
position: 50
- color: '#00ff00'
position: 100
icon_rows:
- width: '100%'
alignment: space-between
icons:
- entity: sensor.rav4_location
name: Location
icon_inactive: mdi:map-marker
on_click_action: more-info
- entity: sensor.rav4_odometer
name: Mileage
icon_inactive: mdi:counter
- entity: binary_sensor.rav4_doors
name: Doors
icon_active: mdi:car-door
icon_inactive: mdi:car-door
color_active: '#ff0000'- Check your browser console for errors
- Clear your browser cache (Ctrl+F5 or Cmd+Shift+R)
- Verify the resource is loaded properly in Dashboard → Resources
- Make sure all required entities exist
- Check for syntax errors in templates
- Try recreating the card from scratch if problems persist
- Reload your entire browser page
- Inspect browser console for script errors
- Update to the latest version
Bars can animate based on entity states:
bars:
- entity: sensor.tesla_battery_level
animation_entity: binary_sensor.car_charging
animation_state: 'on'
animation_type: 'pulse'Control how gradients display on bars:
bars:
- entity: sensor.tesla_battery_level
use_gradient: true
gradient_display_mode: 'value_based' # or "full"
gradient_stops:
- color: '#ff0000'
position: 0
- color: '#ffff00'
position: 50
- color: '#00ff00'
position: 100Add custom CSS directly to your card:
global_css: |
.my-custom-class {
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}Yes! Configure it for any vehicle type - electric, gas, hybrid, motorcycle, or even a spaceship (if you have one).
The card works with any entity in Home Assistant. Popular integrations include Tesla, Kia/Hyundai Connect, Volvo On Call, PSA Car Controller, and many more.
Absolutely! Create multiple cards, one for each vehicle.
The card is fully responsive and works great on mobile through the Home Assistant companion app or browser.
Yes! The card supports multiple languages. Check the TRANSLATION_GUIDE.md for details.
If you find this card useful, consider supporting its continued development:
- Buy me some caffeine
- Join our Discord
- Star the repository
- Share your setup in the Home Assistant community
This project is licensed under the MIT License - see the LICENSE file for details.
Ultra Vehicle Card - Drive your dashboards to the next level!