Decentraland-ui NPM

Decentraland UI

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

Usage

npm install --save decentraland-ui

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

import 'decentraland-ui/lib/styles.css'

Now you can use Decentraland UI's components:

import React from 'react'
import { Button } from 'decentraland-ui'

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

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

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

And then using Semantic UI classes like this:

<button class="ui button">Click me!</button>

Minimizing bundle size

You can import just the essential component and reduce the size of your bundles, like this:

// import css
import 'semantic-ui-css/semantic.min.css'
import 'balloon-css/balloon.min.css'
import 'decentraland-ui/dist/themes/base-theme.css'
import 'decentraland-ui/dist/themes/alternative/light-theme.css'
// or import 'decentraland-ui/dist/themes/alternative/dark-theme.css'

// Then import just the components you will use
import Grid from 'semantic-ui-react/dist/commonjs/collections/Grid/Grid'
import { Button } from 'decentraland-ui/dist/components/Button/Button'
import { Card } from 'decentraland-ui/dist/components/Card/Card'

Alternative themes

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

import 'decentraland-ui/lib/styles.css'
import 'decentraland-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;
  --clear-divider: #a09ba8;


  /* 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-4: 0px 8px 16px 12px rgba(0, 0, 0, 0.1);

  --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

Prerequisites: Node.js v16 (or compatible)

Install dependencies and start Storybook:

$ npm install
$ npm start

CI/CD

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

7 months ago

7 months ago

7 months ago

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

Decentraland UI

Usage

Without React

Minimizing bundle size

Alternative themes

Development

CI/CD