\n\u003Cp>e.g. Soft\u003C/p>",[3167,3168],{"name":3138,"color":3139},{"name":3141,"color":3142},4713,"Calender: add variant options","2025-08-11T23:21:51Z","https://github.com/nuxt/ui/issues/4713",0.72780514,{"description":3175,"labels":3176,"number":3180,"owner":3144,"repository":3145,"state":3181,"title":3182,"updated_at":3183,"url":3184,"score":3185},"### 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_",[3177,3178,3179],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},3994,"closed","[CheckboxGroup] Add `variant=\"table\"` to match RadioGroup variants","2025-05-13T12:28:16Z","https://github.com/nuxt/ui/issues/3994",0.7033415,{"description":3187,"labels":3188,"number":3195,"owner":3144,"repository":3145,"state":3181,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### Description\n\nI want to let customers know what password requirements they've already checked according to create a strong password, but for this I need the model value to know what they are filling in.\n\nYou can validate it on `input` (that somehow doesn't work neither until you blur it once), but that's not really what I want for the full form\n\n### Additional context\n\nhttps://ui3.nuxt.dev/components/input#with-password-strength-indicator",[3189,3190,3191,3194],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3192,"color":3193},"nuxt/ui-pro","00dc82",{"name":3141,"color":3142},3430,"Expose v-model values in authForm","2025-05-14T13:36:42Z","https://github.com/nuxt/ui/issues/3430",0.70913786,{"description":3201,"labels":3202,"number":3212,"owner":3144,"repository":3145,"state":3181,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### 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.",[3203,3206,3207,3210],{"name":3204,"color":3205},"question","d876e3",{"name":3156,"color":3157},{"name":3208,"color":3209},"closed-by-bot","ededed",{"name":3211,"color":3209},"stale",4148,"Additional props like variants for styling","2025-08-20T02:08:47Z","https://github.com/nuxt/ui/issues/4148",0.71066076,{"description":3218,"labels":3219,"number":3222,"owner":3144,"repository":3145,"state":3181,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nTo simplify customization and ensure visual consistency across projects, it would be useful to add a configuration option to define `defaultVariants` globally or for specific component types. These variants could include default size, color, and variant properties for all components or specific ones like buttons, button groups, and form fields. \n\n### Proposal: \n1. Introduce a `defaultVariants` field in the Nuxt configuration to: \n - Define **global variants** (applied to all components). \n - Define **component-specific variants** (e.g., for buttons, forms, etc.). \n\n### Example Implementation: \nIn the Nuxt configuration file: \n```javascript\nexport default defineNuxtConfig({\n ui: {\n defaultVariants: {\n // Global variants\n global: {\n size: 'lg',\n color: 'neutral',\n },\n // Button and ButtonGroup variants\n button: {\n size: 'md',\n color: 'primary',\n variant: 'solid',\n },\n // Form input, select, … variants\n form: {\n size: 'lg',\n color: 'neutral',\n variant: 'outlined',\n },\n },\n },\n});\n``` \n\n### Usage: \nThe defined `defaultVariants` would automatically be applied to all components without the need to explicitly specify these props in templates. Props provided in the template would always take precedence over the ones defined in the configuration. \n\n### Benefits: \n- Reduces repetition in templates. \n- Enhances visual consistency across the project. \n- Flexibility to customize globally or per component type. \n- Easy adoption with prop priority management. \n\n### Expected Impact: \nThis feature would add flexibility while making the integration of `@nuxt/ui` faster and more intuitive by allowing consistent and customized variants to be managed at various levels of the project. \n\nThanks for your continued work on `@nuxt/ui`, which remains an essential tool for building modern and performant interfaces. \n\n### Additional context\n\n_No response_",[3220,3221],{"name":3138,"color":3139},{"name":3156,"color":3157},2934,"Add `defaultVariants` option to define global or component-specific size, variant, and color settings","2025-07-09T12:37:51Z","https://github.com/nuxt/ui/issues/2934",0.72774416,{"description":3228,"labels":3229,"number":3233,"owner":3144,"repository":3145,"state":3181,"title":3234,"updated_at":3235,"url":3236,"score":3237},"### Description\n\nHey guys,\nThanks to your great job :)\n\nI wanna know if has intention to add a Toggle Switch component in nuxt/ui\n\n\n\n\n\n\n### Additional context\n\n_No response_",[3230,3231,3232],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3141,"color":3142},4451,"Toggle Switch","2025-07-03T01:48:56Z","https://github.com/nuxt/ui/issues/4451",0.72782195,{"description":3239,"labels":3240,"number":3248,"owner":3144,"repository":3145,"state":3181,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.17.1`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.6.2`\n- Builder: `-`\n- User Config: `modules`, `devtools`, `app`, `css`, `site`, `content`, `runtimeConfig`, `build`, `future`, `experimental`, `compatibilityDate`, `typescript`, `cookieControl`, `eslint`, `i18n`, `icon`, `image`, `ogImage`, `sitemap`, `turnstile`\n- Runtime Modules: `@vueuse/nuxt@13.1.0`, `@nuxt/eslint@1.3.0`, `@nuxt/ui-pro@3.1.0`, `@nuxtjs/sitemap@7.2.10`, `@nuxtjs/robots@5.2.10`, `@nuxt/content@3.5.1`, `nuxt-og-image@5.1.3`, `@nuxt/image@1.10.0`, `@nuxtjs/turnstile@1.0.0`, `@dargmuesli/nuxt-cookie-control@9.0.2`, `@nuxtjs/robots@5.2.10`, `nuxt-auth-utils@0.5.20`, `@nuxtjs/i18n@9.5.3`\n- Build Modules: `-`\n\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nnot needed for this situation\n\n### Description\n\nI'm hoping this just turns into a question, but I'm trying to figure out if custom variants are supported by TypeScript, I tried adding a variant to a button using this methodology:\n\n```ts\n button: {\n variants: {\n variant: {\n gradient: 'shadow-sm shadow-emerald-300/5 border border-emerald-300/10 hover:shadow hover:border-emerald-300 hover:shadow-emerald-300 transition-all duration-200 text-white bg-gradient-to-br from-logo-a via-logo-a-dark to-logo-a focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',\n },\n },\n defaultVariants: {\n color: 'neutral',\n variant: 'subtle',\n },\n default: {\n color: 'white',\n loadingIcon: 'i-mdi-loading',\n },\n },\n```\nI also tried adding it via `compoundVariants` as well - and while this strategy works fine in both situations, I get TS errors whenever I try to apply it at the component.\n\n```\nType '\"gradient\"' is not assignable to type '\"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\" | \"link\" | undefined'.ts-plugin(2322)\n```\n\n\u003Cimg width=\"975\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c38d6ba5-ccae-4609-bfdb-38c8d084a442\" />\n\nAm I doing something wrong? Or is TS support for variants just not completed yet?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3241,3244,3247],{"name":3242,"color":3243},"bug","d73a4a",{"name":3245,"color":3246},"needs reproduction","CB47CF",{"name":3156,"color":3157},4046,"provide a custom TS-safe custom variant","2025-05-23T13:22:19Z","https://github.com/nuxt/ui/issues/4046",0.7309433,{"labels":3254,"number":3260,"owner":3144,"repository":3144,"state":3181,"title":3261,"updated_at":3262,"url":3263,"score":3264},[3255,3257],{"name":3138,"color":3256},"8DEF37",{"name":3258,"color":3259},"2.x","d4c5f9",4430,"Multi-variant Nuxt App","2023-01-22T15:50:48Z","https://github.com/nuxt/nuxt/issues/4430",0.7311508,["Reactive",3266],{},["Set"],["ShallowReactive",3269],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fre3wR4m7NOHQb_0Z9VvAiXq74ogdHCU13bW4a10b99c":-1},"/nuxt/ui/4749"]