Custom Variants
NextUI allows you to create new variants for components that better suit your project's needs. This can be done by extending the component and its properties, and customizing the styles.
You can create or override the component variants, defaultVariants and compoundVariants.
Note: For one-off customizations, refer to the Override Styles documentation.
Creating new variants for non-slots components
The Button component is a non-slots component, meaning that it does not have any slots that can be customized.
For this example, we will be using the Button component's styles source code as a
reference. Go here to view the styles source code.
Note: If you are not familiar with the variants concept, please refer to the Tailwind Variants documentation.
Extend the original component variants
To create or override variants you need to use the extendVariants function. This function
allows you to create a new component based on the original component, and customize its variants.
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
It is also possible to use the extendVariants function to add or override variants for
components that have slots.
The Input component is a slots component, meaning that it has slots that can be customized.
For this example, we will be using the Input component's styles source code as a
reference. Go here to view the styles source code.
Note: If you are not familiar with the variants/slots concept, please refer to the Tailwind Variants documentation.
Extend the original component variants
To create or override variants you need to use the extendVariants function. This function
allows you to create a new component based on the original component, and customize its variants.
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.
All NextUI components have the
Styles sourcelink on top of the page. This link will take you to the styles source code of the component. You can use this as a reference when creating your own custom component.
Types
Main Function
Options
Config
Note: See the Tailwind Merge Config to learn more about it.
