Hooks add CSS features to native inline styles, enabling you to apply styles
conditionally based on pseudo-classes, custom selectors, media queries, and
more—all without leaving the style prop. By exploiting the hidden
programmability of CSS Variables, CSS Hooks delivers a flexible CSS-in-JS
experience without runtime style injection or build steps.
<button
style={pipe(
{
background: "#004982",
color: "#eeeff0",
},
on("&:hover", {
background: "#1b659c",
}),
on("&:active", {
background: "#9f3131",
}),
)}
>
Save changes
</button><label>
<input type="checkbox" checked />
<span
style={pipe(
{},
on(":checked + &", {
textDecoration: "line-through",
}),
)}
>
Simplify CSS architecture
</span>
</label><>
<span
style={pipe(
{},
on(not("@container (width < 400px)"), {
display: "none",
}),
)}
>
sm
</span>
<span
style={pipe(
{},
on("@container (width < 400px)", {
display: "none",
}),
)}
>
lg
</span>
</> React |
 Preact |
 Solid |
 Qwik |
|---|---|---|---|
 Chrome |
 Edge |
 Safari |
 Firefox |
 Opera |
|---|---|---|---|---|
49+ |
16+ |
10+ |
31+ |
36+ |
Please visit css-hooks.com to get started.
Contributions are welcome. Please see the contributing guidelines for more information.
CSS Hooks is offered under the MIT license.