# decentraland-ui

> Decentraland's UI components and styles

Latest version **7.2.1** (published 2026-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install decentraland-ui
pnpm add decentraland-ui
yarn add decentraland-ui
bun add decentraland-ui
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 7.2.1 |
| Published | 2026-08-24 |
| First published | 2018-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20 |
| Dependencies | 18 |
| Unpacked size | 14.9 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 212 |
| Author | Decentraland |
| Maintainers | cazala, decentralandbot, nicosantangelo, juanmahidalgo |
| Keywords | decentraland, ui, react, semantic-ui, components, styles, themes |

## Links

- npm: https://www.npmjs.com/package/decentraland-ui
- Repository: https://github.com/decentraland/ui
- Homepage: https://github.com/decentraland/ui#readme
- Issues: https://github.com/decentraland/ui/issues
- npm.io page: https://npm.io/package/decentraland-ui

## Dependencies (18)

- [mitt](https://npm.io/package/mitt.md) ^3.0.1
- [uuid](https://npm.io/package/uuid.md) ^9.0.1
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.10
- [events](https://npm.io/package/events.md) ^3.3.0
- [recharts](https://npm.io/package/recharts.md) ^2.3.2
- [fp-future](https://npm.io/package/fp-future.md) ^1.0.1
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [deep-equal](https://npm.io/package/deep-equal.md) ^2.0.5
- [@dcl/ui-env](https://npm.io/package/@dcl/ui-env.md) ^1.5.1
- [balloon-css](https://npm.io/package/balloon-css.md) ^0.5.0
- [parallax-js](https://npm.io/package/parallax-js.md) ^3.1.0
- [@dcl/schemas](https://npm.io/package/@dcl/schemas.md) ^22.5.0
- [react-tile-map](https://npm.io/package/react-tile-map.md) ^0.4.1
- [semantic-ui-css](https://npm.io/package/semantic-ui-css.md) ^2.4.1
- [react-responsive](https://npm.io/package/react-responsive.md) ^9.0.0-beta.3
- [ethereum-blockies](https://npm.io/package/ethereum-blockies.md) ^0.1.1
- [semantic-ui-react](https://npm.io/package/semantic-ui-react.md) ^2.1.5
- [react-semantic-ui-datepickers](https://npm.io/package/react-semantic-ui-datepickers.md) ^2.17.2

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 7.2.1 (latest) — 2026-08-24
- 3.53.2-rc (rc) — 2022-10-04
- 0.0.0-development (smaller-css-rc1) — 2022-10-03
- 7.2.0 — 2026-02-03
- 7.1.0 — 2025-12-12
- 7.0.1 — 2025-12-11
- 7.0.0 — 2025-12-10
- 6.24.0 — 2025-11-10
- 6.23.1 — 2025-10-27
- 6.23.0 — 2025-10-27
- 6.22.0 — 2025-08-28
- 6.21.0 — 2025-08-28
- 6.20.0 — 2025-08-06
- 6.19.0 — 2025-07-28
- 6.18.0 — 2025-07-04
- … 535 more at https://npm.io/package/decentraland-ui/versions

## README

<img src="https://ui.decentraland.org/decentraland_256x256.png" height="128" width="128" />

# Decentraland UI [![CircleCI](https://circleci.com/gh/decentraland/ui.svg?style=svg)](https://circleci.com/gh/decentraland/ui) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

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

See: [ui.decentraland.org](https://ui.decentraland.org)

## Usage

Install it:

```bash
npm install --save decentraland-ui
```

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

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

Now you can use Decentraland UI's components:

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

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

### Without React

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

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

And then using [Semantic UI](https://semantic-ui.com/) classes like this:

```html
<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:

```jsx
// 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:

```jsx
import 'decentraland-ui/lib/styles.css'
import 'decentraland-ui/lib/dark-theme.css'
```

Or you can create your own theme like this:

```css
/* 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](https://ui.decentraland.org) and release a new version via `semantic-release`.

---
_Source: https://npm.io/package/decentraland-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._