Root component

This page condensates information about the Windmill component that you may have already seen in Dark theme, Installation and Customization, but gives more details.


import { Windmill } from '@windmill/react-ui'


The default Windmill component must encapsulate your root component and it doesn't apply any changes by default.

This is only recommended if you just want to provide a single light theme.
<App />

Use preferences

The usePreferences prop enables these features:

  • Theme toggler to switch between themes (read more about it)
  • prefers-color-scheme support to automatically change to dark theme if user prefers 'dark'
  • localStorage storing for user preferences so it's consistent on every visit/load

All of it taken care with a single prop...

<Windmill usePreferences>
<App />

Dark as default

The dark prop turns the dark theme the default.

<Windmill dark>
<App />

Custom theme

You can merge a custom theme (that is, you don't need to create a complete theme, just changing little bits is enough) using the theme prop.

Learn how to do it on Customization.

<Windmill theme={myTheme}>
<App />

Props overview

usePreferencesapply user theme preferences and provide utilitiesbooleanfalse
darkdefine dark theme as defaultboolean
themetheme to merge with defaultThemeobject


See Customization to learn how to change defaultTheme styles.