Zero runtime, zero React re-renders, and the simplest developer experience ever. Say goodbye to context and prop-drilling.
📖 See the proof 🚀 Quick Start 📚 API Reference 🤝 Contributing
Why re-render UI if all states are known at build time? React Zero-UI pre-renders UI states once ( at no runtime cost ), and flips data-* attribute to update - that's it.
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.- Any variables resolving to strings (e.g.,
'theme','modal-open'). - Tailwind variant classes (e.g.
theme-dark:bg-black).
This generates:
- Optimal CSS with global or scoped variant selectors.
- Initial data-attributes injected onto the body (zero FOUC).
- UI state with ease, no prop-drilling.
- Zero runtime overhead in production.
Zero-UI CLI
Pre-requisites:
- Vite or Next.js (App Router)
- Tailwind V4 Configured. See Tailwind V4 Installation
npx create-zero-uiFor manual configuration, see Next JS Installation | Vite Installation
That's it. Start your app and see the magic.
The Basics:
const [<staleValue>, <setterFunction>] = useUI(<stateKey>, <defaultValue>);stateKey➡️ becomesdata-{stateKey}on<body>.defaultValue➡️ SSR, prevents FOUC.staleValue➡️ For scoped UI, set the data-* to thestaleValueto prevent FOUC.- Note: the returned
staleValuedoes not update (useUIis write‑only).
Simple hook mirroring React's useState:
import { useUI } from '@react-zero-ui/core';
const [theme, setTheme] = useUI('theme', 'dark');Features:
- Flips 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:
- Data-* flips on specific target element.
- Generates scoped CSS selectors only applying within the target element.
- No FOUC, no re-renders.
Sometimes CSS variables are more efficient. React Zero-UI makes it trivial 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. Just 300 bytes of runtime overhead.
See experimental for more details.
- 🚀 Zero React re-renders: Pure CSS-driven UI state.
- ⚡️ Pre-rendered UI: All states injected at build-time and only loaded when needed.
- 📦 Tiny footprint: <350 bytes, zero runtime overhead for CSS states.
- 💫 Amazing DX: Simple hooks, auto-generated Tailwind variants.
- ⚙️ Highly optimized AST resolver: Fast, cached build process.
React Zero-UI delivers the fastest, simplest, most performant way to handle global and scoped UI state in modern React applications. Say goodbye to re-renders and prop-drilling.
We welcome contributions from the community! Whether it's bug fixes, feature requests, documentation improvements, or performance optimizations - every contribution helps make React Zero-UI better.
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? We have good first issues labeled
good-first-issueto help you get started!
--
Made with ❤️ for the React community by @austin1serb