\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).",[3171],{"name":3172,"color":3173},"pending triage","E99695",33111,"nuxt","open","Interactive Feature Tour Component","2025-09-02T09:15:22Z","https://github.com/nuxt/nuxt/issues/33111",0.74342614,{"description":3169,"labels":3182,"number":3183,"owner":3175,"repository":3184,"state":3176,"title":3177,"updated_at":3185,"url":3186,"score":3187},[],4874,"ui","2025-09-02T12:21:11Z","https://github.com/nuxt/ui/issues/4874",0.74486375,{"description":3189,"labels":3190,"number":3197,"owner":3175,"repository":3175,"state":3176,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Describe the feature\n\nSometimes you need to have multiple components in the `app.vue` file, or as close to the root element as possible. For example, if you have multiple modals that must be present not only on every page, but also on every layout (dialogs, cookie notice, etc) or any other interface resource and you must add each one manually somewhere in the `app.vue` file.\r\n\r\nI think it would be nice to have a directory for \"universal\" components that Nuxt detects and automatically injects into the root element. This would perfectly follow the philosophy of the framework to improve the DX as much as possible.\r\n\r\nAn example of how it would be now and how it could be:\r\n\r\n```vue\r\n// ~/app.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtLayout>\r\n \u003CNuxtPage />\r\n \u003C/NuxtLayout>\r\n \u003C!-- universal components -->\r\n \u003CMenuDialog />\r\n \u003CLanguageDialog />\r\n \u003CColorModeDialog />\r\n \u003CBackdrop />\r\n \u003C!-- etc -->\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nOr you could just move those components to a directory called `~/components/universal` (for example) and Nuxt would take care of injecting them automatically.\n\n### Additional information\n\n- [X] 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).",[3191,3194],{"name":3192,"color":3193},"enhancement","8DEF37",{"name":3195,"color":3196},"discussion","538de2",19492,"Components automatically injected into the root element","2024-06-30T11:09:20Z","https://github.com/nuxt/nuxt/issues/19492",0.7450134,{"description":3203,"labels":3204,"number":3213,"owner":3175,"repository":3184,"state":3176,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### 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_",[3205,3207,3210],{"name":3192,"color":3206},"a2eeef",{"name":3208,"color":3209},"v3","49DCB8",{"name":3211,"color":3212},"triage","ffffff",4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.75262916,{"description":3219,"labels":3220,"number":3225,"owner":3175,"repository":3184,"state":3226,"title":3227,"updated_at":3228,"url":3229,"score":3230},"### Package\n\nv4.x\n\n### Description\n\nIf there is need to restyle any part of a component using the `:ui` prop (using myself as refreence) i will have to check the part using my browser devtools -> identify it -> check documentation -> then try to match the classess to the classes on the theme section to identify the key value of the part in the ui theme.\n\ni am suggesting an attribute be added to the building blocks of the compnents to identify them without having to swutch to docs all the time like for example \n\n```html\n```\n\n### Additional context\n\n_No response_",[3221,3222,3223],{"name":3192,"color":3206},{"name":3211,"color":3212},{"name":3224,"color":3209},"v4",5164,"closed","Ease identification of components building blocks","2025-10-06T18:10:40Z","https://github.com/nuxt/ui/issues/5164",0.5476681,{"description":3232,"labels":3233,"number":3237,"owner":3175,"repository":3184,"state":3226,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\n## Why?\nQR codes are widely used in scenarios such as \"sharing links\", \"payment codes\", \"event tickets\", and \"product information\" in enterprise projects (e.g., e-commerce, admin systems, marketing pages). \n\nCurrently, Nuxt UI users need to manually integrate third-party libraries (e.g., `qrcode.vue`, `vue-qrcode-reader`) to implement QR code functions, which has the following pain points:\n- Lack of consistency with Nuxt UI's design system (e.g., theme colors, rounded corners, responsive adaptation).\n- Need to handle compatibility issues between third-party libraries and Nuxt 3 (e.g., SSR support, tree-shaking).\n- No built-in accessibility support (e.g., screen reader prompts, keyboard navigation for QR code download).\n\nAdding an official QRCode component can reduce user development costs and ensure consistency with the Nuxt UI ecosystem.\n\n### Additional context\n\n## What?\n### Basic Features (Must-have)\n- [x] Support dynamic content binding (e.g., bind `value` prop to generate QR code for links/texts like `https://nuxt.com`).\n- [x] Support size customization (via `size` prop, e.g., `size=\"128\"` for 128x128px, default to `160`).\n- [x] Support color customization (via `foregroundColor`/`backgroundColor` props, default to Nuxt UI's `--color-primary` and `--color-background` to fit the theme).\n- [x] Support error correction level (via `errorCorrectionLevel` prop, options: `L`/`M`/`Q`/`H`, default to `M` for common scenarios).\n- [x] SSR compatibility (ensure no client-side only errors when rendering on the server).\n- [x] Basic accessibility (add `aria-label` to describe the QR code content, e.g., \"QR code for Nuxt official website: https://nuxt.com\").\n\n### Advanced Features (Nice-to-have)\n- [ ] Support logo embedding (via `logo` prop, accept image URL; `logoSize` prop to control logo ratio, default to 15% of QR code size).\n- [ ] Support QR code download (built-in `download` method or `showDownloadButton` prop to display a default button, consistent with Nuxt UI's Button component style).\n- [ ] Support border customization (via `borderSize`/`borderColor` props, default to `0` for no border).\n- [ ] Support dark/light mode adaptation (automatically switch `foregroundColor` when color mode changes, if not manually set).\n\n## How?\n### API Design (Proposed)\n| Prop | Type | Default | Description |\n|---------------------|-----------|---------------|----------------------------------------------|\n| `value` | `string` | `required` | The content to generate QR code (e.g., link, text). |\n| `size` | `number` | `160` | QR code size (width = height, unit: px). |\n| `foregroundColor` | `string` | `--color-primary` | QR code block color (supports Tailwind class or hex/rgb). |\n| `backgroundColor` | `string` | `--color-background` | QR code background color. |\n| `errorCorrectionLevel` | `string` | `M` | Error correction level: `L`(7%), `M`(15%), `Q`(25%), `H`(30%). |\n| `logo` | `string` | `undefined` | Logo image URL (if provided, embed in the center). |\n| `logoSize` | `number` | `15` | Logo size ratio (15 = 15% of QR code size). |\n| `showDownloadButton`| `boolean` | `false` | Whether to show a default download button. |\n| `downloadName` | `string` | `qrcode` | File name when downloading (without extension). |\n\n### Usage Example (Pseudo-code)\n```vue\n\u003Ctemplate>\n \u003C!-- Basic usage -->\n \u003CUQRCode \n value=\"https://nuxt.com/ui\" \n size=\"200\"\n aria-label=\"QR code for Nuxt UI official website: https://nuxt.com/ui\"\n />\n\n \u003C!-- With logo and download button -->\n \u003CUQRCode \n value=\"https://github.com/nuxt/ui\"\n logo=\"https://nuxt.com/favicon.ico\"\n logoSize=\"20\"\n showDownloadButton\n downloadName=\"nuxt-ui-qrcode\"\n />\n\u003C/template>",[3234,3235,3236],{"name":3192,"color":3206},{"name":3211,"color":3212},{"name":3224,"color":3209},4932,"[Component Request] Add QRCode component (support customization & accessibility)","2025-09-09T15:06:36Z","https://github.com/nuxt/ui/issues/4932",0.73056364,{"labels":3243,"number":3250,"owner":3175,"repository":3175,"state":3226,"title":3251,"updated_at":3252,"url":3253,"score":3254},[3244,3247],{"name":3245,"color":3246},"documentation","5319e7",{"name":3248,"color":3249},"3.x","29bc7f",11968,"docs: explain component name resolution","2023-01-19T16:03:39Z","https://github.com/nuxt/nuxt/issues/11968",0.73931116,{"description":3256,"labels":3257,"number":3261,"owner":3175,"repository":3184,"state":3226,"title":3262,"updated_at":3263,"url":3264,"score":3265},"### Description\n\nI’d like to import Zod schemas for all built-in Nuxt UI components from the `@nuxt/ui` package so that my frontmatter validation in `content.config.ts` is accurate, DRY, and immediately usable.\n\n**Use case**\n\n- **Accurate frontmatter validation** for Nuxt Studio\n Pull in ready-to-use schemas for:\n\n - **Enums** like button `variant` or `color`\n - **Common elements** such as `Image`\n - **Complex components** like `PageSection`\n\n**Alternatives considered**\n\n* Manually recreating every enum, element, and component shape in custom Zod files (error-prone and high maintenance).\n *See a manual example here:*\n [https://github.com/nuxt-ui-pro/saas/blob/main/content.config.ts](https://github.com/nuxt-ui-pro/saas/blob/main/content.config.ts)\n\n**Proposed solution**\n\n- Publish each component’s Zod schema under `@nuxt/ui/schemas/{ComponentName}.ts` (e.g. `@nuxt/ui/schemas/PageSection.ts`)\n- Provide a barrel file for easy imports:\n\n ```ts\n import {\n colorEnum \n createImageSchema,\n createLinkSchema,\n createPageSectionSchema,\n } from '@nuxt/ui'\n ```\n\n### Additional context\n\n_No response_",[3258,3259,3260],{"name":3192,"color":3206},{"name":3208,"color":3209},{"name":3211,"color":3212},4161,"Export Zod schemas for Nuxt UI component props for use in content.config.ts","2025-05-28T13:02:08Z","https://github.com/nuxt/ui/issues/4161",0.74531996,{"description":3267,"labels":3268,"number":3273,"owner":3175,"repository":3184,"state":3226,"title":3274,"updated_at":3275,"url":3276,"score":3277},"### Description\n\nHi. I have a quick question, just to understand this better. \n\nWhy components `ui` prop has deferent object structure? \n\nCouple examples:\n\n* **Button**\n `{ base?: ClassNameValue; ... }`\n\n* **Input**\n `{ root?: ClassNameValue; base?: ClassNameValue; }`\n\n* **Form**, **Link**, etc.\n no `ui` prop at all\n\nI'm asking, cause there's no way to define common type (object) for the custom `ui` classes definition.\n\nThanks in advance.\n\n\n\n",[3269,3272],{"name":3270,"color":3271},"question","d876e3",{"name":3208,"color":3209},4235,"`ui` prop structure inconsistency","2025-05-27T17:39:19Z","https://github.com/nuxt/ui/issues/4235",0.75190055,{"description":3279,"labels":3280,"number":3287,"owner":3175,"repository":3175,"state":3226,"title":3288,"updated_at":3289,"url":3290,"score":3291},"### Describe the feature\n\nA component to render it slot only during dev would be useful in some cases.\r\n\r\nThe content should be tree shaken during build\n\n### Additional information\n\n- [X] 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://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[3281,3282,3283,3284],{"name":3192,"color":3193},{"name":3195,"color":3196},{"name":3248,"color":3249},{"name":3285,"color":3286},"🍰 p2-nice-to-have","0E8A16",15066,"Add `DevOnly` component","2023-01-19T17:44:35Z","https://github.com/nuxt/nuxt/issues/15066",0.7519564,["Reactive",3293],{},["Set"],["ShallowReactive",3296],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fEAudOSPnpQ8u5WfQA9eHbCcXr0P6ojcSxBw-e_XnDCE":-1},"/nuxt/ui/5165"]