\n```\n\nsame result is expected when using `active`, but `leadingIcon` is ignored\n```\n\u003CUButton\n label=\"Label\"\n active\n active-color=\"primary\"\n active-variant=\"soft\"\n icon=\"mdi-account\"\n @click.prevent=\"active = !active\"\n/>\n```\n\n### Additional context\n\n\u003Cimg width=\"202\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0756fb1c-772c-44ae-855d-90aba304bd9e\" />",[2898,2899,2900],{"name":2885,"color":2886},{"name":2871,"color":2872},{"name":2888,"color":2889},3972,"Different result than static for active-color & active-variant","2025-04-24T15:30:39Z","https://github.com/nuxt/ui/issues/3972",0.73655534,{"description":2907,"labels":2908,"number":2911,"owner":2874,"repository":2875,"state":2876,"title":2912,"updated_at":2913,"url":2914,"score":2915},"I currently have the problem that we have to integrate our SPA into a larger application. And with that, we also inherit the CSS of the outer application. And that's where it gets really ugly: they have partially written classes in their own CSS files that use the TW naming scheme (m, p, gap, shadow, etc.), and then add `!important` to these declarations. \n\nOne of the big problems with Nuxt UI is that there is no prefixing of Tailwind classes. So we started writing TW utilities with a prefix for the affected classes. This is then transferred to app.config. The second problem was the merge process that app.config uses. Usually the names have to match. If I want to have a `p-4` from the config (because px values with !important were entered in the outer CSS), I created the class `p-00`, which replaces the `p-4` class and thus clears the way for the prefixed TW class `o-p-4`.\n\nSo far so good, but I can't use it with popovers like SelectMenu. No matter what I do, the class `shadow-lg` remains. The other devs of the main application have entered a rather ugly shadow with important there. \n\nIs there another prop like 'content' that I can use to replace `shadow-lg`? I'm not a fan of `!important`, but at this point I can only work this way.\n\nFurthermore, it would be really nice if you could really overwrite the sections in app.config instead of just merging them (apart from prefixing the TW classes). There are certain stylings that you won't use, but then they are in the element",[2909,2910],{"name":2868,"color":2869},{"name":2871,"color":2872},3874,"Changing Shadow Classes on Popover and SelectMenu","2025-04-13T13:53:28Z","https://github.com/nuxt/ui/issues/3874",0.7378884,{"description":2917,"labels":2918,"number":2921,"owner":2874,"repository":2875,"state":2922,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.11.0\n- Nuxt Version: 3.15.1\n- CLI Version: 3.20.0\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.1.37\n- Builder: -\n- User Config: components, css, extends, modules, ui, supabase, i18n, app, mapbox, runtimeConfig, compatibilityDate\n- Runtime Modules: nuxt-mapbox@1.6.1, @nuxt/image@1.9.0, @nuxt/ui@3.0.0-alpha.10, @nuxtjs/supabase@1.4.5, @vueuse/nuxt@10.11.1, @nuxtjs/i18n@8.5.6, @vueuse/motion/nuxt@2.2.6 \n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/quizzical-wood-ntyxty\n\n### Description\n\nwhen a child item at the second level has more than three levels of nested children, the collapse button for that second-level item stops working.\n\nI'm using the following code snippet:\nIs this a known limitation of the UNavigationMenu component, or could it be a bug?\n\nI would greatly appreciate any guidance on how to resolve this issue and ensure the collapse \nTypeScript\n```\n\u003Cscript setup lang=\"ts\">\n const items = ref([\n {\n label: 'Home',\n icon: 'i-tabler-home',\n description: 'Fully styled and customizable components for Nuxt.',\n children: [\n {\n label: 'Introduction 2',\n description: 'Fully styled and customizable components for Nuxt.',\n icon: 'i-lucide-house',\n children: [\n {\n label: 'Getting Started 3',\n description: 'Learn how to get started with Reka UI.',\n icon: 'i-tabler-star',\n to: '/',\n },\n {\n label: 'Installation 3',\n description: 'Learn how to get started with Reka UI in your Nuxt project.',\n icon: 'i-lucide-house',\n to: '/',\n },\n ],\n },\n ],\n },\n ])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUNavigationMenu\n orientation=\"vertical\"\n :items=\"links\"\n color=\"neutral\"\n :ui=\"{\n link: 'group relative flex items-center gap-2 px-3 py-2 font-bold rounded-md text-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',\n }\"\n />\n\u003C/template>\n\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2919,2920],{"name":2885,"color":2886},{"name":2871,"color":2872},3069,"closed","UNavigationMenu I'm facing an issue with the collapse functionality of my nested navigation menu.","2025-01-25T12:56:13Z","https://github.com/nuxt/ui/issues/3069",0.6959141,{"description":2928,"labels":2929,"number":2933,"owner":2874,"repository":2934,"state":2922,"title":2935,"updated_at":2936,"url":2937,"score":2938},"- [x] `Nuxt`\n- [x] `Studio`\n- [x] logo only",[2930],{"name":2931,"color":2932},"design","00bd6f",780,"nuxt.com","Uniformize logos with same size","2023-09-05T08:18:35Z","https://github.com/nuxt/nuxt.com/issues/780",0.7078221,{"description":2940,"labels":2941,"number":2942,"owner":2874,"repository":2934,"state":2922,"title":2943,"updated_at":2944,"url":2945,"score":2946},"- [x] Colors & Fonts\n- [x] Landing page (Home)\n- [x] Showcase categories/hero\n- [x] Modules categories/hero\n- [x] Blog categories/hero\n- [x] Support hero/content",[],1305,"Marketing Update","2023-07-04T10:00:31Z","https://github.com/nuxt/nuxt.com/issues/1305",0.7098087,{"description":2948,"labels":2949,"number":2952,"owner":2874,"repository":2875,"state":2922,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.11.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8, @nuxtjs/html-validator@1.8.2, @nuxt/image@1.8.1, @nuxt/eslint@0.6.1, @nuxtjs/seo@2.0.0-rc.23\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n\"@nuxt/ui\": \"3.0.0-alpha.8\",\n\n### Reproduction\n\n\u003C!-- layouts/default.vue -->\n\u003Ctemplate>\n \u003Cdiv class=\"container mx-auto\">\n \u003Cu-breadcrumb :items=\"items \" />\n \u003Cslot>\u003C/slot>\n \u003C/div>\n\u003C/template>\n\n\n\u003Cscript lang=\"ts\" setup>\nimport { useRoute } from 'vue-router';\n\nconst route = useRoute();\nconst items = useBreadcrumbItems({\n schemaOrg: true,\n});\n\u003C/script>\n\n\n### Description\n\nthis will render the breadcrumbs in a \u003Cdiv> with an aria-label, which is a violation of this rule: https://html-validate.org/rules/aria-label-misuse.html\n\n- Rule ID: aria-label-misuse\n- Category: Accessibility\n- Standards: WCAG 2.2 (A)WCAG 2.1 (A)WCAG 2.0 (A)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n ERROR HTML validation errors found for /song/justice-genesis-1\n\ninline\n 129:21990 error \"aria-label\" cannot be used on this element aria-label-misuse\n\n✖ 1 problem (1 error, 0 warnings)\n\nMore information:\n https://html-validate.org/rules/aria-label-misuse.html\n\n```",[2950,2951],{"name":2885,"color":2886},{"name":2871,"color":2872},2649,"breadcrumb HTML validation errors","2024-11-15T08:53:33Z","https://github.com/nuxt/ui/issues/2649",0.71053696,{"description":2958,"labels":2959,"number":2961,"owner":2874,"repository":2934,"state":2922,"title":2962,"updated_at":2963,"url":2964,"score":2965},"Example: https://www.raycast.com/nhojb/brew",[2960],{"name":2931,"color":2932},673,"[Modules] Details page","2023-09-05T08:18:34Z","https://github.com/nuxt/nuxt.com/issues/673",0.7130699,{"description":2967,"labels":2968,"number":2971,"owner":2874,"repository":2875,"state":2922,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Description\n\nI am new using Nuxt UI, and I am loving it.\nI personally believe buttons look better when they are wider than taller, therefore I like to add more padding in the x axis, but I don't want to do this for each button.\n\nI am currently doing it like this:\n\n```html\n\u003CUButton\n to=\"/login\"\n size=\"xl\"\n color=\"warning\"\n variant=\"solid\"\n class=\"font-semibold px-4\"\n >\n Iniciar sesión\n \u003C/UButton>\n```\n\nbut I don't know how to add the option for all buttons.\nI tried doing this in the app.config.ts:\n\n```js\nui: {\n button: {\n slots: {\n base: 'px-4 cursor-pointer'\n },\n}\n \n```\n\nand the cursor-pointer worked, but the px-4 didn't work. Any idea on how to make this work?",[2969,2970],{"name":2868,"color":2869},{"name":2871,"color":2872},3646,"How do I change the padding of all buttons globally?","2025-03-24T01:29:59Z","https://github.com/nuxt/ui/issues/3646",0.71807766,["Reactive",2977],{},["Set"],["ShallowReactive",2980],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdBq_XAs89XgZMBDtQ-q-8GAg9GKV-Ace0yHsGdP1eFc":-1},"/nuxt/nuxt.com/1104"]