Getting Started


  1. Install the peer dependencies listed below:
  1. Install the the core component and any other components you need for your webapp e.g. if you need just a button…


Welcome UI provides an helper to help you setup your project: <WuiProvider />.

Hide the focus ring on mouse move or on keydown

WuiProvider takes a shouldHideFocusRingOnClick prop which defaults to true. It hides the focus ring on mouse move, click or on keydown.

It only adds styles to remove the outline on focus. If you need to remove another css property, you have to write your own styles using the data-attribute hideFocusRingsDataAttribute exported from @welcome-ui/utils.

⚠️ Troubleshooting

If it doesn't work for you, check that the id of your react root is set to root. If you have another id (nextjs uses __next), just use the reactRootId prop on WuiProvider to change it: