cRicateau/welcome-ui

Customizable design system of @wttj with react • styled-components • styled-system • reakit

Welcome UI

Welcome to the Welcome UI library created by Welcome to the jungle, a customizable design system with react • styled-components • styled-system and reakit.

Here you'll find all the core components you need to create a delightful webapp.

🌴 Discover all the components

---

---

Installation

1 - Install the peer dependencies listed below:

yarn add @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components

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

Import library & Theme

Getting started

import React from 'react'
import { createTheme, WuiProvider } 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: '#124C80'
    },
    success: {
      500: '#32CD32'
    }
  }
}

// Create your theme
const theme = createTheme(options)
export default function Root() {
  return (
    // Wrap your components with <WuiProvider /> with your theme
    <WuiProvider
      theme={theme}
      // Will inject a CSS reset with normalizer
      hasGlobalStyle
      // Will show the focus ring on keyboard navigation only
      shouldHideFocusRingOnClick
    >
      <Button>Welcome!</Button>
    </WuiProvider>
  )
}

Develop on local

1. First install and build the packages (only the first time)

yarn first:install

2. Start documentation website

yarn start

3. Start a watch on all packages to rebuild them easily

yarn watch

4. and go to https://localhost:3020

Add some new icons

Follow the steps of icons/README.md