Home-UI

Home-UI is a reusable Web Components library for an external Go + HTMX + Alpine host. The host owns state, validation, persistence and routing. Home-UI owns appearance and interaction, and nothing else.

Every element is hui-*, every public token is --hui-*, and the package is @haribo256/home-ui.

What a host loads

Two files, no build step:

<html class="{{.Theme}}">
  <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">

class="light" or class="dark" on <html> pins the theme server-side, so there is no flash of the wrong one. Leave it off and the reader’s system preference decides. hui-surface on <body> opts the page itself into the theme - without it the components are themed and the page is not, which is the defect ISS-001 was raised for.

Getting the files says where to download them, and how to try them straight from this site. These snippets load latest, so they work as pasted; for something you ship, pin a version or self-host.

Every preview on this site is that same pair of files in an iframe. Nothing here is a reimplementation.

A form the host rendered

Source

<form>
<hui-field>
  <span data-label>Project name</span>
  <hui-input data-control name="project" value="Home-UI"></hui-input>
  <span data-description>Shown in the sidebar.</span>
</hui-field>
<hui-button type="submit">Save</hui-button>
<hui-button variant="destructive">Delete</hui-button>
</form>

Gallery

Open the Gallery. It is shadcn’s create page for the nova preset this library follows, rebuilt card for card from Home-UI: both of its card sets, switched from the buttons at the bottom right. Charts, the QR code, the audio waveform and the photograph have no Home-UI equivalent, so they are labelled placeholders at the reference’s size. Like the previews here, it loads only the two files a host loads.

What Home-UI does not do

It does not fetch, route, validate, or hold application state. A combobox does not search; it emits events and the host searches with HTMX. Data tables, sidebars and navigation menus are the host’s job - a client-side table in a server-rendered application would duplicate work the server already does.