@hotosm/ui
Advanced tools
Shared Web Components with theming for use across HOTOSM tools.
📖 Documentation:
https://ui.hotosm.org
🖥️ Source Code:
https://github.com/hotosm/ui
🎯 Roadmap / Tasks: https://github.com/orgs/hotosm/projects/37/views/3
This repository contains advice on how to use the WebAwesome Web Components library, references to the HOTOSM style guide, and a few 'wrapper' components to assist development:
The main goal of this project is not to re-invent the wheel, or add an extra burden of development and maintenance. It should include a minimal number of components, such as:
Current HOTOSM UI version used: 0.3.1-b5
Current WebAwesome version used: 3.0.0-beta.1
pnpm install "@awesome.me/webawesome@3.0.0-beta.1"
[!NOTE] It's important to pin the version of web awesome used to the version in this library, to avoid any conflicts and incompatibilities between components.
pnpm install "@hotosm/ui"
In your index.html or equivalent frontend root, add the following classes
to your <html> block:
<!DOCTYPE html>
<html class="wa-theme-default wa-palette-hotosm wa-brand-red wa-neutral-gray
wa-success-cyan wa-warning-yellow wa-danger-orange">
<head>
xxx
</head>
<body>
xxx
</body>
</html>
[!IMPORTANT] These classes determine the colour usage for different component variants, and probably should not be changed!
And import the required styles in your main.ts or equivalent (we import from
package rather than CDN, to allow the bundler to work its CSS tree-shaking
magic).
import '@hotosm/ui/dist/style.css';
If you wish to use any of the variables in hot.css manually, you can reference
them as variables like so:
/* In your CSS file */
some-param: var(--hot-some-param);
/* See all variables in the `theme/hot.css` file */
Import each component individually into your code:
<script>
import '@hotosm/ui/dist/components/header/header.js';
</script>
<hot-header
param1=""
param2=""
>
</hot-header>
If you are working directly in HTML, or other ways without a configured bundler, you can import all the components as a bundle, as use them like so:
<script>
import '@hotosm/ui/dist/style.css';
import '@hotosm/ui/dist/hotosm-ui';
</script>
<hot-header title="Test App" size="small" showLogin="false"></hot-header>
Import in the same way as the bundler example above, except events are bound to slightly differently:
<hot-header
title="Test App"
size="small"
showLogin="false"
onLogin={() => {
console.log('handler');
}}
></hot-header>
/header.md for detailed integration, styling, and
framework examples.git clone git@github.com:hotosm/ui.gitpnpm installpnpm run devFor styling, check /theme:
hot.css has a HOT theme, used across HOT components.hot-wa-override.css has a WebAwesome theme, re-defining style variables.HOT UI is free and open source software! you may use any HOT UI project under the terms of the GNU Affero General Public License (AGPL) Version 3.
FAQs
Shared UI components with HOT theming.
We found that @hotosm/ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers 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.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.
Security News
CISA’s 2025 draft SBOM guidance adds new fields like hashes, licenses, and tool metadata to make software inventories more actionable.
Security News
A clarification on our recent research investigating 60 malicious Ruby gems.