\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).",[3158],{"name":3159,"color":3160},"pending triage","E99695",33111,"nuxt","open","Interactive Feature Tour Component","2025-09-02T09:15:22Z","https://github.com/nuxt/nuxt/issues/33111",0.77012324,{"description":3156,"labels":3169,"number":3170,"owner":3162,"repository":3171,"state":3163,"title":3164,"updated_at":3172,"url":3173,"score":3174},[],4874,"ui","2025-09-02T12:21:11Z","https://github.com/nuxt/ui/issues/4874",0.7733095,{"description":3176,"labels":3177,"number":3187,"owner":3162,"repository":3171,"state":3163,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### Description\n\nUsing `\u003CUNavigationMenu>` it adds an external icon when prop `to` is an external link: \n\n\u003Cimg width=\"196\" height=\"69\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e7417d54-ca16-48c2-9992-a54a9bed764d\" />\n\nUnfortunately, `UButton` 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_",[3178,3181,3184],{"name":3179,"color":3180},"enhancement","a2eeef",{"name":3182,"color":3183},"v3","49DCB8",{"name":3185,"color":3186},"triage","ffffff",4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.79077274,{"description":3193,"labels":3194,"number":3203,"owner":3162,"repository":3162,"state":3163,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### Describe the feature\n\nIt would be nice if you could show something like an animated image when reloading the code like Next js does. \r\n\r\nUnfortunately, the device from which you'd be working on is the one that gets its view refreshed and not the other devices like Next js. Please add these features. \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).",[3195,3197,3200],{"name":3179,"color":3196},"8DEF37",{"name":3198,"color":3199},"dx","C39D69",{"name":3201,"color":3202},"🍰 p2-nice-to-have","0E8A16",21422,"HMR Spinner & Devices ","2024-06-30T11:08:38Z","https://github.com/nuxt/nuxt/issues/21422",0.7962544,{"description":3209,"labels":3210,"number":3213,"owner":3162,"repository":3171,"state":3163,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### Description\n\n### Feature Request: Add `variant` and `status-position` props to `UProgress` component\n\n#### Description\nI’m a junior developer, and I’ve been working on enhancing the flexibility of the `Progress` component by adding two new props: `variant` and `status-position`. These props allow for better customization, especially when using the `Progress` component in different design contexts.\n\n- **`variant`**: This prop allows you to choose between two styles for the progress bar: `linear` and `circular`. The `circular` variant provides a circular progress bar instead of the default linear style.\n \n- **`status-position`**: This prop controls the position of the progress status (the percentage or label) relative to the progress bar. The possible values are:\n - `inside`: The status is displayed inside the circle (for the `circular` variant).\n - `outside`: The status is displayed outside the circle.\n\n#### Motivation\nThis update would help in using the `Progress` component more flexibly across different layouts, providing options for both linear and circular progress indicators with customizable label placements.\n\n#### What I've Done\nI’m still a junior developer, so the implementation is not perfect, but a good portion of the work is done. I’ve added the `variant` and `status-position` props to the `Progress` component. I’d love to know if this is something you’d like to integrate into the main repository and whether I can open a pull request for it.\n\n#### Additional Notes\n- The `variant` prop accepts values `linear` or `circular`.\n- The `status-position` prop accepts values `inside` or `outside`.\n \nWould love to hear your thoughts on this approach!\n\n\n### Additional context\n\n[Reka UI : Progress Circular](https://reka-ui.com/examples/progress-circular)",[3211,3212],{"name":3179,"color":3180},{"name":3182,"color":3183},3728,"[UProgress]: Add `variant` and `status-position` props","2025-08-06T13:48:03Z","https://github.com/nuxt/ui/issues/3728",0.7969172,{"description":3219,"labels":3220,"number":3223,"owner":3162,"repository":3171,"state":3163,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Description\n\nThis is a follow up to this: https://github.com/nuxt/ui/issues/4498\n\nI'm using NuxtUi and not the NuxtJS framework (inertiajs), and I would to do something like this:\n\n```js\n{\n icon: {\n provider: 'server', // \u003C-- own server here\n customCollections: [\n {\n prefix: 'my-icon',\n dir: './assets/my-icons'\n },\n ],\n },\n}\n```\n\nThe original bug report suggests workaround that aren't that plug-and-play. For example, it may be possible to use an Laravel instance that pushes the icon-set to S3, and nuxt-ui using the S3-instance (e.g. https://s3.example.org/icons/) as a base for the icon collection(s).\n\n### Additional context\n\n_No response_",[3221,3222],{"name":3179,"color":3180},{"name":3185,"color":3186},4541,"Custom Icon server path","2025-07-16T14:22:40Z","https://github.com/nuxt/ui/issues/4541",0.7987581,{"description":3229,"labels":3230,"number":3234,"owner":3162,"repository":3171,"state":3235,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Description\n\nIn the Stepper Component, it could be good if we add a `tag: { type: String, default: 'h3' }` props in `const props = defineProps({ ... }) `\nCurrently, it's a h4 by default and we cannot switch for a h3. \n\n### Additional context\n\n_No response_",[3231,3232,3233],{"name":3179,"color":3180},{"name":3182,"color":3183},{"name":3185,"color":3186},4096,"closed","Add tag props - Stepper Component","2025-05-10T15:59:29Z","https://github.com/nuxt/ui/issues/4096",0.73314476,{"labels":3241,"number":3246,"owner":3162,"repository":3162,"state":3235,"title":3247,"updated_at":3248,"url":3249,"score":3250},[3242,3243],{"name":3179,"color":3196},{"name":3244,"color":3245},"2.x","d4c5f9",8811,"Add classes to loading to customize nuxt-progress bar","2023-01-22T17:08:38Z","https://github.com/nuxt/nuxt/issues/8811",0.757438,{"description":3252,"labels":3253,"number":3257,"owner":3162,"repository":3171,"state":3235,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Description\n\nHi there. We are moving our app to NuxtUI and we are loving it so far! Really appreciative of all your hard work on this amazing package. Our stack is NuxtUI+Inertia+Rails.\n\nI spent part of my weekend digging into UIcon and Iconify. Pardon my ignorance if I've missed something obvious, I'm new to this part of the ecosystem... I thought it would be useful to put some thoughts in here and collect what I've learned.\n\n1. UIcon/Iconify always load icons from the network (`api.iconify.design`)\n2. It's not really possible to use NuxtUI without relying heavily on UIcon/Iconify due to various icon attributes in the components.\n3. I know unplug-icons and Nuxt have some support for bundled icons, but they don't apply if you are using Nuxt UI standalone.\n\nSee #4167 and others\n\nWe want to bundle our icons to avoid a dependency on api.iconify.design. I ended up writing a script that scanned our app for icon names and builds a custom `icons.json` file. I put some custom icons in there too using `@iconify/tools`... `icons.json` can be loaded into iconify with `addCollection()`. In dev I also warn on missing icons via `setCustomIconsLoader()`.\n\nDoes that sound correct? Are there solutions I'm missing?? I'd be happy to contribute doc updates or whatever if that would be helpful.\n\nThanks again!\n\n### Additional context\n\n_No response_",[3254,3255,3256],{"name":3179,"color":3180},{"name":3182,"color":3183},{"name":3185,"color":3186},4481,"thoughts on UIcon/Iconify","2025-07-10T09:59:29Z","https://github.com/nuxt/ui/issues/4481",0.7786262,{"description":3263,"labels":3264,"number":646,"owner":3162,"repository":3265,"state":3235,"title":3266,"updated_at":3267,"url":3268,"score":3269},"Font awesome supports tags that animate the icon\r\n\r\nspin & pulse are some examples.\r\n\r\nAnyway we can support these?\r\n\r\nThanks\r\n",[],"icon","spin, pulse, or other animations","2022-12-19T15:51:29Z","https://github.com/nuxt/icon/issues/7",0.77880937,["Reactive",3271],{},["Set"],["ShallowReactive",3274],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f5oDubnGtTniL6jJzj7eoBKiV2XLqnX_W8Zy2_FH_5MQ":-1},"/nuxt/ui/4059"]