\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",[3145,3148],{"name":3146,"color":3147},"question","d876e3",{"name":3149,"color":3150},"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":3160,"labels":3161,"number":3166,"owner":3152,"repository":3153,"state":3167,"title":3168,"updated_at":3169,"url":3170,"score":3171},"### 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_",[3162,3165],{"name":3163,"color":3164},"bug","d73a4a",{"name":3149,"color":3150},2481,"closed","Type error on `compoundVariants`","2024-10-28T21:43:49Z","https://github.com/nuxt/ui/issues/2481",0.7211431,{"description":3173,"labels":3174,"number":3180,"owner":3152,"repository":3153,"state":3167,"title":3181,"updated_at":3182,"url":3183,"score":3184},"### 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)?",[3175,3176,3177],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3178,"color":3179},"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":3186,"labels":3187,"number":3193,"owner":3152,"repository":3152,"state":3167,"title":3194,"updated_at":3195,"url":3196,"score":3197},"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>",[3188,3190],{"name":3146,"color":3189},"cc317c",{"name":3191,"color":3192},"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":3199,"labels":3200,"number":3202,"owner":3152,"repository":3153,"state":3167,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### 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_",[3201],{"name":3163,"color":3164},2285,"CommandPalette: visual item selection inconsistent","2024-11-19T15:26:05Z","https://github.com/nuxt/ui/issues/2285",0.74160296,{"labels":3208,"number":3218,"owner":3152,"repository":3152,"state":3167,"title":3219,"updated_at":3220,"url":3221,"score":3222},[3209,3212,3215],{"name":3210,"color":3211},"enhancement","8DEF37",{"name":3213,"color":3214},"3.x","29bc7f",{"name":3216,"color":3217},"app","17512D",12828,"`vue:setup` hook","2023-01-19T16:36:13Z","https://github.com/nuxt/nuxt/issues/12828",0.74482644,{"description":3224,"labels":3225,"number":3231,"owner":3152,"repository":3153,"state":3167,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### 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```",[3226,3227,3228],{"name":3163,"color":3164},{"name":3149,"color":3150},{"name":3229,"color":3230},"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":3237,"labels":3238,"number":3245,"owner":3152,"repository":3153,"state":3167,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### 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```",[3239,3240,3241,3242],{"name":3163,"color":3164},{"name":3149,"color":3150},{"name":3178,"color":3179},{"name":3243,"color":3244},"triage","ffffff",3657,"Setting ui.colorMode = false breaks nuxi typecheck","2025-03-27T20:54:57Z","https://github.com/nuxt/ui/issues/3657",0.7463142,{"description":3251,"labels":3252,"number":3258,"owner":3152,"repository":3153,"state":3167,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### 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```",[3253,3254,3255],{"name":3163,"color":3164},{"name":3149,"color":3150},{"name":3256,"color":3257},"reka-ui","56d799",3357,"Cant put dropdown inside drawer","2025-04-08T19:49:57Z","https://github.com/nuxt/ui/issues/3357",0.74825215,{"description":3264,"labels":3265,"number":3270,"owner":3152,"repository":3153,"state":3167,"title":3271,"updated_at":3272,"url":3273,"score":3274},"### Description\n\nThe UPageCard component supports highlight and spotlight modes, but there’s no way to change its color dynamically. It just uses the primary color. It would be nice to be able to change this by a color prop.\n\n### Additional context\n\n_No response_",[3266,3268,3269],{"name":3210,"color":3267},"a2eeef",{"name":3149,"color":3150},{"name":3178,"color":3179},3389,"UPageCard: Allow setting color","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3389",0.74845976,["Reactive",3276],{},["Set"],["ShallowReactive",3279],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPDdWj_hxa3ERTQNgofQeQZ_MY7MUmnjptrP9Gu1fa-o":-1},"/nuxt/ui/3538"]