Custom Variants
HeroUI allows you to create new variants for components by extending and customizing their styles. You can override the component's variants, defaultVariants and compoundVariants.
Note: For one-off customizations, refer to the Override Styles documentation.
Creating new variants for non-slots components
Let's use the Button component as an example. It's a non-slots component, and you can view its source styles here.
Note: If you are not familiar with the variants concept, please refer to the Tailwind Variants documentation.
Extend the original component variants
Use the extendVariants function to create a new component with customized variants based on an existing component.
Use your custom component in your application
Then, you can now use your custom component in your application. Here, MyButton is
used with the color set to olive and the size set to xl.
The new component will include the original props of the Button component, plus the new
variants that you have created.
Creating new variants for slots components
The extendVariants function can also be used with slot-based components like Input to add or override variants. You can view the Input component's source styles here.
Note: If you are not familiar with the variants/slots concept, please refer to the Tailwind Variants documentation.
Extend the original component variants
Use the extendVariants function to create a new component with custom variants based on the original component.
Use your custom component in your application
Then, you can now use your custom component in your application. Here, MyInput is
used with the color set to slate and the size set to xl.
The new component will include the original props of the Input component, plus the new variants that you have created.
Use the
Styles sourcelink at the top of each component page to view its source code as a reference for customization.
Types
Main Function
Options
Config
Note: See the Tailwind Merge Config to learn more about it.
