Ultra Card is a modular card builder for Home Assistant Dashboard UI that provides an easy-to-use visual editor to build custom dashboard cards. Instead of writing YAML configuration, you can use drag-and-drop interface with 12 different module types to create professional-looking cards.

The card works by allowing you to arrange modules in rows and columns, with each module having 4-tab settings (General, Actions, Logic, Design) for complete customization. All configuration is done through the visual editor – no YAML editing required.

Ultra Card is available through HACS (Home Assistant Community Store). Simply open HACS in Home Assistant, go to “Frontend”, search for “Ultra Card” and install it. After installation, restart Home Assistant and the card will be available as “Custom: Ultra Card” when adding new cards to your dashboard.

Alternatively, you can install manually by downloading the ultra-card.js file from GitHub releases and adding it to your config/www folder, then adding it as a resource in your dashboard settings.

Absolutely! Ultra Card was specifically designed to make dashboard creation accessible to everyone through visual tools instead of YAML configuration. The entire interface uses drag-and-drop functionality, dropdown menus, color pickers, and form fields.

You can create complex, professional-looking cards without writing a single line of code. The visual editor handles all the configuration for you, and live preview shows your changes immediately.

Yes, Ultra Card is fully compatible with both light and dark Home Assistant themes. New cards automatically inherit default background and border styles from your Home Assistant theme, ensuring consistent look and feel across your dashboard.

The card supports 14 languages and is mobile-optimized with responsive layouts that work on all devices including phones, tablets, and desktop computers.

There’s no hard limit on the number of modules you can add to an Ultra Card. You can create complex layouts with multiple rows and columns, each containing various modules. The card supports module nesting (one level deep) for even more flexible arrangements.

However, keep in mind that too many modules might affect performance and user experience, especially on mobile devices. It’s recommended to organize complex layouts across multiple cards for optimal performance.

Yes! Ultra Card includes comprehensive export and import functionality. You can export individual rows, complete card configurations, or use the integrated online preset marketplace to share your creations with the community.

The export feature automatically removes sensitive data (like IP addresses and tokens) from exported configurations for privacy protection. You can also browse and install community-created presets directly from the editor.

Ultra Card integrates seamlessly with Home Assistant automations and entities. Every module can be linked to entities, respond to state changes, and trigger automations through tap, hold, and double-tap actions.

You can use conditional logic to show/hide modules based on entity states, time conditions, or custom templates, making your cards dynamic and responsive to your Home Assistant setup.

Ultra Card works perfectly in the Home Assistant mobile app and web interface. All cards are mobile-optimized with responsive layouts that adapt to different screen sizes. Touch gestures, haptic feedback, and mobile-specific features are fully supported.

Yes! Ultra Card welcomes community contributions. You can contribute by reporting issues, suggesting features, translating to new languages, creating community presets, or contributing code through GitHub.

The project has comprehensive development guidelines for creating new modules and follows standard open-source practices. Join the Discord community for discussions and support.

Ultra Card offers several support channels: Join the Discord community for real-time help and discussions, report issues or request features through GitHub, and access comprehensive documentation and examples in the repository.

The community is very active and helpful, with experienced users and developers providing assistance. Most common questions are answered quickly in the Discord server.

The Icon module supports multiple icons within a single module. Click the “Add Icon” button in the module settings to add additional icons. Each icon can have its own entity, conditions, colors, and actions.

You can arrange multiple icons horizontally or vertically, set different display conditions for each icon, and even use templates to dynamically control their visibility and appearance.

Yes! Each icon has dynamic color template functionality. Enable “Dynamic Icon Color Template” and use Jinja2 templates to change colors based on entity states, attributes, or any other condition.

For example, you can make a light bulb icon turn yellow when the light is on, or change a battery icon color from green to red based on battery level percentage.

Icon modules support intro and outro animations. In the Design tab, you can choose from various animation types like fadeIn, slideIn, zoomIn, bounceIn, and more. You can also set animation duration and delay for precise timing control.

Animations trigger when the icon appears or disappears based on your logic conditions, creating smooth visual transitions that enhance the user experience.

Icons support three types of actions: tap (single click), hold (long press), and double-tap. Each action can navigate to different views, toggle entities, call services, open URLs, or show more-info dialogs.

You can also enable haptic feedback for tactile response on supported devices, making interactions feel more responsive and engaging.

