Package Exports

@kmon/ui
@kmon/ui/dist/index.js
@kmon/ui/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kmon/ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Kryptomon UI

This is basically semantic-ui-react themed with Decentrland's look & feel + some of our own components

See: ui.kryptomon.org

Usage

Install it:

npm install --save @kmon/ui

Import Kryptomon UI's styles in your App's entry point

import '@kmon/ui/lib/styles.css'

Now you can use Kryptomon UI's components

import React from 'react'
import { Button } from '@kmon/ui'

export class MyApp extends React.Component {
  render() {
    return <Button>Sabe</Button>
  }
}

Without React

You can also use @kmon/ui as a CSS framework just by adding this tag in your <head>:

<link href="https://ui.Kryptomon.org/styles.css" rel="stylesheet" />

And then using Semantic UI classes like this:

<button class="ui button">Sabe</button>

🏌

Alternative themes

You can use one of our alternative themes by importing in after Kryptomon UI's styles, like this:

import '@kmon/ui/lib/styles.css'
import '@kmon/ui/lib/dark-theme.css'

Or you can create your own theme like this:

/* my-theme.css */
:root {
  /* global */
  --background: #ffffff;
  --danger: #ffa900;
  --error: #ff0000;

  /* buttons */
  --primary: #ff2d55;
  --secondary: #f3f2f5;
  --primary-hover: #ff3d61;
  --secondary-hover: #ecebed;

  /* on modals */
  --secondary-on-modal: #f3f2f5;
  --secondary-on-modal-hover: #ecebed;
  --card-on-modal: #ffffff;

  /* text */
  --text: #16141a;
  --secondary-text: #676370;
  --text-on-primary: #ffffff;
  --text-on-secondary: #16141a;

  /* ui */
  --divider: #67637033;
  --dropdown: #ffffff;
  --dropdown-hover: #f3f2f5;
  --popup: #16141a;
  --popup-text: #ffffff;
  --navbar-popup: #ffffff;
  --navbar-popup-hover: #f3f2f5;
  --card: #ffffff;
  --outline: 1px solid #00000005;
  --toast: #16141a;
  --toast-text: #ffffff;
  --modal: #ffffff;
  --dimmer: #ffffffdd;

  /* shadows */
  --shadow-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  --shadow-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
  --shadow-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.16);

  --shadow-color-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
  --shadow-color-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
  --shadow-color-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.24);

  /* svgs */
  --brightness: brightness(0.1); /* black svgs */
}

Development

Install dependencies and start Storybook

$ npm install
$ npm start

CI/CD

We deploy automatically to ui.Kryptomon.org and release a new version via semantic-release