@chaincodedev/decentraland-ui
Advanced tools
This is basically semantic-ui-react themed with Decentrland's look & feel + some of our own components
See: ui.decentraland.org
Install it:
npm install --save @ccl-shashank/@ccl-shashank/decentraland-ui
Import Decentraland UI's styles in your App's entry point
import '@ccl-shashank/@ccl-shashank/decentraland-ui/lib/styles.css'
Now you can use Decentraland UI's components
import React from 'react'
import { Button } from '@ccl-shashank/@ccl-shashank/decentraland-ui'
export class MyApp extends React.Component {
render() {
return <Button>Sabe</Button>
}
}
You can also use @ccl-shashank/@ccl-shashank/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">Sabe</button>
🏌
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 '@ccl-shashank/@ccl-shashank/decentraland-ui/dist/themes/base-theme.css'
import '@ccl-shashank/@ccl-shashank/decentraland-ui/dist/themes/alternative/light-theme.css'
// or import '@ccl-shashank/@ccl-shashank/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 '@ccl-shashank/@ccl-shashank/decentraland-ui/dist/components/Button/Button'
import { Card } from '@ccl-shashank/@ccl-shashank/decentraland-ui/dist/components/Card/Card'
You can use one of our alternative themes by importing in after Decentraland UI's styles, like this:
import '@ccl-shashank/@ccl-shashank/decentraland-ui/lib/styles.css'
import '@ccl-shashank/@ccl-shashank/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;
/* 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 */
}
Install dependencies and start Storybook
$ npm install
$ npm start
We deploy automatically to ui.decentraland.org and release a new version via semantic-release
FAQs
Decentraland's UI components and styles
The npm package @chaincodedev/decentraland-ui receives a total of 0 weekly downloads. As such, @chaincodedev/decentraland-ui popularity was classified as not popular.
We found that @chaincodedev/decentraland-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.