hope-uiearly preview
Now in early preview

Beautiful components, built on hope.

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.

Get startedBrowse components
Preview
Fabien MARIE-LOUISE
@verstaple
Active

hope-ui features: Semantic tokens, Light & dark, WAI-ARIA patterns, SSR-ready, Tree-shakeable, TypeScript-first, Tailwind v4, Themeable presets, SolidJS 2.0.

One system, tokens to components

Every component paints from the same semantic tokens, so restyling the app is one preset swap.

Themeable to the core

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.

primary
success
info
warning
danger
neutral

Accessible by default

WAI-ARIA patterns, focus management, and full keyboard interaction are built into every primitive — verified with axe on real browsers.

Built for SolidJS 2.0

Fine-grained reactivity with clean server rendering and hydration. The Solid internals hope-ui relies on are pinned by characterization tests against the 2.0 beta.

Tailwind v4 + variants

Styling flows through tailwind-variants recipes into clean, unprefixed utilities — no runtime CSS-in-JS, no style tags to hydrate.

Real components, right here

Polished, out of the box

Not a swatch board — every card below is a working slice of an app. Open the pickers, tab through the rows, dismiss the banner. What you see is exactly what ships.

Invite a teammate

A searchable people field, the permission picker beside it, and the button that sends it.

  • MCMaya Chen@mayaOwner
  • PNPriya Nair@priyaCan edit

Service health

Status pips down a list, one role token per state.

  • api-gatewayLive
  • web-frontendDeploying
  • billing-workerFailed
  • legacy-cronPaused

Pick a date

Arrow keys move the cursor, PageUp/PageDown change month.

Assign reviewers

Multi-select with roving focus — Space toggles, type to jump.

MCMaya Chen
TRTomás Ruiz
PNPriya Nair
JWJonas Weber
AOAmara Okafor
2 of 5 assigned

Project actions

A non-modal popover for sharing; a modal, focus-trapped dialog for deleting.

Acme Marketing SiteLive

Production · deployed 2 hours ago

Framework
SolidJS
Region
fra1 · Paris
Domain
acme.dev
Last commit
3f2a91c

Tell them what happened

A dismissible banner with its own actions row — the compound anatomy, not a preset shape.

Explore all components
Theming

Speak in tokens, not hex codes

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.

  • A single set of role tokens — primary, success, info, warning, danger, neutral.
  • Elevation surfaces and a foreground ramp that stay legible on every background.
  • Each token carries its own dark value, so one class drives both modes.
Read the theming guide
App.tsx
// one import per component subpath
import { Button } from "@hope-ui/components/button";

<Button variant="soft" colorScheme="primary">
  Save changes
</Button>
sunken
surface
raised

Start building with hope

Install the components, drop in a preset, and ship an interface you’re proud of — themeable and accessible from the very first line.

Get started