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();

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