Setup

This guide covers the generic integration path for an existing application or a framework without a dedicated CSS Hooks package. For a new framework project, start with the Quickstart instead.

Install a package

Install the integration package for your framework. For example, a React application needs:

npm install @css-hooks/react@next remeda # remeda optional; see below

The available integration packages are:

• @css-hooks/react
• @css-hooks/preact
• @css-hooks/solid
• @css-hooks/qwik

For another framework, install @css-hooks/core and provide the conversion from a style object to the format expected by your renderer.

npm install @css-hooks/core@next remeda # remeda optional; see below

Choose a pipeline utility

CSS Hooks is designed to compose base styles and override styles through a pipeline. We recommend Remeda's pipe, but any compatible pipeline utility will work.

Create the styling module

Create a module that exports the hooks used throughout your application. Framework integrations export createHooks directly:

src/css.ts
import { createHooks } from "@css-hooks/react";

export const { on, styleSheet } = createHooks("&:hover");

When using the core package, create the createHooks function first:

src/css.ts
import { createHooksSystem } from "@css-hooks/core";

const { createHooks } = createHooksSystem();

export const { on, styleSheet } = createHooks("&:hover");

The selector in this example is only a starting point. Define the hooks your application needs per the Configuration guide.

Render the stylesheet

Render the generated stylesheet once, near the application root. In a client-rendered application, this can be as simple as adding a <style> element to the document head:

import { styleSheet } from "./css";

const style = document.createElement("style");
style.textContent = styleSheet();
document.head.append(style);

Framework integrations use their own mechanism to render the same string. The Quickstart guides show the appropriate placement for each supported framework.

Continue to Configuration to define hooks, then read Usage to apply base styles and override styles.