Getting Started
Installation
1. Install Welcome UI
Install the @welcome-ui/core
component and peer dependencies listed below:
2. Install UI components
Install any other components you need for your webapp e.g. if you need just a button…
3. Set up the Provider
Use the <WuiProvider />
at the root of your application to set the theme and styled components for your project
WuiProvider Props
Name | Type(s) | Default | Required |
---|---|---|---|
children | node | ||
hasGlobalStyle | bool Will inject our global style with normalize and fonts | true | |
reactRootId | string Id of your react root | root | |
shouldHideFocusRingOnClick | bool It hides the focus ring on mouse move, click or on keydown. (explanation below) | true | |
theme | object Your custom theme from createTheme() | ||
useReset | bool Will inject our global style with https://meyerweb.com/eric/tools/css/reset/ reset. | false |
Hide Focus Ring
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: