\n \u003C/UChip>\n\u003C/template>\n```\n\nEven though the component is a copy-paste off of [ui.nuxt.com](), it immediately causes hydration mismatches, which I experienced with pretty much every other NuxtUI component. It took me some time to figure out that the error disappeared once I changed the value of `selectiveClient` from `'deep'` to `true` in _nuxt.config.ts_ – basically disabling slots in client components, [as mentioned in the documentation](https://nuxt.com/docs/guide/directory-structure/components#client-components-within-server-components:~:text=This%20only%20works,once%20client%2Dside.).\n```ts\nexport default defineNuxtConfig({\n experimental: {\n componentIslands: {\n selectiveClient: 'deep', // Changing this to `true` prevents hydration mismatches.\n },\n },\n});\n```\n\n\u003Cbr />\n\nI decided to file this as a Nuxt issue instead of a NuxtUI issue since it's literally based on the experimental Nuxt config and may happen with components other than those from NuxtUI.",[3038],{"name":3039,"color":3040},"pending triage","E99695",32251,"Hydration Mismatch in Non-server Components with `componentIslands.selectiveClient: 'deep'`","2025-05-31T17:00:10Z","https://github.com/nuxt/nuxt/issues/32251",0.68608564,{"description":3047,"labels":3048,"number":3053,"owner":3028,"repository":3028,"state":3054,"title":3055,"updated_at":3056,"url":3057,"score":3058},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.5\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: app, compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ysdlhu4q?file=nuxt.config.ts\n\n### Describe the bug\n\nClasses of root element are being split into individual characters and joined by spaces.\n\nExample:\n```ts\n// nuxt.config.ts\napp: {\n rootAttrs: { class: 'flex flex-col' }\n}\n```\nWill result in:\n```html\n\u003Cdiv id=\"__nuxt\" class=\"f l e x f l e x - c o l\">\u003C/div>\n```\n\nTo reproduce add any classes to the root element in `nuxt.config.ts` with `app.rootAttrs.class` as shown in the reproduction link.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3049,3050],{"name":3039,"color":3040},{"name":3051,"color":3052},"possible regression","B90A42",31283,"closed","CSS classes of root node are split into individual characters then joined by spaces","2025-03-11T06:34:24Z","https://github.com/nuxt/nuxt/issues/31283",0.66059667,{"description":3060,"labels":3061,"number":3070,"owner":3028,"repository":3029,"state":3054,"title":3071,"updated_at":3072,"url":3073,"score":3074},"### Description\n\nHi,\r\n\r\nI have a customized Nuxt UI setup, with multiple variants and colors for the UInput elements set in the app.config. Currently if the input is in error state inside a FormGroup, it will override the input classes only with the base classes, and it will not use my classes for the given variant.\r\n\r\n`input: {\r\n base: 'dark:focus:ring-1 ring-1 dark:focus:bg-white dark:focus:text-hollow font-bold dark:focus:placeholder-black/30',\r\n placeholder: \"dark:placeholder-white/30\",\r\n size: {\r\n xs: 'text-xs',\r\n sm: 'text-[13px]',\r\n xl: 'text-[13px]'\r\n },\r\n padding: {\r\n xs: 'px-4 py-0 h-8',\r\n sm: 'px-4 py-0 h-12',\r\n xl: 'h-14 px-4 py-0'\r\n },\r\n color: {\r\n white: {\r\n outline: 'dark:bg-primaryBg dark:placeholder-white/10',\r\n solid: \"dark:bg-hollow dark:placeholder-white/30\",\r\n soft: 'dark:bg-white/10 dark:placeholder-white/10',\r\n },\r\n primary: {\r\n solid: \"dark:text-peach-500 dark:placeholder-peach-500/40 dark:bg-hollow dark:ring-0 font-bold\"\r\n },\r\n },\r\n rounded: \"rounded-lg\",\r\n default: {\r\n variant: 'solid'\r\n }\r\n }`\r\n\r\n\n\n### Additional context\n\n_No response_",[3062,3065,3068],{"name":3063,"color":3064},"enhancement","a2eeef",{"name":3066,"color":3067},"closed-by-bot","ededed",{"name":3069,"color":3067},"stale",1593,"UInput error state style override","2025-06-19T02:12:46Z","https://github.com/nuxt/ui/issues/1593",0.6686164,{"labels":3076,"number":3082,"owner":3028,"repository":3028,"state":3054,"title":3083,"updated_at":3084,"url":3085,"score":3086},[3077,3078,3079],{"name":3069,"color":3026},{"name":3039,"color":3040},{"name":3080,"color":3081},"2.x","d4c5f9",9973,"Minor bug: CSS with pseudo class with params when staticly generated is different from development","2023-01-22T15:45:05Z","https://github.com/nuxt/nuxt/issues/9973",0.6707245,{"description":3088,"labels":3089,"number":3093,"owner":3028,"repository":3029,"state":3054,"title":3094,"updated_at":3095,"url":3096,"score":3097},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: devtools, modules, runtimeConfig, app, css, ui, icon, i18n, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.1.0, @nuxt/eslint@1.3.0, @nuxtjs/device@3.2.4, @nuxtjs/i18n@9.5.3, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.1.0, nuxt-lodash@2.5.3\n- Build Modules: -\n\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/vigorous-cerf-pnrc3g\n\n// app.config.ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: 'emerald',\n neutral: 'zinc',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n green: 'green',\n blue: 'blue',\n purple: 'purple',\n gray: 'gray',\n },\n }\n}\n\n// nuxt.config.ts\n\nui: {\n theme: {\n colors: [ 'primary', 'secondary', 'success', 'info', 'warning', 'error', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray' ],\n },\n },\n\n### Description\n\nYesterday everything was working fine, no code was changed, after the upgrade it broke.\nFor example:\n```html\n\u003Cdiv class=\"bg-(--ui-orange)\">\n```\nOr\n```html\n\u003Cdiv class=\"bg-orange\">\n```\nBoth not work\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3090,3091,3092],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},3977,"Extend colors not work after update to v3.1","2025-04-28T10:40:09Z","https://github.com/nuxt/ui/issues/3977",0.6709994,{"description":3099,"labels":3100,"number":3104,"owner":3028,"repository":3029,"state":3054,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### 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```",[3101,3102,3103],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},3579,"Type error in app config `compoundVariants`","2025-05-02T15:06:25Z","https://github.com/nuxt/ui/issues/3579",0.6739274,{"description":3110,"labels":3111,"number":3114,"owner":3028,"repository":3029,"state":3054,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Environment\n\n\"@vueuse/nuxt\": \"^13.1.0\"\n\"@nuxt/ui\": \"^3.1.2\"\nnode: lts/jod (22.11.0)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\n\n\n\n\n### Description\n\nWhen using the UTab component with the variant=\"link\", applying custom CSS classes to enable horizontal scrolling (e.g., overflow-x: auto; or equivalent utility classes) causes the visual style indicating the currently active tab to be lost or overridden.\n\n```js\n{\n variant: 'link',\n ui: {\n list: 'bg-white overflow-x-auto overflow-y-hidden',\n trigger: 'min-w-auto'\n }\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3112,3113],{"name":3019,"color":3020},{"name":3022,"color":3023},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.67444724,{"description":3120,"labels":3121,"number":3125,"owner":3028,"repository":3029,"state":3054,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### 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```",[3122,3123,3124],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4018,"Overriding root variables stopped working in 3.1.0","2025-04-29T12:40:17Z","https://github.com/nuxt/ui/issues/4018",0.6761817,{"description":3131,"labels":3132,"number":3138,"owner":3028,"repository":3029,"state":3054,"title":3139,"updated_at":3140,"url":3141,"score":3142},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.11.0\n- Builder: -\n- User Config: modules, devtools, css, ui, runtimeConfig, compatibilityDate, dayjs, eslint, image, sanity, supabase\n- Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/ui@3.1.3, @nuxt/image@1.10.0, @nuxtjs/sanity@1.13.3, @nuxtjs/supabase@1.5.1, motion-v/nuxt@0.11.3, dayjs-nuxt@2.1.11, @pinia/nuxt@0.10.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.4\n\n### Reproduction\n\nHappens also in the Nuxt UI documentation: https://ui.nuxt.com/components/input-menu#items\n\n\n\n### Description\n\nI would expect that all list items appear on the first opening and not on the second one like in following video:\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3133,3134,3137],{"name":3019,"color":3020},{"name":3135,"color":3136},"duplicate","cfd3d7",{"name":3022,"color":3023},4240,"InputMenu shows only seleceted value in the list on first opening","2025-05-28T08:08:48Z","https://github.com/nuxt/ui/issues/4240",0.6773874,["Reactive",3144],{},["Set"],["ShallowReactive",3147],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZZ_e1Pfw0_8s7msy8gikssQcUOVwPYCvrwWR9kzUUm0":-1},"/nuxt/ui/4530"]