Getting started · Hydro UI

Hydro UI is a small, native-first layer for accessible web interfaces. Install the package, load the token and component styles you want, and register the component families used by your page.

Install

npm install hydro-ui hydro-js

Load the layers

import "hydro-ui/tokens.css";
import "hydro-ui/a11y.css";
import "hydro-ui/components.css";
import "hydro-ui/tailwind.css";

The styles are optional. Components remain functional without the visual baseline, and every visual layer can be replaced with consumer-owned Layer 3 CSS.

Register components

import { registerAll } from "hydro-ui";

registerAll();

For a smaller browser graph, import one registration function from a component entry point.

import { registerDialog } from "hydro-ui/dialog";
import { registerTabs } from "hydro-ui/tabs";

registerDialog();
registerTabs();

Lazy registration

For dynamically inserted content, import the optional loader instead of the root entry point:

import { load } from "hydro-ui/loader";

const loader = load();
await loader.componentsReady();

Call loader.dispose() when the page is torn down. The loader registers discovered families and observes inserted subtrees. Use { root: element } to scope discovery or { observe: false } for one-shot loading. Readiness waits for definitions, not idle rendering, and a subsequent readiness call can retry a failed import. Calls for the same root share a controller. Explicit family imports remain the default, especially for SSR.

First component

<form>
  <hui-checkbox name="updates" value="yes">
    Email me about product updates
  </hui-checkbox>
</form>

The component renders a native checkbox in light DOM. Use the host attributes as the source of truth for programmatic state changes, and listen to composed hui-* events when application state needs to react.

Next steps

Use the component catalog to inspect anatomy, states, and APIs.
Read the styling guide before writing component overrides.
Read the forms and SSR guide when integrating server-rendered markup.

NextStyling