nft-market-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 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">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 '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'
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;
/* 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
UI components and styles
We found that nft-market-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.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.