HOT Shared UI

Shared Web Components with theming for use across HOTOSM tools.

📖 Documentation: https://hotosm.github.io/ui/

🖥️ Source Code: https://github.com/hotosm/ui

---

Shared UI components with theming for use across HOTOSM tools, to reduce code duplication.

The components are Web Components, currently written in Lit, using TypeScript.

Install

Via NPM:

npm install @hotosm/ui

yarn add @hotosm/ui

pnpm install @hotosm/ui

Usage

HTML / HTMX

// Import the components
<script
  type="module"
  src="https://s3.amazonaws.com/hotosm-ui/latest/ui.js"
></script>

// Import the styles (or create your own)
<link
  rel="stylesheet"
  href="https://s3.amazonaws.com/hotosm-ui/latest/style.css"
/>

<div>
  <hot-button disabled> </hot-button>
</div>

See the docs for more usage examples.

core.js will contain the minimal low level components.

extra.js will contain additional wrapper components.

There should be versioning of the components, plus a /latest/ version too.

React

Install your required version with a pin, or latest:

pnpm install @hotosm/ui

import { hot-button } from '@hotosm/ui';

const HomePage = ({}) => {
  return (
    <div className="your-css-classes">
      <div
        ...
      >
        <hot-button disabled>
        </hot-button>
      </div>
    </div>
  );
};

export default HomePage;