Welcome UI

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

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

🌴 Discover all the components

Installation

1 - Install the welcome-ui package and peer dependencies listed below:

yarn add welcome-ui @xstyled/styled-components@^3.7.3 react@^18.0.0 styled-components@^5.3.9

Import library & Theme

Getting started

import React from 'react'
import { createTheme } from 'welcome-ui/theme'
import { WuiProvider } from 'welcome-ui/WuiProvider'
import { Button } from 'welcome-ui/Button'

// Add theme options (if you want)
const options = {
  defaultFontFamily: 'Helvetica',
  headingFontFamily: 'Georgia',
  colors: {
    primary: {
      50: '#124C80',
    },
    green: {
      50: '#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. Install

yarn

2. Start documentation website

yarn start

3. and go to http://localhost:3020

How to release

The release of the library is automated by the CI, you just need to bump package version and push git tags to initiate the process.

Release process

The commands listed below will only prompt for library to bump. Then they will modify package version, commit changes and create the git tag to finally push everything to github. No further actions are required once you have validated the packages to bump.

How to release

Production

(ex: 7.1.0):

yarn release

Alpha

(ex: 7.1.0-alpha.0)

Generate an alpha release for broader team testing:

yarn release:alpha

Development

(ex: dev.1738060597)

Create a development release based on the current timestamp for quick testing of pre-release features:

yarn release:dev

About the CI

The CI will trigger on tags to build the packages and then push them to the npm registry