Hydro UI separates interaction behavior from presentation. Components publish state through native attributes, data-* hooks, and ARIA attributes. Style those surfaces with the semantic --hui-* aliases rather than reaching into the upstream primitive layer.
Tailwind v4
@import "tailwindcss";
@import "hydro-ui/tokens.css";
@import "hydro-ui/tailwind.css";
@import "hydro-ui/components.css";
The bridge exposes utilities such as bg-hui-surface-raised, text-hui-foreground-muted, p-hui-4, and rounded-hui-md.
Style a state
.settings-panel {
background: var(--hui-color-surface-raised);
border: var(--hui-border-width-thin) solid var(--hui-color-border);
border-radius: var(--hui-radius-lg);
box-shadow: var(--hui-shadow-sm);
}
.settings-panel[data-state="open"] {
box-shadow: var(--hui-shadow-md);
}
The same pattern can be expressed with Tailwind data variants:
<hui-accordion-item class="border-hui-border data-[state=open]:shadow-hui-sm">
...
</hui-accordion-item>
Functional versus visual CSS
Positioning, hidden state, focus rings, and scroll locking are functional concerns. Keep those rules intact when changing the visual theme. A popover needs its position and closed state to remain operable even when its colors, radius, and shadow change.
Focus and reduced motion
Never remove a focus indicator without replacing it with an equivalent visible treatment. Use the documented transition aliases and honor prefers-reduced-motion: reduce for non-essential motion.