\n \u003Cp class=\"text-sm font-medium\">\n {{ namesData.length === 0 ? 'No names loaded' : 'No names found' }}\n \u003C/p>\n \u003Cp class=\"text-xs text-neutral-500 mt-1\">\n {{ namesData.length === 0 ? 'Click \"Load Names\" to fetch data' : 'Try adjusting your search query' }}\n \u003C/p>\n \u003C/div>\n \u003C/template>\n \u003C/UTable>\n```\n\u003C/details>\n\nThe problem:\nHeight of row get bigger when more items added and get smaller while scrolling down, here is the example with 100 Row:\n\nFirst item height:\n\u003Cimg width=\"1217\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/d74589f7-a6b3-45ea-afe9-6f7f9ef7ba2d\" />\n\nat middle:\n\u003Cimg width=\"1219\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/653a9f5d-1702-401f-a437-4f61c6c4776e\" />\n\nat end:\n\u003Cimg width=\"1214\" height=\"386\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b081a95c-5ffe-4d8e-ab57-64f978cebeea\" />\n\ni tired to play with `UTable.ui` object but that break the style no mater what i do, sometime head col not align with row cells",[3019,3022],{"name":3020,"color":3021},"question","d876e3",{"name":3023,"color":3024},"v3","49DCB8",4563,"nuxt","ui","open","`useVirtualList` example for `UTable`","2025-07-21T11:23:04Z","https://github.com/nuxt/ui/issues/4563",0.7103686,{"description":3034,"labels":3035,"number":3043,"owner":3026,"repository":3027,"state":3028,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### 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\nI want to customize a button variant by `size`, `trailing` and `square` params. It works, but the types are broken.\n\nThe line in the `compoundVariants`:\n`{ size: 'md', trailing: true, square: false, class: { trailingIcon: '-mr-1' } }`\n\nErrors:\n`Type '{ trailingIcon: string; }' is not assignable to type 'string'`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3036,3039,3040],{"name":3037,"color":3038},"bug","d73a4a",{"name":3023,"color":3024},{"name":3041,"color":3042},"triage","ffffff",3738,"Incorrect compound button variants types","2025-03-30T14:32:49Z","https://github.com/nuxt/ui/issues/3738",0.71677643,{"description":3049,"labels":3050,"number":3053,"owner":3026,"repository":3027,"state":3054,"title":3055,"updated_at":3056,"url":3057,"score":3058},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.33\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Description\n\nHi :) I am getting type errors when using `compoundVariant`. \n\nFor example, here is my `app.config.ts`:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\nI am getting the following type error for `compoundVariants`:\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3051,3052],{"name":3037,"color":3038},{"name":3023,"color":3024},2481,"closed","Type error on `compoundVariants`","2024-10-28T21:43:49Z","https://github.com/nuxt/ui/issues/2481",0.7211431,{"description":3060,"labels":3061,"number":3067,"owner":3026,"repository":3027,"state":3054,"title":3068,"updated_at":3069,"url":3070,"score":3071},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nDoesn't it make more sense to render a `section` element on [LandingSection](https://ui.nuxt.com/pro/components/landing-section)?\n\nIf no, can I change it natively (aka without need to rewrite all the component or create my own component)?",[3062,3063,3064],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3065,"color":3066},"pro","5BD3CB",2437,"[Pro] Why LandingSection component render a `div` instead of a `section` element?","2024-10-22T21:02:07Z","https://github.com/nuxt/ui/issues/2437",0.72951007,{"description":3073,"labels":3074,"number":3080,"owner":3026,"repository":3026,"state":3054,"title":3081,"updated_at":3082,"url":3083,"score":3084},"I need to style the parent [App.vue wrapper](https://github.com/nuxt/nuxt.js/blob/dev/lib/app/App.vue#L2), setting it to 100% height to allow for a sticky footer component. Would be great to have a config option to pass a class to this template, rather than having to style `#__nuxt`, which seems privately designated (and it's poor practice to make style declarations assigned to ids).\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c967\">#c967\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3075,3077],{"name":3020,"color":3076},"cc317c",{"name":3078,"color":3079},"2.x","d4c5f9",1102,"Provide hook to add custom class to #__nuxt wrapper","2023-01-18T15:40:45Z","https://github.com/nuxt/nuxt/issues/1102",0.73352975,{"description":3086,"labels":3087,"number":3089,"owner":3026,"repository":3027,"state":3054,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.13.2\r\n- CLI Version: 3.14.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Version\n\nv2.18.6\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/Yves852/nuxt-ui-commandpalette-hover\n\n### Description\n\nSelecting an element on click is visually inconsistent. Visually all elements are selected, independantly of `v-model=\"selected\"`.\r\n\r\nWith props `multiple` visually will select all or unselect all, independantly of `v-model=\"selected\"`.\r\n\r\nOn keyboard, using \"enter\" to select update selected correctly but component jump to first element. Same visual problems as mouse.\r\n\r\nThe prop `nullable` doesn't seem to influence the bug.\r\n\r\nRelated to https://github.com/nuxt/ui/issues/2284\r\nCould be related to [1708](https://github.com/nuxt/ui/issues/1708)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3088],{"name":3037,"color":3038},2285,"CommandPalette: visual item selection inconsistent","2024-11-19T15:26:05Z","https://github.com/nuxt/ui/issues/2285",0.74160296,{"labels":3095,"number":3105,"owner":3026,"repository":3026,"state":3054,"title":3106,"updated_at":3107,"url":3108,"score":3109},[3096,3099,3102],{"name":3097,"color":3098},"enhancement","8DEF37",{"name":3100,"color":3101},"3.x","29bc7f",{"name":3103,"color":3104},"app","17512D",12828,"`vue:setup` hook","2023-01-19T16:36:13Z","https://github.com/nuxt/nuxt/issues/12828",0.74482644,{"description":3111,"labels":3112,"number":3118,"owner":3026,"repository":3027,"state":3054,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.1\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: modules, plugins, devtools, css, compatibilityDate, eslint\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.12, @nuxt/eslint@0.7.6\n- Build Modules: -\n\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\nhttps://codesandbox.io/p/sandbox/purple-sunset-9qdqv3\nJust upgrade Nuxt template to v3.0.0-alpha.12 and remove style from app.vue make preview without theme colors\n\n### Description\n\n[Tailwind v4.0.5](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.5) add optimization to compiled css that include only theme variable that are used\n\n### Additional context\n\nNuxt Template with **v3.0.0-alpha.12** without style in app.vue \n\n\n\nNuxt Template with **v3.0.0-alpha.10** without style in app.vue\n\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3113,3114,3115],{"name":3037,"color":3038},{"name":3023,"color":3024},{"name":3116,"color":3117},"tailwindcss","00bcff",3275,"Broken theme due to Tailwind V4.0.5","2025-02-14T21:31:17Z","https://github.com/nuxt/ui/issues/3275",0.7462829,{"description":3124,"labels":3125,"number":3130,"owner":3026,"repository":3027,"state":3054,"title":3131,"updated_at":3132,"url":3133,"score":3134},"### 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```",[3126,3127,3128,3129],{"name":3037,"color":3038},{"name":3023,"color":3024},{"name":3065,"color":3066},{"name":3041,"color":3042},3657,"Setting ui.colorMode = false breaks nuxi typecheck","2025-03-27T20:54:57Z","https://github.com/nuxt/ui/issues/3657",0.7463142,{"description":3136,"labels":3137,"number":3143,"owner":3026,"repository":3027,"state":3054,"title":3144,"updated_at":3145,"url":3146,"score":3147},"### Environment\n\nlatest\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/gifted-moon-ms65xm\n\n### Description\n\nhovering over a open drop down item in a drawer results in a recursion error.\n\n### Additional context\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst items = ref([\n {\n label: 'hover me for a recursion error',\n },\n])\n\u003C/script>\n\n\n\u003Ctemplate>\n \u003CUDrawer>\n \u003CUButton label=\"Open Drawer\"/>\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```",[3138,3139,3140],{"name":3037,"color":3038},{"name":3023,"color":3024},{"name":3141,"color":3142},"reka-ui","56d799",3357,"Cant put dropdown inside drawer","2025-04-08T19:49:57Z","https://github.com/nuxt/ui/issues/3357",0.74825215,["Reactive",3149],{},["Set"],["ShallowReactive",3152],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPDdWj_hxa3ERTQNgofQeQZ_MY7MUmnjptrP9Gu1fa-o":-1},"/nuxt/ui/3538"]