Skip to content
H Hydro UI docs
Navigate
v1.0 Light-DOM Web Components 16 contracts

Build the interface. Keep the contract.

Hydro UI gives the browser a clear job: preserve native semantics, expose useful state, and leave the visual system in your hands. Browse the parts, try the behavior, and copy the markup you can actually ship.

Open the studio See the library Start in two minutes
Browse the library

Find a component

16 components
Search
CategoryAll categoriesFormsDisclosureOverlayFeedback

Showing 16 components.

Forms

9
01Field<hui-field>Connect a control with its label, description, required state, and validation message. 02Checkbox<hui-checkbox>Make an independent choice with native form behavior and a tri-state presentation. 03Checkbox Group<hui-checkbox-group>Group independent checkbox choices and derive the aggregate selection state. 04Switch<hui-switch>Expose an immediate binary setting with native switch semantics. 05Radio Group<hui-radio-group>Offer mutually exclusive choices with roving keyboard navigation. 06Select<hui-select>Choose one or more values from a known set without free-text editing. 07Combobox<hui-combobox>Combine editable text input with filtered, keyboard-navigable options. 08Slider<hui-slider>Choose a bounded numeric value along a visual range. 09Number Field<hui-number-field>Edit a bounded number directly or with increment and decrement controls.

Disclosure

2
10Accordion<hui-accordion>Reveal related sections of content in a compact, keyboard-friendly stack. 11Tabs<hui-tabs>Switch between related panels while keeping one context in view.

Overlay

3
12Popover<hui-popover>Anchor supplemental interactive content to a trigger without trapping focus. 13Dialog<hui-dialog>Temporarily interrupt a task with modal content and managed focus. 14Dropdown Menu<hui-menu>Present a short command or selection list from a menu button.

Feedback

2
15Tooltip<hui-tooltip>Provide a short supplemental description on focus or hover. 16Toast<hui-toaster>Announce brief asynchronous feedback without interrupting the current task.
The visual layer

Foundations

View all foundations
01ColorSemantic roles for readable, meaningful states. 02TypographyA platform-friendly scale for product UI and code. 03SpacingA four-pixel rhythm for calm relationships. 04MotionPresence, transitions, and reduced-motion behavior.
Practical paths

Guides for adoption

Read the guides
AGetting startedInstall, register, and ship your first element. BStylingUse Tailwind, CSS, data state, and Layer 3 safely. CForms and SSRKeep native values, relationships, and server markup intact.