Unable to remove classes from UI elements with ui-prop overwrites

[cngJo]

Environment

Operating system	macOS 25.2.0
CPU	Apple M4 (10 cores)
Node.js version	v25.2.1
nuxt/cli version	3.31.3
Package manager	pnpm@10.27.0
Nuxt version	4.2.1
Nitro version	2.12.9
Builder	vite@7.2.2
Config	compatibilityDate, css, devtools, modules
Modules	@nuxt/eslint@1.10.0, @nuxt/ui@4.3.0, @nuxt/icon@2.1.0, @nuxt/fonts@0.12.1, nuxt-auth-utils@0.5.25

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.3.0

Reproduction

https://codesandbox.io/p/devbox/elastic-rain-xnpn2k

Description

I experienced this with UCard today. It seems like I cannot remove classes with the ui prop when they are defined somewhere else down the chain.

I had this with the body class overwrite for the UCard component. I wanted to remove all padding from it, so I passed :ui="{ body: '' }" to remove all classes from it, but nothing changes. Even with :ui="{ body: 'p-0' }" the element still looked the same.

After a bit of digging I found that the body part of a UCard also has a sm:p-6 which comes form the default theme:

ui/src/theme/card.ts

Line 5 in 0a6c24e

body: 'p-4 sm:p-6',

In my case I was able to resolve this by changing my ui prop to this: :ui="{ body: 'p-0 sm:p-0' }" and it worked as expected. (See reproduction and/or this screenshot).

---

I've dug a bit through the code and I'm not sure how to fix this and if it might even be by design this way. I also checked the docs for the ui prop and it states:

The class prop allows you to override the classes of the root or base slot. This takes priority over both global config and resolved variants.

Telling my that my ui prop takes priority over other config, which it does for classes I specify but not for classes I want to remove.

When this is by design and my expectations don't match there, I'd suggest changing the docs to state this more clearly and I'd offer myself to rephrase this, when desired :-)

Thank you for this awesome component library 🎉

Additional context

No response

Logs

[phuze]

Agreed. The docs state that the UI prop lets you "override" slot classes, but in practice it just merges/extends them. That's fine for adding styles, but it makes certain adjustments impossible.

For example, if a base component defines py-8 and I only want top padding pt-8 with no bottom padding, there's no way (that I can see) to actually remove the original py-8 via the UI prop.

It also looks like there used to be a strategy: 'override' feature that allowed true replacement, but that was removed in v3 for some reason.

[anthonyfranc]

Agreed. The docs state that the UI prop lets you "override" slot classes, but in practice it just merges/extends them. That's fine for adding styles, but it makes certain adjustments impossible.

For example, if a base component defines py-8 and I only want top padding pt-8 with no bottom padding, there's no way (that I can see) to actually remove the original py-8 via the UI prop.

It also looks like there used to be a strategy: 'override' feature that allowed true replacement, but that was removed in v3 for some reason.

I’ve ran into this before too, quick fix but not ideal would be !py-0 pt-8