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.
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.9Getting 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>
)
}- Install
yarn- Start a watch on all packages to rebuild them easily
yarn start- Start documentation website
yarn website- and go to http://localhost:3020
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.
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.
(ex: 7.1.0):
yarn release(ex: 7.1.0-alpha.0)
Generate an alpha release for broader team testing:
yarn release:alpha(ex: dev.1738060597)
Create a development release based on the current timestamp for quick testing of pre-release features:
yarn release:devThe CI will trigger on tags to build the packages and then push them to the npm registry