Introduction

Getting started

Installation

Install Hope UI dependencies by running either of the following:

bash
npm install @hope-ui/core @stitches/core clsx

bash
npm install @hope-ui/core @stitches/core clsx

bash
yarn add @hope-ui/core @stitches/core clsx

bash
yarn add @hope-ui/core @stitches/core clsx

bash
pnpm add @hope-ui/core @stitches/core clsx

bash
pnpm add @hope-ui/core @stitches/core clsx

Wrap your application's root component with HopeProvider:

tsx
import { HopeProvider } from "@hope-ui/core";
function Demo() {
  return (
    <HopeProvider>
      <App />
    </HopeProvider>
  );
}

tsx
import { HopeProvider } from "@hope-ui/core";
function Demo() {
  return (
    <HopeProvider>
      <App />
    </HopeProvider>
  );
}

Now you can use Hope UI components in your application.

tsx
import { Button } from "@hope-ui/core";
function App() {
  return <Button>Button</Button>;
}

tsx
import { Button } from "@hope-ui/core";
function App() {
  return <Button>Button</Button>;
}

Dependencies explanation

@hope-ui/core - The core Hope UI library containing components and style engine.
@stitches/core - The CSS-in-JS library used internally by Hope UI.
clsx - An utility for constructing className strings conditionally.

Usage with SolidStart

Hope UI has been tested with solid-js@1.6.1 and solid-start@0.2.5. Compatibility with other versions is not guaranteed.

If you are using SolidStart you will need to add the ssr setting to your vite.config.ts:

ts
// vite.config.ts
import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [solid()],
  ssr: {
    noExternal: ["@hope-ui/core", "@hope-ui/styles"],
  },
});

ts
// vite.config.ts
import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [solid()],
  ssr: {
    noExternal: ["@hope-ui/core", "@hope-ui/styles"],
  },
});

Then update your application root.tsx like below:

tsx
// root.tsx
import { ColorModeScript, HopeProvider, injectCriticalStyle } from "@hope-ui/core";
import { Suspense } from "solid-js";
import {
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Meta,
  Routes,
  Scripts,
  Title,
} from "solid-start";
export default function Root() {
  injectCriticalStyle();
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - Bare</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <ColorModeScript />
        <HopeProvider>
          <Suspense>
            <ErrorBoundary>
              <Routes>
                <FileRoutes />
              </Routes>
            </ErrorBoundary>
          </Suspense>
        </HopeProvider>
        <Scripts />
      </Body>
    </Html>
  );
}

tsx
// root.tsx
import { ColorModeScript, HopeProvider, injectCriticalStyle } from "@hope-ui/core";
import { Suspense } from "solid-js";
import {
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Meta,
  Routes,
  Scripts,
  Title,
} from "solid-start";
export default function Root() {
  injectCriticalStyle();
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - Bare</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <ColorModeScript />
        <HopeProvider>
          <Suspense>
            <ErrorBoundary>
              <Routes>
                <FileRoutes />
              </Routes>
            </ErrorBoundary>
          </Suspense>
        </HopeProvider>
        <Scripts />
      </Body>
    </Html>
  );
}

injectCriticalStyle - Inject all critical style to the head during server-side rendering.
ColorModeScript - Ensures that the color mode storage sync works properly.
HopeProvider - Provide context and theme for all Hope UI components.