Skip to content

Here you'll find all the core components you need to create a delightful webapp. Customizable design system from Welcome to the jungle (@WTTJ) with react, typescript, styled-components, reakit and a lot of love πŸ’›

License

WTTJ/welcome-ui

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

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


License Code formating Code style PRs Welcome Conventional Commits


Installation

1 - Install the peer dependencies listed below:

yarn add @xstyled/styled-components react 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
  1. Start documentation website
yarn start
  1. Start a watch on all packages to rebuild them easily
yarn watch
  1. and go to https://localhost:3020

Add some new icons

Follow the steps of icons/README.md