Getting Started

Installation #

1. Install Welcome UI #

Install the @welcome-ui/core component and peer dependencies listed below:

yarn add @welcome-ui/core @xstyled/styled-components @xstyled/system prop-types react react-dom styled-componentsyarn add @welcome-ui/core @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components

2. Install UI components #

Install any other components you need for your webapp e.g. if you need just a button…

yarn add @welcome-ui/buttonyarn add @welcome-ui/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

import React from 'react'
import { createTheme, WuiProvider } from '@welcome-ui/core'
import { Button } from '@welcome-ui/button'

const theme = createTheme()

export default function Root() {
  return (
    <WuiProvider theme={theme}>
      <Button variant="secondary">Welcome!</Button>
    </WuiProvider>
  )
}import React from 'react'
import { createTheme, WuiProvider } from '@welcome-ui/core'
import { Button } from '@welcome-ui/button'
const theme = createTheme()
export default function Root() {
  return (
    <WuiProvider theme={theme}>
      <Button variant="secondary">Welcome!</Button>
    </WuiProvider>
  )
}

WuiProvider Props #

Name	Type(s)	Default
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:

<WuiProvider
  theme={theme}
  hasGlobalStyle
  reactRootId="__next"
>
  {your app}
</WuiProvider><WuiProvider
  theme={theme}
  hasGlobalStyle
  reactRootId="__next"
>
  {your app}
</WuiProvider>

Made with by