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
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
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>
)
}
- First install and build the packages (only the first time)
yarn first:install
- Start documentation website
yarn start
- Start a watch on all packages to rebuild them easily
yarn watch
- and go to https://localhost:3020
The release of the packages is automated by the CI, you just need to bump package version and push git tags to initiate the process.
The commands listed below will only prompt for packages to bump. Then they will modify packages versions, 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.
If you just need to bump one version without bumping to a major or switching from a prerelease to stable release, run:
yarn release
yarn release major
This is only used for the first prerelease. If you already published a v5.0.0-alpha.0 then you just need to run the first command.
yarn release --preid alpha
NB: you can replace alpha with any other keyword (beta, rc, ...)
The CI will trigger on tags to build the packages and then push them to the npm registry