Installation

Prerequisites

hope-ui targets SolidJS 2.0 and Tailwind CSS v4. Before you start, you need:

• A SolidJS 2.0 app built with Vite and vite-plugin-solid — a plain Vite + Solid SPA or a TanStack Start app both work. (SolidStart works too, once it moves to Solid 2.0 — see Framework notes.)
• Tailwind CSS v4 wired into that app.

Install

Add the three packages you consume directly:

pnpm add @hope-ui/components @hope-ui/theming @hope-ui/presets
# or: npm install @hope-ui/components @hope-ui/theming @hope-ui/presets
# or: yarn add @hope-ui/components @hope-ui/theming @hope-ui/presets

They rely on peers you likely already have in a Solid 2.0 app: solid-js and @solidjs/web (the runtime), and tailwindcss ^4.

Add the preset styles

In your Tailwind entry CSS, import Tailwind, then the hope preset's structure, then its theme:

@import "tailwindcss";
@import "@hope-ui/presets/hope/tailwind.css";
@import "@hope-ui/presets/hope/theme.css";

The preset comes in two parts. tailwind.css is the structure — it maps the --hope-* design tokens to clean utilities (bg-primary, text-on-primary, border-subtle, …). theme.css supplies the token values (hope's default look). They're separate imports on purpose: theme.css is opt-out, so you can swap hope's defaults for your own — the Theme Creator generates a drop-in theme.css you import in its place. hope is a zero-DOM preset: it ships CSS, not markup.

Wrap your app

Wrap your app once in ThemeProvider, passing the preset. Every component reads its recipes from it.

import { ThemeProvider } from "@hope-ui/theming";
import { hope } from "@hope-ui/presets/hope";
import { Button } from "@hope-ui/components/button";
 
export function App() {
  return (
    <ThemeProvider preset={hope}>
      <Button variant="solid" colorScheme="primary">
        Save
      </Button>
    </ThemeProvider>
  );
}

Solid context follows the owner graph, so ThemeProvider must sit above the components that use it in the same tree — for a router, wrap the Outlet directly. A component rendered outside any ThemeProvider throws a clear error.

Render your first component

With the provider in place, drop in a component:

<Button variant="solid" colorScheme="primary">
  Save
</Button>

From here, restyle everything through Theming, or render components as other elements with Polymorphism.

Framework notes

hope-ui ships JSX-preserved source under the "solid" export condition — your app's vite-plugin-solid compiles it per environment (client and server). Every SolidJS app already has that plugin, so the condition resolves automatically; an app without it gets no match and fails loudly, by design.

For a server-rendered setup, tell Vite to run hope-ui's source through the Solid compiler instead of importing the raw .jsx in Node:

export default defineConfig({
  // Compile hope-ui's JSX source in SSR instead of importing it as-is in Node.
  ssr: { noExternal: [/^@hope-ui\//] },
  // Keep esbuild from pre-bundling the JSX as if it were React.
  optimizeDeps: {
    exclude: ["@hope-ui/components", "@hope-ui/theming", "@hope-ui/presets"],
  },
});