Zero runtime · Zero re-renders · ~350 bytes

React UI state management, powered by CSS.

pre-render UI state at build time, update interfaces by flipping data-* attributes.

Read the Docs See it in action

Familiar state API. Zero React re-renders.

Use useUI() to define visual state, then style it with Tailwind variants like menu-open:translate-x-0. Zero-UI generates the CSS at build time, then updates the UI by flipping a data-* attribute.

React useState
const [menu, setMenu] = useState('closed');return (  <aside className={menu === 'open'    ? 'translate-x-0'    : '-translate-x-full'}>    <button onClick={() => setMenu('open');}>      Open menu    </button>  </aside>);
Zero-UI useUI
const [, setMenu] = useUI('menu', 'closed');return (  // automatically generates tailwind variants  <aside className="menu-open:translate-x-0                    menu-closed:-translate-x-full">    <button onClick={() => setMenu('open');}>      Open menu    </button>  </aside>);

Try it right here.

Same UI, built twice. The Zero-UI tab flips data-* attributes on <body>; the React tab holds the same state in useState. Watch the render counters as you click around.

Renders: 1

Zero UI

Reactive state, zero re-renders

Accent

Panel demo

Slides open without re-rendering ✨
theme lightdarkaccent panel closedopen
Renders: 4

React State Management

Re-renders on every change

Accent

Panel demo

closed
Slides open and re-renders the tree
theme darkaccent violetpanel closed

Attribute filtering demo

Search a mounted list by flipping data attributes instead of re-rendering rows.

Why it's fast.

Zero re-renders

State changes flip DOM attributes. React stays completely out of the loop - no reconciliation, no render cycles.

~350 bytes

Smaller than a single SVG icon. An order of magnitude leaner than Redux or Zustand for UI state.

Build time "pre-rendering"

Zero-UI generates all possible UI states at build time vs re-rendering them on the fly.