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
Copy

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
Copy

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>
  )
}
Copy

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

Typescript #

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 {}
}
Copy