Nuxt•18h ago

NuxtUI3 Custom Variant and Compound Variants Issue

Using Nuxt UI 3, I'm having issues styling a custom variant in a specific color. Defining the custom variant in the button.variants.variant works as expected, and intellisense recognizes the variant elsewhere in the project. Once I attempt to define a compoundVariant that includes the custom variant, intellisense breaks and the project no longer builds, as it appears the compoundVariants object is expecting the fixed list of variants specified in the base button. Example config:

export default defineAppConfig({
  ui: {
    colors: {
      primary: "green",
      neutral: "slate",
    },
    button: {
      variants: {
        variant: {
          custom: {
            label: "uppercase",
          },
        },
      },
      compoundVariants: [{
        variant: 'custom'
        color: 'secondary',
        class: 'text-fuschia-500'
      }],
    },
  },
});

export default defineAppConfig({
  ui: {
    colors: {
      primary: "green",
      neutral: "slate",
    },
    button: {
      variants: {
        variant: {
          custom: {
            label: "uppercase",
          },
        },
      },
      compoundVariants: [{
        variant: 'custom'
        color: 'secondary',
        class: 'text-fuschia-500'
      }],
    },
  },
});

Repro here (this is using nuxt3, but it also reproduces on nuxt4 as well) - https://codesandbox.io/p/devbox/quizzical-keldysh-wtw7zm Is this a bug, or am I not configuring things for custom variants correctly?

3 Replies

kapa.ai•18h ago

Hi @Swart. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain explicit information about adding custom variants to Nuxt UI 3 components (such as button) or about issues with compoundVariants and custom variants. The sources only show examples of the default variants, colors, and compoundVariants for built-in variants and colors, but do not document the process or limitations for extending these with custom values, nor do they mention any related bugs or workarounds. If you are experiencing issues where custom variants are not recognized in compoundVariants, and this breaks type inference or build, this behavior is not described or addressed in the official theme configuration documentation for Nuxt UI 3 components such as Button, Badge, or others in the sources provided. For further assistance, you may want to open an issue on the Nuxt UI GitHub repository or consult the official documentation for updates regarding custom variant support and type inference in compoundVariants. If you have more specific documentation or a changelog entry regarding this feature, please provide it, and I can review it for you. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•18h ago

<@196092753304748032> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SwartOP•18h ago

I've created an issue in the nuxt ui repro here: https://github.com/nuxt/ui/issues/4888

GitHub

Custom Variant and compoundVariants typing issue · Issue #4888 ...

Environment Operating System: Darwin Node Version: v23.11.0 Nuxt Version: 4.0.3 CLI Version: 3.28.0 Nitro Version: 2.12.4 Package Manager: pnpm@9.15.2 Builder: - User Config: modules, $development,...

Gaming

Programming

NuxtUI3 Custom Variant and Compound Variants Issue

Did you find this page helpful?