Installation
1. Install Welcome UI
Install the @welcome-ui/core
component and peer dependencies listed below:
yarn add @welcome-ui/core @xstyled/styled-components react 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/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>)}
WuiProvider Props
children
node
hasGlobalStyle
bool | undefined = true
Will inject our global style with normalize and fonts
reactRootId
string | undefined = root
Id of your react root
shouldHideFocusRingOnClick
bool | undefined = true
It hides the focus ring on mouse move, click or on keydown. (explanation below)
theme
object
Your custom theme from createTheme()
useReset
bool | undefined = false
Will inject our global style with https://meyerweb.com/eric/tools/css/reset/ reset.
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:
<WuiProvidertheme={theme}hasGlobalStylereactRootId="__next">{your app}</WuiProvider>
Typescript
Install needed types:
yarn add @types/react-dom @types/styled-components
In order to get your theme object typed with our theme, you have to override the default theme by adding this in a "styled.d.ts" file at the root of your project:
// styled.d.tsimport 'styled-components'import '@xstyled/styled-components'import { WuiTheme } from '@welcome-ui/core'interface AppTheme extends WuiTheme {// customize your theme}declare module '@xstyled/styled-components' {export interface Theme extends AppTheme {}}declare module 'styled-components' {export interface DefaultTheme extends AppTheme {}}