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 #

NameType(s)DefaultRequired
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: