\n```\n\nI had to search hard to find my own answer, and I think it's a very important case for everyone. It will benefit us all.\nThank you in advance!",[],4409,"USelect > document how to make items/options content width, fit the longest item/option width. Add an image example.","2025-06-27T10:46:18Z","https://github.com/nuxt/ui/issues/4409",0.77257216,{"description":2950,"labels":2951,"number":2955,"owner":2912,"repository":2913,"state":2914,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Description\n\nI propose the addition of a UTheme component which would allow scoped theming of components to reduce repeated styling that's error prone when refactoring.\n\n## Example\nThe Dashboard template has a bunch of forms that have horizontal form fields (label left, input right).\n\nBefore:\n```html\n\u003CUForm ...>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n\u003CUForm/>\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_",[2952,2953,2954],{"name":2903,"color":2904},{"name":2906,"color":2907},{"name":2909,"color":2910},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7812416,{"description":2961,"labels":2962,"number":2967,"owner":2912,"repository":2913,"state":2914,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### 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.",[2963,2966],{"name":2964,"color":2965},"question","d876e3",{"name":2906,"color":2907},4148,"Additional props like variants for styling","2025-05-14T12:47:31Z","https://github.com/nuxt/ui/issues/4148",0.78306323,{"description":2973,"labels":2974,"number":2976,"owner":2912,"repository":2913,"state":2977,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### Description\n\nWhen `UDropdown` has a lot of items it would be good to the element limit it's max height to rest of the screen height so the scrollbars are enabled instead of having to scroll the window to see the items.\r\nThanks.\n\n### Additional context\n\n_No response_",[2975],{"name":2903,"color":2904},2194,"closed","`UDropdown` max height","2024-09-16T09:21:17Z","https://github.com/nuxt/ui/issues/2194",0.76322705,{"description":2983,"labels":2984,"number":2988,"owner":2912,"repository":2913,"state":2977,"title":2989,"updated_at":2990,"url":2991,"score":2992},"### Description\n\nI want to create tabs that automatically adjust their size based on their content:\n\n\u003Cimg width=\"396\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f5d9f060-91ee-4273-80df-1690d2539743\" />\n\nNuxtUI default tabs are full width:\n\n\u003Cimg width=\"888\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3b20aedc-9de2-44da-bdde-baa62b8c8e08\" />\n\nI have tried setting `w-auto` on list:\n\n```vue\n\u003CUTabs\n :ui=\"{\n list: 'w-auto',\n }\"\n :items=\"items\"\n/>\n```\n\nBut text is truncated:\n\n\u003Cimg width=\"259\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/97898d5a-4a27-4340-b03a-9c0dc07c9b96\" />\n\nHow would you achieve this?\n\n\n### Additional context\n\n_No response_",[2985,2986,2987],{"name":2903,"color":2904},{"name":2906,"color":2907},{"name":2909,"color":2910},4056,"Tabs with auto width","2025-05-05T13:47:43Z","https://github.com/nuxt/ui/issues/4056",0.77584946,{"description":2994,"labels":2995,"number":2999,"owner":2912,"repository":2913,"state":2977,"title":3000,"updated_at":3001,"url":3002,"score":3003},"### Description\n\nSomething like\nhttps://ui.nuxt.com/components/auth-form#usage\n\nPerhaps also add a `validation` prop to combine with validation\nAnd perhapse also a `default-value` prop to support initializing the form\n\nSomething like\n```\nconst fields = [{\n name: 'email',\n type: 'text' as const,\n label: 'Email',\n placeholder: 'Enter your email',\n validation: z.string().email('Invalid email'),\n default-value: 'johndoe@gmail.com',\n required: true\n}, {\n name: 'password',\n label: 'Password',\n type: 'password' as const,\n placeholder: 'Enter your password'\n validation: z.string().min(8, 'Must be at least 8 characters'),\n}, {\n name: 'remember',\n label: 'Remember me',\n type: 'checkbox' as const\n}]\n```\n\n\n### Additional context\n\n_No response_",[2996,2997,2998],{"name":2903,"color":2904},{"name":2906,"color":2907},{"name":2909,"color":2910},4311,"Add support for fields in form component similar to AuthForm","2025-06-12T15:22:43Z","https://github.com/nuxt/ui/issues/4311",0.7778678,{"description":3005,"labels":3006,"number":3014,"owner":2912,"repository":2913,"state":2977,"title":3015,"updated_at":3016,"url":3017,"score":3018},"### Description\r\n\r\nHi 👋🏻 \r\n\r\nI started using NuxtUI and realized one more thing that can be improved. Right now, For `v-model` of tabs component index (number) is used.\r\n\r\nIf we want to get the key of active tab for making API req then we have to do something like below:\r\n```ts\r\nconst activeTabKey = items[itemsModel.value]!.key\r\n\r\n// With this feature implemented we can directly use `itemsModel.value`\r\n```\r\n\r\nInstead, if we can allow using `key` then:\r\n- I'll be more readable\r\n- If we change the order of the tabs (in items array) it doesn't affect the active tab\r\n\r\n### Additional context\r\n\r\nWe can also introduce this change in v3.",[3007,3008,3009,3012],{"name":2903,"color":2904},{"name":2909,"color":2910},{"name":3010,"color":3011},"closed-by-bot","ededed",{"name":3013,"color":3011},"stale",2061,"Allow using tab item key as value for v-model","2025-06-18T09:06:22Z","https://github.com/nuxt/ui/issues/2061",0.77916044,["Reactive",3020],{},["Set"],["ShallowReactive",3023],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fneW_gvfnyjcCW763axxeCyuXBf1PMLoePF0FIXg6oIs":-1},"/nuxt/ui/4405"]