Use the Logic tab to set display conditions for icons. You can show/hide icons based on entity states, time periods, or custom templates. The display mode can be set to “always”, “every” (all conditions must be true), or “any” (at least one condition must be true).

Template mode allows even more advanced visibility control using Jinja2 templates that return true/false values.

Ultra Card primarily uses Material Design Icons (MDI), which includes thousands of icons covering most use cases. You can browse and search the complete MDI library directly in the icon picker.

For custom icons, you can use any icon available in your Home Assistant setup, including custom icon packs you’ve installed through HACS or other methods.

Icon size can be controlled through the Design tab using the font size setting, as icons are treated as text elements. You can set specific pixel values or use relative units.

The icon module also respects global design settings from parent rows and columns, allowing consistent sizing across your entire card layout.

Yes! Icons can display entity attribute values as text overlays or tooltips. Use template mode to extract and format attribute values, such as showing battery percentage, temperature readings, or any other entity attribute.

You can also use attributes to control icon color, visibility, or even which icon is displayed dynamically.

Check these common issues: Ensure the icon name is correct (use mdi: prefix for Material Design icons), verify entity IDs are valid and accessible, check that display conditions in the Logic tab aren’t hiding the icon, and confirm the icon color isn’t the same as the background.

Use the browser developer tools to check for console errors that might indicate template or configuration issues.

Yes! You can group icons by placing multiple icons in a single Icon module, or by using Horizontal/Vertical layout modules to arrange multiple Icon modules together. Each approach offers different styling and spacing options.

The Icon module itself supports icon spacing and alignment settings to create clean, organized icon groups within the module.

The Text module provides comprehensive typography controls in the Design tab. You can set font family, size, weight (bold, normal), color, and alignment. Font sizes can be set in pixels or relative units.

Text formatting is responsive and scales appropriately on different screen sizes. You can also use HTML tags within the text content for additional formatting like bold, italic, or line breaks.

Yes! Enable Template Mode in the Text module to use Jinja2 templating syntax. You can display entity states, attributes, perform calculations, format dates and times, and create complex dynamic text.

Templates update automatically when entity states change, making your text content reactive to your Home Assistant setup.

Text modules can include icons alongside text. Simply specify an icon in the icon field, and it will appear next to your text. You can control icon color separately from text color.

Icons in text modules respect the same sizing and spacing rules as the text, creating cohesive visual elements that work well together.

Absolutely! Use the Actions tab to assign tap, hold, and double-tap actions to text modules. You can navigate to different views, toggle entities, call services, or open URLs.

When actions are assigned, the text automatically becomes clickable with appropriate cursor styling and hover effects.

Use line breaks (\n) in your text content, or enable Template Mode and use HTML line break tags. The text module automatically handles multi-line content with proper line spacing.

You can also control text alignment (left, center, right) for multi-line text to achieve the desired layout appearance.

Yes! Use Template Mode to display sensor values with custom formatting. You can access entity states, attributes, and apply filters for units, rounding, and formatting.

For example: {{ states(‘sensor.temperature’) | round(1) }}°F will display temperature with one decimal place and Fahrenheit unit.

Text modules are automatically responsive and scale appropriately on different screen sizes. You can also use relative font sizes (em, rem) instead of fixed pixel values for better mobile adaptation.

The Design tab includes mobile-specific settings and preview options to test how your text appears on different device sizes.

Text modules support intro and outro animations just like other modules. Choose from fadeIn, slideIn, zoomIn, bounceIn, and other animation types in the Design tab.

Animations trigger when text becomes visible or hidden based on your Logic conditions, creating smooth transitions that enhance user experience.

Check the browser console for template errors, verify entity IDs are correct and accessible, ensure template syntax is valid Jinja2, and test templates in Home Assistant’s Template editor first.

Common issues include typos in entity names, incorrect attribute references, and syntax errors in template expressions.

Text modules support basic HTML formatting tags like <b>, <i>, <br>, and others for styling. For more complex HTML content, consider using the Markdown module which provides fuller HTML support.

Always be cautious with HTML content from external sources and ensure it’s safe and doesn’t break your dashboard layout.

Bar modules automatically create progress bars from numeric sensor values. Select your sensor entity, set the minimum and maximum values, and the bar will display the current value as a percentage of the range.

You can customize bar colors, add value labels, and even use templates to dynamically calculate the percentage based on complex conditions.

