Nuxt•3d ago

UButton custom variants with UI3

Hello dear kapa I was creating custom variants in Nuxt UI2 to choose from when creating a button, I fail to see how to do it with Nuxt UI3 Ideally, I would like to create custom colors and custom variants and mix them at will Thanks 🙂

11 Replies

kapa.ai•3d ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt UI 3, the theming system has been updated to use the Tailwind Variants API, which changes how you create custom variants for components like UButton. Creating Custom Variants in Nuxt UI 3 To create custom colors and variants for UButton in Nuxt UI 3, you need to use the updated theming system. Here's how to do it: 1. Custom Colors First, you can define custom colors in your vite.config.ts file:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'blue',
          tertiary: 'indigo', // Custom color
        }
      },
      theme: {
        colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
      }
    })
  ]
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'blue',
          tertiary: 'indigo', // Custom color
        }
      },
      theme: {
        colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error']
      }
    })
  ]
})

2. Custom Variants To create custom variants, you need to modify the button theme in your app.config.ts:

export default defineAppConfig({
  ui: {
    button: {
      variants: {
        // Add your custom variant
        color: {
          tertiary: '' // Your custom color
        },
        // Add a completely new variant type
        rounded: {
          none: {
            base: 'rounded-none'
          },
          full: {
            base: 'rounded-full'
          }
        }
      },
      // Define compound variants for combinations
      compoundVariants: [
        {
          color: 'tertiary',
          variant: 'solid',
          class: 'text-(--ui-bg) bg-indigo-500 hover:bg-indigo-400'
        }
      ]
    }
  }
})

export default defineAppConfig({
  ui: {
    button: {
      variants: {
        // Add your custom variant
        color: {
          tertiary: '' // Your custom color
        },
        // Add a completely new variant type
        rounded: {
          none: {
            base: 'rounded-none'
          },
          full: {
            base: 'rounded-full'
          }
        }
      },
      // Define compound variants for combinations
      compoundVariants: [
        {
          color: 'tertiary',
          variant: 'solid',
          class: 'text-(--ui-bg) bg-indigo-500 hover:bg-indigo-400'
        }
      ]
    }
  }
})

This approach allows you to: 1. Create custom colors 2. Create custom variant types (like "rounded") 3. Define compound variants for specific combinations The migration from Nuxt UI 2 to 3 involved significant changes to the theming system. In UI 3, the component styling uses the Tailwind Variants API, which makes previous overrides in app.config.ts and the ui prop work differently as explained in the migration guide. When using your custom variants:

<template>
  <UButton color="tertiary" variant="solid">Custom Button</UButton>
  <UButton rounded="full" color="primary">Rounded Button</UButton>
</template>

<template>
  <UButton color="tertiary" variant="solid">Custom Button</UButton>
  <UButton rounded="full" color="primary">Rounded Button</UButton>
</template>

This approach gives you the flexibility to create and mix custom colors and variants as needed in Nuxt UI 3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•3d ago

@kapa.ai I tried this way, looks like it doesn't work :

        button: {
            slots: {
            },
            variants: {
                shape: {
                    test: 
                    {
                        base: 'rounded-full px-12'
                    },
                }                            
            }
        },

        button: {
            slots: {
            },
            variants: {
                shape: {
                    test: 
                    {
                        base: 'rounded-full px-12'
                    },
                }                            
            }
        },

            <UButton shape="test" label="Hello"/>

            <UButton shape="test" label="Hello"/>

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue with your custom variant implementation in Nuxt UI 3. The problem is that you're trying to add a completely new variant type called "shape" which isn't part of the default button variants. In Nuxt UI 3, you need to properly extend the component theme structure. Here's how to correctly implement your custom "shape" variant: Correct Implementation You need to modify your app.config.ts like this:

export default defineAppConfig({
  ui: {
    button: {
      variants: {
        // Add your custom shape variant
        shape: {
          test: {
            base: 'rounded-full px-12'
          }
        }
      },
      // You need to add defaultVariants if you want a default value
      defaultVariants: {
        // Add shape to defaultVariants if needed
        shape: null // or 'test' if you want it as default
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    button: {
      variants: {
        // Add your custom shape variant
        shape: {
          test: {
            base: 'rounded-full px-12'
          }
        }
      },
      // You need to add defaultVariants if you want a default value
      defaultVariants: {
        // Add shape to defaultVariants if needed
        shape: null // or 'test' if you want it as default
      }
    }
  }
})

Alternatively, if you're using Vite directly, you would configure it in your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        button: {
          variants: {
            shape: {
              test: {
                base: 'rounded-full px-12'
              }
            }
          },
          defaultVariants: {
            shape: null
          }
        }
      }
    })
  ]
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        button: {
          variants: {
            shape: {
              test: {
                base: 'rounded-full px-12'
              }
            }
          },
          defaultVariants: {
            shape: null
          }
        }
      }
    })
  ]
})

The key points to make this work: 1. Make sure you're properly extending the existing button theme structure 2. Add your new variant type to the variants object 3. Update the defaultVariants to include your new variant type 4. Ensure your component is properly using the Tailwind Variants API Then your button usage should work as expected:

<UButton shape="test" label="Hello"/>

