\n \u003Ctemplate #content>\n \u003CUDropdownMenu\n :items=\"items\"\n >\n \u003CUButton label=\"Open Drop down\"/>\n \u003C/UDropdownMenu>\n \u003C/template>\n \u003C/UDrawer>\n\u003C/template>\n```\n\n### Logs\n\n```shell-script\nUncaught InternalError: too much recursion\n NuxtJS 5\n focus\n handleFocusOut\n ct\n f\n focus\n```",[2951,2952,2953],{"name":2893,"color":2894},{"name":2908,"color":2909},{"name":2954,"color":2955},"reka-ui","56d799",3357,"Cant put dropdown inside drawer","2025-04-08T19:49:57Z","https://github.com/nuxt/ui/issues/3357",0.7261386,{"description":2962,"labels":2963,"number":2966,"owner":2872,"repository":2873,"state":2924,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Description\n\nHow can I customize component styles in v3?\nI learned from `https://ui3.nuxt.dev/getting-started/theme` that styles can be customized in `app.config.ts` For example:\n```ts\nexport default defineAppConfig({\n uiPro: {\n header: {\n slots: {\n root: 'bg-[var(--ui-bg)]/75 backdrop-blur border-b border-[var(--ui-border)] sticky top-0 z-50',\n container: 'flex items-center justify-between gap-3 h-[var(--ui-header-height)]',\n left: 'lg:flex-1 flex items-center gap-1.5',\n center: 'hidden lg:flex',\n right: 'flex items-center justify-end lg:flex-1 gap-1.5',\n title: 'shrink-0 font-bold text-xl text-[var(--ui-text-highlighted)] flex items-end gap-1.5',\n toggle: 'lg:hidden',\n content: 'lg:hidden',\n overlay: 'lg:hidden',\n header: '',\n body: 'p-4 sm:p-6 overflow-y-auto'\n },\n variants: {\n toggleSide: {\n left: {\n toggle: '-ms-1.5'\n },\n right: {\n toggle: '-me-1.5'\n }\n }\n }\n }\n }\n})\n```\nHowever, after testing this approach, it doesn’t seem to work. So I’d like to ask specifically how to modify the style of an entire component in v3.\nFor instance, I want to customize the style of `UHeader`\nPlease forgive me if this is a silly question. English is not my native language, so I might have missed some details mentioned elsewhere.",[2964,2965],{"name":2866,"color":2867},{"name":2908,"color":2909},3070,"How can I customize component styles in v3?","2025-01-13T00:58:26Z","https://github.com/nuxt/ui/issues/3070",0.72876626,{"description":2972,"labels":2973,"number":2980,"owner":2872,"repository":2873,"state":2924,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: modules, compatibilityDate, devtools, css, ui, devServer, future, telemetry, hooks, eslint\n- Runtime Modules: @nuxt/eslint@0.6.2, @nuxt/ui-pro@3.0.1, nuxt-jsonld@2.1.0, @pinia/nuxt@0.10.1\n- Build Modules: -\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt v3.16.1\nui-pro v3.0.1\n\n### Reproduction\n\nWhen I add the following to my nuxt.config.ts:\n\n```ts\n{\n ui: {\n colorMode: false\n }\n}\n```\n\n...then `npx nuxi typecheck` fails with 8 errors.\n\n```\n[...snip]\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeButton.vue:18:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n18 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSelect.vue:10:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n10 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\nnode_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSwitch.vue:10:24 - error TS2305: Module '\"#imports\"' has no exported member 'useColorMode'.\n\n10 import { useAppConfig, useColorMode } from '#imports'\n ~~~~~~~~~~~~\n\n\nFound 8 errors in 8 files.\n\nErrors Files\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeButton.vue:18\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeSelect.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/color-mode/ColorModeSwitch.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/content/ContentSearch.vue:89\n 1 node_modules/@nuxt/ui-pro/dist/runtime/components/DashboardSearch.vue:57\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeButton.vue:18\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSelect.vue:10\n 1 node_modules/@nuxt/ui-pro/dist/runtime/vue/components/ColorModeSwitch.vue:10\n\n ERROR Process exited with non-zero status (2)\n```\n\n### Description\n\nI think that there probably needs to be a stub export set up in all cases? Or these files should not be gathered by the typechecking script?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2974,2975,2976,2979],{"name":2893,"color":2894},{"name":2908,"color":2909},{"name":2977,"color":2978},"pro","5BD3CB",{"name":2896,"color":2897},3657,"Setting ui.colorMode = false breaks nuxi typecheck","2025-03-27T20:54:57Z","https://github.com/nuxt/ui/issues/3657",0.7309919,{"description":2986,"labels":2987,"number":2993,"owner":2872,"repository":2873,"state":2924,"title":2994,"updated_at":2995,"url":2996,"score":2997},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.15.2`\n- CLI Version: `3.20.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `yarn@1.22.22`\n- Builder: `-`\n- User Config: `modules`, `ssr`, `devtools`, `colorMode`, `ui`, `runtimeConfig`, `routeRules`, `future`, `compatibilityDate`, `telemetry`, `eslint`, `i18n`, `security`\n- Runtime Modules: `@nuxt/ui@3.0.0-alpha.11`, `@nuxt/eslint@0.7.5`, `@nuxtjs/i18n@9.1.1`, `@vueuse/nuxt@12.4.0`, `@pinia/nuxt@0.9.0`, `nuxt-security@2.1.5`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.11\n\n### Reproduction\n\nCheck the official documentation website and hover any button: https://ui3.nuxt.dev/components/button\n\n### Description\n\nWhen mouse hovering a button, the cursor must be changed to pointer!\n\nWhen a button has a cursor pointer, it provides a clear visual cue to users that the element is interactive. This enhances the user experience by making it obvious that clicking the button will trigger an action. Without this visual feedback, users might not realize that the button is clickable, leading to confusion or frustration.\n\nIn essence, the cursor pointer helps improve the usability and accessibility of web interfaces by making interactive elements more intuitive to use.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2988,2989,2992],{"name":2893,"color":2894},{"name":2990,"color":2991},"duplicate","cfd3d7",{"name":2908,"color":2909},3125,"Buttons are missing \"cursor pointer\"","2025-04-02T09:40:55Z","https://github.com/nuxt/ui/issues/3125",0.7315381,["Reactive",2999],{},["Set"],["ShallowReactive",3002],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQ_ZS_tYm4gG6K2pKi5O677R84xz75M7jtp1O9hLBMxk":-1},"/nuxt/ui/3612"]