\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_",[3145,3148,3151],{"name":3146,"color":3147},"enhancement","a2eeef",{"name":3149,"color":3150},"v3","49DCB8",{"name":3152,"color":3153},"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.7279334,{"description":3163,"labels":3164,"number":3170,"owner":3155,"repository":3156,"state":3157,"title":3171,"updated_at":3172,"url":3173,"score":3174},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.1\n\n### Reproduction\n\n1. Visit https://codesandbox.io/p/devbox/6d3y5v\n2. Observe that the input trigger does not have bg-error set even when defined inside of app.config.ts\n\n### Description\n\nUnability to override default styles of Select's base slot using app.config.ts, most likely due to the way the base slot is implemented as a function or perhaps something with the `defuFn` used in https://github.com/nuxt/ui/blob/v4/src/theme/select.ts, it works fine when I override it in `compoundVariants`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3165,3168,3169],{"name":3166,"color":3167},"bug","d73a4a",{"name":3149,"color":3150},{"name":3152,"color":3153},4891,"Select unable to override base theme slot","2025-09-05T06:06:32Z","https://github.com/nuxt/ui/issues/4891",0.7283436,{"description":3176,"labels":3177,"number":3185,"owner":3155,"repository":3156,"state":3157,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nHello everyone, I’d like to discuss the possibility of setting `props` by default from `AppConfig`. Currently, it’s very convenient that we can configure the theme through the config. It would be great to have a similar option for props. Previously, @benjamincanac mentioned [here](https://github.com/nuxt/ui/issues/1289#issuecomment-2480556540) that this is not currently planned.\n\nMy proposal is simple: wrap all `withDefaults` in our own implementation. This way, we can define props without making significant changes to the code.\n\n## What it could look like\n\nLet’s look at the `Accordion.vue` component. At the moment, its props look like this:\n```ts\nconst props = withDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n type: 'single',\n collapsible: true,\n labelKey: 'label'\n})\n```\nLet’s assume our wrapper is called `withUiDefaults`. Then the code would look like this:\n```diff\n-const props = withDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n+const props = withUiDefaults(defineProps\u003CAccordionProps\u003CT>>(), {\n type: 'single',\n collapsible: true,\n labelKey: 'label'\n})\n```\nThe implementation of `withUiDefaults` is quite simple:\n```ts\nfunction withUiDefaults(props, defaults) {\n const defaultFromConfig = {}\n\n return withDefaults(props, {\n ...defaults,\n ...defaultFromConfig\n })\n}\n``` \n\n## Issues I See\n\n1) **Typing `AppConfig` might be challenging** \n We would need to somehow generate types based on the components. \n **My opinion:** I think we can retrieve this using `vue-component-meta` during the UI build stage. So, in my opinion, this isn’t a significant problem.\n\n2) **Developers might set `modelValue` or other critical props by default** \n **My opinion:** In such cases, we can log a warning to the console. Additionally, developers should understand which props they are overriding. We won’t be able to cover all edge cases, but I don’t think we need to.\n\n### Additional context\n\n_No response_",[3178,3179,3180,3183],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3181,"color":3182},"closed-by-bot","ededed",{"name":3184,"color":3182},"stale",2662,"Override default props from `AppConfig`","2025-07-03T08:46:07Z","https://github.com/nuxt/ui/issues/2662",0.7468715,{"description":3191,"labels":3192,"number":3196,"owner":3155,"repository":3156,"state":3197,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### 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_",[3193,3194,3195],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},4013,"closed","Add ability to provide an anchor for the popover","2025-05-22T15:04:18Z","https://github.com/nuxt/ui/issues/4013",0.7043686,{"description":3203,"labels":3204,"number":3211,"owner":3155,"repository":3156,"state":3197,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Description\n\nHey! Thanks for trying to make nuxt/ui even more awesome.\n\nI've been struggled with adding NavigationMenu items animation on toggling collapsed of/off states. \nI'd like to make it work smoothly and keep only icons with popovers in collapsed state and show the rest only when collapsed is off. out of the box its only toggled on/off without transitions.\nI see no option to pass slot to wrap labels with vue Transition component or use Motion-vue and either css animations like data-[collaped=true]:animate.... not working well because whole inner content of nav is wrapped with \"v-if\" and switched on collapsed. \n\nIn some components data-[state] animations works well, but not in collapsed NavigationMenu. Or am I doing something wrong?\nOnly a way I see is to override whole item slot. But for now I've just get rid of NavigationMenu and made my own custom component with fancy transitions.\nPlease point me to right direction and suggest best practices, cuz I'd like to use most of components and make it work with smooth transitions/animations, but sometimes got stucked with limitations/lack of knowledge. \n\nofftop: For example, wasted many hours trying to achieve smooth slide-down transition for table expanded rows. Ended up with expanded slot with UCollapsible plus exclusive inner state for it, changed with setTimeout(() => { ... }, 300), Ugly, hucky, but it works.",[3205,3208,3209,3210],{"name":3206,"color":3207},"question","d876e3",{"name":3149,"color":3150},{"name":3181,"color":3182},{"name":3184,"color":3182},4254,"NavigationMenu transitions/animations on toggle collapsed state","2025-08-20T02:08:33Z","https://github.com/nuxt/ui/issues/4254",0.7299467,{"description":3217,"labels":3218,"number":3221,"owner":3155,"repository":3156,"state":3197,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Environment\n\n.\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\nGo to https://ui3.nuxt.dev/getting-started and change the theme to dark and the neutral color to neutral.\n\n### Description\n\nI just entered the site and had the preference to see the docs with neutral colors and in dark mode and now seems that the last update on the docs brokes the dark mode with neutral color. I tested it in multiple browsers and looks the same.\n\n### Additional context\n\nhttps://github.com/user-attachments/assets/f79b85ea-a40a-4f97-9c81-f36735d1eebb\n\n### Logs\n\n```shell-script\n\n```",[3219,3220],{"name":3166,"color":3167},{"name":3149,"color":3150},3399,"Dark mode with neutral color seems to be broken in the v3 UI docs","2025-03-22T15:51:05Z","https://github.com/nuxt/ui/issues/3399",0.73209625,{"description":3227,"labels":3228,"number":3232,"owner":3155,"repository":3156,"state":3197,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Environment\n\nWindows 11,\nNode v20.19.0\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.12\n\n### Reproduction\n\ntabs: {\n slots: {\n root: 'flex items-center gap-2',\n list: 'relative **flex-none** p-1 px-0 group',\n indicator: 'absolute transition-[translate,width] duration-200',\n trigger: [\n 'group relative inline-flex items-center min-w-0 data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75',\n 'transition-colors'\n ],\n content: 'focus:outline-none w-full',\n leadingIcon: 'shrink-0',\n leadingAvatar: 'shrink-0',\n leadingAvatarSize: '',\n label: 'truncate'\n },\n\n### Description\n\nFor me it's working great with Nuxt UI to overwrite \"normal\" styles in the app.config.ts, but if I try to overwrite the component standard flex with flex-none it's not working, it is still flex. Any ideas how to solve or is it a bug?\n\nThanks\n\nChristoph \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3229,3230,3231],{"name":3166,"color":3167},{"name":3149,"color":3150},{"name":3152,"color":3153},4156,"UTabs cannot overwrite flex to flex-none","2025-05-15T15:32:49Z","https://github.com/nuxt/ui/issues/4156",0.7342158,{"description":3238,"labels":3239,"number":3242,"owner":3155,"repository":3156,"state":3197,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### 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>",[3240,3241],{"name":3146,"color":3147},{"name":3149,"color":3150},4009,"Standardize trigger slot in components","2025-05-10T17:57:56Z","https://github.com/nuxt/ui/issues/4009",0.734482,{"description":3248,"labels":3249,"number":3253,"owner":3155,"repository":3155,"state":3197,"title":3254,"updated_at":3255,"url":3256,"score":3257},"Tell me what I'm doing wrong. I want to trigger the event of one button, by clicking on another\r\n\r\n**logo.vue**\r\n```\r\n\u003Ctemplate>\r\n \u003Cb-button @click=\"trigger\">click\u003C/b-button>\r\n\u003C/template>\r\n```\r\n```\r\n\u003Cscript>\r\nexport default {\r\n data () {\r\n....\r\n },\r\n methods: {\r\n trigger () {\r\n \t this.$refs.click_template.click()\r\n }\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n-------------------------------------------------------------------------\r\n**index.vue**\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"fullpage-container\">\r\n \u003Cdiv class=\"page-home\">\r\n \u003Cdiv class=\"button-group\">\r\n \u003Cb-button-group vertical>\r\n \u003Cb-button type=\"button\" v-bind:class=\"[{active:index ==0}]\" @click=\"moveTo(2)\" \r\nref=\"click_template\">\r\n button\r\n \u003C/b-button>\r\n \u003C/b-button-group>\r\n \u003C/div>\r\n \u003Cdiv class=\"fullpage-wp\" v-fullpage=\"opts\" ref=\"example\">\r\n ...\r\n \u003Cdiv class=\"page\">\r\n \u003Clogo v-animate=\"{value: 'bounceInLeft'}\">\u003C/logo>\r\n \u003C/div>\r\n \u003Cdiv class=\"page\">\r\n \u003Cpricelist v-animate=\"{value: 'bounceInTop'}\">\u003C/pricelist>\r\n \u003C/div>\r\n ...\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n```\r\n\u003Cscript>\r\nimport Logo from '~/components/Logo.vue'\r\nimport pricelist from '~/components/Pricelist.vue'\r\n\r\nexport default {\r\n data () {\r\n var that = this\r\n return {\r\n index: 0,\r\n opts: {\r\n start: 0,\r\n dir: 'v',\r\n duration: 500,\r\n beforeChange: function (prev, next) {\r\n that.index = next\r\n },\r\n afterChange: function (prev, next) {\r\n }\r\n }\r\n }\r\n },\r\n methods: {\r\n moveTo (index) {\r\n this.$refs.fullpage.$fullpage.moveTo(index, true)\r\n }\r\n },\r\n components: {\r\n Logo,\r\n pricelist,\r\n ...\r\n }\r\n}\r\n\u003C/script>\r\n```\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/c1390\">#c1390\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3250],{"name":3251,"color":3252},"2.x","d4c5f9",1560," initiate a click in the plugin vue-fullpage","2023-01-18T15:41:58Z","https://github.com/nuxt/nuxt/issues/1560",0.74116987,{"description":3259,"labels":3260,"number":3264,"owner":3155,"repository":3156,"state":3197,"title":3265,"updated_at":3266,"url":3267,"score":3268},"### Description\r\n\r\n## Description\r\nI have a logic in my dropdown menu to hide certain item.\r\nBut I can't find a property in this component that can do this. And `v-if` and `v-show` do not solve the issue here. \r\n\r\nUsing `v-if` would make it rendered as a default item.\r\nWrapping the item in template with `v-show` would cause an empty item being shown.\r\n\r\nThe only solution I think of right now is to modify the items passed into the dropdown component.\r\nI want to know if there's a way to do this without touching the items being passed in.\r\n```vue\r\n\u003CUDropdown :items=\"items\">\r\n \u003C!-- item login would be rendered as 'Default items slot' if user is false` -->\r\n \u003Ctemplate #login>\r\n \u003Cdiv\r\n v-if=\"!user\"\r\n >\r\n Login\r\n \u003C/div>\r\n \u003C/template>\r\n \u003C!-- item user would be an empty item if user is false -->\r\n \u003Ctemplate #user>\r\n \u003Cdiv\r\n v-show=\"!user\"\r\n >\r\n Login\r\n \u003C/div>\r\n \u003C/template>\r\n \u003Ctemplate #item>\r\n Default items slot\r\n \u003C/template>\r\n\u003C/UDropdown>\r\n```",[3261,3262,3263],{"name":3206,"color":3207},{"name":3181,"color":3182},{"name":3184,"color":3182},1803,"Hide item in dropdown","2025-06-19T02:12:28Z","https://github.com/nuxt/ui/issues/1803",0.7428061,["Reactive",3270],{},["Set"],["ShallowReactive",3273],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fuNKK0eTVihII-eSY4nkzK0hSQD1VBmPua8OczZSVfRc":-1},"/nuxt/ui/3455"]