<UButton shape="test" label="Hello"/>

This approach follows the Nuxt UI 3 theming system which uses the Tailwind Variants API for component styling. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•3d ago

@kapa.ai sorry code was incomplete, this is my code :

export default defineAppConfig({
    ui: {
        colors: {
            primary: 'slate',
        },
        button: {
            slots: {
            },
            variants: {
                shape: {
                    test: 
                    {
                        base: 'rounded-full px-12'
                    },
                }                            
            }
        },
}
})

export default defineAppConfig({
    ui: {
        colors: {
            primary: 'slate',
        },
        button: {
            slots: {
            },
            variants: {
                shape: {
                    test: 
                    {
                        base: 'rounded-full px-12'
                    },
                }                            
            }
        },
}
})

it still doesn't work

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue with your code. The problem is that your defineAppConfig object is missing a closing bracket for the ui property. Let's fix that and make sure the structure is correct for Nuxt UI 3. Here's the corrected version:

export default defineAppConfig({
    ui: {
        colors: {
            primary: 'slate',
        },
        button: {
            slots: {
            },
            variants: {
                shape: {
                    test: {
                        base: 'rounded-full px-12'
                    },
                }                            
            },
            // You need to add defaultVariants to properly register your new variant
            defaultVariants: {
                shape: null // or 'test' if you want it as default
            }
        }
    } // This closing bracket was missing
})

export default defineAppConfig({
    ui: {
        colors: {
            primary: 'slate',
        },
        button: {
            slots: {
            },
            variants: {
                shape: {
                    test: {
                        base: 'rounded-full px-12'
                    },
                }                            
            },
            // You need to add defaultVariants to properly register your new variant
            defaultVariants: {
                shape: null // or 'test' if you want it as default
            }
        }
    } // This closing bracket was missing
})

The key issues in your code were: 1. Missing closing bracket for the ui object 2. Missing defaultVariants property which is important for registering your custom variant According to the Nuxt UI theming documentation, when adding new variants, you should also update the defaultVariants object to include your new variant type, even if it's set to null. Also, make sure you're using the latest version of Nuxt UI 3, as the theming system has been completely updated from v2 to use the Tailwind Variants API. If you're still having issues after making these changes, you might want to try the Vite configuration approach instead, as shown in some of the documentation examples. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•3d ago

@kapa.ai it still doesn't work, can I defined solid and the others existing variants ?

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're still having issues with custom variants in Nuxt UI 3. Let's look at how to properly define both custom variants and work with existing variants like "solid". Based on the documentation, here's how you can define both custom variants and use existing ones like "solid" in Nuxt UI 3:

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'slate',
    },
    button: {
      variants: {
        // Your custom variant
        shape: {
          test: {
            base: 'rounded-full px-12'
          }
        },
        // You can also extend existing variants
        variant: {
          solid: '', // Keep the existing solid variant
          outline: '', // Keep the existing outline variant
          // Add your custom variant under the existing variant type
          custom: {
            base: 'bg-purple-500 text-white hover:bg-purple-600'
          }
        }
      },
      // Make sure to include defaultVariants
      defaultVariants: {
        shape: null,
        variant: 'solid' // Default is solid
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'slate',
    },
    button: {
      variants: {
        // Your custom variant
        shape: {
          test: {
            base: 'rounded-full px-12'
          }
        },
        // You can also extend existing variants
        variant: {
          solid: '', // Keep the existing solid variant
          outline: '', // Keep the existing outline variant
          // Add your custom variant under the existing variant type
          custom: {
            base: 'bg-purple-500 text-white hover:bg-purple-600'
          }
        }
      },
      // Make sure to include defaultVariants
      defaultVariants: {
        shape: null,
        variant: 'solid' // Default is solid
      }
    }
  }
})

Looking at the theme documentation for components like Button, Alert, and Badge, I can see that the proper structure includes: 1. The variants object with different variant types 2. The compoundVariants array for combinations of variants 3. The defaultVariants object to set defaults For example, the Button component has these existing variant types: - color (primary, secondary, etc.) - variant (solid, outline, soft, subtle, ghost, link) - size (xs, sm, md, lg, xl) If you want to customize the existing "solid" variant, you should use the compoundVariants array:

export default defineAppConfig({
  ui: {
    button: {
      variants: {
        shape: {
          test: {
            base: 'rounded-full px-12'
          }
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'solid',
          class: 'bg-(--ui-primary) text-(--ui-bg) hover:bg-(--ui-primary)/75' // Custom styling for solid variant
        }
      ],
      defaultVariants: {
        shape: null,
        variant: 'solid'
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    button: {
      variants: {
        shape: {
          test: {
            base: 'rounded-full px-12'
          }
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'solid',
          class: 'bg-(--ui-primary) text-(--ui-bg) hover:bg-(--ui-primary)/75' // Custom styling for solid variant
        }
      ],
      defaultVariants: {
        shape: null,
        variant: 'solid'
      }
    }
  }
})

This approach follows the Tailwind Variants API structure used by Nuxt UI 3. Make sure your configuration matches this structure exactly, as the theming system is quite specific about how variants are defined. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

UButton custom variants with UI3

Did you find this page helpful?