hamburger-menu-icon

GitHub

608

css-hooks/css-hooks

Created 3 years ago, last commit 2 hours ago

9 contributors

1.3k commits

MIT License

Stars added on GitHub, month by month

Click on the bars to view the numbers

+1

+6

-1

+5

+2

-1

0

+1

+5

-1

Nov

11

Dec

12

Jan

1

Feb

2

Mar

3

Apr

4

May

5

Jun

6

Jul

7

Aug

8

Sep

9

Oct

10

2025

2026

Stars added on GitHub, per day, on average

Yesterday

=

Loading data...

README

Warning

This is the next branch, tracking the upcoming release. For the latest stable code, switch to the latest branch.

Overview

CSS power. Inline style simplicity.

Respond to user interaction, layout context, and inherited state. All CSS-driven. All without leaving the style prop. By exploiting the hidden programmability of CSS Variables, CSS Hooks delivers flexible component-owned styling without runtime style injection or build steps.

Feature highlights

User interaction

<button
  style={mergeStyles(
    {
      background: "#004982",
      color: "#eeeff0",
    },
    on("&:hover", {
      background: "#1b659c",
    }),
    on("&:active", {
      background: "#9f3131",
    }),
  )}
>
  Save changes
</button>

Layout context

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

Inherited state

<div style={mergeStyles({ padding: 24 }, on("&:hover", enable("%active")))}>
  Hover parent
  <span
    style={mergeStyles(
      { color: "gray" },
      on("%active", {
        color: "purple",
      }),
    )}
  >
    Child responds
  </span>
</div>