\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_",[2922,2923,2924],{"name":2906,"color":2907},{"name":2909,"color":2910},{"name":2925,"color":2926},"triage","ffffff",4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.76952857,{"description":2933,"labels":2934,"number":2938,"owner":2912,"repository":2913,"state":2914,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Description\n\nIn Vue it's easy to use HTML in every component using v-html. It would be very helpful in Nuxt UI to have this feature without workarounds like slots with additional span tags. In our case we often have some html tags like: b,i,... or nbsp in our database driven app. \n\n### Additional context\n\n_No response_",[2935,2936,2937],{"name":2906,"color":2907},{"name":2909,"color":2910},{"name":2925,"color":2926},4396,"Use HTML in label or in a new prop","2025-06-24T13:00:05Z","https://github.com/nuxt/ui/issues/4396",0.7846743,{"description":2944,"labels":2945,"number":2950,"owner":2912,"repository":2913,"state":2914,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Description\n\nIs it possible to use a UForm within a UModal, but have the submit button in the modal's footer? I tried to wrap the whole modal with no success:\n\n```vue\n\u003Ctemplate>\n \u003CUForm :schema=\"userCreateSchema\" :state @submit=\"onSubmit\">\n \u003CUModal title=\"Create user\">\n \u003Ctemplate #body>\n \u003CUFormField label=\"First name\" name=\"givenName\" required>\n \u003CUInput v-model=\"state.givenName\" />\n \u003C/UFormField>\n\n \u003CUFormField label=\"Last name\" name=\"familyName\" required>\n \u003CUInput v-model=\"state.familyName\" />\n \u003C/UFormField>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CUButton label=\"Save\" type=\"submit\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UForm>\n\u003C/template>\n```",[2946,2949],{"name":2947,"color":2948},"question","d876e3",{"name":2909,"color":2910},4401,"How to use a UForm within a UModal with footer?","2025-06-26T12:51:18Z","https://github.com/nuxt/ui/issues/4401",0.7846946,{"description":2956,"labels":2957,"number":2960,"owner":2912,"repository":2913,"state":2961,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Description\n\nCan the width of the modal be customized? Currently, I set it globally through the `app\\assets\\css\\main.css` file. However, if I only want to modify the width of a single component, I can't find the place to do it. I tried adding `w-[1000px]` to `UModal`, but it didn't work.\n\n\n\n\n",[2958,2959],{"name":2947,"color":2948},{"name":2909,"color":2910},3041,"closed","Can the width of the modal be customized?","2025-01-08T09:31:14Z","https://github.com/nuxt/ui/issues/3041",0.7445665,{"description":2967,"labels":2968,"number":2976,"owner":2912,"repository":2913,"state":2961,"title":2977,"updated_at":2978,"url":2979,"score":2980},"### Description\n\nHeader slot doesn't approve custom element style like `bg-header`. In some cases I need to change the border or background color of header, body and footer.\n \n```\n\u003Cscript setup lang=\"ts\">\nconst modal = useModal()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUModal title=\"Title\" :ui=\"{\n header: 'bg-header',\n }\">\n\n \u003C/UModal>\n\u003C/template>\n\u003Cstyle scoped>\n.bg-header{\n background-color: #000;\n}\n\u003C/style>\n```",[2969,2970,2971,2974],{"name":2947,"color":2948},{"name":2909,"color":2910},{"name":2972,"color":2973},"closed-by-bot","ededed",{"name":2975,"color":2973},"stale",3372,"Add custom element style to modal","2025-06-18T09:02:01Z","https://github.com/nuxt/ui/issues/3372",0.74815,{"description":2982,"labels":2983,"number":2986,"owner":2912,"repository":2913,"state":2961,"title":2987,"updated_at":2988,"url":2989,"score":2990},"### Description\n\nI saw that some components (like `Modal` or `Slideover`) have the \"trigger\" fully replaceable, meanwhile others like `Select` and `SelectMenu` cannot be fully replaced. Because of that, introducing another slot to replace the entire trigger would be nice imho. But I would define it as the default slot, not a named one (like `trigger` or something else) to remain consistent with the modal/slideover one.\nThe problem is that it would introduce a breaking change, so I don't know what is the way you want to proceed.\nWhat do you think about this?\nMentioning @sandros94 as I talked about this with him on Discord.\n\n### Additional context\n\nTo have a look on this, I did some changes in a branch in my fork: \u003Chttps://github.com/nuxt/ui/compare/v3...zAlweNy26:nuxt-ui:feat/select-trigger>",[2984,2985],{"name":2906,"color":2907},{"name":2909,"color":2910},4009,"Standardize trigger slot in components","2025-05-10T17:57:56Z","https://github.com/nuxt/ui/issues/4009",0.7562734,{"description":2992,"labels":2993,"number":3001,"owner":2912,"repository":2913,"state":2961,"title":3002,"updated_at":3003,"url":3004,"score":3005},"### Description\n\nIf I open one of these 3 (modal, sidebar, dropdown) nuxt ui is adding styles to the body which cause strange layout behaviors.\nI would like to costumize these or modify. Thats what currently gets added when opening a modal and causes problems\n```\n\u003Cbody style=\"padding-right: 9px; margin-right: 0px; --scrollbar-width: 9px; overflow: hidden; pointer-events: none;\">\n```\n\nIs there a way to do that right now?",[2994,2995,2996,2999,3000],{"name":2947,"color":2948},{"name":2909,"color":2910},{"name":2997,"color":2998},"reka-ui","56d799",{"name":2972,"color":2973},{"name":2975,"color":2973},3078,"Scrolllock when opening modal, dropdown, sidebar","2025-06-18T09:02:37Z","https://github.com/nuxt/ui/issues/3078",0.75894433,{"description":3007,"labels":3008,"number":3011,"owner":2912,"repository":2913,"state":2961,"title":3012,"updated_at":3013,"url":3014,"score":3015},"### Description\n\nHi,\n\nI'm just trying migrate to the v3 table component but I'm kind of stuck while trying to apply the correct column widths to the columns which before (in v2) was possible via simple tailwind classes per column.\nFor example a table has an action button in the last column, so the column should only have the width of the icon of the button so that other columns have more space but the column width is automatically about four times the button's size by default instead.\n\nThe [TanStack Table Docs](https://tanstack.com/table/v8/docs/guide/column-sizing) state that individual column sizes must be applied manually which also seems right looking at the [table component code](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Table.vue) if I didn't miss anything in that regard.\n\nFrom my understanding the custom width styling must be applied to the `th`/`td` elements since every styling attempt inside the slots to make a column smaller (e.g. only 32px) did not work and only affected the content inside the header/cell slots.\n\nIs there any way at the moment to set a custom width for specific columns with the current implementation of the table component?",[3009,3010],{"name":2947,"color":2948},{"name":2909,"color":2910},3935,"Table custom column size adjustments","2025-05-03T12:03:11Z","https://github.com/nuxt/ui/issues/3935",0.77165014,{"labels":3017,"number":3023,"owner":2912,"repository":2912,"state":2961,"title":3024,"updated_at":3025,"url":3026,"score":3027},[3018,3020],{"name":2906,"color":3019},"8DEF37",{"name":3021,"color":3022},"2.x","d4c5f9",10299,"Layout options","2025-03-12T16:25:33Z","https://github.com/nuxt/nuxt/issues/10299",0.7798382,["Reactive",3029],{},["Set"],["ShallowReactive",3032],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fqsvuTAr-lHK-wI0zVJCwlYaS7uaskPUjGBVXOSjywtE":-1},"/nuxt/ui/4366"]