💡 UI eXtension - Add CSS styles to (almost) any part of the Home Assistant UI

[dcapslock (Darryn Capes-Davis)]

UI eXtension - Add CSS styles to (almost) any part of the Home Assistant UI

UI eXtension (UIX) comes from the heritage of card-mod by @thomasloven. With an ever growing number of features that go beyond cards and dashboards, UIX was created to keep pushing the boundaries of custom CSS across your Home Assistant UI.

Quick Start

Go to Quick Start for installation instructions and a short guide on making your first UIX.

Migrating from card-mod

• Read the FAQ
• Uninstall card-mod
• If you use extra_module_url for card-mod resource, remove and restart Home Assistant.
• Process to follow the UI eXtension quick start

Something not touchable by UI eXtension

• Submit a Feature Request
• Home Assistant toast notifications are a work in progress now available in 5.1.0-beta.1

Thank you to @Mariusthvdb for testing and feedback during development of UI eXtension.

Note: UI eXtension brands still to be merged to Home Assistant brands. You will see a generic icon in the Home Assistant interface for UI eXtension

GitHub - Lint-Free-Technology/uix: 💡 UI eXtension 💡 Add CSS styles to (almost) any...

About - UI eXtension

[Orange-GT3]

Interesting. What is your motivation for a new styling system? Are you no longer developing card_mod?

[dcapslock (Darryn Capes-Davis)]

@Orange-GT3

What is your motivation for a new styling system? Are you no longer developing card_mod?

Correct. UIX provides for ease of management for Frontend resources, which now means all users of UIX get full Frontend styling options without any update issue of duplicate resources.

[Orange-GT3]

Thanks and understood. I don’t have much card_mod at the moment so now is probably a good time to migrate.

[HappyCadaver (Rick Furtado)]

Do you ever sleep?

[Orange-GT3]

First question then :

I use the custom Hue Like Light card and have the following card_mod entry:

    card_mod:
      style: |
        .text-area h2 {
          font-size: 14px !important;
        }
        ha-card {
          margin-bottom: -4px;
        }
        ha-icon::after {
          content: " ";
          top: -15%;
          left: -4px;
          height: 130%;
          width: 130%;
          border-radius: 50%;
          border: 0px;
          background-color: rgba(44, 44, 44, 0.5);
          position: absolute;
          z-index: -1;
        }
        .brightness-slider {
          --mush-control-height: 17px;
        }

Inspecting the element with developer tools shows that it appears to use hui-card:

Replacing card_mod with uix only maintains the ha-card margin-bottom style and the other styles stop working. I really struggle with the various levels and shadow root stuff and am now lost as to how I can update.

The screenshot above only shows the H2 text area but presumably once that is solved, the slider height would employ the same method.

I tried replacing ha-icon with uix-icon and --uix-icon but to no avail.

Please can you shed some light?

[dcapslock (Darryn Capes-Davis)]

@Orange-GT3

Please can you shed some light?

Can you post the full card config?

EDIT: All good for config. Looks like a bug to fix with UIX picking up styles.

[dcapslock (Darryn Capes-Davis)]

@Orange-GT3

Please can you shed some light?

OK. The issue here is that hui-like-light-card recreates its config and only copies across card_mod key and not any other keys. So this card will conitinue to work with card_mod key which is fine to use with UIX. I will actually investigate using the config stored in hui-card which is always available and never touched by custom card.

UPDATE: 5.1.0-beta.2 solves this issue.

[Mariusthvdb (Marius)]

Congrats Darryn, release of Uix is a huge step for us modders.

Been running the beta for a bit now with this drop in replacement and haven’t seen anything but success.

I did replace all occurrences of card_mod (and card-mod in the properties) to uix with the text editor ( took less than 2 minutes for yaml and raw Ui editor .

It feels great to have our UI’s in a thoroughly maintained component again.

We can’t thank you enough !

O and yes, 2 cards misbehave: apexcharts-card and hue-like-light-card because they ‘require’ the card_mod key.

But we have an easy fix for those : keep using the card_mod key (Uix is also still applying with that) until those cards have fixed their issue.

For apexcharts-card , we can also disable strict type checking in its options (which is what I do)

[boheme61]

Looks Promising , But to be honest, After first “reading” , I have Alot Card_mods, on every Card and even in Theme( Maybe Irrelevant/easy-fix )
But Is it as simple as Marious example ?

@Mariusthvdb

I did replace all occurrences of card_mod (and card-mod in the properties) to uix with the text editor

Then i guess i can Just , Get started, and “solve” what might Have been “over-modded” / "Working but not Clean / Optimal … Some are, Kind of trail and error “solutions” i have

@dcapslock

without any update issue of duplicate resources

I Do have this ( extra_module_url ) in config.yaml , however i haven’t noticed any issues with “duplicates”
Using Card-Mod

[Mariusthvdb (Marius)]

@boheme61

But Is it as simple as Marious example ?

of course it is

fire your yaml editor, and do a replace all (confirm if you want to make 100% sure)

do the same in the Raw config editor

under 2 minutes. and over 2500 mods…

remove all card_mod first, so the resource (HACS), And the frontend settings in that extra_module_url if you use that

[dcapslock (Darryn Capes-Davis)]

@boheme61

I Do have this ( extra_module_url ) in config.yaml , however i haven’t noticed any issues with “duplicates”
Using Card-Mod

This issue was the bigest issue thread I have managed in a while. So while not everyone had issues, many did, and knowing why means managing a plugin like that for everyone was going to keep being very tedious and sapping time away for wiritng new features Anyhow, the 2 pages worth of confusing readme instructions is now nothing in UIX.

[Orange-GT3]

@dcapslock

UPDATE: 5.1.0-beta.2 solves this issue.

Confirmed. Thank you @dcapslock.

[boheme61]

@dcapslock

This issue was the bigest issue thread I have managed in a while.

Yeah i “Noticed” , and been following your efforts with Card_Mod

@dcapslock

Anyhow, the 2 pages worth of confusing readme instructions is now nothing in UIX.

Yes, it sounded like , well “nothing” even thou it’s ages ago i read the read-me in Card-Mods Repos , And i guess this was what first “tipped me off”, i.e ( Do i have to learn all over again ), But i believe it now will be easier, So Not So many trails&errors

[boheme61]

Hmmmm which one to choose to “Download” ? ( Even 5.0.0 wont work on 2026.1.3 )

@dcapslock

now available in 5.1.0-beta.1

Im “back” on 2026.1.3, doo To Insane Forced Populated Dashboards And Tibber-CORE-Integration
Keep Failing at restart and have to Reload, then it work max for a very short while, And Spewing the logfile every 5min , After 2026.2.0 ( Might there be a coincident ? ) 3 times i rolled back and forth since 2026.2.0

[Zenia (Yevgeniy)]

@Mariusthvdb Just want to be sure. Replace all in Raw editor, you mean card_mod: to uix: ?
Correct?

[Mariusthvdb (Marius)]

yes.

but if you want to test first, just replace 1 or 2 and check

[Zenia (Yevgeniy)]

TY.
But first remove card_mod like you mention above ?

[Mariusthvdb (Marius)]

yeah, like I mentioned indeed

might not even be explicitly a requirement
see opening post:

and next Quick Start - UI eXtension,

its what I did to be sure to have no remnants interfere.

[Zenia (Yevgeniy)]

Is it only support MDI icons?
I have some cards with PHU icons, and it’s disappeared after I updated to UIX. Not a big deal, just curiosity