\n\n- [ ] **`UInputEditor`**\nSince Reka UI lacks a native editor component, I recommend integrating a third-party solution like [Quill](https://quilljs.com) or [TipTap](https://tiptap.dev) (which already offers Nuxt/Vue support). Although previously dismissed by the author, this feature remains highly requested by the community. \u003Cbr>\u003Cimg width=\"1009\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4862e9e8-4769-4bd3-a40e-bc89cea5d1a1\" />\n_Related: #2698, #1889, #791_\n\n- [ ] **`UInputTime`**\nImplement the `TimeField` component from Reka UI, this component could support single and range-based time selection.\n_Related: #3089, #3969, #4634_ \u003Cbr>\u003Cimg width=\"175\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e338f95-eae3-4ef8-81cc-b3db28553b4e\" />\n\n- [ ] **`UInputDate`**\nImplementation of Reka UI’s `DatePicker` and `DateRangePicker`. \u003Cbr>\u003Cimg width=\"608\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fcae5c2d-50ed-4b8b-ac89-b3272626fd48\" />\n_Related: #2524, #2873_\n\n- [ ] **`UInputDateTime`**\nA hybrid component combining `UInputDate` and `UInputTime` for scenarios requiring both date and time inputs. \u003Cbr>\u003Cimg width=\"303\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2372467f-ca86-44a0-9667-6dc3ffa43247\" />\n\n- [ ] **`UInputMonth`**\nIdeal for cases where users need to select a combination of month and year. \u003Cbr>\u003Cimg width=\"249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7ee72087-0d58-47ca-b0f7-b5c239148d91\" />\n\n- [ ] **`UInputYear`**\nA simpler component for year-only selection. \u003Cbr>\u003Cimg width=\"247\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a841c974-43b7-42a1-ac3c-7fb42e85fafc\" />\n\n- [ ] **`UInputMask`**\nMasked inputs are indispensable for formatting fields like postal codes or national IDs. I suggest leveraging [Vue The Mask](https://github.com/vuejs-tips/vue-the-mask) for implementation. \u003Cbr>\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b2a3150f-a29e-40ad-96c1-32a63b3bd9ac\" />\n_Related: #1303, #510_\n\n- [ ] **`UInputPhone`**\nA phone input with internationalization support, much like `LocaleSelect` (which already displays flags and country names). The [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) library could serve as the foundation. \u003Cbr>\u003Cimg width=\"312\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/893a1bf3-130c-49da-b41e-8ebf468569a4\" />\n_Related: #2815_\n\n## Updates to Existing Components\n\n- [ ] **`UPinInput → UInputPin`**\nRename the existing `UPinInput` component to align with the naming convention used across other input components.\n\n- [ ] **`UInput / UTextarea`**\nAdd a native character counter via a `counter` property, configurable using the `min` and/or `max` attributes. Currently, there is an [example](https://ui3.nuxt.dev/components/input#with-character-limit) for this functionality, but a native implementation would improve the developer experience.\n\n### Additional context\n\n_No response_",[3137,3140],{"name":3138,"color":3139},"feature","A27AF6",{"name":3141,"color":3142},"v3","49DCB8",3094,"nuxt","ui","open","[RFP] The Inputs Update","2025-07-31T02:45:34Z","https://github.com/nuxt/ui/issues/3094",0.6879422,{"description":3152,"labels":3153,"number":3161,"owner":3144,"repository":3145,"state":3146,"title":3162,"updated_at":3163,"url":3164,"score":3165},"### 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_",[3154,3157,3158],{"name":3155,"color":3156},"enhancement","a2eeef",{"name":3141,"color":3142},{"name":3159,"color":3160},"triage","ffffff",4782,"Feature Request: Add Header Slot to Accordion Component","2025-08-21T18:07:41Z","https://github.com/nuxt/ui/issues/4782",0.7022063,{"description":3167,"labels":3168,"number":3169,"owner":3144,"repository":3145,"state":3146,"title":3170,"updated_at":3171,"url":3172,"score":3173},"### 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.70514536,{"description":3167,"labels":3175,"number":3179,"owner":3144,"repository":3144,"state":3146,"title":3170,"updated_at":3180,"url":3181,"score":3182},[3176],{"name":3177,"color":3178},"pending triage","E99695",33111,"2025-09-02T09:15:22Z","https://github.com/nuxt/nuxt/issues/33111",0.7068561,{"description":3184,"labels":3185,"number":3187,"owner":3144,"repository":3144,"state":3146,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.9.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.5.0`\n- Builder: `-`\n- User Config: `ssr`, `devtools`, `compatibilityDate`, `css`, `app`, `modules`, `runtimeConfig`, `vite`, `vueQuery`, `ui`, `icon`, `elementPlus`\n- Runtime Modules: `@nuxt/eslint@1.2.0`, `@nuxt/icon@1.11.0`, `@nuxt/scripts@0.11.2`, `@nuxt/test-utils@3.17.2`, `@nuxt/ui@3.0.2`, `@element-plus/nuxt@1.1.1`, `@hebilicious/vue-query-nuxt@0.3.0`, `@vueuse/nuxt@13.0.0`\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/purple-worker-q927r2?workspaceId=ws_Nd6bGHokakFXXgZBfRPLsD\n\n### Describe the bug\n\n**Steps to Reproduce:**\n\n1. Open the reproduction link.\n2. Click on 'page 2' at the top to navigate to the page2 page.\n3. The loading animation will not disappear.\n\nThe code logic of the page2 page is to call the `fetchData` function when the page is opened, while setting `loading` to true and then setting it to false within a short period.\n\nThis bug is triggered when a Nuxt page uses a transition with the mode set to `out-in`. Specifically, when the component's props change rapidly, the code related to DOM operations does not correctly handle the state of the props, resulting in abnormal component display.\n\nWorkaround:\n\n1. Set the mode to a value other than `out-in`.\n2. Wrap the component using `v-loading` with a `\u003CClientOnly>` component.\n3. Call `fetchData` within the `onMounted` callback.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```\n\nEdit: pick right words",[3186],{"name":3177,"color":3178},31613,"page transtion with fast props change","2025-04-02T03:30:33Z","https://github.com/nuxt/nuxt/issues/31613",0.7136912,{"description":3193,"labels":3194,"number":3196,"owner":3144,"repository":3144,"state":3146,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.17.0`\n- Nuxt Version: `4.0.3`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `pnpm@10.12.1`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Reproduction\n\nVue SSR (correct order): https://stackblitz.com/edit/github-ifxk7hsj?file=src/components/BlueSquare.vue,src/pages/Home.vue\n\nVue (correct order in dev mode): https://stackblitz.com/edit/vitejs-vite-h4thdsyp?file=src/components/BlueSquare.vue,src/App.vue&terminal=dev\n\nNuxt (wrong order in prod): https://stackblitz.com/edit/github-ristas3f-hetgu6mm?file=app%2Fcomponents%2FBlueSquare.vue,app%2Fapp.vue\n\n### Describe the bug\n\nThis is a follow-up on:\n- https://github.com/nuxt/nuxt/issues/25229\n- https://github.com/nuxt/nuxt/issues/23785\n\nThe styles are now correctly ordered in the `entry.css` file, but the rendered `\u003Cstyle>` tags are not.\nStyles from the parent component should always have a higher priority _(in the case of equal specificity - be defined later)_ than the styles from children.\n\nCurrently, after the `entry.css` file loads, the correct styles get applied, however, **while the css file is loading**, the styles are broken due to the rendered `\u003Cstyle>` tags being ordered incorrectly. This can cause layout shifts / flashes / etc.\n\n\n```vue\n// CHILD\n\u003Ctemplate>\n \u003Cdiv class=\"blue\" />\n\u003C/template>\n\n\u003Cstyle scoped>\n.blue { background-color: blue; }\n\u003C/style>\n```\n\n```vue\n// PARENT\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBlueSquare class=\"red\" />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.red { background-color: red; }\n\u003C/style>\n```\n\nBoth plain Vue and Vue with SSR have the correct order:\n\n**Vue**\n\u003Cimg width=\"714\" height=\"163\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fa26e7f4-3f89-4bae-b0b1-1fd19f383a02\" />\n\n**Vue SSR**\n\u003Cimg width=\"601\" height=\"190\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e1dc7cc-4b32-4ccc-957c-dd207b7a836d\" />\n\n\nBut in Nuxt, the order is incorrect when built:\n\n**Nuxt**\n\u003Cimg width=\"596\" height=\"85\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/62458e07-886e-4c0b-b569-db6e08805f35\" />\n\n\n---\n\n\nIs this Nuxt related or not?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3195],{"name":3177,"color":3178},33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.7168347,{"description":3202,"labels":3203,"number":3206,"owner":3144,"repository":3145,"state":3207,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nTo simplify customization and ensure visual consistency across projects, it would be useful to add a configuration option to define `defaultVariants` globally or for specific component types. These variants could include default size, color, and variant properties for all components or specific ones like buttons, button groups, and form fields. \n\n### Proposal: \n1. Introduce a `defaultVariants` field in the Nuxt configuration to: \n - Define **global variants** (applied to all components). \n - Define **component-specific variants** (e.g., for buttons, forms, etc.). \n\n### Example Implementation: \nIn the Nuxt configuration file: \n```javascript\nexport default defineNuxtConfig({\n ui: {\n defaultVariants: {\n // Global variants\n global: {\n size: 'lg',\n color: 'neutral',\n },\n // Button and ButtonGroup variants\n button: {\n size: 'md',\n color: 'primary',\n variant: 'solid',\n },\n // Form input, select, … variants\n form: {\n size: 'lg',\n color: 'neutral',\n variant: 'outlined',\n },\n },\n },\n});\n``` \n\n### Usage: \nThe defined `defaultVariants` would automatically be applied to all components without the need to explicitly specify these props in templates. Props provided in the template would always take precedence over the ones defined in the configuration. \n\n### Benefits: \n- Reduces repetition in templates. \n- Enhances visual consistency across the project. \n- Flexibility to customize globally or per component type. \n- Easy adoption with prop priority management. \n\n### Expected Impact: \nThis feature would add flexibility while making the integration of `@nuxt/ui` faster and more intuitive by allowing consistent and customized variants to be managed at various levels of the project. \n\nThanks for your continued work on `@nuxt/ui`, which remains an essential tool for building modern and performant interfaces. \n\n### Additional context\n\n_No response_",[3204,3205],{"name":3155,"color":3156},{"name":3141,"color":3142},2934,"closed","Add `defaultVariants` option to define global or component-specific size, variant, and color settings","2025-07-09T12:37:51Z","https://github.com/nuxt/ui/issues/2934",0.69560343,{"labels":3213,"number":3220,"owner":3144,"repository":3144,"state":3207,"title":3221,"updated_at":3222,"url":3223,"score":3224},[3214,3216,3217],{"name":3215,"color":3160},"stale",{"name":3177,"color":3178},{"name":3218,"color":3219},"2.x","d4c5f9",6130,"create a component library","2023-01-22T15:34:44Z","https://github.com/nuxt/nuxt/issues/6130",0.696603,{"description":3226,"labels":3227,"number":3235,"owner":3144,"repository":3145,"state":3207,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Description\n\n### 🚀 Feature Request\nI’d like to suggest adding a built-in `\u003CDynamicRenderer>` component to Nuxt UI that renders dynamic, nested components based on a configuration object.\n\n### 📋 Motivation\nThis component would be ideal for:\n\n- Form builders\n\n- CMS-driven UIs\n\n- Low-code tools\n\n- Declarative UI rendering\n\nIt simplifies the process of rendering deeply nested structures without hardcoding components in the template.\n\n### 💡 Proposal\nThe DynamicRenderer would accept a config prop that defines:\n\n- The component to render\n\n- Props to bind\n\n- Slot content (including nested component trees)\n\nIt would recursively render components and their slots. Here's an example implementation:\n\n\n#### `DynamicRenderer.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{ config: any }>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"config.component\" v-bind=\"config\">\n \u003Ctemplate\n v-for=\"(slotContent, slotName) in config.slots\"\n #[slotName]\n >\n \u003Ctemplate v-if=\"typeof slotContent === 'string'\">\n {{ slotContent }}\n \u003C/template>\n\n \u003Ctemplate v-else-if=\"Array.isArray(slotContent)\">\n \u003CDynamicRenderer\n v-for=\"(nested, index) in slotContent\"\n :key=\"index\"\n :config=\"nested\"\n />\n \u003C/template>\n\n \u003Ctemplate v-else>\n \u003CDynamicRenderer :config=\"slotContent\" :key=\"slotContent.name || slotName\" />\n \u003C/template>\n \u003C/template>\n \u003C/component>\n\u003C/template>\n```\n\n\n\n#### `index.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n\nconst config = {\n component: UContainer,\n class: 'h-screen flex justify-center items-center',\n slots: {\n default: [\n {\n component: UCard,\n slots: {\n default: [{\n component: UForm,\n class: 'space-y-4',\n slots: {\n default: [\n {\n component: UFormField,\n label: 'Username',\n name: 'username',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n placeholder: 'Enter Username',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UFormField,\n label: 'Password',\n name: 'password',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n type: 'password',\n placeholder: 'Enter Password',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UButton,\n label: 'Login',\n icon: 'i-lucide-user',\n variant: 'soft',\n type: 'submit',\n block: true\n }\n ]\n }\n }]\n }\n }\n ]\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDynamicRenderer :config=\"config\" />\n\u003C/template>\n```\n\n### Result \n\n\nIt would also be great if using this approach could eliminate the need to manually import components like:\n\n```ts\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n```\n\nand instead rely on automatic resolution by the renderer itself.\n\nThanks for your work on Nuxt UI – it’s a fantastic toolkit!\n\n### Additional context\n\n_No response_",[3228,3229,3230,3231,3234],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3159,"color":3160},{"name":3232,"color":3233},"closed-by-bot","ededed",{"name":3215,"color":3233},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-09-03T02:01:06Z","https://github.com/nuxt/ui/issues/4138",0.6987486,{"description":3241,"labels":3242,"number":3250,"owner":3144,"repository":3145,"state":3207,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\n### Feature Request: Rich Text Editor Component\n\n#### Description\nI would like to request a Rich Text Editor component to be added to Nuxt UI. This component will allow users to input and format rich text content easily, with support for common formatting options such as bold, italic, headers, lists, and more.\n\n#### Benefits\n- Streamlined development for users who need rich text editing features.\n- Consistency in design and functionality with other Nuxt UI components.\n\n#### Proposed Solution\nIntegrate a rich text editor library (e.g., Quill.js, TipTap) as a Nuxt UI component. The component should provide flexibility for customization and ease of use.\n\n#### Alternatives\nFor now, users can manually integrate third-party editors, but having a built-in component would significantly improve the development experience.\n\n\n### Additional context\n\n_No response_",[3243,3245,3246,3247],{"name":3244,"color":3160},"wontfix-v2",{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3248,"color":3249},"pro","5BD3CB",2698,"Proposal: Add a Built-in Rich Text Editor Component to Nuxt UI","2025-04-08T17:13:28Z","https://github.com/nuxt/ui/issues/2698",0.7028769,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ffmHZSBZnjqnlgjPH9KNzW3uIfVF45qfGk2Bpx4Iefx4":-1},"/nuxt/ui/4932"]