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 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

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>

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.ts
import '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 {}
}