# huntingocean-ui > Huntingocean's UI components and styles Latest version **0.6.0** (published 2021-08-30) · MIT license · 0 weekly downloads ## Install ```sh npm install huntingocean-ui pnpm add huntingocean-ui yarn add huntingocean-ui bun add huntingocean-ui ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; large bundle; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.6.0 | | Published | 2021-08-30 | | First published | 2021-08-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 17.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Huntingocean | | Maintainers | huntingocean | | Keywords | huntingocean, ui, react, semantic-ui, components, styles, themes | ## Links - npm: https://www.npmjs.com/package/huntingocean-ui - Repository: https://github.com/huntingocean/ui - Homepage: https://github.com/huntingocean/ui#readme - Issues: https://github.com/huntingocean/ui/issues - npm.io page: https://npm.io/package/huntingocean-ui ## Dependencies (10) - [react](https://npm.io/package/react.md) ^17.0.2 - [react-dom](https://npm.io/package/react-dom.md) ^17.0.2 - [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) ^0.2.0 - [react-tile-map](https://npm.io/package/react-tile-map.md) ^0.3.2 - [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.0.3 ## 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 - 0.6.0 (latest) — 2021-08-30 - 0.2.0 — 2021-08-30 - 0.1.0 — 2021-08-30 ## README # Huntingocean UI [![CircleCI](https://circleci.com/gh/huntingocean/ui.svg?style=svg)](https://circleci.com/gh/huntingocean/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.huntingocean.games](https://ui.huntingocean.games) ## Usage Install it: ```bash npm install --save huntingocean-ui ``` Import Huntingocean UI's styles in your App's entry point ```jsx import 'huntingocean-ui/lib/styles.css' ``` Now you can use Huntingocean UI's components ```jsx import React from 'react' import { Button } from 'huntingocean-ui' export class MyApp extends React.Component { render() { return } } ``` ### Without React You can also use `huntingocean-ui` as a CSS framework just by adding this tag in your ``: ```html ``` And then using [Semantic UI](https://semantic-ui.com/) classes like this: ```html ``` 🏌 ## Alternative themes You can use one of our alternative themes by importing in after Huntingocean UI's styles, like this: ```jsx import 'huntingocean-ui/lib/styles.css' import 'huntingocean-ui/lib/dark-theme.css' ``` Or you can create your own theme like this: ```css /* my-theme.css */ :root { /* global */ --background: #32FFFF; --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: #32FFFF; /* text */ --text: #16141a; --secondary-text: #238b8b; --text-on-primary: #32FFFF; --text-on-secondary: #16141a; /* ui */ --divider: #07212e; --dropdown: #32FFFF; --dropdown-hover: #f3f2f5; --popup: #16141a; --popup-text: #32FFFF; --navbar-popup: #32FFFF; --navbar-popup-hover: #f3f2f5; --card: #32FFFF; --outline: 1px solid #00000005; --toast: #16141a; --toast-text: #32FFFF; --modal: #32FFFF; --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 */ } ``` ## Development Install dependencies and start Storybook ``` $ npm install $ npm start ``` ## CI/CD We deploy automatically to [ui.huntingocean.games](https://ui.huntingocean.games) and release a new version via `semantic-release` --- _Source: https://npm.io/package/huntingocean-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._