\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_",[3139,3142,3145],{"name":3140,"color":3141},"enhancement","a2eeef",{"name":3143,"color":3144},"v3","49DCB8",{"name":3146,"color":3147},"triage","ffffff",4782,"nuxt","ui","open","Feature Request: Add Header Slot to Accordion Component","2025-08-21T18:07:41Z","https://github.com/nuxt/ui/issues/4782",0.7798154,{"description":3157,"labels":3158,"number":3162,"owner":3149,"repository":3150,"state":3151,"title":3163,"updated_at":3164,"url":3165,"score":3166},"### Description\n\nHey everyone, I was trying to add a `UTooltip` to a `UColorModeButton`.\n\n```vue\n\u003CUTooltip :delay-duration=\"0\" text=\"Toggle mode\">\n \u003CUColorModeButton :ui=\"{ base: 'text-dimmed hover:text-highlighted' }\" />\n\u003C/UTooltip>\n```\n\nUnfortunately, the tooltip gets pushed to the top-left corner of the viewport. Am I missing something or doing anything incorrectly here?",[3159],{"name":3160,"color":3161},"question","d876e3",4286,"Can UColorModeButton be wrapped in a UTooltip?","2025-06-04T11:52:41Z","https://github.com/nuxt/ui/issues/4286",0.78601736,{"description":3168,"labels":3169,"number":3175,"owner":3149,"repository":3150,"state":3176,"title":3177,"updated_at":3178,"url":3179,"score":3180},"### 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? ",[3170,3171,3172],{"name":3160,"color":3161},{"name":3143,"color":3144},{"name":3173,"color":3174},"upstream","78bddb",4372,"closed","Carousel Config Options","2025-06-18T13:56:20Z","https://github.com/nuxt/ui/issues/4372",0.7421402,{"description":3182,"labels":3183,"number":3186,"owner":3149,"repository":3150,"state":3176,"title":3187,"updated_at":3188,"url":3189,"score":3190},"### Description\n\nI'm wondering how I can style the active dot on the component level through the :ui prop.",[3184,3185],{"name":3160,"color":3161},{"name":3143,"color":3144},4228,"Carousel: Can I style the active dot through the :ui prop?","2025-05-26T15:48:31Z","https://github.com/nuxt/ui/issues/4228",0.7485553,{"description":3192,"labels":3193,"number":3197,"owner":3149,"repository":3150,"state":3176,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### 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_",[3194,3195,3196],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4494,"Carousel component could be made more accessible (v3).","2025-07-10T12:18:41Z","https://github.com/nuxt/ui/issues/4494",0.7497698,{"description":3203,"labels":3204,"number":3208,"owner":3149,"repository":3150,"state":3176,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Description\n\nIt is very non-obvious, how to customize the style of indicator in Tabs and NavigationMenu components.\nI try to change the position of indicator to top of the link when NavigationMenu is in mobile mode (sticked to the bottom of the screen), but can't figure out how to do it.\nAlso try to make the text bold and background highlighted with border around and gradient in Tabs component.\n\n### Additional context\n\n_No response_",[3205,3206,3207],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4591,"Documentation: Styling of indicator in Tabs and NavigationMenu","2025-08-20T08:43:07Z","https://github.com/nuxt/ui/issues/4591",0.7538269,{"description":3214,"labels":3215,"number":3218,"owner":3149,"repository":3150,"state":3176,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### For what version of Nuxt UI are you suggesting this?\n\nv3-alpha\n\n### Description\n\nI was browsing through the v3 carousel docs at https://ui.nuxt.com/components/carousel#props, to see whether the v3 version will have callback events for onPrev and onNext, but didn't find it.\n\nIs this something that would be considered to implement?\n\nAlternatively, the ability to bind to the active item in the carousel, could also work.\n\nWe would use it to display an info text next to the image, and change it depending on which image is active in the carousel.\n\nIf this is something that is already possible, then please let me know how :)",[3216,3217],{"name":3140,"color":3141},{"name":3143,"color":3144},2475,"[v3] `Carousel` feature request: callback methods onPrev & onNext","2024-11-07T14:11:43Z","https://github.com/nuxt/ui/issues/2475",0.7685536,{"description":3224,"labels":3225,"number":3230,"owner":3149,"repository":3150,"state":3176,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Environment\n\n- Nuxt Version: `3.17.6`\n- Nuxt UI Version: `3.2.0`\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\n- Visit the Tabs component documentation page\n- Observe the indicator animation on page load when change component page and going back to the tab page\n- Compare with the playground implementation\n- Notice the difference in initial positioning behavior\n\n### Description\n\nThe Tabs component's indicator animation behaves differently between the documentation site and the playground, causing a visual inconsistency in the user experience.\n\n**Expected Behavior**\nThe indicator should be properly positioned on the active tab from the initial render, as demonstrated in the playground.\n\n**Actual Behavior**\nIn the documentation, the indicator starts from position zero (left edge) and slides to the correct position, creating an unwanted animation on page load.\n\n### Additional context\n\nWe started to understand how it happens by logging `--reka-tabs-indicator-[variable]` where Tabs is used.\n\n```js\nonMounted(() => {\n const el = document.querySelector('[data-reka-collection-item][data-orientation]')?.previousElementSibling\n console.log(el.style.getPropertyValue('--reka-tabs-indicator-size'), el.style.getPropertyValue('--reka-tabs-indicator-position')) // 0px 0px \n})\n```",[3226,3229],{"name":3227,"color":3228},"bug","d73a4a",{"name":3143,"color":3144},4491,"[Tabs] Indicator animation inconsistency","2025-07-31T04:27:20Z","https://github.com/nuxt/ui/issues/4491",0.7708929,{"description":3236,"labels":3237,"number":3244,"owner":3149,"repository":3150,"state":3176,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Description\n\nIt would be beneficial to introduce a fixed number of image indicators, such as 5, for displaying multiple images within a container. Currently, if there are 20 images spanning the full width of the container, 20 indicators are displayed, which can clutter the UI. Instead, displaying only 5 indicators would enhance clarity and user experience. The functionality would work in such a way that, when navigating through the images, the indicator would remain on the third position until reaching the penultimate image, at which point the indicator would move to the penultimate position. This behavior is similar to the one observed in Airbnb's product photos, serving as a practical example of how it enhances navigation and visual appeal.\r\n\r\n\n\n### Additional context\n\n_No response_",[3238,3239,3242],{"name":3140,"color":3141},{"name":3240,"color":3241},"closed-by-bot","ededed",{"name":3243,"color":3241},"stale",1918,"Carousel indicators for multiple images","2025-06-19T02:12:19Z","https://github.com/nuxt/ui/issues/1918",0.77528936,{"description":3250,"labels":3251,"number":3257,"owner":3149,"repository":3150,"state":3176,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Environment\n\nOperating System: Windows_NT\nNode Version: v20.18.0\nNuxt Version: -\nCLI Version: 3.14.0\nNitro Version: -\nPackage Manager: unknown\nBuilder: -\nUser Config: -\nRuntime Modules: -\nBuild Modules: -\n\n### Version\n\nv3.0.0-alpha.6\n\n### Reproduction\n\nCannot use v3 on stackblitz so no repo.\n\n### Description\n\nThere are two things. \n**First: even though the route detection thus the active highlight works when default(no config or when clicking only) but not when using 'v-model' or 'defaultValue'. Tried the code in docs, it only works when item has children. So NavigationMenu doesn't act like a nav menu but just a normal menu.**\n\n```\nconst links = [\n [\n {\n label: t(\"nav.home\"),\n icon: \"ph:house\",\n to: \"/\",\n },\n {\n label: t(\"nav.products\"),\n icon: \"solar:box-linear\",\n to: \"/vendor/products\",\n },\n {\n label: t(\"nav.orders\"),\n icon: \"solar:clipboard-list-linear\",\n to: \"/vendor/orders\",\n },\n ],\n];\n\n\nconst activeItem = '1'\n```\n```\n \u003CUNavigationMenu\n v-model=\"activeItem\"\n orientation=\"vertical\"\n :items=\"links\"\n color=\"neutral\"\n :ui=\"{ link: 'py-2' }\"\n />\n```\n\n\nSecond: It would be better the route detection works for sub routes too. For example a route link should be active not just for /products but also for /products/new, products/g300gk-l2210j etc...\n\n### Additional context\nhttps://ui3.nuxt.dev/components/navigation-menu#control-active-item\n\n### Logs\n\n_No response_",[3252,3253,3256],{"name":3227,"color":3228},{"name":3254,"color":3255},"needs reproduction","CB47CF",{"name":3143,"color":3144},2360,"[NavigationMenu] Active item logic broken","2024-10-11T09:56:55Z","https://github.com/nuxt/ui/issues/2360",0.7793518,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fApeShQt2KuWNroEqItJ_dw9U3wkVBcsE7gk2Cp5dGxw":-1},"/nuxt/ui/1410"]