@react-zero-ui/core
v0.3.4
Published
Ultra-fast React UI state library with zero runtime, zero re-renders, Tailwind variant support, and automatic data-attribute/css-vars based styling. Replace context, prop drilling, and global stores with build-time magic.
Maintainers
austinserbReadme
@react-zero-ui/core
The fastest possible UI updates in React. Period.
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
🔥 Core Concept: "Pre-Rendering"
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-* attributes to update. That's it.
const [, setTheme] = useUI('theme', 'dark');
// Flip theme to "light"
setTheme('light'); // data-theme="light" on bodyTailwind usage:
<div class="theme-dark:bg-black theme-light:bg-white">Fast & Reactive</div>🚀 How it Works (Build-Time Magic)
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<body>(zero FOUC) - UI state with ease, no prop-drilling
- Zero runtime overhead in production
🚀 Quick Start
Requires: Vite or Next.js (App Router)
npx create-zero-uiManual config:
📚 API Reference
Basic Hook Signature
const [staleValue, setValue] = useUI('key', 'value');key➡️ becomesdata-keyon<body>value➡️ default SSR valuestaleValue➡️ SSR fallback (doesn't update after mount)
🔨 useUI – Global UI State
import { useUI } from '@react-zero-ui/core';
const [theme, setTheme] = useUI('theme', 'dark');- Updates
data-themeon<body> - No React re-renders
- Globally accessible with Tailwind
🎯 useScopedUI – Scoped UI State
import { useScopedUI } from '@react-zero-ui/core';
const [theme, setTheme] = useScopedUI('theme', 'dark');
<div
ref={setTheme.ref}
data-theme={theme}>
Scoped UI Here
</div>;- Sets
data-*on a specific DOM node - Scoped Tailwind variants only apply inside that element
- Prevents FOUC, no re-renders
🌈 CSS Variable Support
Pass the CssVar flag for variable-based state:
import { CssVar } from '@react-zero-ui/core';
const [blur, setBlur] = useUI('blur', '0px', CssVar);
setBlur('5px'); // body { --blur: 5px }Scoped example:
const [blur, setBlur] = useScopedUI('blur', '0px', CssVar);
<div
ref={setBlur.ref}
style={{ '--blur': blur }}>
Scoped blur effect
</div>;🧪 Experimental Feature: zeroOnClick
Enables interactivity inside Server Components without useEffect.
Only ~300 bytes of runtime.
Read more: experimental.md
📦 Summary of Benefits
- 🚀 Zero React re-renders
- ⚡️ Pre-rendered UI: state embedded at build time
- 📦 <350B runtime footprint
- 💫 Simple DX: hooks + Tailwind variants
- ⚙️ AST-powered: cached fast builds
Zero re-renders. Zero runtime. Infinite scalability.
🤝 Contributing
We welcome all contributions!
Made with ❤️ for the React community by @austin1serb