Yes! Bar modules support gradient colors and conditional coloring. You can set different colors for different value ranges, such as green for low values, yellow for medium, and red for high values.

Use template mode to dynamically change bar colors based on the current value or other conditions in your Home Assistant setup.

Battery sensors work perfectly with bar modules. Set the entity to your battery sensor, minimum to 0, maximum to 100, and the bar will show battery percentage visually.

You can add conditional coloring to show green for high battery, yellow for medium, and red for low battery levels, making it easy to identify devices needing attention.

Bar modules support both horizontal and vertical orientations. Choose the orientation that best fits your card layout and design preferences.

Vertical bars work well in narrow spaces or when stacking multiple bars, while horizontal bars are great for wider layouts and detailed value displays.

Bar modules can display entity names, current values, and custom labels. You can position these elements above, below, or alongside the bar itself.

Use template mode to create custom labels that combine multiple pieces of information, such as “Battery: 85% (Charging)” for more informative displays.

Yes! Bar modules include smooth transition animations when values change. You can control animation speed and easing for the best visual effect.

Bars can also use intro/outro animations when they appear or disappear based on Logic conditions, creating professional-looking dynamic interfaces.

In the Bar module settings, specify custom minimum and maximum values that make sense for your data. For temperature, you might use -20 to 50, for percentage sensors use 0 to 100.

You can also use templates to dynamically calculate min/max values based on other entities or historical data for more intelligent scaling.

Absolutely! Bar modules handle negative values correctly. Set appropriate minimum values (like -100) and the bar will display negative values by extending in the opposite direction.

This is useful for sensors like power consumption (positive) vs generation (negative), or temperature differences from a baseline.

Check that your entity provides numeric values, verify min/max ranges are appropriate for your data, ensure the entity is available and not returning “unknown” or “unavailable”, and confirm bar height/width settings allow visibility.

Use the browser console to check for any template or entity errors that might prevent proper bar rendering.

While individual Bar modules show single values, you can create grouped bar displays by placing multiple Bar modules in Horizontal or Vertical layout modules.

For more complex charts with stacked bars or multiple data series, consider using the Graphs module which provides advanced charting capabilities.

Image modules support multiple image sources: upload local images directly through the editor, use URLs from web sources, display camera entity feeds, or reference images stored in your Home Assistant www folder.

Each source type has different advantages – uploaded images are always available, URLs can display dynamic content, and entity images update automatically with state changes.

Yes! You can configure multiple images with different display conditions. For example, show a sunny weather image when weather is clear, or a rain image when it’s raining.

Use the Logic tab to set conditions for each image, and the Image module will automatically switch between images based on your Home Assistant entity states.

Image modules provide sizing options including cover (fill container), contain (fit within container), and custom dimensions. You can set specific width and height values or use percentage-based sizing.

The aspect ratio is maintained by default, but you can override this for specific design requirements using the Design tab settings.

Absolutely! Use the Actions tab to make images clickable with tap, hold, and double-tap actions. You can navigate to camera feeds, toggle lights, open more-info dialogs, or any other Home Assistant action.

This makes images functional UI elements, not just decorative – perfect for device controls or navigation elements.

Select “Entity” as the image source and choose a camera entity. The image will display the current camera feed and update automatically.

For live camera feeds, consider using the dedicated Camera module which provides additional features like fullscreen viewing and streaming controls.

Yes! The Design tab provides border controls (style, width, color, radius), shadow effects, and opacity settings. You can create rounded corners, add drop shadows, or apply other visual effects.

These styling options help images integrate seamlessly with your overall card design and theme.

Configure fallback images that display when the primary image fails to load. This is especially useful for URL-based images that might be temporarily unavailable.

You can also use Logic conditions to hide image modules when the source entity is unavailable, preventing broken image displays.

While Image modules focus on displaying images, you can layer Text modules or other elements over images using layout modules. This creates overlay effects for labels, status indicators, or other information.

For complex image overlays, consider using CSS background images in other modules with text content layered on top.

Use appropriately sized images for your display needs – avoid huge images that will be scaled down. Compress images to reduce file size while maintaining quality.

For frequently changing images like weather or camera feeds, consider caching strategies and ensure your image sources are reliable and fast-loading.

While single Image modules display one image at a time, you can create galleries by using multiple Image modules in layout containers, or by setting up Logic conditions that cycle through different images based on time or other triggers.

