\n\n\n## Summary\nI would like to request the addition of a `header` slot to the Accordion component in Nuxt UI. This would provide more flexibility for customizing the accordion header content beyond the current available slots.\n\n## Current Behavior\nThe Accordion component currently supports the following slots:\n- `body`\n- `content` \n- `default`\n- `leading`\n- `trailing`\n\n## Proposed Enhancement\nAdd a new `header` slot that allows developers to completely customize the header content of each accordion item.\n\n## Use Case\nI need to display additional information in the accordion title when it's in a collapsed state. The current slots (`leading`, `trailing`) provide some customization, but a dedicated `header` slot would allow for more complex layouts and better control over the entire header area.\n\nFor example, I want to show:\n- Custom formatted titles\n- Additional metadata or status indicators\n- Complex layouts that go beyond simple leading/trailing elements\n\n## Implementation Suggestion\nMy idea is to position the `header` slot **below the existing header area** as a supplementary display zone. This would:\n- Preserve the current header functionality (title, leading/trailing slots, toggle button)\n- Add an additional customizable area underneath for extra information\n- Maintain visual hierarchy while providing more space for content\n\n## Expected API\n```vue\n\u003CUAccordion :items=\"items\">\n\u003Ctemplate #header=\"{ item, index, open }\">\n \u003Cdiv class=\"supplementary-header-info\">\n \u003Cspan class=\"status-badge\">{{ item.status }}\u003C/span>\n \u003Cp class=\"description\">{{ item.summary }}\u003C/p>\n \u003C/div>\n\u003C/template>\n\u003C/UAccordion>\n```\n\n**Visual Layout:**\n```\n┌─────────────────────────────────────┐\n│ [Leading] Title Text [Trailing] ▼│ ← Existing header\n├─────────────────────────────────────┤\n│ Custom Header Slot Content │ ← New header slot\n└─────────────────────────────────────┘\n```\n\n## Benefits\n1. **Enhanced Flexibility**: Developers can create more sophisticated header layouts\n2. **Better UX**: Ability to show contextual information when accordion items are collapsed\n3. **Consistency**: Aligns with the existing slot-based architecture of other Nuxt UI components\n4. **Backward Compatibility**: Would not break existing implementations\n5. **Non-intrusive**: Positioned below existing header, maintaining current functionality\n\n## Additional Context\nThis feature would be particularly useful for:\n- Dashboard interfaces where accordion headers need to show status information\n- Form sections that display validation states in headers\n- Data tables collapsed into accordion format with summary information\n- Preview content or metadata display without expanding the full accordion\n\nThank you for considering this enhancement!\n\n### Additional context\n\n_No response_",[3157,3158,3159],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4782,"Feature Request: Add Header Slot to Accordion Component","2025-08-21T18:07:41Z","https://github.com/nuxt/ui/issues/4782",0.71501315,{"description":3166,"labels":3167,"number":3170,"owner":3147,"repository":3148,"state":3149,"title":3171,"updated_at":3172,"url":3173,"score":3174},"### Description\n\nDear Contributors,\n\nNuxtUI has been a great help in my app development. Thank you very much.\n\nI would like to request the addition of a new feature. I would appreciate your consideration.\n\n\nCommon search engines provide a search bar with a suggestion feature.\nSelecting a keyword from the provided suggestions is optional; if a user does not select a suggestion, the content they have entered takes precedence.\n\nHowever, the current InputMenu specifications automatically select the first item on the list if the user doesn't make a selection, overwriting the user's input with that value.\nIt would be useful if there were a feature that limited the overwriting of user input to only cases where the user explicitly selects an item from the list.\n\nThank you.\n\n### Additional context\n\n_No response_",[3168,3169],{"name":3138,"color":3139},{"name":3144,"color":3145},4717,"InputMenu want to selection to optional","2025-08-12T05:38:55Z","https://github.com/nuxt/ui/issues/4717",0.72885203,{"description":3176,"labels":3177,"number":3181,"owner":3147,"repository":3148,"state":3149,"title":3182,"updated_at":3183,"url":3184,"score":3185},"### Description\n\nOptions in `SelectMenu` might need a description below the title e.g. like the watch dropdown on github:\n\n\u003Cimg width=\"362\" height=\"378\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/78093701-742b-49ad-8b60-e26435a3bca5\" />\n\nIt can be worked around using `item-label` slot, but it would be nice if developer can use `items` props only to implement it for simpler way.\n\nBelow, I have tried to create it using Reka UI `combobox` component, the component used by SelectMenu.\n\n\u003Cimg width=\"329\" height=\"460\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e5cda771-3f8e-4369-bb3b-d5159f84d425\" />\n\n### Additional context\n\n_No response_",[3178,3179,3180],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4661,"SelectMenu: add description props to show text below title","2025-08-06T02:19:32Z","https://github.com/nuxt/ui/issues/4661",0.736639,{"description":3187,"labels":3188,"number":3192,"owner":3147,"repository":3147,"state":3149,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### Describe the feature\n\nI feel as though the following feature requests should be considered for NuxtTime.\n\n- Default slot to allow for customizing how the time is displayed, while re-using the logic. For example, use with [Numberflow](https://number-flow.barvian.me/vue)\n- Additionally/Alternatively extract the logic into composable like useTime(new Date(), {...config})\n- Refresh relative time at an interval. For example, 5 mins ago would update to 6 mins ago\n- Compact appearance for relative time formatting. Example: instead of \"5 days ago\" show \"5d\"\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3189],{"name":3190,"color":3191},"discussion","538de2",32478,"allow reactive updated relative time in `\u003CNuxtTime>`","2025-08-06T09:25:07Z","https://github.com/nuxt/nuxt/issues/32478",0.746549,{"description":3198,"labels":3199,"number":3204,"owner":3147,"repository":3148,"state":3149,"title":3205,"updated_at":3206,"url":3207,"score":3208},"### Description\n\nDiscovering **Nuxt UI** and **Nuxt UI Pro** has been one of the highlights of 2024 for me. These libraries have saved me countless hours while delivering polished, tested, and consistent components that elevate the aesthetic and functional quality of my projects. I admire the exceptional work being done by @benjamincanac and the team, particularly with the ambitious mission of rewriting the library to embrace both TailwindCSS v4 and Reka UI within Nuxt UI v3.\n\nOne of the standout features in v3 has been the integration of **TanStack Tables** into the `UTable` component, adding to tables many new features and possibilities. However, after some usage in real-world scenarios, I’ve noticed a gap: a wider variety of input components.\n\nI know that v3 is still in alpha, but I’d like to propose a new initiative for a future release, which I’m calling \"**The Inputs Update**\". This RFP could focus on identifying and implementing input components that would further enhance the library’s usability and versatility.\n\nAdditionally, this aligns with a prior suggestion to categorize form-related components separately within the documentation (#3019).\n\n## New Components\n\n- [ ] **`UInputCurrency`**\nWhile `UInputNumber` provides basic formatting options, a dedicated `UInputCurrency` component would offer enhanced functionality for handling monetary inputs, especially in scenarios requiring localized formatting.\n\n _Related: #1704_\n\n- [ ] **`UInputColor`**\nCurrently, there is an [example](https://ui3.nuxt.dev/getting-started#as-a-color-chooser) in `UColorPicker`, but it feels verbose and lacks certain key features, such as a text input for users to paste HEX or RGB values. \u003Cbr>\u003Cimg width=\"168\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3c11e311-aaa0-4db1-995f-80b15f04ceb7\" />\n\n- [ ] **`UInputEditor`**\nSince Reka UI lacks a native editor component, I recommend integrating a third-party solution like [Quill](https://quilljs.com) or [TipTap](https://tiptap.dev) (which already offers Nuxt/Vue support). Although previously dismissed by the author, this feature remains highly requested by the community. \u003Cbr>\u003Cimg width=\"1009\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4862e9e8-4769-4bd3-a40e-bc89cea5d1a1\" />\n_Related: #2698, #1889, #791_\n\n- [ ] **`UInputTime`**\nImplement the `TimeField` component from Reka UI, this component could support single and range-based time selection.\n_Related: #3089, #3969, #4634_ \u003Cbr>\u003Cimg width=\"175\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e338f95-eae3-4ef8-81cc-b3db28553b4e\" />\n\n- [ ] **`UInputDate`**\nImplementation of Reka UI’s `DatePicker` and `DateRangePicker`. \u003Cbr>\u003Cimg width=\"608\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fcae5c2d-50ed-4b8b-ac89-b3272626fd48\" />\n_Related: #2524, #2873_\n\n- [ ] **`UInputDateTime`**\nA hybrid component combining `UInputDate` and `UInputTime` for scenarios requiring both date and time inputs. \u003Cbr>\u003Cimg width=\"303\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2372467f-ca86-44a0-9667-6dc3ffa43247\" />\n\n- [ ] **`UInputMonth`**\nIdeal for cases where users need to select a combination of month and year. \u003Cbr>\u003Cimg width=\"249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7ee72087-0d58-47ca-b0f7-b5c239148d91\" />\n\n- [ ] **`UInputYear`**\nA simpler component for year-only selection. \u003Cbr>\u003Cimg width=\"247\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a841c974-43b7-42a1-ac3c-7fb42e85fafc\" />\n\n- [ ] **`UInputMask`**\nMasked inputs are indispensable for formatting fields like postal codes or national IDs. I suggest leveraging [Vue The Mask](https://github.com/vuejs-tips/vue-the-mask) for implementation. \u003Cbr>\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b2a3150f-a29e-40ad-96c1-32a63b3bd9ac\" />\n_Related: #1303, #510_\n\n- [ ] **`UInputPhone`**\nA phone input with internationalization support, much like `LocaleSelect` (which already displays flags and country names). The [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) library could serve as the foundation. \u003Cbr>\u003Cimg width=\"312\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/893a1bf3-130c-49da-b41e-8ebf468569a4\" />\n_Related: #2815_\n\n## Updates to Existing Components\n\n- [ ] **`UPinInput → UInputPin`**\nRename the existing `UPinInput` component to align with the naming convention used across other input components.\n\n- [ ] **`UInput / UTextarea`**\nAdd a native character counter via a `counter` property, configurable using the `min` and/or `max` attributes. Currently, there is an [example](https://ui3.nuxt.dev/components/input#with-character-limit) for this functionality, but a native implementation would improve the developer experience.\n\n### Additional context\n\n_No response_",[3200,3203],{"name":3201,"color":3202},"feature","A27AF6",{"name":3141,"color":3142},3094,"[RFP] The Inputs Update","2025-07-31T02:45:34Z","https://github.com/nuxt/ui/issues/3094",0.75163925,{"description":3210,"labels":3211,"number":3215,"owner":3147,"repository":3148,"state":3216,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Description\n\nAt the moment InputNumber does not react in any way to the presence of ButtonGroup.\n\n\n\n### Additional context\n\n_No response_",[3212,3213,3214],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4155,"closed","InputNumber ButtonGroup support","2025-05-15T12:30:59Z","https://github.com/nuxt/ui/issues/4155",0.71276116,{"description":3222,"labels":3223,"number":3231,"owner":3147,"repository":3148,"state":3216,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nTo control the rows of the table, I need a slot for them. For instance, if I want to implement a reorder feature using drag and drop, I require a \u003Ctr> element to loop through.\n\n### Additional context\n\n_No response_",[3224,3225,3226,3229],{"name":3138,"color":3139},{"name":3144,"color":3145},{"name":3227,"color":3228},"closed-by-bot","ededed",{"name":3230,"color":3228},"stale",2685,"[UTable] Add the functionality to include a slot for all \u003Ctr> elements, as well as a 'default' slot.","2025-06-18T09:05:45Z","https://github.com/nuxt/ui/issues/2685",0.73296446,{"description":3237,"labels":3238,"number":3241,"owner":3147,"repository":3148,"state":3216,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Description\n\nI saw that some components (like `Modal` or `Slideover`) have the \"trigger\" fully replaceable, meanwhile others like `Select` and `SelectMenu` cannot be fully replaced. Because of that, introducing another slot to replace the entire trigger would be nice imho. But I would define it as the default slot, not a named one (like `trigger` or something else) to remain consistent with the modal/slideover one.\nThe problem is that it would introduce a breaking change, so I don't know what is the way you want to proceed.\nWhat do you think about this?\nMentioning @sandros94 as I talked about this with him on Discord.\n\n### Additional context\n\nTo have a look on this, I did some changes in a branch in my fork: \u003Chttps://github.com/nuxt/ui/compare/v3...zAlweNy26:nuxt-ui:feat/select-trigger>",[3239,3240],{"name":3138,"color":3139},{"name":3141,"color":3142},4009,"Standardize trigger slot in components","2025-05-10T17:57:56Z","https://github.com/nuxt/ui/issues/4009",0.73783,{"description":3247,"labels":3248,"number":3251,"owner":3147,"repository":3148,"state":3216,"title":3252,"updated_at":3253,"url":3254,"score":3255},"### Description\n\nIn InputNumber, the props used for the Increment and Decrement button are not passed to their slots, this causes difficulty in attempting to access those props in the case functionality needs to be added/overridden, but aesthetics (or ARIA) want to be maintained.\n\nThe increment button is an example of this, whereby `incrementIcon`, `color`, `size`, the translation, and the v-bind props for the button aren't passed to the slot. Thus, to access them again, code needs to be duplicated in order to recompute these properties, and defeats the purpose of DRY code. https://github.com/nuxt/ui/blob/f761369888c49fd0ee0f028dcf3c55dd5fbd2cae/src/runtime/components/InputNumber.vue#L176-L185\n\nA possible, simple solution might look like this (using scoped slots):\n```vue\n \u003Cslot name=\"increment\" :icon=\"incrementIcon\" :color=\"color\" :size=\"size\" :aria-label=\"t('inputNumber.increment')\" variant=\"link\" :bind=\"typeof increment === 'object' ? increment : undefined\"> \n \u003CUButton \n :icon=\"incrementIcon\" \n :color=\"color\" \n :size=\"size\" \n variant=\"link\" \n :aria-label=\"t('inputNumber.increment')\" \n v-bind=\"typeof increment === 'object' ? increment : undefined\" \n /> \n \u003C/slot> \n```\n\n### Additional context\n\nI believe this is common throughout the library, and was wondering to post this issue or not given that there might already be a specific reason. But alas, I couldn't find one in the issues.\n\ncc, from #4411",[3249,3250],{"name":3138,"color":3139},{"name":3141,"color":3142},4435,"InputNumber increment/decrement button props not being passed to their respective slots","2025-08-17T13:50:25Z","https://github.com/nuxt/ui/issues/4435",0.7400953,["Reactive",3257],{},["Set"],["ShallowReactive",3260],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOwLi3wOx4FmpvkIRgildWuYHnKueS7H6Ea3CbMyUoWw":-1},"/nuxt/ui/4201"]