\n```\n\n### Will results something like this\n```html\n\u003Cdiv class=\"... root-test base-test\">\n ...\n \u003Cinput class=\"...\" />\n\u003C/div>\n```\n\n### Description\n\nWhen applying themes in `app.config.ts`, both **UInputTags** and **UInputMenu (multiple)** share the same weird behaviour compared with other components, where the class applied to `base` part of the component are applied to `root` part of the component.\n\n### Expected Behaviour\nThe applied class on `base` should be applied to the `\u003Cinput />`, not the `root` part of the component which is the outer `\u003Cdiv />` just like other input components such as **UInput**, **UInputNumber**, or **UTextarea**.\n\nCorrect me if I'm wrong if this are intended, thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3184,3185,3186],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.735451,{"description":3193,"labels":3194,"number":3197,"owner":3144,"repository":3145,"state":3198,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nTo simplify customization and ensure visual consistency across projects, it would be useful to add a configuration option to define `defaultVariants` globally or for specific component types. These variants could include default size, color, and variant properties for all components or specific ones like buttons, button groups, and form fields. \n\n### Proposal: \n1. Introduce a `defaultVariants` field in the Nuxt configuration to: \n - Define **global variants** (applied to all components). \n - Define **component-specific variants** (e.g., for buttons, forms, etc.). \n\n### Example Implementation: \nIn the Nuxt configuration file: \n```javascript\nexport default defineNuxtConfig({\n ui: {\n defaultVariants: {\n // Global variants\n global: {\n size: 'lg',\n color: 'neutral',\n },\n // Button and ButtonGroup variants\n button: {\n size: 'md',\n color: 'primary',\n variant: 'solid',\n },\n // Form input, select, … variants\n form: {\n size: 'lg',\n color: 'neutral',\n variant: 'outlined',\n },\n },\n },\n});\n``` \n\n### Usage: \nThe defined `defaultVariants` would automatically be applied to all components without the need to explicitly specify these props in templates. Props provided in the template would always take precedence over the ones defined in the configuration. \n\n### Benefits: \n- Reduces repetition in templates. \n- Enhances visual consistency across the project. \n- Flexibility to customize globally or per component type. \n- Easy adoption with prop priority management. \n\n### Expected Impact: \nThis feature would add flexibility while making the integration of `@nuxt/ui` faster and more intuitive by allowing consistent and customized variants to be managed at various levels of the project. \n\nThanks for your continued work on `@nuxt/ui`, which remains an essential tool for building modern and performant interfaces. \n\n### Additional context\n\n_No response_",[3195,3196],{"name":3168,"color":3169},{"name":3156,"color":3157},2934,"closed","Add `defaultVariants` option to define global or component-specific size, variant, and color settings","2025-07-09T12:37:51Z","https://github.com/nuxt/ui/issues/2934",0.67056537,{"description":3204,"labels":3205,"number":3212,"owner":3144,"repository":3145,"state":3198,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Description\n\nIs there a way to add custom props to a component for styling—similar to how variant works for buttons? I’d like to add variant support to FormField, but currently, it only supports size.\n\nMy main goal is to allow styling of components provided by my Nuxt module. Ideally, I want to define variants and extra props via app.config.ts. An alternative approach I'm thinking of is to offer per-component config options, similar to Nuxt UI, but managed separately from its config.",[3206,3209,3210,3211],{"name":3207,"color":3208},"question","d876e3",{"name":3156,"color":3157},{"name":3172,"color":3173},{"name":3175,"color":3173},4148,"Additional props like variants for styling","2025-08-20T02:08:47Z","https://github.com/nuxt/ui/issues/4148",0.68880814,{"description":3218,"labels":3219,"number":3225,"owner":3144,"repository":3145,"state":3198,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.17.1`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.6.2`\n- Builder: `-`\n- User Config: `modules`, `devtools`, `app`, `css`, `site`, `content`, `runtimeConfig`, `build`, `future`, `experimental`, `compatibilityDate`, `typescript`, `cookieControl`, `eslint`, `i18n`, `icon`, `image`, `ogImage`, `sitemap`, `turnstile`\n- Runtime Modules: `@vueuse/nuxt@13.1.0`, `@nuxt/eslint@1.3.0`, `@nuxt/ui-pro@3.1.0`, `@nuxtjs/sitemap@7.2.10`, `@nuxtjs/robots@5.2.10`, `@nuxt/content@3.5.1`, `nuxt-og-image@5.1.3`, `@nuxt/image@1.10.0`, `@nuxtjs/turnstile@1.0.0`, `@dargmuesli/nuxt-cookie-control@9.0.2`, `@nuxtjs/robots@5.2.10`, `nuxt-auth-utils@0.5.20`, `@nuxtjs/i18n@9.5.3`\n- Build Modules: `-`\n\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nnot needed for this situation\n\n### Description\n\nI'm hoping this just turns into a question, but I'm trying to figure out if custom variants are supported by TypeScript, I tried adding a variant to a button using this methodology:\n\n```ts\n button: {\n variants: {\n variant: {\n gradient: 'shadow-sm shadow-emerald-300/5 border border-emerald-300/10 hover:shadow hover:border-emerald-300 hover:shadow-emerald-300 transition-all duration-200 text-white bg-gradient-to-br from-logo-a via-logo-a-dark to-logo-a focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',\n },\n },\n defaultVariants: {\n color: 'neutral',\n variant: 'subtle',\n },\n default: {\n color: 'white',\n loadingIcon: 'i-mdi-loading',\n },\n },\n```\nI also tried adding it via `compoundVariants` as well - and while this strategy works fine in both situations, I get TS errors whenever I try to apply it at the component.\n\n```\nType '\"gradient\"' is not assignable to type '\"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | \"link\" | undefined'.ts-plugin(2322)\n```\n\n\u003Cimg width=\"975\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c38d6ba5-ccae-4609-bfdb-38c8d084a442\" />\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```",[3220,3221,3224],{"name":3138,"color":3139},{"name":3222,"color":3223},"needs reproduction","CB47CF",{"name":3156,"color":3157},4046,"provide a custom TS-safe custom variant","2025-05-23T13:22:19Z","https://github.com/nuxt/ui/issues/4046",0.6932892,{"description":3231,"labels":3232,"number":3237,"owner":3144,"repository":3145,"state":3198,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### 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```",[3233,3234,3235,3236],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3172,"color":3173},{"name":3175,"color":3173},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":3243,"labels":3244,"number":3248,"owner":3144,"repository":3145,"state":3198,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### Description\n\nCurrently, `defaultVariants` must be set individually per component. While this works in isolation, it leads to repetitive configuration when dealing with common attributes like `size`, `color`, etc., which are shared across multiple components such as `button`, `input`, `select`, `tabs`, `toggle`, `checkbox`, and more.\n\nTo improve developer experience and maintain consistency, it would be valuable to support a global `defaultVariants` configuration like:\n```\nglobal: {\n defaultVariants: {\n color: \"neutral\",\n size: \"sm\",\n },\n}\n```\n### With this setup:\n\n- Any component that supports the listed attributes in the global configuration (e.g., `color`, `size`) will automatically inherit these global default values.\n- Components that do not support a particular variant will simply ignore it.\n\n### Override Behavior:\nIf a component explicitly defines the same attribute in its own `defaultVariants`, the component-specific value should take precedence over the global one. For example:\n```\nglobal: {\n defaultVariants: {\n size: \"sm\",\n },\n},\ncomponents: {\n button: {\n defaultVariants: {\n size: \"md\", // Overrides the global 'sm'\n },\n },\n}\n\n```\n\n### Additional context\n\n_No response_",[3245,3246,3247],{"name":3168,"color":3169},{"name":3156,"color":3157},{"name":3141,"color":3142},4665,"[Feature Request] Global `defaultVariants` Support for Shared Attributes","2025-08-05T14:01:03Z","https://github.com/nuxt/ui/issues/4665",0.7050664,{"description":3254,"labels":3255,"number":3260,"owner":3144,"repository":3145,"state":3198,"title":3261,"updated_at":3262,"url":3263,"score":3264},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@4.8.1\n- Builder: -\n- User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui\n- Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/blob/v3/src/theme/button.ts\n\n### Description\n\nI want to customize a button variant by `size`, `trailing` and `square` params. It works, but the types are broken.\n\nThe line in the `compoundVariants`:\n`{ size: 'md', trailing: true, square: false, class: { trailingIcon: '-mr-1' } }`\n\nErrors:\n`Type '{ trailingIcon: string; }' is not assignable to type 'string'`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3256,3257,3258,3259],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},{"name":3175,"color":3173},3738,"Incorrect compound button variants types","2025-08-12T11:07:19Z","https://github.com/nuxt/ui/issues/3738",0.7207845,["Reactive",3266],{},["Set"],["ShallowReactive",3269],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8DaG9iMC2avLOn_mrkITkJrXsQYxddIgBJ8bLL2_QtY":-1},"/nuxt/ui/3179"]