\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```",[3020,3023,3026],{"name":3021,"color":3022},"bug","d73a4a",{"name":3024,"color":3025},"v3","49DCB8",{"name":3027,"color":3028},"triage","ffffff",4530,"nuxt","ui","open","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.6792846,{"description":3038,"labels":3039,"number":3043,"owner":3030,"repository":3030,"state":3032,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.19.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: compatibilityDate\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-r78zhzgw?file=app.vue\n`npm run generate && npm run preview`\n\n### Describe the bug\n\nWhen using CSS `v-bind()` for part of CSS properties that can have multiple values like `border`, they disappear only in production builds. This is specific to Nuxt and did not occur with Vue alone. ( https://stackblitz.com/edit/vitejs-vite-h7sncoub?file=src%2FApp.vue and `npm run build && npm run preview` )\n\nAs a workaround, I was able to avoid this issue by using `v-bind()` with individual properties like `border-width`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3040],{"name":3041,"color":3042},"pending triage","E99695",31779,"Sometimes CSS `v-bind()` disappears only in production build.","2025-04-12T12:48:15Z","https://github.com/nuxt/nuxt/issues/31779",0.69093543,{"description":3049,"labels":3050,"number":3054,"owner":3030,"repository":3031,"state":3032,"title":3055,"updated_at":3056,"url":3057,"score":3058},"### Environment\n\nNuxt project info: (copied to clipboard) nuxi 8:34:52 pm\n\nOperating System: Linux\nNode Version: v22.17.1\nNuxt Version: 4.0.0\nCLI Version: 3.26.2\nNitro Version: 2.12.0\nPackage Manager: bun@1.2.15\nBuilder: -\nUser Config: modules, runtimeConfig, devtools, ui, css, colorMode, compatibilityDate, eslint\nRuntime Modules: @nuxt/ui@3.2.0, @nuxt/ui-pro@3.2.0, @pinia/nuxt@0.5.5, @nuxt/eslint@1.6.0\nBuild Modules: -\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read documentation: https://nuxt.com/\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nSee Nuxt UI official docs page -\nhttps://ui.nuxt.com/components/dashboard-sidebar\n\n### Description\n\nUI is not rendering correctly on the web page or on my local machine.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3051,3052,3053],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4610,"UI not rendering for certain Dashboard components","2025-07-26T15:12:09Z","https://github.com/nuxt/ui/issues/4610",0.70500076,{"description":3060,"labels":3061,"number":3064,"owner":3030,"repository":3031,"state":3065,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-svgo@4.0.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nAfter upgrading from `alpha.8` to `alpha.9`, the border radius is wrong (different from the rest of the application) when using badge in the [NavigationMenu](https://ui3.nuxt.dev/components/navigation-menu). When inspecting HTML, this is the class (related to border radius) applied to the badge: `rounded-[calc(var(--ui-radius)]`.\n\nI also tried passing the [class](https://ui3.nuxt.dev/components/badge#class-prop) to `BadgeProps` but it doesn't work:\n```vue\n```vue\n\u003Cscript setup lang=\"ts\">\n/* Types */\nimport type { NavigationMenuItem } from \"#ui/types\";\n\nconst items = ref\u003CNavigationMenuItem[][]>([\n [\n {\n label: \"Menu\",\n defaultOpen: true,\n children: [\n {\n label: \"Submenu\",\n badge: {\n label: \"latest\",\n color: \"secondary\",\n class: \"rounded-full\", // ! NOT WORKING\n },\n to: \"https://www.example.com\",\n target: \"_blank\",\n },\n ],\n },\n ],\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"h-full\">\n \u003CUNavigationMenu orientation=\"vertical\" :items=\"items\" />\n \u003C/div>\n\u003C/template>\n```\nHowever, IMO the border radius should be inherited (no need to pass `class`).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3062,3063],{"name":3021,"color":3022},{"name":3024,"color":3025},2766,"closed","Badge border radius is wrong (NavigationMenu)","2024-11-26T11:23:27Z","https://github.com/nuxt/ui/issues/2766",0.6606292,{"description":3071,"labels":3072,"number":3076,"owner":3030,"repository":3031,"state":3065,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.13.1\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: hooks, app, runtimeConfig, supabase, routeRules, sitemap, site, compatibilityDate, devtools, modules, css, ui\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, @nuxtjs/supabase@1.5.1, @nuxtjs/seo@3.0.3, @storyblok/nuxt@6.2.4\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.2\n\n### Reproduction\n\nchange the border color(I assume should be this variable: --ui-border) in your project to red or blue and check if this color is applied when using only the classes: `border` or `border-b` without specifying the color.\n\n### Description\n\nI want to set the default border color, by default is very dark.\n\nI found that `--ui-border` variable is not used in the border style, maybe I could be wrong.\n\n\u003Cimg width=\"374\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f25806c-f5ea-43a1-a2a3-095d71448d43\" />\n\nthis is how the borders are styled in my case, no `--ui-border`\n\n\u003Cimg width=\"542\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6bb3138e-36e5-46cb-9930-92b608811fe0\" />\n\n\u003Cimg width=\"515\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/16ad3bc6-a8a9-4391-a0c5-542ff3f58121\" />\n\nplease help, \n\nthank you\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3073,3074,3075],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4218,"Can't set the default border color","2025-05-26T08:34:37Z","https://github.com/nuxt/ui/issues/4218",0.67268574,{"description":3082,"labels":3083,"number":3087,"owner":3030,"repository":3031,"state":3065,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### 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\nSome button variants have `focus:outline-none` by default, so it's impossible to unset it. It's reduces accessibility\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3084,3085,3086],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},3739,"Unable unset focus outline","2025-05-10T17:04:44Z","https://github.com/nuxt/ui/issues/3739",0.69351894,{"description":3093,"labels":3094,"number":3097,"owner":3030,"repository":3031,"state":3065,"title":3098,"updated_at":3099,"url":3100,"score":3101},"### Environment\n\n- node:V18.19.1\n- pnpm: V8.15.5\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.1\n\n### Reproduction\n\nhttps://github.com/Jevin0/nuxt-ui-no-style-demo/blob/master/app.vue\n\n### Description\n\n\n### step\n1. `pnpm dlx nuxi@latest init \u003Cproject-name>`\n2. `npx nuxi@latest module add ui`\n3. `pnpm install`\n4. `pnpm dev`\n\n### concern\nNormal use of `UButton` component, but no background color and Color\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3095,3096],{"name":3021,"color":3022},{"name":3024,"color":3025},3047,"No style","2025-02-24T22:33:59Z","https://github.com/nuxt/ui/issues/3047",0.69560254,{"description":3103,"labels":3104,"number":3107,"owner":3030,"repository":3031,"state":3065,"title":3108,"updated_at":3109,"url":3110,"score":3111},"### Environment\n\nOperating System: Windows 11\nNode Version: v22.14.0\nNuxt Version: 3.15.4\nCLI Version: 3.13.2\nNitro Version: 2.10.4\nPackage Manager: npm@11.1.0\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\n.\n\n### Description\n\nHi\nWhen we use the arrow in the DropdownMenu component, a border is added to the last item. Apparently, this is because the arrow element is added at the end of the items groups in this component.\n\n\n\n\n\nI hope I was able to tell you what I meant. It's nothing special, but it would be great if it could be fixed. 🙄\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3105,3106],{"name":3021,"color":3022},{"name":3024,"color":3025},3315,"arrow causes appear border in the last item of DropdownMenu","2025-05-23T15:41:53Z","https://github.com/nuxt/ui/issues/3315",0.69675845,{"description":3113,"labels":3114,"number":3120,"owner":3030,"repository":3031,"state":3065,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.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@3.0.0-alpha.9, @nuxt/eslint@0.7.2, @nuxtjs/seo@2.0.2, @nuxtjs/plausible@1.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.9\n\n### Reproduction\n\nOn a brand new project:\n\n```\nnpx nuxi@latest init my-app\ncd my-app\nnpm install @nuxt/ui@next\n```\n\nThen\n/app/app.vue\n```vue\n\u003Ctemplate>\n\t\u003CNuxtLayout>\n\t\t\u003CNuxtPage />\n\t\u003C/NuxtLayout>\n\u003C/template>\n```\n\nnuxt.config.ts\n```js\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n\tcompatibilityDate: \"2024-11-01\",\n modules: ['@nuxt/ui', '@nuxt/eslint', '@nuxtjs/seo'],\n css: ['~/assets/css/main.css'],\n\n\tdevtools: { enabled: true },\n\tfuture: {\n\t\tcompatibilityVersion: 4,\n\t},\n\tui: {\n // error here\n\t\tcolorMode: false,\n\t},\n});\n\n```\n\n### Description\n\nWhen changing the ui.colorMode to false AND using the `pages` folder, it crashes the whole app (error below).\n\n\n```\n500\n[vite-node] [plugin:nuxt:imports-transform] [VITE_ERROR] /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true\n\n/* Injection by vite-plugin-vue-inspector Start */\nimport { createVNode as __createVNode } from 'vue'\nfunction _interopVNode(vnode) {\n if (vnode && vnode.props && 'data-v-inspector' in vnode.props) {\n const data = vnode.props['data-v-inspector']\n delete vnode.props['data-v-inspector']\n Object.defineProperty(vnode.props, '__v_inspector', { value: data, enumerable: false })\n }\n return vnode\n}\nfunction _createVNode(...args) { return _interopVNode(__createVNode(...args)) }\n/* Injection by vite-plugin-vue-inspector End */\nimport { defineComponent as _defineComponent } from \"vue\";\nimport { onUnmounted, onMounted, reactive } from \"vue\";\nimport { pascalCase } from \"scule\";\nimport { defineAsyncComponent, useColorMode, useRoute } from \"#imports\";\nconst _sfc_main = /* @__PURE__ */ _defineComponent({\n __name: \"DevtoolsRenderer\",\n setup(__props, { expose: __expose }) {\n __expose();\n const route = useRoute();\n const component = route.query?.example ? defineAsyncComponent(() => import(`./examples/${route.query.example}.vue`)) : route.params?.slug && defineAsyncComponent(() => import(`../../runtime/components/${pascalCase(route.params.slug)}.vue`));\n const state = reactive({});\n function onUpdateRenderer(event) {\n state.props = { ...event.data.props };\n state.slots = { ...event.data.slots };\n }\n const colorMode = useColorMode();\n function setColorMode(event) {\n colorMode.preference = event.isDark ? \"dark\" : \"light\";\n }\n onMounted(() => {\n (void 0).parent.addEventListener(\"nuxt-ui-devtools:update-renderer\", onUpdateRenderer);\n (void 0).parent.addEventListener(\"nuxt-ui-devtools:set-color-mode\", setColorMode);\n });\n onUnmounted(() => {\n (void 0).parent.removeEventListener(\"nuxt-ui-devtools:update-renderer\", onUpdateRenderer);\n (void 0).parent.removeEventListener(\"nuxt-ui-devtools:set-color-mode\", setColorMode);\n });\n onMounted(async () => {\n const event = new Event(\"nuxt-ui-devtools:component-loaded\");\n (void 0).parent.dispatchEvent(event);\n });\n onMounted(() => {\n if (!route.query?.example) return;\n });\n const __returned__ = { route, component, state, onUpdateRenderer, colorMode, setColorMode };\n Object.defineProperty(__returned__, \"__isScriptSetup\", { enumerable: false, value: true });\n return __returned__;\n }\n});\nimport { resolveComponent as _resolveComponent, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from \"vue\";\nimport { ssrRenderVNode as _ssrRenderVNode, ssrRenderComponent as _ssrRenderComponent, ssrRenderAttrs as _ssrRenderAttrs } from \"vue/server-renderer\";\nfunction _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {\n const _component_UApp = _resolveComponent(\"UApp\");\n _push(`\u003Cdiv${_ssrRenderAttrs(_mergeProps({\n id: \"ui-devtools-renderer\",\n class: \"nuxt-ui-component-renderer\",\n \"data-v-inspector\": \"../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue:44:3\"\n }, _attrs))}>`);\n _push(_ssrRenderComponent(_component_UApp, { toaster: null }, {\n default: _withCtx((_, _push2, _parent2, _scopeId) => {\n if (_push2) {\n if ($setup.component) {\n _ssrRenderVNode(_push2, _createVNode(_resolveDynamicComponent($setup.component), _mergeProps($setup.state.props, {\n class: $setup.state?.slots?.base,\n ui: $setup.state.slots\n }), null), _parent2, _scopeId);\n } else {\n _push2(`\u003C!---->`);\n }\n } else {\n return [\n $setup.component ? (_openBlock(), _createBlock(_resolveDynamicComponent($setup.component), _mergeProps({ key: 0 }, $setup.state.props, {\n class: $setup.state?.slots?.base,\n ui: $setup.state.slots\n }), null, 16, [\"class\", \"ui\"])) : _createCommentVNode(\"v-if\", true)\n ];\n }\n }),\n _: 1\n /* STABLE */\n }, _parent));\n _push(`\u003C/div>`);\n}\nimport \"/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?vue&type=style&index=0&lang.css\";\nimport { useSSRContext as __vite_useSSRContext } from \"vue\";\nconst _sfc_setup = _sfc_main.setup;\n_sfc_main.setup = (props, ctx) => {\n const ssrContext = __vite_useSSRContext();\n (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add(\"../../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue\");\n return _sfc_setup ? _sfc_setup(props, ctx) : void 0;\n};\nimport _export_sfc from \"\\0plugin-vue:export-helper\";\nexport default /* @__PURE__ */ _export_sfc(_sfc_main, [[\"ssrRender\", _sfc_ssrRender], [\"__file\", \"/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue\"]]);\n\nat /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3115,3116,3119],{"name":3021,"color":3022},{"name":3117,"color":3118},"duplicate","cfd3d7",{"name":3024,"color":3025},2823,"`colorMode: false` + /pages/ crash the app","2024-12-03T09:33:17Z","https://github.com/nuxt/ui/issues/2823",0.70093256,{"description":3126,"labels":3127,"number":3131,"owner":3030,"repository":3031,"state":3065,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.3`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `bun@1.2.13`\n- Builder: `-`\n- User Config: `future`, `compatibilityDate`, `devtools`, `modules`, `css`, `components`, `i18n`, `icon`, `runtimeConfig`, `app`, `hooks`, `site`, `sitemap`, `pwa`, `fonts`\n- Runtime Modules: `@nuxt/eslint@1.4.0`, `@nuxt/fonts@0.11.4`, `@nuxt/image@1.10.0`, `@nuxt/scripts@0.11.7`, `@nuxt/ui@3.1.2`, `@nuxtjs/i18n@9.5.4`, `@vueuse/nuxt@13.2.0`, `@pinia/nuxt@0.11.0`, `@nuxtjs/sitemap@7.2.10`, `@vite-pwa/nuxt@1.0.1`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/wizardly-shamir-f8924y\n\n### Description\n\nThe `URadioGroup` component's table variant renders borders incorrectly in RTL mode. This appears to be a visual issue specific to RTL layouts. The expected result is that borders should match the appearance of the LTR layout, but they do not.\n\n### Additional context\n\nIn LTR Mode:\n\n\nIn RTL Mode:\n",[3128,3129,3130],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4190,"URadioGroup table variant borders display incorrectly in RTL mode","2025-05-22T12:36:45Z","https://github.com/nuxt/ui/issues/4190",0.7046884,["Reactive",3137],{},["Set"],["ShallowReactive",3140],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1pLngxEOLPZvDtO154t5VKLlTMMoiubmnpfyqcPu0Lg":-1},"/nuxt/ui/2742"]