Hydro UI · component gallery

Every component, in context.

A hands-on catalogue of the native-first controls, disclosure patterns, overlays, and feedback primitives in Hydro UI. Try each control with a mouse, keyboard, or touch input.

16 components Native semantics Token-based styles

Disclosure · navigation

hui-accordion

Accordion

Compare one-open-at-a-time and independently expandable disclosure sections. Use Arrow keys, Home, End, Enter, and Space to navigate.

Single · collapsible

Shipping

We ship worldwide with tracking included.

Returns

Support

Multiple accordion

Overview

Several sections can remain open together.

Details

The root stores open values as a comma-separated list.

Forms · selection

hui-checkbox

Checkbox

Independent choices with native form behavior, including the tri-state indeterminate presentation.

States

Unchecked

Checked

Indeterminate

Disabled

Checkbox group

Toppings

Avocado

Bacon

Tomato

The group derives its state from its member checkboxes.

Forms · autocomplete

hui-combobox

Combobox

Editable listboxes demonstrate prefix, contains, and unfiltered matching alongside inline completion and multiple selection. Use Select when typing is not part of the choice.

Single · inline completion

Type ca to see accent-insensitive matching. The trigger opens the custom listbox; the input stays editable.

Multiple · contains filter

React Vue

Delete or Backspace with an empty input removes the last token.

No filtering · no completion

Overlay · modal

hui-dialog

Dialog

Open the native dialog and manual modal paths to compare focus handoff, scroll lock, focus containment, and dismissal behavior.

Native strategy

Open native dialog

Manual · non-dismissible

Open manual dialog

Forms · validation

hui-field

Field

Shared label, description, required, and error relationships wrap native or headless controls without taking over their behavior.

Valid · described

Work email

Use your work address for account notifications.

Enter a valid work email address.

Invalid · required

Username

Choose a unique username.

That username is unavailable.

Forms · numeric input

hui-number-field

Number field

Native spinbuttons cover valid, empty, read-only, disabled, and non-empty configurations with step-aware increment controls.

Valid · formatted

−

Empty · allow empty

−

No empty · min fallback

−

Clearing this field restores its minimum on blur.

Readonly

−

Disabled number field

−

Forms · selection

hui-radio-group

Radio group

Mutually exclusive choices with selection-bound roving focus. Both native and button-based radio items remain form-compatible.

Native radios

Choose a delivery plan.

Basic

Standard

Professional

Button radios

Choose a billing cycle. The selected item can be cleared.

Monthly

Yearly

Custom

Forms · listbox

hui-select

Select

Select-only comboboxes support grouped options, multiple values, typeahead, disabled options, and selection-on-move.

Single · select on move

Multiple select

Enter or Space toggles an option without closing the listbox.

Forms · range input

hui-slider

Slider

Keyboard, pointer, and touch dragging work across horizontal, vertical, RTL, formatted, and disabled configurations.

Horizontal · formatted value

Arrow keys change by 5; Page Up and Page Down use the large step.

Vertical · RTL direction

Vertical sliders use the block axis; RTL affects horizontal sliders.

Disabled slider

Forms · settings

hui-switch

Switch

Use a switch for an immediate binary setting. The native variant is the default; the button variant is a single toggle-button surface with a hidden form control.

Native switch · state variations

Email notifications

Managed by administrator

Button element · state variations

Dark mode

Compact mode

Usage analytics

Press Space to toggle; Enter intentionally does not toggle it.

Navigation · content switching

hui-tabs

Tabs

Horizontal automatic activation and vertical manual activation share the same native tab and tabpanel semantics.

Horizontal · automatic

Profile

Security

Billing

Update your profile details.

Vertical · manual

Design

Members

Integrations

Edit the workspace appearance.

Feedback · notification

hui-toaster

Toast

Enqueue persistent status and alert notifications to compare politeness, actions, generated close controls, positions, and the F8 focus hotkey.

Notification variants

Status is polite; alert is assertive. Toasts dismiss after the default duration; press F8 to focus the newest status toast.

Integration · styling

tokens + Tailwind

Style from state and tokens

Keep component behavior headless: use the generated --hui-* aliases for visual values and target data-* or ARIA attributes for state.

Token hooks

Open surface Border, text, and focus colors come from aliases.

.my-surface {
  background: var(--hui-color-surface);
  color: var(--hui-color-foreground);
  border: var(--hui-border-width-thin) solid var(--hui-color-border);
}

.my-surface[data-state="open"] {
  border-color: var(--hui-color-interactive);
}

Tailwind data and ARIA variants

Disabled surface ARIA state stays available to assistive technology.

<div class="hidden data-[state=open]:block"
     data-state="open">
  Open content
</div>

<button class="aria-disabled:opacity-50"
        aria-disabled="true">
  Disabled action
</button>

Component gallery