\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_",[3062,3063,3064],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.74596435,{"description":3071,"labels":3072,"number":3076,"owner":3029,"repository":3030,"state":3031,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### 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_",[3073,3074,3075],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4544,"Rename `ButtonGroup` -> `FieldGroup`","2025-07-17T09:45:38Z","https://github.com/nuxt/ui/issues/4544",0.7461778,{"description":3082,"labels":3083,"number":3087,"owner":3029,"repository":3030,"state":3031,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### Description\n\nI've used [Quasar's tree-component with checkboxes](https://quasar.dev/vue-components/tree#tick-strategy) as a form element in several use-cases. It's an extremely useful element for hierarchical content when it makes sense that the user is able to see all options simultaneously (i.e. not hidden in a dropdown or something similar).\n\nI can see that this component variant is mentioned on [Reka-ui's docs page](https://reka-ui.com/docs/components/tree#with-checkbox).\n\nAre there any plans to add this?\n\n### Additional context\n\n_No response_",[3084,3085,3086],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4243,"UTree with checkboxes","2025-05-28T13:19:10Z","https://github.com/nuxt/ui/issues/4243",0.75490713,{"description":3093,"labels":3094,"number":3098,"owner":3029,"repository":3030,"state":3031,"title":3099,"updated_at":3100,"url":3101,"score":3102},"### Description\n\nHello 👋,\n\nI'm building a dashboard and I often need to put a table in a modal. Currently, I have to manually change the style of the modal and the table to match perfectly.\n\nSee this example: https://stackblitz.com/edit/github-2aatsynx?file=app%2Fpages%2Findex.vue\n\nTo solve this, I have to solution in mind:\n\n1. props to change the table and modal class;\n2. injection key to tell the table that it is in a modal.\n\nTo be honest, I don't like the second one as it removes a lot of flexibility.\n\nThe first one will introduce some new variants to all customization globally which is better than the current manual customization. For a Modal component, a new `table` (or `body-padding` or something even more generic but used to remove the padding from the body) props and a `modal` props for the table to align the internal padding.\n\nMaybe there is more solutions to this!\n\n### Additional context\n\n_No response_",[3095,3096,3097],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},4366,"Simplify table usage in modals","2025-06-17T07:42:04Z","https://github.com/nuxt/ui/issues/4366",0.76069075,{"description":3104,"labels":3105,"number":3111,"owner":3029,"repository":3030,"state":3112,"title":3113,"updated_at":3114,"url":3115,"score":3116},"### 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_",[3106,3109,3110],{"name":3107,"color":3108},"duplicate","cfd3d7",{"name":3020,"color":3021},{"name":3023,"color":3024},4246,"closed","[Button] Toggle / V-Model","2025-05-28T17:19:55Z","https://github.com/nuxt/ui/issues/4246",0.7071728,{"description":3118,"labels":3119,"number":3129,"owner":3029,"repository":3030,"state":3112,"title":3130,"updated_at":3131,"url":3132,"score":3133},"### Description\n\nI would like for the RadioGroup on table mode to be overflowed and create a square of options instead of being rigid and forcing scrolling\n\nAs seen on \"date\" below\n\n\n\n### Additional context\n\n_No response_",[3120,3121,3124,3125,3126],{"name":3020,"color":3021},{"name":3122,"color":3123},"needs reproduction","CB47CF",{"name":3023,"color":3024},{"name":3026,"color":3027},{"name":3127,"color":3128},"closed-by-bot","ededed",4091,"[RadioGroup] Allow wrapping","2025-05-14T02:09:23Z","https://github.com/nuxt/ui/issues/4091",0.716324,{"description":3135,"labels":3136,"number":3139,"owner":3029,"repository":3030,"state":3112,"title":3140,"updated_at":3141,"url":3142,"score":3143},"### Description\n\nI'm making a voting system visualizer with Nuxt UI.\n\n\n\nHere, I need to add ❌ for unchecked items, which doesn't seem easy now.\n\n### Additional context\n\n_No response_",[3137,3138],{"name":3020,"color":3021},{"name":3023,"color":3024},4039,"Supports changing unchecked icon of `\u003CUCheckbox>` `\u003CUCheckboxGroup>`","2025-05-23T13:21:58Z","https://github.com/nuxt/ui/issues/4039",0.74224937,["Reactive",3145],{},["Set"],["ShallowReactive",3148],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fd6KXnYHRfDbEAAQpyTlPG7CWRLUSdTRHEgDaFnGSCuM":-1},"/nuxt/ui/3994"]