\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_",[3188,3191,3194],{"name":3189,"color":3190},"enhancement","a2eeef",{"name":3192,"color":3193},"v3","49DCB8",{"name":3175,"color":3176},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.73266923,{"description":3201,"labels":3202,"number":3211,"owner":3178,"repository":3179,"state":3180,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Package\n\nv4.x\n\n### Description\n\nJust an empty state component. I'm not sure if it's worth making since we already have `UPageSection` that can be transformed into one. I'm willing to make a PR.\n\nExamples:\n- https://www.originui-vue.com/extended/empty-state\n- https://ui.shadcn.com/docs/components/empty\n\n### Additional context\n\n_No response_",[3203,3206,3208],{"name":3204,"color":3205},"feature","A27AF6",{"name":3207,"color":3193},"v4",{"name":3209,"color":3210},"p2-medium","FBCA04",5154,"New component: `UEmpty`","2025-10-09T19:52:56Z","https://github.com/nuxt/ui/issues/5154",0.7424624,{"description":3217,"labels":3218,"number":3221,"owner":3178,"repository":3179,"state":3180,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Package\n\nv4.x\n\n### Description\n\nForm elements usually need to provide behavior that allows for clearing, making it easy for users to quickly clear the current one,Including these components:\n\n- input\n- inputMenu\n- inputNumber\n- inputTags\n- select\n- selectMenu\n- textarea\n\n### Additional context\n\n\n\n",[3219,3220],{"name":3189,"color":3190},{"name":3175,"color":3176},5088,"Form Element add allow-clear props","2025-09-28T02:04:29Z","https://github.com/nuxt/ui/issues/5088",0.7459185,{"description":3227,"labels":3228,"number":3231,"owner":3178,"repository":3179,"state":3180,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: -\n- CLI Version: 3.28.0\n- Nitro Version: -\n- Package Manager: pnpm@8.15.6\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### Package\n\nv4.x\n\n### Version\n\nv4.0.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-refidcgr?file=src%2FApp.vue\nOpen in blink-based browsers, something in the reproduction seems to just not work in webcontainers on Firefox.\n\nFor history:\n```vue\n\u003Ctemplate>\n \u003CUApp>\n \u003CUForm class=\"p-12\">\n \u003CUFieldGroup>\n \u003CUButton label=\"button\" />\n \u003CUSelect placeholder=\"select\" />\n \u003C/UFieldGroup>\n \u003C/UForm>\n \u003C/UApp>\n\u003C/template>\n```\n\n### Description\n\nAdding `USelect` into `UFieldGroup` generally works, all corners are being rounded.\n\nPlacing the resulting `UFieldGroup` inside a `UForm` results in the right corners of the `UFieldGroup` not being rounded at all.\n\n### Additional context\n\n\u003Cimg width=\"237\" height=\"121\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/beb25294-0404-4a57-9ee9-eff5e9b4223f\" />\n\n### Logs\n\n```shell-script\n\n```",[3229,3230],{"name":3172,"color":3173},{"name":3175,"color":3176},5110,"`USelect`'s border radius as the last item of `UFieldGroup` breaks when inside `UForm`","2025-09-29T18:32:38Z","https://github.com/nuxt/ui/issues/5110",0.74747264,{"description":3237,"labels":3238,"number":3241,"owner":3178,"repository":3179,"state":3242,"title":3243,"updated_at":3244,"url":3245,"score":3246},"### Description\n\nCurrently, this component is somewhat misleading. Its name clearly states that it is a group for buttons. However, if you go inside, you will find examples not only with buttons, but also with input and badge.\n\nI suggest renaming the component to `Group` so that people don't get confused and use it everywhere.\n\n### Additional context\n\n_No response_",[3239,3240],{"name":3189,"color":3190},{"name":3207,"color":3193},4544,"closed","Rename `ButtonGroup` to `FieldGroup`","2025-08-13T12:11:48Z","https://github.com/nuxt/ui/issues/4544",0.714395,{"description":3248,"labels":3249,"number":3258,"owner":3178,"repository":3179,"state":3242,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### 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_",[3250,3251,3252,3253,3256],{"name":3204,"color":3205},{"name":3192,"color":3193},{"name":3175,"color":3176},{"name":3254,"color":3255},"closed-by-bot","ededed",{"name":3257,"color":3255},"stale",4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-09-03T02:01:06Z","https://github.com/nuxt/ui/issues/4138",0.7248059,{"description":3264,"labels":3265,"number":3273,"owner":3178,"repository":3179,"state":3242,"title":3274,"updated_at":3275,"url":3276,"score":3277},"### Environment\n\nnot needed\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nnot needed\n\n### Description\n\nThere is no error state on the input field like color \"error\" when u wrap URadioGroup in UFormField\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3266,3267,3270,3271,3272],{"name":3172,"color":3173},{"name":3268,"color":3269},"needs reproduction","CB47CF",{"name":3192,"color":3193},{"name":3175,"color":3176},{"name":3254,"color":3255},4025,"RedioGroup in Form","2025-05-07T02:09:29Z","https://github.com/nuxt/ui/issues/4025",0.7249425,{"description":3279,"labels":3280,"number":3286,"owner":3178,"repository":3179,"state":3242,"title":3287,"updated_at":3288,"url":3289,"score":3290},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.11.0`\n- Nuxt Version: `3.17.4`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `pnpm@10.11.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/condescending-euclid-k9r7nc\n\n### Description\n\nWhen a Modal is in a ButtonGroup, all buttons inside the Modal (including the X button) are styled as elements directly in the ButtonGroup\n\n```vue\n\n\u003Ctemplate>\n \u003CUButtonGroup>\n \u003CUInput placeholder=\"Search...\" />\n \u003CUModal>\n \u003CUButton color=\"neutral\" variant=\"outline\">\n Open modal\n \u003C/UButton>\n\n \u003Ctemplate #body>\n \u003CUButton label=\"button1\" />\n \u003CUButton label=\"button2\" />\n \u003CUButton label=\"button3\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\nAlso, size and orientation affect the buttons inside the modal\n\n```vue\n\u003Ctemplate>\n \u003CUButtonGroup orientation=\"vertical\" size=\"lg\">\n ...\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3281,3282,3283,3284,3285],{"name":3172,"color":3173},{"name":3192,"color":3193},{"name":3175,"color":3176},{"name":3254,"color":3255},{"name":3257,"color":3255},4242,"[ButtonGroup] Nested buttons are also styled as if they were directly placed","2025-08-20T02:08:38Z","https://github.com/nuxt/ui/issues/4242",0.7275128,{"description":3292,"labels":3293,"number":3299,"owner":3178,"repository":3179,"state":3242,"title":3300,"updated_at":3301,"url":3302,"score":3303},"### Description\n\nA toggle button would be very useful. The closest thing we have is radio group or checkbox group. \nInspired by:\n[VBtnToggle](https://vuetifyjs.com/en/components/button-groups/)\n[VChipGroup](https://vuetifyjs.com/en/components/chip-groups/#usage)\n\nSimilar functionality could be achieved on RadioGroup by making unchecking possible (so null values are selectable)\nAND/OR\nBy adding a v-model to the button component, and model-active variants (so you can change the color, varient, icon, etc when checked). The model would be either a Boolean or an array of values similar to Vuetify.\n\n### Additional context\n\n_No response_",[3294,3297,3298],{"name":3295,"color":3296},"duplicate","cfd3d7",{"name":3189,"color":3190},{"name":3192,"color":3193},4246,"[Button] Toggle / V-Model","2025-05-28T17:19:55Z","https://github.com/nuxt/ui/issues/4246",0.7290172,["Reactive",3305],{},["Set"],["ShallowReactive",3308],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fyL9hmX1pQT54iSEEO4CY_DE5TZkjCbuCAYsrmkG-mDk":-1},"/nuxt/ui/5045"]