\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.75582147,{"description":3157,"labels":3158,"number":3163,"owner":3149,"repository":3150,"state":3151,"title":3164,"updated_at":3165,"url":3166,"score":3167},"### Description\n\nHey guys is it possible to have a dark or colorful header with nuxtui while maintaining a light theme for the rest of the page? Even when setting a \"dark\" on UHeader does not really work they way i wanted it to work.\n\nso instead \"bg-default/75\" i wanted to use \"bg-primary\" (which might resolve to any of the theme roller primary colors).\n\nIf someone experienced / solved it i would be happy to get in contact",[3159,3162],{"name":3160,"color":3161},"question","d876e3",{"name":3143,"color":3144},4500,"dark header in a light theme","2025-07-10T13:23:32Z","https://github.com/nuxt/ui/issues/4500",0.76627713,{"description":3169,"labels":3170,"number":3173,"owner":3149,"repository":3150,"state":3151,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nHi 👋🏻 \n\nI was using `PageHeader` component and I wanted to heavily customize it for my starter-kit. For this I have to write the same class with media query variant to ensure that existing class doesn't apply to my customized component.\n\nE.g. I wanted to reduce the font size of the heading and for that I had to write same class twice:\n```js\npageHeader: {\n slots: {\n title: 'text-xl sm:text-xl',\n },\n},\n```\n\nIt'll be easy if we can provide a way to replace current classes entirely via something like this:\n```js\npageHeader: {\n slots: {\n title: (existingClasses) => 'text-xl font-bold text-pretty',\n },\n},\n```\n\nWith this user can completely omit the existing style and apply our own style. This wasn’t particularly relevant to components, but as we ship block-like components, it becomes relevant to customize them heavily and override the existing style.\n\n### Additional context\n\n_No response_",[3171,3172],{"name":3140,"color":3141},{"name":3146,"color":3147},4953,"🎨 Allow replacing all UI classes with new set of classes?","2025-09-12T05:23:47Z","https://github.com/nuxt/ui/issues/4953",0.76727295,{"description":3179,"labels":3180,"number":3183,"owner":3149,"repository":3150,"state":3151,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Description\n\nWhen adding `UButton` component with `ghost` or `link` variant inside a `UBanner` with `links` attribute, they remain displayed in black text, even if the banner has a dark background (e.g., primary color). Unlike the Banner close button, which has specific Tailwind classes that adapt it to dark mode (white text), these elements do not automatically adjust their colors.\n\n\n\n```html\n \u003CUBanner to=\"/guide-gouvernance-associative-crise\" icon=\"i-ph-books-duotone\" title=\"Guide Gouvernance Associative\" :actions=\"[{label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'ghost', size: 'md', trailingIcon: 'i-ph-arrow-right'}, {label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'link', size: 'md'}]\" close />\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[3181,3182],{"name":3140,"color":3141},{"name":3143,"color":3144},3307,"Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-08-25T13:20:01Z","https://github.com/nuxt/ui/issues/3307",0.76805925,{"description":3189,"labels":3190,"number":3194,"owner":3149,"repository":3150,"state":3151,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### 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_",[3191,3192,3193],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.76811624,{"description":3200,"labels":3201,"number":3204,"owner":3149,"repository":3150,"state":3205,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Description\n\nCan the width of the modal be customized? Currently, I set it globally through the `app\\assets\\css\\main.css` file. However, if I only want to modify the width of a single component, I can't find the place to do it. I tried adding `w-[1000px]` to `UModal`, but it didn't work.\n\n\n\n\n",[3202,3203],{"name":3160,"color":3161},{"name":3143,"color":3144},3041,"closed","Can the width of the modal be customized?","2025-01-08T09:31:14Z","https://github.com/nuxt/ui/issues/3041",0.72951746,{"description":3211,"labels":3212,"number":3215,"owner":3149,"repository":3150,"state":3205,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### Description\n\nIs it possible to use a UForm within a UModal, but have the submit button in the modal's footer? I tried to wrap the whole modal with no success:\n\n```vue\n\u003Ctemplate>\n \u003CUForm :schema=\"userCreateSchema\" :state @submit=\"onSubmit\">\n \u003CUModal title=\"Create user\">\n \u003Ctemplate #body>\n \u003CUFormField label=\"First name\" name=\"givenName\" required>\n \u003CUInput v-model=\"state.givenName\" />\n \u003C/UFormField>\n\n \u003CUFormField label=\"Last name\" name=\"familyName\" required>\n \u003CUInput v-model=\"state.familyName\" />\n \u003C/UFormField>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CUButton label=\"Save\" type=\"submit\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UForm>\n\u003C/template>\n```",[3213,3214],{"name":3160,"color":3161},{"name":3143,"color":3144},4401,"How to use a UForm within a UModal with footer?","2025-08-21T09:37:27Z","https://github.com/nuxt/ui/issues/4401",0.74578536,{"description":3221,"labels":3222,"number":3228,"owner":3149,"repository":3150,"state":3205,"title":3229,"updated_at":3230,"url":3231,"score":3232},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.8`\n- Nuxt Version: `-`\n- CLI Version: `3.25.1`\n- Nitro Version: `-`\n- Package Manager: `npm@10.8.2`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/modal-close-not-working-kc99r3\n\n### Description\n\nThe scoped slots `content`, `header`, `body` and `footer` in UModal are supposed to receive an object containing a close-method, as per [the docs](https://ui.nuxt.com/components/modal#slots). They do not; only an empty object is received. Due to this, the Cancel-button from the [footer-example](https://ui.nuxt.com/components/modal#with-footer-slot) in the docs does not work. Inexplicably, the example in the docs works 🤔\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3223,3226,3227],{"name":3224,"color":3225},"bug","d73a4a",{"name":3143,"color":3144},{"name":3146,"color":3147},4266,"Modal content, header, body and footer slots not receiving the close method","2025-06-01T06:07:09Z","https://github.com/nuxt/ui/issues/4266",0.74915725,{"description":3234,"labels":3235,"number":3244,"owner":3149,"repository":3150,"state":3205,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Description\n\nHello 👋,\n\nI'm building a dashboard and I often need to put a table in a modal. Currently, I have to manually change the style of the modal and the table to match perfectly.\n\nSee this example: https://stackblitz.com/edit/github-2aatsynx?file=app%2Fpages%2Findex.vue\n\nTo solve this, I have to solution in mind:\n\n1. props to change the table and modal class;\n2. injection key to tell the table that it is in a modal.\n\nTo be honest, I don't like the second one as it removes a lot of flexibility.\n\nThe first one will introduce some new variants to all customization globally which is better than the current manual customization. For a Modal component, a new `table` (or `body-padding` or something even more generic but used to remove the padding from the body) props and a `modal` props for the table to align the internal padding.\n\nMaybe there is more solutions to this!\n\n### Additional context\n\n_No response_",[3236,3237,3238,3239,3242],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},{"name":3240,"color":3241},"closed-by-bot","ededed",{"name":3243,"color":3241},"stale",4366,"Simplify table usage in modals","2025-08-31T02:09:23Z","https://github.com/nuxt/ui/issues/4366",0.7503323,{"description":3250,"labels":3251,"number":3258,"owner":3149,"repository":3149,"state":3205,"title":3259,"updated_at":3260,"url":3261,"score":3262},"Hello, I need some help here. \r\n\r\nI'm using Nuxt js with Storefront Ui components and I got this error.\r\n\r\n**vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: \u003CSfHeader> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.\r\n\r\nfound in**\r\n\r\n---> \u003CHeader> at components/Header.vue\r\n \u003CLayouts/default.vue> at layouts/default.vue\r\n \u003CRoot>\r\n\r\ncomponents- Header.js\r\n```\r\n\u003Ctemplate>\r\n \u003CSfHeader\r\n :title=\"title\"\r\n :active-icon=\"activeIcon\"\r\n :search-placeholder=\"searchPlaceholder\"\r\n :search-value=\"searchValue\"\r\n :cart-icon=\"cartIcon\"\r\n :wishlist-icon=\"wishlistIcon\"\r\n :is-sticky=\"isSticky\"\r\n :account-icon=\"accountIcon\"\r\n :cart-items-qty=\"cartItemsQty\"\r\n :wishlist-items-qty=\"wishlistItemsQty\"\r\n @click:cart=\"alert('@click:cart')\"\r\n @click:wishlist=\"alert('@click:wishlist')\"\r\n @click:account=\"alert('@click:account')\"\r\n @change:search=\"searchValue = $event\"\r\n >\r\n \u003Ctemplate #navigation>\r\n \u003CSfHeaderNavigationItem v-for=\"item in navigation\" :key=\"item\">\r\n \u003Ctemplate slot=\"desktop-navigation-item\">\r\n \u003CSfLink href=\"#\">{{ item }}\u003C/SfLink>\r\n \u003C/template>\r\n \u003C/SfHeaderNavigationItem>\r\n \u003C/template>\r\n \u003C/SfHeader>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport { SfHeader, SfLink } from \"@storefront-ui/vue\";\r\n\r\nexport default {\r\n name: 'Header',\r\n components: {\r\n SfHeader,\r\n SfLink,\r\n },\r\n data() {\r\n return {\r\n isMobile: false,\r\n navigation: [\"women\", \"man\", \"kids\"],\r\n searchValue: \"\",\r\n title: \"\",\r\n activeIcon: \"account\",\r\n isSticky: true,\r\n searchPlaceholder: \"Search for items\",\r\n cartIcon: \"empty_cart\",\r\n wishlistIcon: \"heart\",\r\n accountIcon: \"profile\",\r\n cartItemsQty: \"0\",\r\n wishlistItemsQty: \"0\",\r\n };\r\n }\r\n};\r\n\u003C/script>\r\n```\r\n\r\nand in layout folder I have default file \r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CHeader />\r\n \u003CNuxt />\r\n \u003CFooter/>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport Footer from \"~/components/Footer\";\r\nimport Header from \"~/components/Header\";\r\n\r\nexport default {\r\n components: {\r\n Footer,\r\n Header\r\n }\r\n}\r\n\u003C/script>\r\n\r\n\u003Cstyle>\r\n body {\r\n margin: 0;\r\n }\r\n\u003C/style>\r\n```\r\n\r\n\r\n \"@nuxt/typescript-runtime\": \"^2.0.0\",\r\n \"@nuxtjs/axios\": \"^5.12.5\",\r\n \"@storefront-ui/vue\": \"^0.9.1\",\r\n \"axios\": \"^0.21.1\",\r\n \"core-js\": \"^3.6.5\",\r\n \"js-cookie\": \"^2.2.1\",\r\n \"nuxt\": \"^2.14.6\"",[3252,3255],{"name":3253,"color":3254},"pending triage","E99695",{"name":3256,"color":3257},"2.x","d4c5f9",8643,"Unknown custom element: \u003CSfHeader> - did you register the component correctly?","2023-01-22T15:38:40Z","https://github.com/nuxt/nuxt/issues/8643",0.75569665,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fumvZWL4LPAAnAuTOaezYs7ZKfwTvRAVhg-gM8WQkDAU":-1},"/nuxt/ui/3372"]