By default, we use our default theme create by createTheme() function. We also also create a dark theme and a welcome theme for our products.

You can customize your theme with some options:

  • customize the theme values like colors, fonts, spacing etc.
  • customize the component styles, changing the variants, sizes etc.
  • customize the global style if you want to disable or not our reset css

Customize theme values

To create your theme, use need to add some values from object on createTheme() function.

Reset styles

To provide consistency across browsers we provide two options:

  1. Pass useReset in the WuiProvider to use a custom reset

  2. Don't pass useReset to just reset box-sizing e.g.

Customizing component

An example of the theme.js file for the Tag component. You can customize the variants, sizes and shapes.

You can check all our theme objects on each packages/component on file theme.js.

How to customize the component

The entry is always in plurial (tags, buttons, etc.)

All theme values

Here are all the possible values for your theme.
These will be merged with the default theme.