For advanced slideshow functionality, consider using automation to change entity states that control which images are displayed.

Template Mode allows you to use Home Assistant’s Jinja2 templating syntax to create dynamic content that changes based on entity states, attributes, time, or complex calculations. Use it when you need content that goes beyond simple static text or basic entity display.

Template Mode is perfect for conditional text, formatted sensor values, calculations, date/time formatting, and combining multiple entity values into single displays.

Use the states() function to access any entity state: {{ states(‘sensor.temperature’) }} returns the state value. For entity attributes, use state_attr(): {{ state_attr(‘sensor.weather’, ‘humidity’) }}.

You can also check if entities exist and handle missing values: {{ states(‘sensor.example’) | default(‘unknown’) }} provides fallback values.

Yes! Jinja2 provides powerful formatting filters. For numbers: {{ states(‘sensor.temp’) | round(1) }} for rounding, {{ value | int }} for integers. For dates: {{ as_timestamp(states(‘sensor.last_updated’)) | timestamp_custom(‘%H:%M’) }} for custom time formats.

You can combine filters: {{ states(‘sensor.battery’) | int | round(0) }}% for clean percentage displays.

Use if-else statements in templates: {% if states(‘light.living_room’) == ‘on’ %}Light is On{% else %}Light is Off{% endif %}. You can also use inline conditionals: {{ ‘Open’ if is_state(‘binary_sensor.door’, ‘on’) else ‘Closed’ }}.

Combine multiple conditions with and/or: {% if states(‘sensor.temp’) | int > 20 and states(‘weather.home’) == ‘sunny’ %}Perfect Weather!{% endif %}

Absolutely! Templates support mathematical operations: {{ states(‘sensor.power_1’) | float + states(‘sensor.power_2’) | float }} for addition. Use filters like float and int to ensure numeric operations work correctly.

You can create complex calculations: {{ (states(‘sensor.used_space’) | float / states(‘sensor.total_space’) | float * 100) | round(1) }}% for percentage calculations.

Test your templates in Home Assistant’s Developer Tools > Template section first. Check for common issues: entity names must be exact (case-sensitive), use appropriate filters (float, int) for numeric operations, and handle missing entities with default() filter.

Browser console shows template errors – look for “Template error” messages that indicate syntax or entity issues.

Yes, but use the Logic tab for visibility control, not content Template Mode. Logic templates should return true/false values to control when modules appear: {{ states(‘sensor.battery’) | int < 20 }} shows modules only when battery is low.

Content Template Mode affects what’s displayed inside the module, while Logic templates control whether the module is visible at all.

Use state_attr() function: {{ state_attr(‘weather.home’, ‘temperature’) }} gets the temperature attribute from a weather entity. For nested attributes: {{ state_attr(‘sensor.device’, ‘battery’)[‘level’] }}.

Always check if attributes exist: {{ state_attr(‘sensor.device’, ‘battery’) | default(‘N/A’) }} prevents errors when attributes are missing.

Yes! Use now() for current time: {{ now().strftime(‘%H:%M’) }} for current time. Access entity last_changed: {{ as_timestamp(states.sensor.example.last_changed) | timestamp_custom(‘%Y-%m-%d %H:%M’) }}.

Create relative time displays: {{ relative_time(states.sensor.example.last_changed) }} shows “2 hours ago” style formatting.

Use multi-line template syntax with proper indentation:
{% set temp = states(‘sensor.temperature’) | float %}
{% if temp > 25 %}
Hot: {{ temp }}°C
{% else %}
Cool: {{ temp }}°C
{% endif %}

You can also use \n for line breaks in simple templates: {{ “Line 1\nLine 2” }} creates multi-line output.

Use the Layout Builder to drag modules into columns within rows. Each row can contain multiple columns, and you can adjust column widths by dragging the column dividers. Columns automatically stack on mobile devices for responsive design.

You can also use Horizontal layout modules to create inline arrangements of multiple modules with precise spacing control.

Yes! Ultra Card supports one level of module nesting. You can place Horizontal modules inside Vertical modules, or create rows within columns for complex layouts. This allows flexible arrangements like rows within columns or columns within rows.

The editor provides full drag-and-drop support for creating and managing nested layouts with proper spacing and alignment.

Each module has margin and padding controls in the Design tab. Margins create space outside the module, while padding creates space inside the module borders. You can set different values for top, bottom, left, and right.

