Zero runtime, zero React re-renders, and a simple developer experience. Say goodbye to context and prop-drilling.
See the proof | Quick Start | API Reference | Usage Examples | Migration Guide | FAQ | Contributing
Why re-render UI if all states are known at build time? React Zero-UI pre-renders UI states at build time, then flips data-* attributes to update the interface.
Example:
const [, setTheme] = useUI("theme", "dark");
// Flip theme to "light"
setTheme("light"); // data-theme="light" on bodyTailwind usage: Anywhere in your app
<div class="theme-dark:bg-black theme-light:bg-white">Fast & Reactive</div>React Zero-UI uses a hyper-optimized AST resolver in development that scans your codebase for:
useUIanduseScopedUIhook usage- variables that resolve to strings like
'theme'or'modal-open' - Tailwind variant classes such as
theme-dark:bg-black
This generates:
- optimal CSS with global or scoped variant selectors
- initial data attributes injected onto the body with no FOUC
- simple UI state without prop drilling
- zero runtime overhead in production
Zero-UI CLI
Prerequisites:
- Vite or Next.js (App Router)
- Tailwind v4 configured. See Tailwind v4 Installation
npx create-zero-uiFor manual configuration, see Next.js Installation or Vite Installation
Start your app and use Zero-UI.
Basic shape:
const [<staleValue>, <setterFunction>] = useUI(<stateKey>, <defaultValue>);stateKeybecomesdata-{stateKey}on<body>defaultValuesupports SSR and helps prevent FOUCstaleValueis used for scoped UI so you can set thedata-*attribute to prevent FOUC- the returned
staleValuedoes not update;useUIis write-only
Simple hook with the same shape as React's useState:
import { useUI } from "@react-zero-ui/core";
const [theme, setTheme] = useUI("theme", "dark");Features:
- flips a global
data-themeattribute on<body> - zero React re-renders
- global UI state available anywhere in your app through Tailwind variants
Control UI states at the element-level:
+ import { useScopedUI } from '@react-zero-ui/core';
const [theme, setTheme] = useScopedUI("theme", "dark");
// Flips data-* on the specific ref element
+ <div ref={setTheme.ref}
// Set the data-* to the staleValue to prevent FOUC
+ data-theme={theme}
>
Scoped UI Here
</div>Features:
- flips data attributes on a specific target element
- generates scoped CSS selectors that only apply within that element
- no FOUC and no re-renders
Sometimes CSS variables are more efficient. React Zero-UI supports them by passing the CssVar option:
+ Pass `CssVar` to either hook to use CSS variables
useUI(<cssVariable>, <defaultValue>, CssVar);
Automatically adds -- to the CSS variable.
Global CSS Variable:
+ import { CssVar } from '@react-zero-ui/core';const [blur, setBlur] = useUI("blur", "0px", CssVar);
setBlur("5px"); // body { --blur: 5px }Scoped CSS Variable:
const [blur, setBlur] = useScopedUI("blur", "0px", CssVar);
<div
ref={setBlur.ref}
style={{ "--blur": blur }}>
Scoped blur effect.
</div>;Enable client-side interactivity without leaving server components. About 300 bytes of runtime overhead.
See experimental for more details.
- zero React re-renders through pure CSS-driven UI state
- pre-rendered UI with states injected at build time
- tiny footprint with effectively no runtime overhead for CSS states
- simple hooks and auto-generated Tailwind variants
- a fast, cached AST resolver
React Zero-UI is a fast, simple way to handle global and scoped UI state in modern React apps without extra re-renders or prop drilling.
| Guide | Description |
|---|---|
| API Reference | Complete API documentation for all hooks and utilities |
| Usage Examples | Practical patterns and real-world use cases |
| Migration Guide | Step-by-step migration from useState, Context, Redux |
| FAQ | Frequently asked questions and answers |
| Experimental Features | SSR-safe server component interactivity |
| Framework | Guide |
|---|---|
| Next.js App Router | Complete Next.js setup with SSR support |
| Vite + React | Vite configuration and optimization |
- Live Demo - Interactive playground
- Performance Demo - 10k component benchmark
- Demo Source Code - Complete example project
We welcome bug fixes, feature requests, documentation improvements, and performance work from the community.
Get involved:
- Found a bug? Open an issue
- Have an idea? Start a discussion
- Want to contribute code? Check out our Contributing Guide
First-time contributor? Look for issues labeled
good-first-issue.
Built with support from Serbyte Web Design & Development