Elegant, themeable, accessible components for SolidJS. Powered by semantic design tokens and Tailwind v4 — so every component is themeable, accessible, and SSR-ready out of the box.
hope-ui features: Semantic tokens, Light & dark, WAI-ARIA patterns, SSR-ready, Tree-shakeable, TypeScript-first, Tailwind v4, Themeable presets, SolidJS 2.0.
A carefully composed system — from the design tokens up to the polished components.
Every color, surface, and interaction state resolves through one semantic token vocabulary. Flip to dark mode or swap a preset, and your entire UI follows — no per-component overrides.
WAI-ARIA patterns, focus management, and full keyboard interaction are built into every primitive — verified with axe on real browsers.
Fine-grained reactivity with clean server rendering and hydration, characterized against the 2.0 beta so upgrades never surprise you.
Styling flows through tailwind-variants recipes into clean, unprefixed utilities — no runtime CSS-in-JS, no style tags to hydrate.
Every one of these is a live hope-ui component — hover it, tab to it, toggle the theme. What you see is exactly what ships.
You never hard-code a color. Components reference finished semantic tokens, and a preset maps them to a palette — so restyling or theming is a contract, not a rewrite.
// one import per component subpath
import { Button } from "@hope-ui/components/button";
<Button variant="soft" colorScheme="primary">
Save changes
</Button>Install the components, drop in a preset, and ship an interface you're proud of — themeable and accessible from the very first line.