48 components. A world of possibilities.

Beautiful
interfaces.
Just HTML.

The shadcn look, as plain Web Components. Beautiful custom elements that work with any backend - or none - straight out of the box.

Start building Explore the Gallery

Two files. No frontend build. Yours to theme.

Free and open source. MIT licensed. Make something great.

your-next-big-thing.html

All systems ready

Make yourself at home.

Your idea. Your stack. Your style.

LESS GLUE. MORE BUILDING.

Web Components+Native events+Any backendNative to the web.

01 / THE SIMPLE START

Big on possibility.
Small on ceremony.

Add a stylesheet. Add a script. Write the HTML you already know. That's your setup.

The two-minute setup

layout.html

Copy snippet

<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>

91.2 kB gzip9.9 kB gzipMeasured from this build.

Load the current build straight from this site, or download the files and serve them yourself.

02 / NATIVE TO THE PLATFORM

Standard elements.
Native behaviour.

They submit in forms and emit the same input and change events as a native control, so any server or framework can read them - no adapter, no wrapper.

LIVE PLAYGROUND Try it yourself ↙

Something good is taking shape.

Give it a name. Make it yours.

Live HTMX + Alpine. The response is mocked locally; nothing leaves this page.

Waiting for your first save.

preferences.htmlThat's the integration.

<form hx-post="/demo/preferences"
      hx-target="#demo-toasts" hx-swap="beforeend"
      x-data="{ project: 'My next big thing', updates: true }">
  <hui-input name="project" x-model="project"
    aria-label="Project name"></hui-input>
  <hui-switch name="updates"
    x-on:change="updates = $el.checked"
    x-effect="$el.checked = updates"
    aria-label="Email updates"></hui-switch>
  <hui-button type="submit">Save preferences</hui-button>
</form>
<hui-toast id="demo-toasts"></hui-toast>

03 / A PERSONAL TOUCH

A whole new mood.
A few little tokens.

Make it sharp. Make it soft. Make it unmistakably yours. These controls restyle the whole page, live.

--hui-primary: oklch(0.496 0.265 301.924);
--hui-radius: 0.45rem;

Accent colour

Corner radius

After hours

A little bit of you

Same components.
Different character.

Looking good

Try a colour. Watch it travel.

04 / THE BIGGER PICTURE

Your data.
Dressed for the occasion.

From a quick pulse check to the whole story. Crisp SVG charts, styled to belong with everything else.

OPTIONAL One extra file. 30.8 kB gzip.

Audience overview

Every visit, in view.

Desktop & mobile · sample data

Room for the whole story.

Month by month

Find your rhythm.

Desktop & mobile · sample data

The details make the difference.

A different angle

Every piece matters.

Visits by browser · sample data

Meet the chart family

05 / MEET THE FAMILY

Little pieces.
Extraordinary together.

48 real components, one shared design language. From the humble button to the dashboard you've been imagining.

06 / BEAUTY WITH BACKBONE

Looks are just
the beginning.

Keyboard paths. Focus states. Real form submissions. The details you don't see are the ones that make it feel right.

03↗

Browser engines

Chromium, Firefox and WebKit in the library's browser test matrix.

53+

Browser test files

Counted from the library source at build time, including visual and forced-colour coverage.

10✓

Accessibility test files

axe checks, plus 1 keyboard and 7 integration test files.

See exactly what we test

LESS SETUP. MORE SOMETHING SPECIAL.

Your next great interface
starts right at home.

Bring your ideas. We'll bring the components.

Make yourself at home Take a look around

Free to use. Open source. MIT licensed.

Beautifulinterfaces.Just HTML.

Make yourself at home.

Big on possibility.Small on ceremony.

Standard elements.Native behaviour.