Theme

CSS power.
Inline style simplicity.

The styling system that gives native inline styles pseudo-classes, media queries, container queries, feature queries, and selector logic.

Docs

Star

Demo

Pseudo-classes

<button
  style={pipe(
    {
      background: "oklch(45.76% 0.18 265)",
      color: "white",
    },
    on("&:hover", {
      background: "oklch(56.45% 0.18 265)",
    }),
    on("&:active", {
      background: "oklch(56.45% 0.19 25)",
    })
  })}
>
  Save changes
</button>

Selectors

<label>
  <input type="checkbox" checked />
  <span
    style={pipe(
      {},
      on(":checked + &", {
        textDecoration: "line-through"
      })
    )}
  >
    Simplify CSS architecture
  </span>
</label>

Simplify CSS architecture

Responsive design

<span
  style={pipe(
    {},
    on(or("@container (width < 50px)", "@container (width >= 100px)"), {
      display: "none"
    })
  )}
>
  sm
</span>
<span
  style={pipe(
    {},
    on("@container (width < 100px)", {
      display: "none"
    })
  )}
>
  lg
</span>

smlg

Container width

Benefits

Expressive

Best of both worlds

Stop bouncing between files. Use pseudo-classes, selectors, and responsive queries directly within the style prop. You get the power of CSS where it makes the most sense—on the target element itself—without the className overhead.

Colocated

Local reasoning

Keep styles and markup in the same context. When components are self-contained, you stop hunting through external stylesheets to find a layout bug. You can refactor confidently, knowing your changes are scoped exactly where they're written.

Type-safe

Strictly typed styles

Catch errors in your editor, not the browser. Every property and value is fully typed, eliminating magic strings and non-standard shorthands. Because styles are just plain objects, your existing refactoring tools and type-checking work out of the box—no custom IDE plugins or complex configurations required.

Deterministic

No more cascade

Eliminate the complexities of specificity, source order, and cascade layers. By defining styles directly on the target element, you ensure that they render exactly as intended. Since the styling logic lives in your component rather than a complex global stylesheet, you can say goodbye to hydration mismatches and flashes of unstyled content.

Efficient

Static stability, dynamic delivery

This approach combines the modularity of runtime CSS-in-JS with the performance of static CSS. A tiny stylesheet added once at startup handles the plumbing, and CSS variable fallbacks handle the rest—ensuring that your styling payload stays proportional to your active UI instead of your entire application. All without the overhead of client-side style injection.

Packages

React

Quickstart

npm i @css-hooks/react

Preact

Quickstart

npm i @css-hooks/preact

Solid

Quickstart

npm i @css-hooks/solid

Qwik

Quickstart

npm i @css-hooks/qwik

Opinions

Mark Dalgleish
@markdalgleish
Check out CSS Hooks. This is *very* cool.
It lets you write type-safe inline styles (literally the `style`attribute *BUT* with support for a custom set of pseudo-classes, selectors, media/container queries — and nested too!

Ryan Florence
@ryanflorence
That's how I always wished the style prop worked!

Mykhaylo
@mryechkin
I absolutely love it. There's just something "fresh" about it. Simple to get started, practically no overhead, and it just makes sense. Best part is that it does this all using native CSS features, nothing fancy - just really cleverly done.