Loading...
Loading...
Build instant, reactive UIs with zero re-renders. A build-time React framework for global UI state, scoped state, and ultra-fast SVG icon pipelines.
Avg 185.0 stars per repo.
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
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>
React Zero-UI uses a hyper-optimized AST resolver in development that scans your codebase for:
useUI and useScopedUI hook usage.'theme', 'modal-open').theme-dark:bg-black).This generates:
Zero-UI CLI
Pre-requisites:
npx create-zero-ui
For 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 โก๏ธ becomes data-{stateKey} on <body>.defaultValue โก๏ธ SSR, prevents FOUC.staleValue โก๏ธ For scoped UI, set the data-* to the staleValue to prevent FOUC.staleValue does not update (useUI is 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:
data-theme attribute on <body>.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:
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>;
zeroOnClickEnable client-side interactivity without leaving server components. Just 300 bytes of runtime overhead.
See experimental for more details.
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.
| 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 |
| Framework | Guide | | ------------------------------------------------ | --------------------------------------- | | Next.js App Router | Complete Next.js setup with SSR support | | Vite + React | Vite configuration and optimization |
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:
First time contributor? We have good first issues labeled
good-first-issueto help you get started!