\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_",[3018,3021,3024],{"name":3019,"color":3020},"enhancement","a2eeef",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"triage","ffffff",4250,"nuxt","ui","open","UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7391645,{"description":3036,"labels":3037,"number":3041,"owner":3028,"repository":3029,"state":3030,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### Description\n\nI want to make the text in a custom slot for a tree item child selectable.\nThe issue is that `user-select: text` doesn’t work on `\u003Cbutton>` elements in Safari (I’m using a Tauri app).\n\nIt would be great if the component allowed using a custom slot that avoids rendering a \u003Cbutton> for certain items. (Perhaps a new slot could be added to allow custom rendering?).\n\n\u003Cimg width=\"1217\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39cf6666-e3c9-48f4-a922-90a57d604feb\" />\n\n\n### Additional context\n\n_No response_",[3038,3039,3040],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4424,"Ability to not use button container for tree custom slot","2025-06-30T07:50:57Z","https://github.com/nuxt/ui/issues/4424",0.74479216,{"description":3047,"labels":3048,"number":3051,"owner":3028,"repository":3029,"state":3030,"title":3052,"updated_at":3053,"url":3054,"score":3055},"### Description\n\nIn the Nuxt UI documentation, the theme configuration JSON for components is extremely helpful for understanding default styles and customizing them. However, these blocks currently do not support expanding/collapsing of nested sections like slots, variants, or size, which makes navigation and readability difficult—especially for large configuration trees.\n\n**Feature Request:**\nAdd interactive expand/collapse support to nested JSON blocks in the theme section of the Nuxt UI docs. This can be similar to how most code editors and browser devtools handle JSON structures, allowing users to collapse/expand objects or arrays.\n\n**Use Cases:**\n- Improved UX for developers customizing UI themes\n- Faster navigation when working with deeply nested or verbose configurations\n- Easier understanding of available slots and variants without scrolling through long blocks\n\n**Alternatives Considered:**\n- Copying the JSON into a code editor to navigate — which breaks the in-context experience\n- Searching for keys manually, which is slow and error-prone\n\n**Prototype / Reference:**\nAlthough no direct prototype is available, the expected behavior is similar to how Vue DevTools or VSCode handles collapsible JSON structures.\n\n\u003Cimg width=\"844\" height=\"619\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/14f7ccb8-3e7e-41f5-8b6e-6ffc5f2ba150\" />\n\n### Additional context\n\n_No response_",[3049,3050],{"name":3019,"color":3020},{"name":3025,"color":3026},4606,"✨ Expand/Collapse Support for Component Theme JSON in Nuxt UI Docs","2025-07-26T11:50:47Z","https://github.com/nuxt/ui/issues/4606",0.75871813,{"description":3057,"labels":3058,"number":3061,"owner":3028,"repository":3029,"state":3030,"title":3062,"updated_at":3063,"url":3064,"score":3065},"### 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_",[3059,3060],{"name":3019,"color":3020},{"name":3025,"color":3026},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":3067,"labels":3068,"number":3074,"owner":3028,"repository":3029,"state":3075,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Description\n\nIs it possible to add a tree control that can render department data, check and confirm?\n\nlike this: https://github.com/devcui/fantasies-ui/blob/main/src/runtime/components/CheckTree.vue\n\n### Additional context\n\n",[3069,3072,3073],{"name":3070,"color":3071},"duplicate","cfd3d7",{"name":3019,"color":3020},{"name":3022,"color":3023},4331,"closed","checkbox tree","2025-06-12T08:18:01Z","https://github.com/nuxt/ui/issues/4331",0.7104374,{"description":3081,"labels":3082,"number":3086,"owner":3028,"repository":3029,"state":3075,"title":3087,"updated_at":3088,"url":3089,"score":3090},"### Description\n\nA ComboBox component with general functionality we need. As implemented in Vuetify ComboBox. https://vuetifyjs.com/en/components/combobox/#api\n\n### Additional context\n\n_No response_",[3083,3084,3085],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4483,"ComboBox component with common functionality as hide-selected, search-input.sync, clearable","2025-07-08T09:40:29Z","https://github.com/nuxt/ui/issues/4483",0.72978157,{"description":3092,"labels":3093,"number":3097,"owner":3028,"repository":3029,"state":3075,"title":3098,"updated_at":3099,"url":3100,"score":3101},"### 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_",[3094,3095,3096],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},3994,"[CheckboxGroup] Add `variant=\"table\"` to match RadioGroup variants","2025-05-13T12:28:16Z","https://github.com/nuxt/ui/issues/3994",0.74865794,{"labels":3103,"number":3109,"owner":3028,"repository":3028,"state":3075,"title":3110,"updated_at":3111,"url":3112,"score":3113},[3104,3106],{"name":3019,"color":3105},"8DEF37",{"name":3107,"color":3108},"2.x","d4c5f9",6576,"Quasar integration","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6576",0.7531185,{"description":3115,"labels":3116,"number":3120,"owner":3028,"repository":3029,"state":3075,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### Description\n\nThis is a re-opening of #1484 but for v3. It seems in the transition from v2 to v3, giving the indicators (now \"dots\") ARIA \"tab\" roles was lost. While I did mention it in my original issue, I don't believe my original PR accounted for when multiple items would be displayed at the same time. Perhaps the changes for v3 can take that into account.\n\n### Additional context\n\n_No response_",[3117,3118,3119],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4494,"Carousel component could be made more accessible (v3).","2025-07-10T12:18:41Z","https://github.com/nuxt/ui/issues/4494",0.7533664,{"description":3126,"labels":3127,"number":3129,"owner":3028,"repository":3029,"state":3075,"title":3130,"updated_at":3131,"url":3132,"score":3133},"### 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.",[3128],{"name":3019,"color":3020},2891,"Export of every components","2025-01-13T16:32:50Z","https://github.com/nuxt/ui/issues/2891",0.75625235,["Reactive",3135],{},["Set"],["ShallowReactive",3138],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fueUFlNOSKol8ZqsDhdYfUPZ4ssmKfLcEpR3zR_jGO3Q":-1},"/nuxt/ui/4243"]