Web components · v1.0

The accessible layer beneath your interface.

Hydro UI gives teams native-first behavior, inspectable light DOM, and a token-backed foundation for building interfaces that last.

Build with the studio Explore all components

16 documented components SSR ready Light DOM

interface-lab.html

Ship a calmer settings page. Every interaction is a real custom element.

Account

Access

Billing

Keep your profile details current so your team knows where to find you.

First name

Last name

Show profile to teammates

A better substrate

Make the browser your baseline.

Borrow the best ideas from headless libraries, then keep the platform close enough to inspect, style, and trust.

Native-first

Real inputs, real forms, and real keyboard behavior—enhanced instead of replaced.

Light DOM

Projectable markup that your browser tools, tests, and CSS can still see clearly.

Token-backed

Semantic aliases make the visual layer replaceable without changing the behavior contract.

The library

Small pieces. Clear contracts.

Start with the pattern you need, then open its detail page for anatomy, state, accessibility, and copyable markup.

View the full catalog

Field

<hui-field>

Connect labels, descriptions, errors, and controls.

Checkbox

<hui-checkbox>

Make independent choices with native form behavior.

Select

<hui-select>

Choose from a known set with keyboard-friendly popups.

Combobox

<hui-combobox>

Filter options without giving up editable input.

Tabs

<hui-tabs>

Switch context while keeping one panel in view.

Dialog

<hui-dialog>

Interrupt a task with modal content and managed focus.

Popover

<hui-popover>

Anchor supplemental interactive content to a trigger.

Toast

<hui-toaster>

Share async feedback without interrupting the task.

Hydro studio

Configure the contract, not a screenshot.

Choose a real component and state. The preview, markup, and token surface stay in sync.

Preview settings

Component

Checkbox

Switch

Radio group

Select

Tabs

Accordion

Dialog

Dropdown menu

State

Default

Selected

Disabled

Invalid

Radius

Small

Medium

Large

Extra large

Elevation

None

Subtle

Raised

Prominent

Surface

Background

Raised

Live preview

Ready · checked

Output

Token-backed recipe

Markup

CSS

Tokens

Start with the baseline

Keep your stack. Add a better substrate.

npm install hydro-ui hydro-js

import { registerAll } from "hydro-ui";
import "hydro-ui/tokens.css";
import "hydro-ui/a11y.css";
import "hydro-ui/components.css";
import "hydro-ui/tailwind.css";

registerAll();

Designed to be adopted incrementally.

Bring one control into an existing product, or use the catalog as the foundation for a new interface.

Open documentation See every component