Ultra Card
The Visual Dashboard Builder for Home Assistant
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
Why Ultra Card?
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.
Features at a Glance
- 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
Quick Start
Install
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).
Create your first card
- 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.
Optional: Pro
Visit UltraCard.io for cloud sync, automated backups, exclusive animated modules (Clock, Weather, Forecast, Video Background), and third-party card integration.
Modules
| 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 |
Browse every module in the wiki → (74 modules, organized by category, with examples and configuration reference).
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.
Free vs Pro
| 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 |
Preset Marketplace
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.
Translations
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.
Community & Support
- 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.
Contributing
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.
Technical Details
- 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.
License
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