{"id":13790494,"url":"https://github.com/decentraland/ui","last_synced_at":"2025-12-12T00:31:12.799Z","repository":{"id":32640115,"uuid":"138225704","full_name":"decentraland/ui","owner":"decentraland","description":"🦄 Decentraland UI","archived":false,"fork":false,"pushed_at":"2025-03-17T17:46:02.000Z","size":61261,"stargazers_count":211,"open_issues_count":21,"forks_count":95,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-28T19:49:36.415Z","etag":null,"topics":["components","decentraland","react","semantic-ui","ui"],"latest_commit_sha":null,"homepage":"https://ui.decentraland.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/decentraland.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-21T21:57:08.000Z","updated_at":"2025-04-04T13:32:06.000Z","dependencies_parsed_at":"2023-10-11T15:22:05.019Z","dependency_job_id":"c1adab28-2820-4469-920a-6da25e65e4bb","html_url":"https://github.com/decentraland/ui","commit_stats":{"total_commits":653,"total_committers":32,"mean_commits":20.40625,"dds":0.6539050535987749,"last_synced_commit":"80dff04cc92563a635362d01b73655cd68dcdbca"},"previous_names":[],"tags_count":462,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decentraland%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decentraland%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decentraland%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decentraland%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/decentraland","download_url":"https://codeload.github.com/decentraland/ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253300730,"owners_count":21886516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","decentraland","react","semantic-ui","ui"],"created_at":"2024-08-03T22:00:45.137Z","updated_at":"2025-12-12T00:31:12.794Z","avatar_url":"https://github.com/decentraland.png","language":"TypeScript","funding_links":[],"categories":["Roadmap"],"sub_categories":[],"readme":"\u003cimg src=\"https://ui.decentraland.org/decentraland_256x256.png\" height=\"128\" width=\"128\" /\u003e\n\n# 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)\n\nThis is basically `semantic-ui-react` themed with Decentrland's look \u0026 feel + some of our own components\n\nSee: [ui.decentraland.org](https://ui.decentraland.org)\n\n## Usage\n\nInstall it:\n\n```bash\nnpm install --save decentraland-ui\n```\n\nImport Decentraland UI's styles in your App's entry point\n\n```jsx\nimport 'decentraland-ui/lib/styles.css'\n```\n\nNow you can use Decentraland UI's components:\n\n```jsx\nimport React from 'react'\nimport { Button } from 'decentraland-ui'\n\nexport class MyApp extends React.Component {\n  render() {\n    return \u003cButton\u003eSabe\u003c/Button\u003e\n  }\n}\n```\n\n### Without React\n\nYou can also use `decentraland-ui` as a CSS framework just by adding this tag in your `\u003chead\u003e`:\n\n```html\n\u003clink href=\"https://ui.decentraland.org/styles.css\" rel=\"stylesheet\" /\u003e\n```\n\nAnd then using [Semantic UI](https://semantic-ui.com/) classes like this:\n\n```html\n\u003cbutton class=\"ui button\"\u003eClick me!\u003c/button\u003e\n```\n\n🏌\n\n## Minimizing bundle size\n\nYou can import just the essential component and reduce the size of your bundles, like this:\n\n```jsx\n// import css\nimport 'semantic-ui-css/semantic.min.css'\nimport 'balloon-css/balloon.min.css'\nimport 'decentraland-ui/dist/themes/base-theme.css'\nimport 'decentraland-ui/dist/themes/alternative/light-theme.css'\n// or import 'decentraland-ui/dist/themes/alternative/dark-theme.css'\n\n// Then import just the components you will use\nimport Grid from 'semantic-ui-react/dist/commonjs/collections/Grid/Grid'\nimport { Button } from 'decentraland-ui/dist/components/Button/Button'\nimport { Card } from 'decentraland-ui/dist/components/Card/Card'\n```\n\n## Alternative themes\n\nYou can use one of our alternative themes by importing in after Decentraland UI's styles, like this:\n\n```jsx\nimport 'decentraland-ui/lib/styles.css'\nimport 'decentraland-ui/lib/dark-theme.css'\n```\n\nOr you can create your own theme like this:\n\n```css\n/* my-theme.css */\n:root {\n  /* global */\n  --background: #ffffff;\n  --danger: #ffa900;\n  --error: #ff0000;\n\n  /* buttons */\n  --primary: #ff2d55;\n  --secondary: #f3f2f5;\n  --primary-hover: #ff3d61;\n  --secondary-hover: #ecebed;\n\n  /* on modals */\n  --secondary-on-modal: #f3f2f5;\n  --secondary-on-modal-hover: #ecebed;\n  --card-on-modal: #ffffff;\n\n  /* text */\n  --text: #16141a;\n  --secondary-text: #676370;\n  --text-on-primary: #ffffff;\n  --text-on-secondary: #16141a;\n\n  /* ui */\n  --divider: #67637033;\n  --dropdown: #ffffff;\n  --dropdown-hover: #f3f2f5;\n  --popup: #16141a;\n  --popup-text: #ffffff;\n  --navbar-popup: #ffffff;\n  --navbar-popup-hover: #f3f2f5;\n  --card: #ffffff;\n  --outline: 1px solid #00000005;\n  --toast: #16141a;\n  --toast-text: #ffffff;\n  --modal: #ffffff;\n  --dimmer: #ffffffdd;\n  --clear-divider: #a09ba8;\n\n\n  /* shadows */\n  --shadow-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);\n  --shadow-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);\n  --shadow-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.16);\n  --shadow-4: 0px 8px 16px 12px rgba(0, 0, 0, 0.1);\n\n  --shadow-color-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);\n  --shadow-color-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);\n  --shadow-color-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.24);\n\n  /* svgs */\n  --brightness: brightness(0.1); /* black svgs */\n}\n```\n\n## Development\n\nPrerequisites: Node.js v16 (or compatible)\n\nInstall dependencies and start Storybook:\n\n```\n$ npm install\n$ npm start\n```\n\n## CI/CD\n\nWe deploy automatically to [ui.decentraland.org](https://ui.decentraland.org) and release a new version via `semantic-release`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecentraland%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdecentraland%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecentraland%2Fui/lists"}