About hope-ui
An elegant, themeable, accessible component library for SolidJS 2.0 — the all-in-one option, styled out of the box.Import a component and it works: accessible, keyboard-navigable, and styled out of the box under the
default hope preset. hope-ui is a styled library in the mould of MUI or Mantine, not a headless
or copy-paste kit.
Components are styled with Tailwind v4 and a tailwind-variants recipe system, and themed
through a fixed vocabulary of semantic tokens — so you can restyle an entire app by swapping a
single preset.
What’s in the box
hope-ui ships as four packages: three you install, plus one optional package for internationalization.
| Package | What it’s for |
|---|---|
@hope-ui/components | The components themselves — one import per component (e.g. @hope-ui/components/button). |
@hope-ui/theming | The theming contract: ThemeProvider, definePreset, and the semantic-token vocabulary components read from. |
@hope-ui/presets | Ready-made visual identities. @hope-ui/presets/hope is the default look. |
@hope-ui/i18n | Optional. Locale, reading direction, and message translation — I18nProvider + useLocale. Components are localized out of the box; add this only to control the locale or override strings. |
See Installation to wire these into an app.
Principles
- Accessible by default: every component ships with the right roles, keyboard behavior, and focus management, and each is checked against axe-core in CI, so accessibility is a build gate rather than an afterthought.
- Themeable, not hard-coded: components paint from a fixed set of semantic tokens
(
bg-primary,text-on-primary,border-subtle,ring-focus, …). Repoint the tokens or swap the preset and the whole app follows. See Theming. - SSR-safe: components render on the server and hydrate on the client without mismatch.
- One way to be polymorphic: render any component as a different element or component with the
renderprop. There is noasprop. See Polymorphism.
Status
hope-ui is in early preview, built on the SolidJS 2.0 beta. It isn’t on npm yet: it
publishes as 1.0 once SolidJS 2.0 stable lands.
For now these docs are the preview. Browse the components and guides to see how hope-ui works and
what the API looks like; the install steps describe how it will work when 1.0 ships.
Credits
hope-ui stands on a lot of prior art. It borrows the parts each of these got right and adapts them for SolidJS 2.0.
Component API design
The public component surface — prop names, variant vocabulary, decorator slots — is aggregated from
the libraries that already solved this well: Chakra UI, Mantine, Nuxt UI, Ant Design, and MUI Joy.
The colorScheme role prop echoes Chakra; the startDecorator / endDecorator slots and the
variant scale echo Joy UI.
Accessibility patterns
The keyboard interaction and ARIA behavior underneath the components follow the patterns established by Base UI, React Aria, and Angular Aria.
Design tokens
The semantic-token naming — roles, states, and modifiers as a flat, Tailwind-first vocabulary — takes its lead from the Atlassian Design System.