\n\nAm I doing something wrong? Or is TS support for variants just not completed yet?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2935,2936,2939],{"name":2921,"color":2922},{"name":2937,"color":2938},"needs reproduction","CB47CF",{"name":2907,"color":2908},4046,"closed","provide a custom TS-safe custom variant","2025-05-23T13:22:19Z","https://github.com/nuxt/ui/issues/4046",0.6932893,{"description":2947,"labels":2948,"number":2956,"owner":2910,"repository":2911,"state":2941,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2949,2950,2951,2954],{"name":2921,"color":2922},{"name":2925,"color":2926},{"name":2952,"color":2953},"closed-by-bot","ededed",{"name":2955,"color":2953},"stale",2860,"[UButton] Using a custom color on the link variant causes an error","2025-06-18T09:05:19Z","https://github.com/nuxt/ui/issues/2860",0.70435315,{"description":2962,"labels":2963,"number":2967,"owner":2910,"repository":2911,"state":2941,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.11.0`\n- Nuxt Version: `3.17.0`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.4.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modern-dust-h3lryc\n\n### Description\n\nHey, after upgrading to latest `@nuxt/ui`, custom Nuxt UI variable overrides stopped working. Looks like the correct colors are not generating.\n\nThis has worked in the previous versions:\n\n```\n:root {\n --ui-bg-elevated: var(--ui-color-neutral-500);\n}\n\nmain {\n --ui-bg-elevated: var(--color-white);\n}\n\n// Should have color --ui-color-neutral-500 with 0.5 opacity - CORRECT\n\u003Cdiv class=\"p-8 flex items-center gap-2 bg-elevated/50\">\n\u003C/div>\n\n// Should have color --color-white with 0.5 opacity - NOT WORKING - has colors from :root\n\u003Cmain class=\"p-8 flex items-center gap-2 bg-elevated/50\">\n\u003C/main>\n```\n\nCurrently, the variables in main have no effect on the sites.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2964,2965,2966],{"name":2921,"color":2922},{"name":2907,"color":2908},{"name":2925,"color":2926},4018,"Overriding root variables stopped working in 3.1.0","2025-04-29T12:40:17Z","https://github.com/nuxt/ui/issues/4018",0.7212929,{"labels":2973,"number":2980,"owner":2910,"repository":2910,"state":2941,"title":2981,"updated_at":2982,"url":2983,"score":2984},[2974,2977],{"name":2975,"color":2976},"enhancement","8DEF37",{"name":2978,"color":2979},"2.x","d4c5f9",4430,"Multi-variant Nuxt App","2023-01-22T15:50:48Z","https://github.com/nuxt/nuxt/issues/4430",0.72496253,{"description":2986,"labels":2987,"number":2991,"owner":2910,"repository":2911,"state":2941,"title":2992,"updated_at":2993,"url":2994,"score":2995},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: npm@11.1.0\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.2.0, @pinia/nuxt@0.10.1, @vueuse/nuxt@13.0.0, @nuxtjs/i18n@9.3.1, nuxt-security@2.2.0, @nuxt/ui@3.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/wonderful-violet-jrsqy9\n\n### Description\n\nI get a type error when using an array of strings for the `variant` key inside of `compoundVariants´:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: \"green\",\n neutral: \"slate\",\n },\n select: {\n compoundVariants: [\n {\n color: \"primary\",\n variant: [\"outline\", \"subtle\"],\n class: \"data-[state='open']:ring\",\n },\n ],\n },\n },\n});\n```\n\n```\napp/app.config.ts:11:11 - error TS2322: Type 'string[]' is not assignable to type 'string'.\n\n11 variant: [\"outline\", \"subtle\"],\n ~~~~~~~\n```\n\nIt does work tho, so its only a type issue I think.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2988,2989,2990],{"name":2921,"color":2922},{"name":2907,"color":2908},{"name":2925,"color":2926},3579,"Type error in app config `compoundVariants`","2025-05-02T15:06:25Z","https://github.com/nuxt/ui/issues/3579",0.7256089,{"labels":2997,"number":2998,"owner":2910,"repository":2910,"state":2941,"title":2999,"updated_at":3000,"url":3001,"score":3002},[],12073,"docs: explain component name resolution","2023-01-19T15:54:17Z","https://github.com/nuxt/nuxt/issues/12073",0.73207843,{"labels":3004,"number":3005,"owner":2910,"repository":2910,"state":2941,"title":2999,"updated_at":3006,"url":3007,"score":3002},[],12166,"2023-01-19T15:59:15Z","https://github.com/nuxt/nuxt/issues/12166",{"labels":3009,"number":3010,"owner":2910,"repository":2910,"state":2941,"title":2999,"updated_at":3011,"url":3012,"score":3002},[],12235,"2023-01-19T16:00:22Z","https://github.com/nuxt/nuxt/issues/12235",["Reactive",3014],{},["Set"],["ShallowReactive",3017],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8DaG9iMC2avLOn_mrkITkJrXsQYxddIgBJ8bLL2_QtY":-1},"/nuxt/ui/3179"]