Loading...
RE
react-zero-ui
@react-zero-uiBuild instant, reactive UIs with zero re-renders. A build-time React framework for global UI state, scoped state, and ultra-fast SVG icon pipelines.
16 Followers
0 Following
AI Insights & Achievements
23/ 100
Quality
Avg 185.0 stars per repo.
Profile README
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 📋 Usage Examples 🔄 Migration Guide ❓ FAQ 🤝 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.
Example:
const [, setTheme] = useUI('theme', 'dark');
// Flip theme to "light"
setTheme('light'); // data-theme="light" on body
Tailwind usage: Anywhere in your app
<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 the body (zero FOUC).
- UI state with ease, no prop-drilling.
- Zero runtime overhead in production.
🚀 Quick Start
Zero-UI CLI
Pre-requisites:
- Vite or Next.js (App Router)
- Tailwind V4 Configured. See Tailwind V4 Installation
npx create-zero-ui
For manual configuration, see Next JS Installation | Vite Installation
That's it. Start your app and see the magic.
📚 API Reference
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).
🔨 useUI Hook (Global UI State)
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.
🎯 useScopedUI Hook (Scoped UI State)
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.
🌈 CSS Variables Support
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>;
🧪 Experimental Features
SSR-safe zeroOnClick
Enable client-side interactivity without leaving server components. Just 300 bytes of runtime overhead.
See experimental for more details.
📦 Summary of Benefits
- 🚀 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.
📖 Documentation
📚 Complete Guide Collection
| 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 | | 🔧 Troubleshooting | Common issues and debugging techniques | | ❓ FAQ | Frequently asked questions and answers | | 🧪 Experimental Features | SSR-safe server component interactivity |
🛠️ Setup Guides
| Framework | Guide | | ------------------------------------------------ | --------------------------------------- | | Next.js App Router | Complete Next.js setup with SSR support | | Vite + React | Vite configuration and optimization |
🎯 Learn by Example
- 🎮 Live Demo - Interactive playground
- 📊 Performance Demo - 10k component benchmark
- 📁 Demo Source Code - Complete example project
🤝 Contributing
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
Public Repos
2
Total Stars
370
Total Forks
17
Public Gists
0
Top Languages
Based on primary language of repositories