A Star Trek LCARS experience for Home Assistant
- CB-LCARS
CB-LCARS is a collection of custom cards for Home Assistant, inspired by the iconic LCARS interface from Star Trek. Build your own LCARS-style dashboard with authentic controls and animations.
- Built upon a Starfleet-issued version of
custom-button-cardenhanced with additional features and internal template management. - Designed to work with HA-LCARS theme.
- Includes many LCARS-style elements: buttons, sliders/gauges, elbows, d-pad, and a growing library of animated effects.
- Highly customizable and dynamic state-responsive styles: colours, borders, text, icons, animations, and much more.
- Controls can match the colour of light entities.
- Symbiont mode lets you encapsulate other cards and imprint LCARS styling onto them.
- Use HA 'Sections' dashboards or custom/grid layouts for best results.
- CB-LCARS is not its own theme — pair with HA-LCARS theme for the full LCARS experience.
- Not fully standalone—some controls may require other HACS cards (see requirements).
- Not a fully commissioned Starfleet product — those features won't be installed until Tuesday. (this is a hobby project, so expect some tribbles.)
💫 tl;dr: Express Startup Sequence
- Clear All Moorings and Open Starbase Doors
- Install 'required' dependencies from HACS
- Thrusters Ahead, Take Us Out
- Setup HA-LCARS theme (notes below)
- Add CB-LCARS custom style to HA-LCARS theme
- Bring Warp Core Online, Engines to Full Power
- Install CB-LCARS from HACS
- Engage!
Detailed Installation
The following should be installed and working in your Home Assistant instance - these are available in HACS
Please follow the instructions in the respective project documentation for installation details.
| Custom Card | Required? | Function |
|---|---|---|
| ha-lcars theme | Required | Provides base theme elements, styes, colour variables, etc. |
| my-slider-v2 | Required | Provided slider function in Multimeter card. |
| lovelace-card-mod | Required | CB-LCARS requires card-mod for using the host imprint feature on symbiont cards. It is also required by HA-LCARS theming at the time of writing. Very useful for modifying the elements/styles of other cards to fit the theme (overriding fonts, colours, remove backgrounds etc.) |
| lovelace-layout-card | Optional | No longer used internally but it's handy for the ultimate in dashboard layout customization! |
As part of HA-LCARS setup, when adding the font resource, use a slightly updated Antonio font resource string.
This will include weights 100-700 allowing for more thinner/lighter text as seen in Picard (some displays use really thin font, 100 or 200)
Substitute the following resource string when setting up font in HA-LCARS theme:
https://fonts.googleapis.com/css2?family=Antonio:[email protected]&display=swap
Note: If the font is missing, the card will attempt to load it dynamically from the above URL.)
Additional Fonts
CB-LCARS ships with local versions of Microgramma and Jeffries.
These fonts are added automatically to the page via stylesheets and use custom names as to not conflict with any existing fonts.
cb-lcars_microgrammacb-lcars_jeffries
Ideally, add and use this cb-lcars profile into your HA-LCARS theme. If not, the additional colour definitions will be made available to use at runtime by the cards.
Copy the custom LCARS Picard [cb-lcars] definition from cb-lcars-lcars.yaml to your HA-LCARS lcars.yaml file in Home Assistant (per instructions for adding custom themes to HA-LCARS).
Set LCARS Picard [cb-lcars] as the active theme.
Picard [cb-lcars]
Grays, Blues, and Oranges are the core colours. Greens and Yellows added for additional options.
These are the colours used for the ha-lcars defined variables.
- Add CB-LCARS git repository as a custom repo in HACS.
- Install CB-LCARS from HACS like any other project.
Add CB-LCARS cards to your dashboard just like any other card.
For reference - these are the cards found in CB-LCARS. They are highly configurable - and some default styles are shown.
Additional style possibilities can be found in the screenshots section.
Settings are available in the UI editor.
type: custom:cb-lcars-elbow-card
cblcars_card_type: |
Default Style |
|---|---|
cb-lcars-header |
 |
cb-lcars-header-right |
 |
cb-lcars-header-contained |
 |
cb-lcars-header-open |
 |
cblcars_card_type: |
Default Style |
|---|---|
cb-lcars-footer |
 |
cb-lcars-footer-right |
 |
cb-lcars-footer-contained |
 |
cb-lcars-footer-open |
 |
cblcars_card_type: |
Default Style |
|---|---|
cb-lcars-header-callout |
 |
cb-lcars-header-callout-right |
 |
cb-lcars-footer-callout |
 |
cb-lcars-footer-callout-right |
 |
type: custom:cb-lcars-double-elbow-card
cblcars_card_type: |
Default Style |
|---|---|
cb-lcars-header-picard |
 |
cb-lcars-header-picard-right |
 |
cb-lcars-footer-picard |
 |
cb-lcars-footer-picard-right |
 |
