A unified card system for Home Assistant inspired by the iconic Star Trek LCARS interfaces.
Build your own LCARS-style dashboards and Master Systems Display (MSD) with realistic controls, reactivity and animations.
Important
LCARdS is a work in progress and not a fully commissioned Starfleet product β expect some tribbles!
This is a hobby project, with great community support and contribution. This is not professional, and should be used for personal use only.
AI coding tools have been leveraged in this project - please see the AI Usage section below for details.
LCARdS is the evolution of dedicated LCARS-inspired cards for Home Assistant.
It originates from, and supercedes the CB-LCARS project. LCARdS is meant to accompany and complement HA-LCARS themes.
Although deployed and used as individual custom cards - it's built upon common core components that aim to provide a more complete and cohesive LCARS-like dashboard experience.
- Unified architecture β Each LCARd share core services that centralized data sources, provide a cross-card rules engine, theme tokens, sounds, a coordinated animation framework, and much more.
- State-aware styling β Cards respond dynamically to entity states via a rules engine that hot-patches styles across multiple cards simultaneously β including coordinated alert modes.
- Built to animate β Embedded Anime.js v4 enables per-element animations on any SVG shape, line, or text β driven by entity state or triggered globally.
- Living data β Entities can be subscribed, buffered, and processed (moving averages, min/max, history) and referenced in any card field using a flexible four-syntax template system.
- Extensible by design β Themes, button presets, animations, and other assets can be distributed via a content pack system.
If coming from CB-LCARS, use this table to quickly see what the equivalent card/feature is in LCARdS. Not all features and functions may be available yet, but will be added over time.
Tip
You may run CB-LCARS and LCARdS together while transitioning over to LCARdS. All new features and fixes will be made in LCARdS only going forward.
Feature Comparison
β
Present | β Not present |
| Feature | CB-LCARS | LCARdS | Notes |
|---|---|---|---|
| Buttons | β
cb-lcars-button-card |
β
lcards-button |
Builtin preset collection provides the standard LCARS button styles which are completely configurable. |
| Multi-Segment Buttons | β | β
lcards-button |
Allows for complex button designs (known as component) to be used as advanced multi-segment/multi-touch controls.The controls are configured with use of new segements configurations. |
| DPAD | β
cb-lcars-dpad-card |
β
lcards-button |
First advanced button to use component feature of lcards-button card. |
| ALERT | background animation |
β
lcards-button |
Promoted to a button card component - allows full interactive configurations. |
| Labels | β
cb-lcars-label-card |
β
lcards-button |
Label functionality can by used with lcards-button Additional presets available for text labels with or without decoration. |
| Elbows | β
cb-lcars-elbow-card |
β
lcards-elbow |
Equivalent in LCARdS - enhanced with more corner styles (ie. straight cut with configurable angles) |
| Double Elbows | β
cb-lcars-double-elbow-card |
β
lcards-elbow |
Double Elbow functionality is now consolidated into a single unified lcards-elbow card. Available elbow styles will allow for double mode if supported. |
| Sliders | β
cb-lcars-multimeter-card |
β
lcards-slider |
Completely replacing former multimeter card. Vastly improved with much better configuration options for direction, inversion, display min/max, control min/max and much more. Uses extensible design to support more complex slider styles in the future. |
| Cascade Data Grid | background animation |
β
lcards-data-grid |
CB-LCARS provided decorative only version as background animation. In LCARdS, lcards-data-grid is full featured tabular/cell-based grid that can show real entity data, text, etc. It still supports a decorative mode (generated data) equivalent to CB-LCARS version if desired. |
| Charts / Graphs | β | β
lcards-chart |
Embedded ApexCharts library providing access to a variety of charts/graphs types to plot entity/data against. |
| MSD (Master Systems Display) Card | β | β
lcards-msd |
Full MSD system in a card. Embed controls (other HA cards), connect and route lines, add animations to reflect statuses, etc. |
| Background Animations | β
GRID, ALERT, GEO Array, Pulsewave |
Background animations have been split out into stackable layers You can now mix and match various animation building blocks to create your desired effect. ie. Add a starfield and a grid layer. β GRID enhanced version β ALERT now a button card component like DPAD β Starfield & Nebula Enhanced with some new options. |
|
| Element Animations | β | β | Embedded Anime.js v4 library enabling capability to animate any SVG element (cards, lines/stroke, text, etc.) |
| Symbiont (embedded cards) | β | β | Available in Elbow card - attempts native card injection for basic style imprinting. Add your own card_mod config for advanced styling. |
| State-based Styling / Custom States | β | β β | CB-LCARS has a limited set of states to control styles. LCARdS uses both common state groupings [default|active|inactive|unavailable] and the ability to definte any state to the list for customized styling. Integrates with core rules engine for hot-patching card styles. |
| Sounds | β | β | Customizable sounds enabled for many UI and Card event types (tap, double tap, hold, hover, sidebar expand/collapse, and more...) |
| Alert Overlay | β | β
lcards-alert-overlay |
New dashboard-level card that reacts to input_select.lcards_alert_mode and displays a full-screen configurable backdrop (blur + tint) with an embedded content card. By default the ALERT button is overlaid and configured for the alert level triggered. |
Install from HACS
There are no external dependencies or prerequisites for LCARdS - just use with HA-LCARS themes for the best experience.
π« tl;dr: Express Startup Sequence
- Clear All Moorings and Open Starbase Doors
- Open HACS in your Home Assistant instance
- Thrusters Ahead, Take Us Out
- Search for LCARdS
- Bring Warp Core Online, Engines to Full Power
- Install and hard-refresh to clear browser cache
- Engage!
Enable the LCARdS Config Panel (Highly Recommended)
The LCARdS Config Panel is a standalone sidebar entry in Home Assistant β a central hub for managing LCARdS settings and exploring content. From here you can configure alert modes, sounds, helpers, and more.
| Tab | What it does |
|---|---|
| Helpers | Create all required HA input helpers in one click (sound, alert, HA-LCARS sizing) |
| Theme Browser | Browse all live theme tokens and CSS variables from LCARdS and HA-LCARS, as well as inspect any CSS variable |
| Sound | Configure the active sound scheme and set per-event overrides |
| Pack Explorer | Browse installed packs; view and inspect all available presets, themes, sounds, and more. |
| YAML Export | Generate a full configuration.yaml snippet for all LCARdS helpers if you prefer to define them via YAML. |
To enable the panel, add the following to configuration.yaml and restart Home Assistant:
panel_custom:
- name: lcards-config-panel
sidebar_title: LCARdS Config
sidebar_icon: mdi:space-invaders
url_path: lcards-config-panel
module_url: /hacsfiles/lcards/lcards.jsSee LCARdS Config Panel for details.
|
Provides all standard LCARS buttons, plus advanced multi-segment/multi-function buttons. Key Features
|
|
Classic LCARS corner designs for authentic interface aesthetics. Key Features
|
|
Interactive sliders for display of sensors, and control of entities. Key Features
|
|
LCARS data grids with configurable data modes and cascade animations. Key Features
|
|
LCARdS integrated charting card powered by ApexCharts library. Key Features
|
|
Highly configurable canvas with multi-card and routing line support. Key Features
|
|
A small non-visible helper card to configure full-screen dashboard overlays that react to Key Features
|
LCARdS is built on Lit web components and embeds Anime.js v4 for animations and ApexCharts for charting. Each LCARd shares a common set of core services that work behind the scenes β the cards do not need to implement any of this themselves:
graph LR
subgraph HA["Home Assistant"]
HACore[HA Core]
end
subgraph CORE["LCARdS Core"]
subgraph CoreSystems["window.lcards.core.*"]
direction LR
CoreRules[Rules Engine]:::coreStyle
CoreThemes[Theme Manager]:::coreStyle
CoreData[Data Source Manager]:::coreStyle
CoreSystemsMgr[Systems Manager]:::coreStyle
CoreAnim[Animation Manager]:::coreStyle
CoreOther[...other core systems]:::coreStyle
end
end
subgraph DASHBOARD["Dashboard"]
Button([LCARdS Button Card]):::lcardsStyle
Elbow(["LCARdS Elbow Card"]):::lcardsStyle
Slider([LCARdS Slider Card]):::lcardsStyle
Chart([LCARdS Chart Card]):::lcardsStyle
Grid([LCARdS Data Grid Card]):::lcardsStyle
AlertOverlay([LCARdS Alert Overlay Card]):::lcardsStyle
subgraph MSD[LCARdS MSD Card]
Card1([HA Cards]):::lcardsStyle
MSDLCARdS([LCARdS Cards]):::lcardsStyle
end
end
HACore 0@-..-CoreSystems
CoreSystems 1@-...- Button
CoreSystems 2@-.- Slider
CoreSystems 3@-.- Chart
CoreSystems 4@-.- Elbow
CoreSystems 5@-.- Grid
CoreSystems 6@-.- AlertOverlay
CoreSystems 7@-.- MSD
CoreSystems 8@-.- MSDLCARdS
0@{ animate: slow }
1@{ animate: slow }
2@{ animate: slow }
3@{ animate: slow }
4@{ animate: slow }
5@{ animate: slow }
6@{ animate: slow }
7@{ animate: slow }
8@{ animate: slow }
linkStyle 0,1,2,3,4,5,6,7,8 stroke:#00eeee,stroke-width:3px
classDef lcardsStyle fill:#ffb399,stroke:#e7442a,color:#000
classDef coreStyle fill:#6d748c,stroke:#d2d5df
style HA fill:#1c3c55,stroke:#37a6d1,color:#fff
style HACore fill:#37a6d1,stroke:#93e1ff,color:#fff
style CORE fill:#1e2229,stroke:#2f3749
style CoreSystems fill:#2f3749,stroke:#52596e
style DASHBOARD fill:#2f3749,stroke:#52596e
style MSD fill:#e7442a,stroke:#ffb399,color:#fff
LCARdS Core Services
These core services start on page load and become accessible for use by all LCARdS cards on the dashboard view.
Interaction is behind the scenes, but all the core systems APIs are accessible via window.lcards.core.*
| Service | What it does |
|---|---|
| Systems Manager | Centralized entity state subscriptions; LCARdS register interest and receive smart push notifications β no duplicate subscriptions |
| DataSource Manager | Named data buffers tied to entities; records history, runs processing pipelines (moving average, min/max, aggregation) and notifies subscribers |
| Rules Engine | Evaluate conditions and hot-patch LCARd styles at runtime; target any LCARd by tag, type, or ID |
| Theme Manager | Token-based theming (colours, spacing, borders, and more); resolves theme tokens in any LCARd field |
| Alert Mode | Coordinated alert states (green / red / yellow / blue / gray / black); drives visual colour palette shifts and trigger sounds; driven by HA helper that can be used in automations |
| Animation Manager | Coordinates Anime.js v4 animations used by LCARdS; provides a built-in library of configurable presets, or provide your own animejs custom parameters |
| Sound Manager | LCARS-style audio feedback for card interactions and UI events; configurable scheme with per-event overrides |
| Style Preset Manager | Central registry of named style presets for buttons, sliders, elbows, and more; consumed from packs |
| Component Manager | Registry of SVG component definitions (D-pad, Alert, custom shapes) used in button component mode |
| Asset Manager | Loads and caches SVG and font assets for use across cards |
| Pack Manager | Loads and distributes content from packs (themes, presets, animations, assets, etc.) to the appropriate managers at startup |
| Helper Manager | Manages LCARdS and HA-LCARS input_* helper entities (alert mode selector, sound config, sizing helpers); auto-create any helper from LCARdS Config Panel |
Template Support β any text field in any card supports four syntaxes:
JavaScript [[[return ...]]], LCARdS tokens {entity.state} / {theme:colors.card.button}, DataSource {ds:sensor_name}, and Jinja2 {{states("sensor.temp")}} (Jinja2 is evaluated by HA server).
Alert mode is more than a colour change β it shifts the entire dashboard UI together:
- Theme colours transform β the whole HA UI palette shifts; hues, saturation, and token values rotate to match the alert level across every element on screen; all transform parameters are fully configurable per alert mode via the Alert Mode Lab in the LCARdS Config Panel
- Sound plays β the Sound Manager fires the matching alert audio scheme automatically
- Alert Overlay activates β the
lcards-alert-overlaycard reacts and displays its full-screen backdrop and content card for the triggered alert condition - Rules-driven animations β cards and MSD overlays can be configured to pulse, flash, or animate when a specific alert level is active; this is opt-in via the Rules Engine, not automatic
- HA helpers stay in sync β the
input_select.lcards_alert_modehelper always reflects the current state, so HA automations can both trigger and react to alert level changes
Multiple modes available: green (normal), red, yellow, blue, gray, black. Can be triggered from the Config Panel, a card action, a HA automation, or the browser console.
Define rules once β apply them across many cards simultaneously. Rules evaluate HA entity state conditions and hot-patch card styles at runtime without reloading:
- Target cards by type (all buttons), tag (cards you label), or ID (a specific card)
- Patch any style property β colour, opacity, border, background, text β on any matching card
- Changes are instant and reactive β as entity states change, styles update automatically
- Example: turn all indicators tagged as engineering red when any engineering alarm fires.
LCARdS DataSources give cards access to richer data than a plain entity state:
- Subscribe to any HA entity and buffer its values over time
- Processing pipelines β apply moving average, min/max normalization, aggregation, or custom transforms to the buffered data
- Reference in any field via the
{ds:name}template syntax β charts, labels, sliders, rules all consume the same source - Shared across cards β one DataSource can feed multiple cards, one subscription
- Buffers stored in the browser session and clear on page refresh - recording in HA server not required.
The aim is for LCARdS to have as much UI-based configuration as it can - but also to be easy to learn and navigate. Of course, YAML is always available - and UI-editors have a schema-enhanced YAML editing tab to help with validation and auto-complete.
- Card editors are enhanced with immersive Configuration Studios β purpose-built visual environments for complex cards like MSD, Data Grid and Charts
- Live WYSIWYG preview with instant feedback as you configure
- Schema-backed YAML editing tab with inline auto-complete and validation for card configuration options
- Main Engineering tab β per-card access to data sources, the rules browser, the theme token browser, and provenance tracking
- Provenance tracking β inspect the effective runtime config and see which system (card config, preset, rules, etc) contributed each value
Tip
Look for the [Open Configuration Studio] launcher button in the card's main configuration tab.
LCARdS card editors have a Main Engineering tab β a per-card window into the core systems. Use it to manage this card's data sources, inspect its runtime configuration, and browse live theme tokens.
|
|
|
|
|
|
|
LCARdS design is aiming to have an extensbile architecture that can enable customization and community contribution by way of a pack system.
flowchart TB
subgraph BuiltinPacks["<b>Builtin Packs</b>"]
P1["lcards_buttons<br/>v2026.x.y<br/><br/><code>- style_presets [buttons]</code>"]:::builtinPacksStyle
P2["lcards_sliders<br/>v2026.x.y<br/><br/><code>- style_presets [sliders]</code>"]:::builtinPacksStyle
P3["builtin_themes<br/>v2026.x.y<br/><br/><code>- themes</code>"]:::builtinPacksStyle
P4["lcars_fx<br/>v2026.x.y<br/><br/><code>- animations<br/>- rules</code>"]:::builtinPacksStyle
end
subgraph ExternalPacks["<b>External/User Packs</b>"]
E1["ds9_pack<br/>v2.0.0<br/><br/><code>- themes<br/>- style_presets<br/>- svg_assets<br/>- animations</code>"]:::externalPacksStyle
E2["voyager_pack<br/>v1.5.0<br/><br/><code>- themes<br/>- font_assets<br/>- rules</code>"]:::externalPacksStyle
E3["msd_collection<br/>v1.0.0<br/><br/><code>- svg_assets<br/>- animations</code>"]:::externalPacksStyle
end
subgraph PackMgr["<b>PackManager</b>"]
PM[Pack Loader &<br/>Content Distributor]
end
subgraph CoreSystems["<b>Core Systems</b>"]
TM[ThemeManager<br/>Theme tokens]:::coreStyle
SPM[StylePresetManager<br/>Button & slider presets]:::coreStyle
AR[AnimationRegistry<br/>Animation definitions]:::coreStyle
RE[RulesEngine<br/>Conditional rules]:::coreStyle
AM[AssetManager<br/>SVG & font assets]:::coreStyle
end
P1 0@--- PM
P2 1@--- PM
P3 2@--- PM
P4 3@--- PM
E1 4@--- PM
E2 5@--- PM
E3 6@--- PM
PM 7@---|themes| TM
PM 8@---|style_presets| SPM
PM 9@---|animations| AR
PM 10@---|rules| RE
PM 11@---|svg_assets<br/>font_assets| AM
TM 12@-.- Cards([LCARdS Cards])
SPM 13@-.- Cards
AR 14@-.- Cards
RE 15@-.- Cards
AM 16@-.- Cards
0@{ animate: slow }
1@{ animate: slow }
2@{ animate: slow }
3@{ animate: slow }
4@{ animate: slow }
5@{ animate: slow }
6@{ animate: slow }
7@{ animate: slow }
8@{ animate: slow }
9@{ animate: slow }
10@{ animate: slow }
11@{ animate: slow }
12@{ animate: slow }
13@{ animate: slow }
14@{ animate: slow }
15@{ animate: slow }
16@{ animate: slow }
linkStyle 0,1,2,3 stroke:#67caf0,stroke-width:3px
linkStyle 4,5,6 stroke:#f9ef97,stroke-width:3px
linkStyle 7,8,9,10,11 stroke:#00eeee,stroke-width:3px,color:#fff
linkStyle 12,13,14,15,16 stroke:#ffb399,stroke-width:3px
style BuiltinPacks fill:#2f3749,stroke:#52596e
style ExternalPacks fill:#2f3749,stroke:#52596e
style CoreSystems fill:#1e2229,stroke:#2f3749
style Cards fill:#e7442a,stroke:#ffb399,color:#fff
style PM fill:#1c3c55,stroke:#37a6d1,color:#fff
style PackMgr fill:#2f3749,stroke:#52596e
classDef builtinPacksStyle fill:#2a7193,stroke:#67caf0,color:#fff
classDef externalPacksStyle fill:#ac943b,stroke:#f9ef97,color:#fff
classDef coreStyle fill:#2f3749,stroke:#52596e
Key Concepts:
- Packs are content distribution units containing any combination of:
themes,style_presets,animations,rules,svg_assets,font_assets, and future types. - Single packs can contain multiple content types (e.g., lcars_buttons has both style_presets and components)
- PackManager orchestrates the merge and distribution at core initialization - registering content to appropriate managers
- Cards consume from managers, not packs directly β enabling clean separation from the cards
- Community extensibility β custom packs will be able to extend LCARdS with new themes, button styles, animations, and more
Check out the Developer Documentation β
AI-Assisted Development Notice (AIGβ2)
This project is heavily developed with the assistance of AI tools. Most implementation code and portions of the documentation were generated by AI models.
All architectural decisions, design direction, integration strategy, and project structure are human-led.
AI-generated components are reviewed, validated/tested, and refined by human contributors to ensure accuracy, coherence, and consistency with project standards.
This is a human-directed, AI-assisted project. AI acts as an implementation accelerator; humans remain responsible for decisions, testing for quality control, and final output.
This project is as much as an experimentation with various AI-enabled tools and learning about different software designs as it is about the creation of the actual custom cards.
Different models are used throughout the process to plan, create, and (ultimately) refactor the cards and systems. As we gain more experience, and develop more ideas, then systems are revisited. We attempt to further standardize, simplify, and optimize where we can as we go.
A very sincere thanks to these projects and their authors, contributors and communities for doing what they do, and making it available. It really does make this a fun hobby to tinker with.
ha-lcars theme (the definitive LCARS theme for HA!)
As well, some shout-outs and attributions to these great projects:
LCARSlad London for excellent LCARS images and diagrams for reference.
meWho Titan.DS for such a cool interactive design demo and colour reference.
TheLCARS.com a great LCARS design reference, and the original base reference for colours, Data Cascade and Pulsewave animations.
lcars for the SVG used inline in the dpad control.
- All Star Trek & LCARS fans - Your passion drives this project π
This project uses the MIT License. For more details see LICENSE
A STAR TREK FAN PRODUCTION
This project is a non-commercial fan production. Star Trek and all related marks, logos, and characters are solely owned by CBS Studios Inc. This fan production is not endorsed by, sponsored by, nor affiliated with CBS, Paramount Pictures, or any other Star Trek franchise.
No commercial exhibition or distribution is permitted. No alleged independent rights will be asserted against CBS or Paramount Pictures. This work is intended for personal and recreational use only.
π Live long and prosper π













