Kleros UI Components Library

Introduction

📖 Storybook

👨‍🎨 Figma

Usage

Install the package

With yarn add @kleros/ui-components-library or npm install @kleros/ui-components-library

Create a theme file

Wwhere you destructure lightTheme or darkTheme (or both) in your theme object to provide the correct colors to the components. (example).

Provide the theme

With styled-components ThemeProvider (example).

Package Publication

Tagging

1. Bump the version in package.json
2. Run a clean build: yarn clean && yarn build
3. Commit the change to git: git add -u ; git commit -m "chore: release"
4. Tag this version: version=v$(cat package.json | jq -r .version) && git tag -m $version $version
5. Push both commit and tag: git push && git push --tags

Publish to NPM

1. Export your NPM token: export YARN_NPM_AUTH_TOKEN=<npm_xxxxxxxxxxxx>
2. Publish: yarn publish

Publish to Github

1. Login

npm login --registry https://npm.pkg.github.com --auth-type legacy
> Username: YOUR_GITHUB_USERNAME
> Password: YOUR_GITHUB_PERSONAL_ACCESS_TOKEN`

2. Publish: npm publish --registry https://npm.pkg.github.com