Customization | Windmill React UI

Windmill React UI uses a default theme under the hood to provide you a concise, but still flexible styling experience. You can find the entire file here.

You can reference it in your code importing the default theme @windmill/react-ui/lib/defaultTheme.

Customize the default theme

To change a specific style, create a file in your project and add the properties you want to change (see all available styles):

myTheme.js

export default {
  button: {
    size: {
      regular: 'px-4 py-2 text-sm',
    },
  },
}

Note that you only need to specify the values you are changing within your theme. It will be merged together with the default theme automtically.

Then pass it to the Windmill component that is enclosing your root components, using the prop theme.

App.js

import { Windmill } from '@windmill/react-ui'
import myTheme from './myTheme.js'
ReactDOM.render(
  <Windmill theme={myTheme}>
    <App />
  </Windmill>,
  document.getElementById('root')
)

As a side note, you still need to pass your theme file to Purge to make sure your styles will appear in the production build.

Customize the default theme

Dark theme