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 πŸ’›



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?

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


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
      // Will inject a CSS reset with normalizer
      // Will show the focus ring on keyboard navigation only

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/