Layout modules (Horizontal/Vertical) also have gap settings to control spacing between their child modules uniformly.

Ultra Card is mobile-optimized by default. Columns automatically stack on smaller screens, text scales appropriately, and touch targets are sized for mobile use. You can preview mobile layouts directly in the editor.

Use relative sizing (percentages, em units) instead of fixed pixel values for better mobile adaptation across different device sizes.

Use the Global Design tab to set card-wide styling that applies to all modules. Row and Column design settings cascade down to their contained modules. This creates consistent typography, colors, and spacing throughout your card.

Parent design settings override child settings, so row design beats module design for consistent theming.

Yes! Both the global card and individual modules support background images. You can upload images, use URLs, or reference entity images. Background sizing options include cover, contain, and custom positioning.

Background images work at the card level, row level, column level, or individual module level for flexible design options.

The Design tab provides border controls for style (solid, dashed, dotted), width, color, and border radius for rounded corners. You can set different values for each side or use uniform borders.

Shadow effects and other advanced styling can be added through custom CSS in the custom_css field for more advanced visual effects.

Yes! Modules support intro and outro animations that trigger when they appear or disappear based on Logic conditions. Choose from fadeIn, slideIn, zoomIn, bounceIn, and other animation types.

Animation duration and delay can be customized for precise timing control, creating smooth transitions between different card states.

Most modules provide alignment options for their content. Text modules have text-align settings (left, center, right), while other modules may have content positioning options in their Design tabs.

Layout modules (Horizontal/Vertical) provide alignment and distribution controls for their child modules, allowing precise positioning within the container.

Yes! Use the export/import functionality to save complete card configurations as templates. You can also create presets and share them through the integrated online marketplace.

The Global Design settings can be copied between cards to maintain consistent theming across multiple cards in your dashboard.

Ensure Ultra Card is properly installed through HACS or manually added to your resources. After installation, restart Home Assistant completely. Check that the resource is added correctly in your dashboard resources section.

If using manual installation, verify the ultra-card.js file is in your www folder and the resource URL is correct (/local/ultra-card.js).

Check the Logic tab for display conditions that might be hiding modules. Verify entity IDs are correct and entities are available in Home Assistant. Look for template errors in the browser console (F12 Developer Tools).

Also check that module colors aren’t the same as background colors, making content invisible. Review any custom CSS that might be affecting display.

Test templates in Home Assistant’s Developer Tools > Template section first. Check for common issues: entity names must be exact and case-sensitive, use appropriate filters (float, int) for numeric operations, and handle missing entities with default() filter.

Browser console (F12) shows template errors. Look for “Template error” messages and verify all referenced entities exist and are accessible.

Verify actions are properly configured in the Actions tab – ensure action type is set to something other than “default” or “nothing”. Check that target entities exist and are controllable.

For navigation actions, ensure view/dashboard names are correct. For service calls, verify service names and parameters are valid in Home Assistant.

Large cards with many modules can slow down the editor. Try working with smaller sections at a time, or temporarily hide complex modules while editing others. Clear browser cache and restart Home Assistant if performance issues persist.

Consider breaking very large cards into multiple smaller cards for better performance and maintainability.

Verify image URLs are accessible and correct. For uploaded images, ensure they’re properly saved. For entity images, check that the entity exists and provides image data.

Check browser console for 404 errors or other loading issues. Ensure image sources allow cross-origin requests if using external URLs.

Use the mobile preview in the editor to test layouts. Avoid fixed pixel widths that might be too large for mobile screens. Use percentage-based sizing and let columns stack naturally on smaller screens.

Test on actual mobile devices as screen sizes vary. Consider simplifying complex layouts for mobile or using Logic conditions to show different content on mobile.

Check color contrast – light colors on light backgrounds or dark on dark may not be visible. Verify color values are valid CSS colors (hex, rgb, named colors).

Parent design settings override child colors, so check row/column design settings that might be overriding module colors.

Join the Discord community for real-time help and discussions. Report bugs through GitHub issues with detailed descriptions and steps to reproduce. Include browser console errors and card configuration when possible.

The community is very active and helpful – most questions get answered quickly in Discord. Check existing GitHub issues before creating new ones.

If you have exported the card configuration previously, you can import it back. Home Assistant may have backups of your dashboard configuration that include Ultra Card settings.

For future protection, regularly export your card configurations, especially before making major changes. The export feature creates JSON backups you can save safely.