\n\nconst items = ref([\n \"ok\",\n \"this one would not be ok because of how long it is\"\n])\n```\n\nThough, you could use something like Zod to do form validation, I think this could just apply a `maxlength` to the input itself to prevent typing more than the limit.\n\n### Additional context\n\n_No response_",[2904,2907,2910],{"name":2905,"color":2906},"enhancement","a2eeef",{"name":2908,"color":2909},"v3","49DCB8",{"name":2911,"color":2912},"triage","ffffff",4405,"nuxt","ui","open","InputTags max item length","2025-06-26T17:49:31Z","https://github.com/nuxt/ui/issues/4405",0.777984,{"description":2922,"labels":2923,"number":2927,"owner":2914,"repository":2915,"state":2916,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### Description\n\nWhen a dot is selected in the UCarousel component, we get no attribute in the element : \n\n- no data-selected\n- no aria-current for accessibility\n\nSince there is no dots/dot slot, we have no possibility to style these dots when selected or not. The only difference is the bg style being either bg-accented or bg-inverted, which is overwritten if we actually style the background.\n\nIs there any way to add these attributes ? At least for accessibility.\n\n### Additional context\n\n_No response_",[2924,2925,2926],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},4403,"UCarousel selected dot has no attribute","2025-06-26T15:19:41Z","https://github.com/nuxt/ui/issues/4403",0.7839665,{"description":2933,"labels":2934,"number":2938,"owner":2914,"repository":2915,"state":2916,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Description\n\nI propose the addition of a UTheme component which would allow scoped theming of components to reduce repeated styling that's error prone when refactoring.\n\n## Example\nThe Dashboard template has a bunch of forms that have horizontal form fields (label left, input right).\n\nBefore:\n```html\n\u003CUForm ...>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n\u003CUForm/>\n```\n\nAfter:\n```html\n\u003C!-- `ui` prop is the same as `app.config.ts` theming config\n\u003CUTheme :ui=\"{\n formField: {\n\t slots: {\n\t root: \"flex max-sm:flex-col justify-between items-center gap-4\",\n\t},\n },\n}\">\n \u003CUForm ...>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUForm/>\n\u003C/UTheme>\n```\n\n## Benefits\n- Easily componentized. I could create a `AppForm` component which contains the `UTheme` usage with a slot, so now its 1 line to get the exact theming that I want. This makes consistency across the app really easy.\n- Nestable - If implemented with provide/inject, you could have an infinite number of UTheme's nested and it would take the latest one\n\n## Implementation\nI'd tentatively be willing to implement this. My approach would be:\n- Create `UTheme`, it should have a `ui` and `uiPro` prop, each of which take the same type as the `app.config.ts`\n- `provide()` those props\n- `inject()` those props into each component and merge with passed in `ui` field.\n- Theme priority order should be:\n 1. `ui` prop passed to component\n 2. `ui` prop coming from UTheme component\n 3. `ui` config coming from `app.config.ts`\n\n### Additional context\n\n_No response_",[2935,2936,2937],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7858868,{"description":2944,"labels":2945,"number":2949,"owner":2914,"repository":2915,"state":2916,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Description\n\nI want to make the text in a custom slot for a tree item child selectable.\nThe issue is that `user-select: text` doesn’t work on `\u003Cbutton>` elements in Safari (I’m using a Tauri app).\n\nIt would be great if the component allowed using a custom slot that avoids rendering a \u003Cbutton> for certain items. (Perhaps a new slot could be added to allow custom rendering?).\n\n\u003Cimg width=\"1217\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39cf6666-e3c9-48f4-a922-90a57d604feb\" />\n\n\n### Additional context\n\n_No response_",[2946,2947,2948],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},4424,"Ability to not use button container for tree custom slot","2025-06-30T07:50:57Z","https://github.com/nuxt/ui/issues/4424",0.79052263,{"description":2955,"labels":2956,"number":2959,"owner":2914,"repository":2915,"state":2960,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Description\r\n\r\nHi,\r\n\r\nI think it would be great if the command palette would 'natively' support submenus to enable an easy way to build some more feature-rich command palettes.\r\nI implemented submenus by manually replacing the assigned command groups and saving the 'history' of groups assigned to the command palette so I can go back via a manually injected back button.\r\n\r\nThe following code is a snippet of my code that doesn't work as I put it there because of some missing code, but it outlines what I did well enough to understand my submenu implementation.\r\n\r\n### Additional context\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CUModal v-model=\"model\">\r\n \u003CUCommandPalette\r\n ref=\"commandPaletteRef\"\r\n :loading=\"isDataLoading\"\r\n :groups=\"selectedCommandGroups\"\r\n :autoselect=\"true\"\r\n :nullable=\"false\"\r\n @update:model-value=\"onCommandSelect\"\r\n @close=\"() => (model = false)\"\r\n :close-button=\"{\r\n icon: 'i-heroicons-x-mark-20-solid',\r\n color: 'gray',\r\n variant: 'link',\r\n padded: false,\r\n }\"\r\n :empty-state=\"{\r\n icon: 'i-heroicons-magnifying-glass-20-solid',\r\n label: `We couldn't find any items.`,\r\n queryLabel: `We couldn't find any items with that term. Please try again.`,\r\n }\">\r\n \u003C/UCommandPalette>\r\n \u003C/UModal>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport type { Group, Command } from '#ui/types';\r\nimport type { UCommandPalette } from '#build/components';\r\nimport { nanoid } from 'nanoid';\r\n\r\n\r\nconst toast = useToast();\r\nconst router = useRouter();\r\n\r\nconst model = defineModel\u003Cboolean>();\r\n\r\nconst commandPaletteStore = useCommandPaletteStore();\r\nconst { commandPaletteGroups, isDataLoading, realms } = storeToRefs(commandPaletteStore);\r\nconst commandPaletteRef = ref\u003CInstanceType\u003Ctypeof UCommandPalette>>();\r\n\r\n\r\nconst newEntitySubmenuGroup = computed\u003CGroup[]>(() => {\r\n return [\r\n {\r\n key: 'action-new-entity-sub-menu',\r\n label: 'Create new entity: Select a realm',\r\n commands: realms.value.map((realm) => ({\r\n id: `action-new-entity-realm-${realm.workspaceId}`,\r\n label: realm.ownershipType === 'PERSONAL' ? 'My Library' : realm.name,\r\n icon: realm.ownershipType === 'PERSONAL' ? 'i-heroicons-user' : 'i-heroicons-user-group',\r\n click: () => navigateTo(`${commandPaletteStore.getWorkspacePrefix(realm)}/entity/new`),\r\n })),\r\n },\r\n ];\r\n});\r\n\r\nconst actionCommands = computed\u003CCommand[]>(() => {\r\n return [\r\n {\r\n id: 'action-new-entity',\r\n label: 'Create new entity',\r\n icon: 'i-heroicons-document',\r\n submenu: newEntitySubmenuGroup.value,\r\n },\r\n ];\r\n});\r\n\r\nconst navigationCommands: Command[] = [\r\n {\r\n id: 'navigation-home',\r\n label: 'Home',\r\n icon: 'i-heroicons-home',\r\n click: () => navigateTo('/'),\r\n },\r\n {\r\n id: 'navigation-settings',\r\n label: 'Settings',\r\n icon: 'i-heroicons-cog',\r\n click: () => navigateTo('/settings'),\r\n },\r\n {\r\n id: 'navigation-back',\r\n label: 'Go back',\r\n icon: 'i-heroicons-arrow-uturn-left',\r\n click: () => router.back(),\r\n },\r\n];\r\n\r\n\r\nconst commandGroups = computed(() => {\r\n return [\r\n ...commandPaletteGroups.value,\r\n {\r\n key: 'actions',\r\n label: 'Actions',\r\n commands: actionCommands.value.filter((command) => !command.hidden),\r\n },\r\n {\r\n key: 'navigation',\r\n label: 'Navigation',\r\n commands: navigationCommands,\r\n },\r\n ] satisfies Group[];\r\n});\r\n\r\nconst selectedCommandGroups = ref\u003CGroup[]>(commandGroups.value);\r\n\r\nconst commandPaletteMenuHistory = ref\u003CGroup[][]>([commandGroups.value]);\r\n\r\nfunction onCommandSelect(option: Command) {\r\n if (option && option.isSubmenuBackButton) {\r\n commandPaletteMenuHistory.value.pop();\r\n selectedCommandGroups.value = commandPaletteMenuHistory.value[commandPaletteMenuHistory.value.length - 1];\r\n return;\r\n }\r\n\r\n if (option && option.submenu) {\r\n const id = nanoid();\r\n const submenu: Group[] = [\r\n {\r\n key: `submenu-navigation-${id}`,\r\n static: true,\r\n commands: [\r\n {\r\n id: `command-back-${id}`,\r\n label: 'Back',\r\n icon: 'i-heroicons-arrow-left',\r\n isSubmenuBackButton: true,\r\n },\r\n ],\r\n },\r\n ...option.submenu,\r\n ];\r\n commandPaletteMenuHistory.value.push(submenu);\r\n selectedCommandGroups.value = submenu;\r\n\r\n return;\r\n }\r\n\r\n model.value = false;\r\n if (option && option.click) {\r\n option.click();\r\n }\r\n}\r\n\r\nonBeforeMount(async () => {\r\n await commandPaletteStore.loadData();\r\n selectedCommandGroups.value = commandGroups.value;\r\n});\r\n\u003C/script>\r\n\r\n```",[2957,2958],{"name":2905,"color":2906},{"name":2908,"color":2909},2003,"closed","CommandPalette: support submenus","2025-06-13T12:49:44Z","https://github.com/nuxt/ui/issues/2003",0.7068742,{"description":2966,"labels":2967,"number":2971,"owner":2914,"repository":2915,"state":2960,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Description\n\nIn case we need to pass an image URL to any component with icons (for example `Button`), we currently need to use slots when they are available (which is not always the case, for example the input icon of `CommandPalette`). It would be helpful if the `Icon` component could accept an URL and use `#build/ui-image-component` instead.\n\nExample use case: allowing users to upload/set their own icons.\n\n\n\n### Additional context\n\n_No response_",[2968,2969,2970],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},4030,"Allow image url for icons","2025-05-15T14:39:30Z","https://github.com/nuxt/ui/issues/4030",0.7250513,{"description":2977,"labels":2978,"number":2981,"owner":2914,"repository":2982,"state":2960,"title":2983,"updated_at":2984,"url":2985,"score":2986},"This is a nice to have feature, like render.com has:\n\nhttps://volta.s3.fr-par.scw.cloud/Screenshot_2022_04_05_at_14_37_51_8eec9792b4.mp4\n",[2979],{"name":2905,"color":2980},"1ad6ff",266,"nuxt.com","Animation for dropdown avatar","2023-02-15T12:32:02Z","https://github.com/nuxt/nuxt.com/issues/266",0.76339287,{"description":2988,"labels":2989,"number":2981,"owner":2914,"repository":2990,"state":2960,"title":2991,"updated_at":2992,"url":2993,"score":2986},"as suggested by @rchl ",[],"test-utils","[v2] rename toNuxtPluginAdded","2023-12-02T00:18:10Z","https://github.com/nuxt/test-utils/issues/266",{"description":2995,"labels":2996,"number":3004,"owner":2914,"repository":2915,"state":2960,"title":3005,"updated_at":3006,"url":3007,"score":3008},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI have a use case where I'd like this value to be `false`. Would it be possible to make this configurable?\n\n### Additional context\n\nhttps://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue#L30",[2997,2998,2999,3002],{"name":2905,"color":2906},{"name":2911,"color":2912},{"name":3000,"color":3001},"closed-by-bot","ededed",{"name":3003,"color":3001},"stale",2710,"[CommandPalette] Make the `hold` prop of ComboboxOptions configurable","2025-06-18T09:05:43Z","https://github.com/nuxt/ui/issues/2710",0.7676607,{"description":3010,"labels":3011,"number":3015,"owner":2914,"repository":2915,"state":2960,"title":3016,"updated_at":3017,"url":3018,"score":3019},"### Description\n\nThe [popover](https://ui.nuxt.com/components/popover) uses the content of the default slot to create a trigger, but there is no way to provide a custom anchor. A `\u003Ctemplate #anchor>` slot for this purpose would be great.\n\n```html\n\u003CUFormField label=\"name\" name=\"name\">\n \u003CUPopover :open=\"isAutoCompleteOpen\">\n \u003Ctemplate #anchor>\n \u003CUInput v-model=\"state.name\" />\n \u003C/template>\n \u003Ctemplate #content>\n \u003CPlaceholder class=\"size-48 m-4 inline-flex\" />\n \u003C/template>\n \u003C/UPopover>\n\u003C/UFormField>\n```\n\nMy use case is building an autocomplete for a text input. The `InputMenu` is not suitable because the dropdown is too intrusive.\n\n### Additional context\n\n_No response_",[3012,3013,3014],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2911,"color":2912},4013,"Add ability to provide an anchor for the popover","2025-05-22T15:04:18Z","https://github.com/nuxt/ui/issues/4013",0.7689988,["Reactive",3021],{},["Set"],["ShallowReactive",3024],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frFCqZmmLnH6J8srcWHmubqkHbVAgXK4FuS1mSjTmj2M":-1},"/nuxt/ui/3827"]