Build professional Home Assistant dashboards without writing YAML. Ultra Card is a modular card builder that turns dashboard creation into an intuitive visual design experience. Drag-and-drop layouts, a rich set of modules, and a powerful editor put full creative control in your hands—whether you're new to Home Assistant or a power user.
UltraCard.io · Discord · Documentation
Visual-first — Every feature and setting is available through the UI. No YAML required.
Modular layout engine — 19+ module types, drag-and-drop columns, and unlimited nesting so you can build any dashboard layout you imagine.
Built for performance — TypeScript, smart caching, and responsive design so cards run smoothly from phones to large displays.
Preset Marketplace — Install community presets with one click, preview before installing, and share your own designs.
Pro: ecosystem unifier — Embed any custom Home Assistant card (Bubble Card, Mushroom, ApexCharts, and more) inside Ultra Card’s layout system. Third-party cards are unlimited for all users.
Pro: cloud & backups — Cloud sync, automatic daily backups (30-day retention), and manual snapshots so your work is safe and available everywhere.
- Drag-and-drop builder — Arrange layouts with instant feedback
- 4-tab module editor — General, Actions, Logic, and Design per module
- 19+ module types — Text, Icon, Info, Image, Markdown, Bar, Graphs, Camera, Button, Slider, Spinbox, Dropdown, Light, Gauge, layouts, Tabs, Separator, plus Pro animated modules
- Conditional logic — Show or hide by entity state, time, or Jinja2 templates
- Full Jinja2 support — Templates with CodeMirror editor
- Native & 3rd party cards — Unlimited native and third-party cards for everyone
- Design controls — Typography, colors, spacing, borders, shadows, gradients, animations
- Preset Marketplace — Browse, install, and share community presets
- 15 languages — Full internationalization
HACS (recommended)
Or add https://github.com/WJDDesigns/Ultra-Card as a custom Lovelace repository in HACS, install Ultra Card, then restart Home Assistant.
Manual
- From the latest release, download all release assets for that version—not only
ultra-card.js. The card is split into multiple JavaScript files (for exampleultra-card.js,ultra-card-panel.js, and anyuc-*.jschunks). They must stay in the same folder so the browser can load them. - Copy that entire folder’s contents into
config/www(for exampleconfig/www/ultra-card/), keeping the same filenames next to each other. - Add one Lovelace resource: Settings → Dashboards → Resources → Add Resource → URL pointing at the main bundle only, for example
/local/ultra-card/ultra-card.js(or/local/ultra-card.jsif you put files directly underwww), type JavaScript Module.
If you use the Ultra Card dashboard panel or Hub features, ensure ultra-card-panel.js is in that same directory as well (HACS installs everything automatically).
- Edit a dashboard → Add card → Custom: Ultra Card.
- Use the Layout Builder tab to add and arrange modules.
- Use the 4-tab editor (General, Actions, Logic, Design) on each module to configure content, taps, visibility, and styling.
Visit UltraCard.io for cloud sync, automated backups, exclusive animated modules (Clock, Weather, Forecast, Video Background), and third-party card integration.
| Category | Modules |
|---|---|
| Content | Text, Icon, Info, Image, Markdown, Bar, Graphs, Camera |
| Areas | Area / Room Summary |
| Controls | Button, Slider, Spinbox, Dropdown, Light, Gauge |
| Layout | Horizontal, Vertical, Tabs, Separator |
| Pro | Animated Clock, Animated Weather, Animated Forecast, Video Background |
Module docs: Text, Icon, Info, Image, Markdown, Bar, Graphs, Camera, Area / Room Summary, Button, Horizontal, Vertical, Separator.
Card integration — Use unlimited native Home Assistant cards inside Ultra Card. Add Bubble Card, Mushroom Cards, ApexCharts, and other custom cards—unlimited for all users.
| Feature | Free | Pro |
|---|---|---|
| Core modules & visual editor | Yes | Yes |
| Preset Marketplace | Yes | Yes |
| Conditional logic & templates | Yes | Yes |
| Native HA cards | Unlimited | Unlimited |
| 3rd party cards | Unlimited | Unlimited |
| Cloud configuration sync | — | Yes |
| Automatic daily backups (30-day) | — | Yes |
| Manual snapshots (up to 30) | — | Yes |
| Video Background, Animated Clock/Weather/Forecast | — | Yes |
| Priority support | — | Yes |
Browse and install community presets from inside the editor: Presets tab → Browse Marketplace. One-click install, categories, previews, and favorites. You can submit your own presets for others to use.
Supported languages: Catalan, English, British English, German, French, Spanish, Italian, Dutch, Norwegian, Danish, Czech, Polish, Swedish.
To contribute translations, see CONTRIBUTING_TRANSLATIONS.md. You can edit files in src/translations/ on GitHub and open a pull request.
- UltraCard.io — Website, Pro subscriptions, account
- Discord — Help, sharing, discussion
- GitHub Issues — Bugs and feature requests
Pro subscribers get priority support. You can also support development with a one-time tip.
Contributions are welcome: translations, presets, code, and documentation. See CONTRIBUTING_TRANSLATIONS.md for translations and DEVELOPMENT.md for local development (including npm run release:check, the same pipeline CI and tagged releases use). Please open pull requests with clear descriptions.
- Requirements: Home Assistant 2024.1.0+, modern browser (ES2015+). HACS recommended.
- Stack: TypeScript, smart caching, responsive layout.
- Privacy: No tracking; free tier is local-only; Pro sync uses encrypted connections. Open source on GitHub.
MIT — see license file.
Created by WJD Designs. Thanks to the Discord community and everyone who contributes presets, translations, and feedback.
Built for Home Assistant