logoCreated with Sketch.

Getting Started

Installation

  1. Install the peer dependencies listed below:
yarn add @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components
  1. Install the the core component and any other components you need for your webapp e.g. if you need just a button…
yarn add @welcome-ui/core @welcome-ui/button

Usage

import React from 'react'
import { ThemeProvider } from '@xstyled/styled-components'
import { createTheme, GlobalStyle } from '@welcome-ui/core'
import { Button } from '@welcome-ui/button'
// Add theme options (if you want)
const options = {
defaultFontFamily: 'Helvetica',
headingFontFamily: 'Georgia',
colors: {
primary: {
500: '#FF0000'
},
secondary: {
500: '#00FF00'
}
}
}
// Create your theme
const theme = createTheme(options)
export default function Root() {
// Wrap your component with <ThemeProvider/> (passing through your theme) and add <GlobalStyle/>
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyle />
<Button variant="secondary">Welcome!</Button>
</>
</ThemeProvider>
)
}