Skip to content
Home Theme Gallery

Getting the files

A host needs at most four static files, all built from the same commit:

FileWhat it is
home-ui.jsEvery element, one self-contained ES module with lit inlined.
home-ui.cssTokens, the class sheet and the icon masks, flattened into one sheet. It starts with a Google Fonts @import for the theme’s three faces.
home-ui-charts.jsThe five chart elements. Load it only on a page that draws a chart.
hui-icons.svgThe Remix Icon sprite your own markup references with <use> - see Go templates.

LICENSE-REMIXICON.txt comes with them, covering the bundled icons.

Every push to main builds a new version, MAJOR.MINOR.<run>: the major and minor come from the package and the patch is the CI run number, so each version is higher than the last. The files are published in two places.

This site serves the files of the version it was deployed with:

https://home-ui.harriverse.com/dist/v0.1.50/home-ui.js
https://home-ui.harriverse.com/dist/v0.1.50/home-ui.css
https://home-ui.harriverse.com/dist/v0.1.50/home-ui-charts.js
https://home-ui.harriverse.com/dist/v0.1.50/hui-icons.svg

/dist/latest/<file> redirects to the current version, so it always gives the newest build. /version.json names that version, along with the run and the commit that built it.

  • A versioned file never changes, so it is served with a one-year immutable cache. The latest redirect is not cached at all.
  • Every file in /dist/ sends Access-Control-Allow-Origin: *, the redirect included, so a page on another origin can load it with <link> and <script type="module"> directly.
  • The sprite is the exception. Browsers do not follow an SVG <use href> to another origin, so serve hui-icons.svg from your own host even while you try the other files from here.
  • Only the current version is on the site. Each deploy replaces the whole site, so /dist/v0.1.50/ stops existing once the next version deploys. To pin a version, download it (below) and serve it yourself.

To try Home-UI without downloading anything, use latest:

<html lang="en" class="light">
<head>
<link rel="stylesheet" href="https://home-ui.harriverse.com/dist/latest/home-ui.css" />
<script type="module" src="https://home-ui.harriverse.com/dist/latest/home-ui.js"></script>
</head>
<body class="hui-surface">
<hui-button>It works</hui-button>
</body>
</html>

Do not ship an application that loads from latest. A deploy can change the markup a control expects, and your pages would pick it up with no warning. The snippets across these docs use latest so they work as pasted; for anything you ship, download the files or pin a version.

Each version is also a GitHub Release tagged v0.1.50 in the Home-UI repository, with the same files attached. Releases are never deleted or replaced, so this is where you get an older version or pin one. The repository is private at the moment, so you can reach the releases only if you have access to it.

With the GitHub CLI:

Terminal window
gh release download v0.1.50 --repo haribo256/home-ui-components --dir static/

Put the files beside each other under one static path, for example /static/, and load them as shown in the introduction. Your <use href> references then point at /static/hui-icons.svg. The file names are the same in every version, so either serve them with revalidation or put the version in the path - /static/v0.1.50/home-ui.js - and cache that for a long time. A Go host can embed the folder with embed.FS.

When you move to a new version, replace all the files together. The JavaScript and the stylesheet are built for each other, and mixing versions can leave a control unstyled.