\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[3035,3038,3039],{"name":3036,"color":3037},"enhancement","a2eeef",{"name":3022,"color":3023},{"name":3040,"color":3041},"triage","ffffff",3307,"Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-02-13T19:05:27Z","https://github.com/nuxt/ui/issues/3307",0.68345433,{"description":3048,"labels":3049,"number":3052,"owner":3025,"repository":3026,"state":3053,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### Description\n\nsame as https://ui.nuxt.com/getting-started/installation#edge and https://ui.nuxt.com/pro/getting-started/installation#edge to test new components before release \n\n### Additional context\n\n_No response_",[3050,3051],{"name":3036,"color":3037},{"name":3022,"color":3023},2962,"closed","Create a edge version for `@nuxt/ui` and `@nuxt/ui-pro` v3","2025-01-25T13:12:16Z","https://github.com/nuxt/ui/issues/2962",0.6164115,{"description":3059,"labels":3060,"number":3065,"owner":3025,"repository":3026,"state":3053,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Description\n\nI want to configure my Nuxt UI v3 project only to use black and white colors with the neutral palette from Tailwind, similar to the one found in shadcn. I understand Nuxt UI supports Tailwind CSS theming, but I’m unsure of the best/recommended way to override all component colors globally",[3061,3064],{"name":3062,"color":3063},"question","d876e3",{"name":3022,"color":3023},3200,"How to create a black & white only theme in Nuxt UI v3","2025-02-09T12:59:38Z","https://github.com/nuxt/ui/issues/3200",0.66138583,{"description":3071,"labels":3072,"number":3075,"owner":3025,"repository":3026,"state":3053,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Description\n\nStyles with tailwindcss 4.0.13 seem to be broken after updating from NuxtUI pervious alpha.\n\n```\n\"dependencies\": {\n \"@iconify-json/ri\": \"1.2.5\",\n \"@nuxt/ui\": \"3.0.0\",\n \"@vueuse/core\": \"12.7.0\",\n \"@vueuse/nuxt\": \"12.7.0\",\n }\n```\nmain.css\n```\n@import 'tailwindcss' theme(static);\n@import '@nuxt/ui';\n```\nHas anyone else ran into this issue and if so how did you fix it?",[3073,3074],{"name":3062,"color":3063},{"name":3022,"color":3023},3525,"Styles issue have upgrade from 3.0.0-alpha.13 to 3.0.0","2025-03-12T23:28:54Z","https://github.com/nuxt/ui/issues/3525",0.6701149,{"description":3081,"labels":3082,"number":3085,"owner":3025,"repository":3026,"state":3053,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### Description\n\ni noticed that NUXT UI / NUXT UI PRO were refactored to use tailwind's new version 3 stuff + radix...\n\ni just went to the tailwind docs today and it looks like they just skipped right past their new version 3 and went to version 4...\n\nany ideas how this effects NUXT UI/PRO? \n\nMy undersanding is that version 3->4 means it was a semver breaking change?",[3083,3084],{"name":3062,"color":3063},{"name":3022,"color":3023},3167,"tailwind version 4..?","2025-01-24T10:17:32Z","https://github.com/nuxt/ui/issues/3167",0.67092264,{"description":3091,"labels":3092,"number":3094,"owner":3025,"repository":3026,"state":3053,"title":3095,"updated_at":3096,"url":3097,"score":3098},"### Description\n\nI am using the UFormGroup component. My use case is I want to have the label and/or description set dynamically based on a value coming from my Api.\n\nIs there any way of doing it and if yes were can I find some example?\n\nThank you\n",[3093],{"name":3062,"color":3063},3337,"UFormGroup dynamic Description","2025-02-17T02:56:17Z","https://github.com/nuxt/ui/issues/3337",0.6755051,{"description":3100,"labels":3101,"number":3103,"owner":3025,"repository":3026,"state":3053,"title":3104,"updated_at":3105,"url":3106,"score":3107},"### Description\n\nI want to use a UVerticalNavigation component however I want to manage my self who should be active since:\n\n- I don't have any to params\n- I want to stay on the same page but triggering my function on click\n\n\nEg:\n\n```\n \u003CUVerticalNavigation :links=\"links\" >\n \u003C/UVerticalNavigation>\n\n\n const links = [\n {\n label: 'Inbox',\n icon: 'i-heroicons-home',\n click: () => selectFolder('inbox'),\n active: activeFolder.value == 'inbox',\n }, {\n label: 'Drafts',\n icon: 'i-heroicons-pencil',\n click: () => selectFolder('drafts'),\n active: activeFolder.value == 'drafts'\n }, {\n label: 'Outbox',\n icon: 'i-heroicons-envelope',\n click: () => selectFolder('outbox'),\n active: activeFolder.value == 'outbox'\n }, {\n label: 'Sent',\n icon: 'i-heroicons-paper-airplane',\n click: () => selectFolder('sent'),\n active: activeFolder.value == 'sent'\n }, {\n label: 'Spam',\n icon: 'i-heroicons-exclamation-triangle',\n click: () => selectFolder('spam'),\n active: activeFolder.value == 'spam'\n }, {\n label: 'All mails',\n icon: 'i-heroicons-inbox-stack',\n click: () => selectFolder('all'),\n active: activeFolder.value == 'all'\n }\n ]\n\n```\n\nI tried using the activeFOlder.value but it's not updating upon the value change\n\nThank you!\n",[3102],{"name":3062,"color":3063},3351,"UVerticalNavigation Active","2025-02-19T05:51:40Z","https://github.com/nuxt/ui/issues/3351",0.67700154,{"description":3109,"labels":3110,"number":3115,"owner":3025,"repository":3026,"state":3053,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.13.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.8\n\n### Reproduction\n\n-\n\n### Description\n\nDefault classes of container in [docs](https://ui3.nuxt.dev/components/container#theme) is:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\n**But no one of classes except `mx-auto` is not was created.**\nI change `--ui-container` variable like in [docs](https://ui3.nuxt.dev/getting-started/theme#container):\n```css\n/** app.css */\n\n@import 'tailwindcss';\n@import '@nuxt/ui';\n\n@theme {\n --container-xl: 1280px;\n}\n\n:root {\n --ui-container: var(--container-xl);\n}\n```\nAs result, container classes is `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` and still not was created, except `mx-auto`.\n\nBut if i create `app.config.ts`:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\nAll is ok, width and other classes are created and applying.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3111,3114],{"name":3112,"color":3113},"bug","d73a4a",{"name":3022,"color":3023},2655,"Classes of container component are not working properly","2024-11-16T13:13:33Z","https://github.com/nuxt/ui/issues/2655",0.6815069,{"description":3121,"labels":3122,"number":3125,"owner":3025,"repository":3026,"state":3053,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@10.6.1\n- Builder: -\n- User Config: compatibilityDate, devtools, typescript, ssr, app, modules, ui, colorMode, i18n, gtag, icon, robots, pwa, runtimeConfig\n- Runtime Modules: @nuxt/ui@2.21.1, @nuxtjs/i18n@9.3.1, nuxt-gtag@3.0.2, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/icon@1.10.3, @nuxtjs/robots@5.2.6, @vite-pwa/nuxt@0.10.6, @formkit/auto-animate/nuxt@0.8.2\n- Build Modules:\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n2.21.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/optimistic-http-yz8djj\n\n### Description\n\nThe hover effect doest work when you pass the color as variable. Doesn't work with some colors like indigo, pink, sky...\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3123,3124],{"name":3062,"color":3063},{"name":3022,"color":3023},3524,"Button hover effect","2025-03-14T11:52:31Z","https://github.com/nuxt/ui/issues/3524",0.68183327,["Reactive",3131],{},["Set"],["ShallowReactive",3134],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fLY6C2aWrZd3LG02g3kI3D8In1Q20NFmUZb52sOZKyTw":-1},"/nuxt/ui/3006"]