\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_",[3192,3193,3194],{"name":3152,"color":3153},{"name":3155,"color":3156},{"name":3158,"color":3159},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.74596435,{"description":3201,"labels":3202,"number":3206,"owner":3161,"repository":3162,"state":3163,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### 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_",[3203,3204,3205],{"name":3152,"color":3153},{"name":3155,"color":3156},{"name":3158,"color":3159},4243,"UTree with checkboxes","2025-05-28T13:19:10Z","https://github.com/nuxt/ui/issues/4243",0.75490713,{"description":3212,"labels":3213,"number":3216,"owner":3161,"repository":3162,"state":3163,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Description\n\nI would like variant options for the calendar (Solid, Soft, Subtle, Outline, Ghost), where currently it's just 'solid' currently. \n\n### Additional context\n\n\u003Cimg width=\"260\" height=\"288\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/dd5ae43c-efc1-41bf-889e-fcfcbbfda953\" />\n\u003Cp>e.g. Soft\u003C/p>",[3214,3215],{"name":3152,"color":3153},{"name":3158,"color":3159},4713,"Calender: add variant options","2025-08-11T23:21:51Z","https://github.com/nuxt/ui/issues/4713",0.75504845,{"description":3222,"labels":3223,"number":3229,"owner":3161,"repository":3162,"state":3230,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### 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_",[3224,3227,3228],{"name":3225,"color":3226},"duplicate","cfd3d7",{"name":3152,"color":3153},{"name":3155,"color":3156},4246,"closed","[Button] Toggle / V-Model","2025-05-28T17:19:55Z","https://github.com/nuxt/ui/issues/4246",0.7071728,{"description":3236,"labels":3237,"number":3247,"owner":3161,"repository":3162,"state":3230,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### 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_",[3238,3239,3242,3243,3244],{"name":3152,"color":3153},{"name":3240,"color":3241},"needs reproduction","CB47CF",{"name":3155,"color":3156},{"name":3158,"color":3159},{"name":3245,"color":3246},"closed-by-bot","ededed",4091,"[RadioGroup] Allow wrapping","2025-05-14T02:09:23Z","https://github.com/nuxt/ui/issues/4091",0.716324,{"description":3253,"labels":3254,"number":3262,"owner":3161,"repository":3162,"state":3230,"title":3263,"updated_at":3264,"url":3265,"score":3266},"### Description\n\nIs there a way to add custom props to a component for styling—similar to how variant works for buttons? I’d like to add variant support to FormField, but currently, it only supports size.\n\nMy main goal is to allow styling of components provided by my Nuxt module. Ideally, I want to define variants and extra props via app.config.ts. An alternative approach I'm thinking of is to offer per-component config options, similar to Nuxt UI, but managed separately from its config.",[3255,3258,3259,3260],{"name":3256,"color":3257},"question","d876e3",{"name":3155,"color":3156},{"name":3245,"color":3246},{"name":3261,"color":3246},"stale",4148,"Additional props like variants for styling","2025-08-20T02:08:47Z","https://github.com/nuxt/ui/issues/4148",0.72744554,{"description":3268,"labels":3269,"number":3272,"owner":3161,"repository":3162,"state":3230,"title":3273,"updated_at":3274,"url":3275,"score":3276},"### 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_",[3270,3271],{"name":3152,"color":3153},{"name":3155,"color":3156},4039,"Supports changing unchecked icon of `\u003CUCheckbox>` `\u003CUCheckboxGroup>`","2025-05-23T13:21:58Z","https://github.com/nuxt/ui/issues/4039",0.74224937,["Reactive",3278],{},["Set"],["ShallowReactive",3281],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fd6KXnYHRfDbEAAQpyTlPG7CWRLUSdTRHEgDaFnGSCuM":-1},"/nuxt/ui/3994"]