\n\nUnfortunately, `UButton` and `ULink` doesnt have this feature. Even with the prop `trailingIcon` the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:\n\n```\n\u003CUButton :to=\"externalUrl\" target=\"_blank\">\n \u003Cspan\n >To external provider\u003CIcon\n name=\"i-material-symbols:arrow-outward-rounded\"\n class=\"size-3 align-top opacity-70\"\n />\u003C/span>\n \u003C/UButton>\n```\n\n\u003Cimg width=\"191\" height=\"48\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f89198d7-a64f-4a04-815b-41ddba68c3cc\" />\n\nIt would be great if a button would either automatically add the icon, like `\u003CUNavigationMenu>` does, or would have a prop `externalIcon` that can be set to true.\n\n### Additional context\n\n\n\n_No response_",[3171,3174,3177],{"name":3172,"color":3173},"enhancement","a2eeef",{"name":3175,"color":3176},"v3","49DCB8",{"name":3178,"color":3179},"triage","ffffff",4501,"nuxt","ui","open","Add external icon option to UButton and ULink","2025-10-05T15:27:43Z","https://github.com/nuxt/ui/issues/4501",0.72743034,{"description":3189,"labels":3190,"number":3197,"owner":3181,"repository":3182,"state":3183,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.0.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/quizzical-dust-9h7kfm?file=%2Fapp%2Fapp.vue%3A7%2C8-7%2C25\n\n### Description\n\nUsing `:menu=\"{ ui: { ... } }` to theme slideover has no effect.\n\nIn the sandbox it should be red:\n```\n\u003CUDashboardSidebar :menu=\"{ side: 'right', ui: { overlay: 'bg-black/50', content: 'bg-red-400' } }\">\n```",[3191,3194,3195],{"name":3192,"color":3193},"bug","d73a4a",{"name":3178,"color":3179},{"name":3196,"color":3176},"v4",5179,"UDashboardSidebar menu ui prop has no effect","2025-10-07T17:08:03Z","https://github.com/nuxt/ui/issues/5179",0.73138565,{"description":3203,"labels":3204,"number":3208,"owner":3181,"repository":3182,"state":3183,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Description\n\nHey 👋,\n\nRecently, you add variants, https://ui.nuxt.com/components/card#variant, to Card. Do you think that Modal could have the same?\n\n### Additional context\n\n_No response_",[3205,3206,3207],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4749,"Add variants to Modal component","2025-08-14T18:24:37Z","https://github.com/nuxt/ui/issues/4749",0.73210305,{"description":3214,"labels":3215,"number":3219,"owner":3181,"repository":3182,"state":3183,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Description\n\n\u003Cimg width=\"1132\" height=\"641\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b31830a1-49d8-41e8-bd98-77fa43191d84\" />\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_",[3216,3217,3218],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4782,"Feature Request: Add Header Slot to Accordion Component","2025-08-21T18:07:41Z","https://github.com/nuxt/ui/issues/4782",0.7352515,{"description":3225,"labels":3226,"number":3230,"owner":3181,"repository":3182,"state":3183,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Description\n\n**Title**: Add Descriptions component\n\n**Description**\nThanks to the Nuxt UI team for the great work 🙏. Currently, the library does not provide a component similar to [Descriptions](https://ant.design/components/descriptions-cn).\n\nThis type of component is very common in real-world applications, often used to display descriptive information in pairs, such as user profiles, order details, or configuration parameters. Ant Design’s Descriptions component provides a clean and convenient way to present such data.\n\n**Use Case**\n\n* Add a `Descriptions` component to display data in “label–content” pairs.\n* Support horizontal and vertical layouts.\n* Support configurable column count with automatic wrapping.\n* Allow customization of label and content styles.\n\n**Expected Behavior**\nDevelopers should be able to easily use a Descriptions component, similar to Ant Design, to quickly build data presentation pages.\n\ne.g:\n\n\u003Cimg width=\"1421\" height=\"478\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3f460119-101d-4dea-bb41-055ca77679af\" />\n\n### Additional context\n\n_No response_",[3227,3228,3229],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4788,"[Feature Request] Add Descriptions component","2025-08-19T03:39:55Z","https://github.com/nuxt/ui/issues/4788",0.73692155,{"description":3236,"labels":3237,"number":3238,"owner":3181,"repository":3182,"state":3183,"title":3239,"updated_at":3240,"url":3241,"score":3242},"### Describe the feature\n\nIt would be great if Nuxt UI could provide a built-in, customizable **feature tour / onboarding guide** component. This would allow developers to guide users through key parts of an application with step-by-step tooltips and highlighted elements.\n\n**Motivation**\n\n* Helps improve user onboarding and product discovery.\n* Provides a consistent and reusable UI pattern for walkthroughs across Nuxt projects.\n* Currently, developers must rely on external libraries (e.g., Driver.js, Shepherd.js) or build a custom solution. A Nuxt UI-native solution would integrate seamlessly with existing components and theming.\n\n**Proposed Features**\n\n* Ability to define **steps** with `selector`, `title`, `description`, and `position`.\n* Configurable **highlight styles** (border, shadow, spotlight cut-out).\n* Built-in **navigation controls** (Next, Previous, Finish).\n* Option to scroll to target elements automatically.\n* Theming support with Nuxt UI tokens.\n* Accessibility support (keyboard navigation, ARIA roles).\n\n**Example API (pseudo-code)**\n\n```vue\n\u003CUTour :steps=\"steps\" v-model=\"active\" />\n\n\u003Cscript setup lang=\"ts\">\nconst steps = [\n { selector: '#step1', title: 'Welcome', description: 'This is the first step', position: 'bottom' },\n { selector: '#step2', title: 'Next Feature', description: 'Learn about this one too', position: 'right' }\n]\n\u003C/script>\n```\n\n**Alternatives Considered**\n\n* External libraries like Driver.js or Shepherd.js, but they don’t fit Nuxt UI’s design system and require additional integration effort.\n\n**Additional Context**\nThis would help Nuxt developers deliver a polished onboarding experience without reinventing the wheel.\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).",[],4874,"Interactive Feature Tour Component","2025-09-02T12:21:11Z","https://github.com/nuxt/ui/issues/4874",0.739077,{"description":3244,"labels":3245,"number":3249,"owner":3181,"repository":3182,"state":3183,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### 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_",[3246,3247,3248],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.73907954,{"description":3236,"labels":3255,"number":3259,"owner":3181,"repository":3181,"state":3183,"title":3239,"updated_at":3260,"url":3261,"score":3262},[3256],{"name":3257,"color":3258},"pending triage","E99695",33111,"2025-09-02T09:15:22Z","https://github.com/nuxt/nuxt/issues/33111",0.74067056,{"description":3264,"labels":3265,"number":3269,"owner":3181,"repository":3182,"state":3270,"title":3271,"updated_at":3272,"url":3273,"score":3274},"### Description\n\nAs the title says, I think it would be nice to introduce a prop named `square` (like the one for the `Button` component) to be able to have a squared badge for those times where you have only the `icon` and not a label.\n\nCan I get this assigned? I would like to open a PR about this :)\n\n### Additional context\n\n_No response_",[3266,3267,3268],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},4006,"closed","[Badge] introduce prop `square`","2025-05-13T12:44:24Z","https://github.com/nuxt/ui/issues/4006",0.69404584,{"description":3276,"labels":3277,"number":3281,"owner":3181,"repository":3182,"state":3270,"title":3282,"updated_at":3283,"url":3284,"score":3285},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nIt would be nice if the docs [ThemePicker](https://github.com/nuxt/ui/tree/v4/docs/app/components/theme-picker) component became part of NuxtUI directly. If this is something that would be accepted, I can work on creating a pull request.\n\n### Additional context\n\n_No response_",[3278,3279,3280],{"name":3172,"color":3173},{"name":3178,"color":3179},{"name":3196,"color":3176},4960,"Provide ThemePicker component","2025-09-12T19:45:22Z","https://github.com/nuxt/ui/issues/4960",0.70504254,["Reactive",3287],{},["Set"],["ShallowReactive",3290],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8dABOXhj2_FAJZdDnvOU5atiuqu-fGpuO_chWJbFKko":-1},"/nuxt/ui/5140"]