\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_",[3155,3158,3161],{"name":3156,"color":3157},"enhancement","a2eeef",{"name":3159,"color":3160},"v3","49DCB8",{"name":3162,"color":3163},"triage","ffffff",4782,"ui","Feature Request: Add Header Slot to Accordion Component","2025-08-21T18:07:41Z","https://github.com/nuxt/ui/issues/4782",0.7359419,{"description":3171,"labels":3172,"number":3174,"owner":3146,"repository":3146,"state":3147,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Describe the feature\n\nAdd documentation for Nuxt Components \n\n\n\n\nComparison between Vue template Component and Nuxt Layout Component, there is no documentation for hovering over the element unlike others\n\n### Additional information\n\n- [ ] 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).",[3173],{"name":3143,"color":3144},32330,"Better IDE Docs","2025-06-08T03:26:08Z","https://github.com/nuxt/nuxt/issues/32330",0.73785186,{"description":3180,"labels":3181,"number":3187,"owner":3146,"repository":3165,"state":3147,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://github.com/nuxt-ui-pro/dashboard\nhttps://dashboard-template.nuxt.dev/\n\n### Description\n\nI'm getting the following warning in the console: `Added non-passive event listener to a scroll-blocking 'touchstart' event.`\n\nI'm using a few heavily altered components from the Nuxt UI Pro Dashboard template. I thought it was something I did and started on a reproduction, but you can see the same warning pop up in the template itself, no reproduction needed: https://dashboard-template.nuxt.dev/\n\nI think I have narrowed it down to the `DashboardSideBar`. Removing that component in my project also removes the warning.\n\nI've had no luck trying to fix it, but it might be similar to this bug that was fixed long ago: https://github.com/nuxt/ui/issues/1512\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3182,3185,3186],{"name":3183,"color":3184},"bug","d73a4a",{"name":3159,"color":3160},{"name":3162,"color":3163},4580,"DashboardSideBar: Added non-passive event listener to a scroll-blocking 'touchstart' event.","2025-07-23T16:15:53Z","https://github.com/nuxt/ui/issues/4580",0.7425965,{"description":3193,"labels":3194,"number":3198,"owner":3146,"repository":3165,"state":3199,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### Description\n\nThis is a re-opening of #1484 but for v3. It seems in the transition from v2 to v3, giving the indicators (now \"dots\") ARIA \"tab\" roles was lost. While I did mention it in my original issue, I don't believe my original PR accounted for when multiple items would be displayed at the same time. Perhaps the changes for v3 can take that into account.\n\n### Additional context\n\n_No response_",[3195,3196,3197],{"name":3156,"color":3157},{"name":3159,"color":3160},{"name":3162,"color":3163},4494,"closed","Carousel component could be made more accessible (v3).","2025-07-10T12:18:41Z","https://github.com/nuxt/ui/issues/4494",0.7112884,{"description":3205,"labels":3206,"number":3214,"owner":3146,"repository":3165,"state":3199,"title":3215,"updated_at":3216,"url":3217,"score":3218},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi I would like to have within the component UselectMenu emit the event \"scroll\" \nwith the following properties: \n```\n{\n target: HTMLElement, \n currentTarget: HTMLElement, \n scrollTop: number,\n scrollHeight: number, \n clientHeight: number, \n}\n```\n\n to dynamically remote search items through an api and append it dynamically to my USelectMenu to create an infinite scroll. \n\nThis feature would be great in both version :)\n\n### Additional context\n\n_No response_",[3207,3208,3209,3212],{"name":3156,"color":3157},{"name":3162,"color":3163},{"name":3210,"color":3211},"closed-by-bot","ededed",{"name":3213,"color":3211},"stale",2793,"add an emit \"scroll\" event for USelectMenu","2025-06-18T09:05:29Z","https://github.com/nuxt/ui/issues/2793",0.7235176,{"description":3220,"labels":3221,"number":3226,"owner":3146,"repository":3165,"state":3199,"title":3227,"updated_at":3228,"url":3229,"score":3230},"### 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_",[3222,3223,3224,3225],{"name":3156,"color":3157},{"name":3162,"color":3163},{"name":3210,"color":3211},{"name":3213,"color":3211},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.7268405,{"description":3232,"labels":3233,"number":3237,"owner":3146,"repository":3165,"state":3199,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### Description\n\nhttps://ui.nuxt.com/components/carousel#with-thumbnails\n\nThere are a couple of issues with the current implementation:\n\n1. Swiping via gestures isn't tracked — when switching slides this way, the active thumb doesn't update.\n2. The thumbs list can have more items, so scrolling needs to be handled properly.\n\nHere's my take on fixing both:\n```vue\n\u003Cscript setup lang=\"ts\">\nconst items = [\n 'https://picsum.photos/640/640?random=1',\n 'https://picsum.photos/640/640?random=2',\n 'https://picsum.photos/640/640?random=3',\n 'https://picsum.photos/640/640?random=4',\n 'https://picsum.photos/640/640?random=5',\n 'https://picsum.photos/640/640?random=6',\n 'https://picsum.photos/640/640?random=7',\n 'https://picsum.photos/640/640?random=8',\n 'https://picsum.photos/640/640?random=9',\n 'https://picsum.photos/640/640?random=10',\n]\n\nconst carousel = useTemplateRef('carousel')\nconst thumbCarousel = useTemplateRef('thumbCarousel')\nconst activeIndex = ref(0)\n\nfunction onClickPrev() {\n activeIndex.value--\n}\nfunction onClickNext() {\n activeIndex.value++\n}\n\nfunction onSelect(index: number) {\n activeIndex.value = index\n\n thumbCarousel.value?.emblaApi?.scrollTo(index)\n}\n\nfunction onThumbClick(index: number) {\n carousel.value?.emblaApi?.scrollTo(index)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex-1 w-full\">\n \u003CUCarousel\n ref=\"carousel\"\n v-slot=\"{ item }\"\n arrows\n :items=\"items\"\n :prev=\"{ onClick: onClickPrev }\"\n :next=\"{ onClick: onClickNext }\"\n class=\"w-full max-w-xs mx-auto\"\n >\n \u003Cimg :src=\"item\" width=\"320\" height=\"320\" class=\"rounded-lg\">\n \u003C/UCarousel>\n\n \u003Cdiv class=\"pt-4 max-w-xs mx-auto\">\n \u003CUCarousel\n ref=\"thumbCarousel\"\n v-slot=\"{ item, index }\"\n :items=\"items\"\n class=\"w-full\"\n contain-scroll=\"keepSnaps\"\n drag-free\n :ui=\"{ item: 'basis-auto' }\"\n >\n \u003Cimg\n :src=\"item\"\n width=\"44\"\n height=\"44\"\n class=\"size-11 opacity-25 hover:opacity-100 transition-opacity rounded-lg\"\n :class=\"{ 'opacity-100': activeIndex === index }\"\n alt=\"\"\n @click=\"onThumbClick(index)\"\n >\n \u003C/UCarousel>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_",[3234,3235,3236],{"name":3156,"color":3157},{"name":3159,"color":3160},{"name":3162,"color":3163},4032,"[Carousel] improve thumb example","2025-05-02T09:58:58Z","https://github.com/nuxt/ui/issues/4032",0.72742045,{"description":3243,"labels":3244,"number":3248,"owner":3146,"repository":3165,"state":3199,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### Description\n\nHey guys,\nThanks to your great job :)\n\nI wanna know if has intention to add a Toggle Switch component in nuxt/ui\n\n\n\n\n\n\n### Additional context\n\n_No response_",[3245,3246,3247],{"name":3156,"color":3157},{"name":3159,"color":3160},{"name":3162,"color":3163},4451,"Toggle Switch","2025-07-03T01:48:56Z","https://github.com/nuxt/ui/issues/4451",0.732574,{"description":3254,"labels":3255,"number":3263,"owner":3146,"repository":3165,"state":3199,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Description\n\nI am using the carousel component. Trying to color the dots differently but can't find any documentation on how to achieve this. Is there any doc on the ui property? ",[3256,3259,3260],{"name":3257,"color":3258},"question","d876e3",{"name":3159,"color":3160},{"name":3261,"color":3262},"upstream","78bddb",4372,"Carousel Config Options","2025-06-18T13:56:20Z","https://github.com/nuxt/ui/issues/4372",0.73572755,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1grfQkFwp2fvbQnNnMzAbVBtey2XdRoOfOlbAKO58yk":-1},"/nuxt/ui/2475"]