Add custom variants

[tobiasdiez]

Is your feature request related to a problem? Please describe.

Variants (say for buttons) are a convenient shortcut to apply a set of styles to a component. But this is currently limited to predefined variants.

Describe the solution you'd like

A way to define custom variants.

Describe alternatives you've considered

Not sure, but wrapping a component in a custom component that implements the styles is an option.

Additional context

Vue Tailwind implements such a feature (see https://www.vue-tailwind.com/docs/theming#variants).

[benjamincanac]

You can already define your own variants using the app.config.ts: https://ui.nuxt.com/getting-started/theming#components

export default defineAppConfig({
  ui: {
    button: {
      variant: {
        subtle: ''
      }
    }
  }
})

[theguriev]

How in this case extend the type hints?

[theguriev]

@benjamincanac and same question for the color. In color case ts will complain about it