CSS Hooks

Inline styles doing what we thought they couldn't.

Hooks bring advanced CSS capabilities to native inline styles, with practically zero runtime, no build steps, and a tiny CSS footprint.

DocsTry nowStar
<a href="https://css-hooks.com/" style={css({ color: "#03f", dark: { color: "#4d70ff", }, hover: { color: "#09f", }, active: { color: "#e33", }, })} > Hooks </a>
Inline styles made practical

Hooks take the simplest styling approach to the next level, removing limitations to make it a viable solution for real-world use cases.

Intuitive state-driven styling

Effortlessly define styles for states like hover, focus, and active. Create engaging UIs without the complexity of external CSS.

Reusable knowledge

Hooks enhance the way you already write inline styles, rather than imposing new syntax or non-standard utility classes.

Predictable performance

Hooks are pure, don't depend on runtime CSS magic, and avoid shipping large volumes of irrelevant, render-blocking CSS.

Extreme maintainability

Inline styles tightly integrate with markup, promoting local reasoning and allowing you to change components quickly and easily.

Server-side reliability

Directly embedded within HTML markup without side effects, hooks make server-side rendering simple and reliable. It just works.

Designed forReact

Get started

Designed forSolid

Get started

Designed forPreact

Get started