type: custom:cb-lcars-button-card
type:cb-lcars-multimeter-card
- Supports interactive (entity) mode, or non-interactive (sensor) mode.
- Mode is determined automatically by the assigned entity
- Run in Slider or Guage mode
- Horizontal or Vertical orientation
- Configurable multi-modal slider control:
- Light: brightness, temperature, hue, saturation
- Media Player: volume, seek
- (uses my-slider-v2 custom card internally)
- Fully configurable borders, label/text, slider
- Colour match [border|slider|gauge|gradient start/end etc.] to entity colour
- Configurable min, max, gauge increments, slider step size
- Min/Max/Units are automatically obtained from the entity (if supported)
- Show/Hide Units, Override unit
- Configurable Subticks
- Show/Hide
- Size
- Count (number of subticks per segement)
- Ranges: now supporting background colours set with ranges
- Picard style option in vertical mode
Background colour in gauge mode can be segmented into ranges. This can currently be done in the yaml configuration of multimeter.
type: custom:cb-lcars-multimeter-card
variables:
gauge:
ranges:
- from: 0
to: 30
color: var(--picard-darkest-yellow)
- from: 30
to: 75
color: var(--picard-darkest-green
- from: 75
to: 100
color: var(--picard-darkest-orange)type:cb-lcars-label-card
- Card for creating labels/text
- Full graphical customization
- Pre-configured label templates for various looks seen in LCARS
cblcars_card_type: |
Styles |
|---|---|
cb-lcars-label |
 |
cb-lcars-label-picard |
 |
type:cb-lcars-dpad-card
- Card-wide active/inactive colours
- Per-segment active/inactive colours
- Assignable entity per segment
- Assignable actions/controls per segment (default
toggle)
CB-LCARS cards allow you to dynamically change the appearance of card components—such as borders, backgrounds, text, and icons — based on the state of an entity or attribute. You can use built-in state options for common scenarios, or define advanced custom state conditions for more granular control.
For full details on configuring states, including advanced matching (by value, range, regex, etc.) and applying custom styles, see the dedicated documentation: doc/cb-lcars-state-system.md.
CB-LCARS has graduated the Initiate program and can become a host to a symbiont card. Joining enables you to imprint some CB-LCARS styling to the encapsulated card. Most common case would be with the Elbow card to add LCARS borders - but much more is possible.
Just supply your symbiont card configuration into the editor and it will inset the the symbiont into the CB-LCARS host card. After joining, you can adjust settings, imprint host styles onto the symbiont, and even supply your own additional card-mod configuration to the symbiont.
Currently, imprinting will apply the host background colours and text font, size, and colours to the symbiont. This feature uses some basic card-mod configuration targeted primarily to ha-card.
You can provide your own card-mod configuration which will append to the host configuration. You can also override any host styling with your card-mod config.
Card-mod templating is supported and the host card's variables: block and entity are made available to the symbiont. These can be accessed with standard card-mod jinja templating.
Example accessing the host card's card default colour.
variables:
symbiont:
enabled: true
imprint_host: true
symbiont_user_style: |
ha-card {
background: {{ config.variables.card.color.default }} !important;
}Example - Join with Entities Card
A regular entities card will join with a host CB-LCARS Elbow card and have the host styles imprinted (font, font colour and size, background)
We start with our basic entities card
We join the card as our symbiont:
We then imprint the host card styles onto the symbiont:
CB-LCARS includes a growing set of highly customizable animations and effects for your cards. Each animation offers extensive configuration options, accessible via the UI. For full details and usage instructions, see the dedicated documentation for each animation—just click the template links in the table below.
It's recommended to use either the Elbow or Button card as the base card to host your animation.
| template | |
|---|---|
cb-lcars-animation-alert |
 |
cb-lcars-animation-cascade |
 |
cb-lcars-animation-pulsewave |
 |
cb-lcars-animation-bg-grid |
 Nebula Samples  |
cb-lcars-animation-geo-array |
Can be used as an inset animation recreating some of the LCARS panel effects. Animations are similar to Data Cascade  |
Below are some example dashboards and controls. Also a collection of screenshots and snippets of potential variations of the controls.
Example of a WIP dasboard sized for a Samsung Tab A9.
This makes use of custom layouts to create the main dashboard with a header bar, left sidebar, footer bar, and a content area.
The left sidebar uses an input_select helper to specify which 'page' is to be displayed in the content area. Then conditions are used to show/hide the panes of the content.
Source: dashboard-tablet.yaml
Example of a custom controls panel that has a room selector sidebar (similar to the tablet dashboard example using input_select helpers.)
Each room then has a grid of multimeter controls for the lights in each room.
For fun, the small block to the right of each room button will change colour to match the entity colour for the room's light group.
This example shows how to use the base card as a canvas and add more cards on top. This code can be condensed if desired using things like the custom template card - and there are probably many other ways to get the same results.
Source: lightselector.yaml
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:
lovelace-animated-background - Allows for animated/video backgrounds on the dashboard (stars look great.) Additionally, Home Assistant natively supports background images (can be configured in UI from 2024.6+)
lovelace-wallpanel - Great panel-mode features - including hiding side/top bars, screensaver function (with cards support)
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 base reference for Data Cascade and Pulsewave animations.
wfurphy creative-button-card-templates for debugging code template that dumps variables to the browser console - super handy.
lcars for the SVG used inline in the dpad control.
wfurphy creative-button-card-templates for debugging code template that dumps variables to the browser console - super handy.
lcars for the SVG used inline in the dpad control.
This project uses the MIT License. For more details, refer to the LICENSE file.