\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_",[2856,2859,2862],{"name":2857,"color":2858},"enhancement","a2eeef",{"name":2860,"color":2861},"v3","49DCB8",{"name":2863,"color":2864},"triage","ffffff",4250,"nuxt","ui","open","UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7391645,{"description":2874,"labels":2875,"number":2878,"owner":2866,"repository":2867,"state":2868,"title":2879,"updated_at":2880,"url":2881,"score":2882},"### 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_",[2876,2877],{"name":2857,"color":2858},{"name":2863,"color":2864},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.75924474,{"description":2884,"labels":2885,"number":2888,"owner":2866,"repository":2867,"state":2868,"title":2889,"updated_at":2890,"url":2891,"score":2892},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nTo control the rows of the table, I need a slot for them. For instance, if I want to implement a reorder feature using drag and drop, I require a \u003Ctr> element to loop through.\n\n### Additional context\n\n_No response_",[2886,2887],{"name":2857,"color":2858},{"name":2863,"color":2864},2685,"[UTable] Add the functionality to include a slot for all \u003Ctr> elements, as well as a 'default' slot.","2024-11-19T12:33:59Z","https://github.com/nuxt/ui/issues/2685",0.7659173,{"description":2894,"labels":2895,"number":2902,"owner":2866,"repository":2866,"state":2868,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Describe the feature\n\nCurrently, components/parent/index.vue is only accessible as `\u003CParentIndex />`. It would be more intuitive if Nuxt allowed using `\u003CParent />` instead, following the same convention as pages.\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).",[2896,2899],{"name":2897,"color":2898},"discussion","538de2",{"name":2900,"color":2901},"🍰 p2-nice-to-have","0E8A16",32017,"Support `\u003CParent />` for `components/parent/index.vue`","2025-05-06T10:45:20Z","https://github.com/nuxt/nuxt/issues/32017",0.7685165,{"description":2908,"labels":2909,"number":2913,"owner":2866,"repository":2867,"state":2914,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Description\n\nThe new CheckboxGroup component lacks the `table` variant found on the RadioGroup component. Since these components will often appear together in forms, it would be preferable to have the table variant for both of them.\n\nThis is already easily achieved with the new component by adding the RadioGroup styles to the `item` ui prop. I think it should be possible to make this change just by adding the styles to checkbox-group.ts. I'm happy to make a pull request and make the changes.\n\n### Additional context\n\n_No response_",[2910,2911,2912],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},3994,"closed","[CheckboxGroup] Add `variant=\"table\"` to match RadioGroup variants","2025-05-13T12:28:16Z","https://github.com/nuxt/ui/issues/3994",0.74865794,{"labels":2920,"number":2926,"owner":2866,"repository":2866,"state":2914,"title":2927,"updated_at":2928,"url":2929,"score":2930},[2921,2923],{"name":2857,"color":2922},"8DEF37",{"name":2924,"color":2925},"2.x","d4c5f9",6576,"Quasar integration","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6576",0.7531185,{"description":2932,"labels":2933,"number":2935,"owner":2866,"repository":2867,"state":2914,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi,\n\nWould it be possible to add an export of all components ?\n\nSomething like:\n\n```js\nexport * from './components'\n```\n\n### Additional context\n\nI'm trying to display a form field according to its value type (ex: boolean => checkbox, number => range ...).\n\nSadly, it looks like in composition API, one cannot use string for `\u003Ccomponent>` `:is` prop.\n\n```vue\n\u003Ctemplate>\n \u003C!-- This doesn't work -->\n \u003Ccomponent :is=\"typeof value === 'boolean' ? 'u-checkbox' : 'u-input'\" />\n\u003C/template>\n```\n\nApparently, you have to pass the component itself, but I'm unable to import components from Nuxt UI:\n\n```vue\n\u003Cscript setup>\n// This doesn't work\nimport { UCheckbox, UInput } from '@nuxt/ui';\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"typeof value === 'boolean' ? UCheckbox : UInput\" />\n\u003C/template>\n```\n\nI can use `v-if` as a workaround, but it forces me to duplicate a lot of props (class, listeners, model ...) on each component.",[2934],{"name":2857,"color":2858},2891,"Export of every components","2025-01-13T16:32:50Z","https://github.com/nuxt/ui/issues/2891",0.75625235,{"labels":2941,"number":2948,"owner":2866,"repository":2866,"state":2914,"title":2949,"updated_at":2950,"url":2951,"score":2952},[2942,2944,2947],{"name":2943,"color":2864},"stale",{"name":2945,"color":2946},"pending triage","E99695",{"name":2924,"color":2925},8904,"Hydration error with scoped slots and component discovery (async components)","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/8904",0.756735,{"description":2954,"labels":2955,"number":2962,"owner":2866,"repository":2866,"state":2914,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### 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).",[2956,2957,2958,2961],{"name":2857,"color":2922},{"name":2897,"color":2898},{"name":2959,"color":2960},"3.x","29bc7f",{"name":2900,"color":2901},15066,"Add `DevOnly` component","2023-01-19T17:44:35Z","https://github.com/nuxt/nuxt/issues/15066",0.75953984,{"description":2968,"labels":2969,"number":2975,"owner":2866,"repository":2867,"state":2914,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### 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_",[2970,2973,2974],{"name":2971,"color":2972},"duplicate","cfd3d7",{"name":2857,"color":2858},{"name":2860,"color":2861},4246,"[Button] Toggle / V-Model","2025-05-28T17:19:55Z","https://github.com/nuxt/ui/issues/4246",0.76092976,["Reactive",2981],{},["Set"],["ShallowReactive",2984],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fueUFlNOSKol8ZqsDhdYfUPZ4ssmKfLcEpR3zR_jGO3Q":-1},"/nuxt/ui/4243"]