react-zero-ui · Austin1serb · Aug 7, 2025 · Aug 7, 2025 · Aug 7, 2025 · Aug 7, 2025
diff --git a/README.md b/README.md
@@ -63,9 +63,10 @@ React Zero-UI uses a hyper-optimized AST resolver in development that scans your
 
 <small>Zero-UI CLI</small>
 
-**Pre-requisites:** 
-* <small>Vite or Next.js (App Router)</small>
-* <small>Tailwind V4 Configured. See [Tailwind V4 Installation](https://tailwindcss.com/docs/installation/using-vite)</small>
+**Pre-requisites:**
+
+- <small>Vite or Next.js (App Router)</small>
+- <small>Tailwind V4 Configured. See [Tailwind V4 Installation](https://tailwindcss.com/docs/installation/using-vite)</small>
 
 ```bash
 npx create-zero-ui
@@ -141,9 +142,10 @@ Sometimes CSS variables are more efficient. React Zero-UI makes it trivial by pa
 ```diff
 + Pass `CssVar` to either hook to use CSS variables
 
-useUI(<cssVariable>, <defaultValue>, CssVar); 
+useUI(<cssVariable>, <defaultValue>, CssVar);
 
 ```
+
 <small>automatically adds `--` to the Css Variable</small>
 
 **Global CSS Variable:**
@@ -200,26 +202,26 @@ React Zero-UI delivers the fastest, simplest, most performant way to handle glob
 
 ### 📚 Complete Guide Collection
 
-| Guide | Description |
-|-------|-------------|
-| [📚 API Reference](/docs/api-reference.md) | Complete API documentation for all hooks and utilities |
-| [📋 Usage Examples](/docs/usage-examples.md) | Practical patterns and real-world use cases |
-| [🔄 Migration Guide](/docs/migration-guide.md) | Step-by-step migration from useState, Context, Redux |
-| [🔧 Troubleshooting](/docs/troubleshooting.md) | Common issues and debugging techniques |
-| [❓ FAQ](/docs/faq.md) | Frequently asked questions and answers |
-| [🧪 Experimental Features](/docs/experimental.md) | SSR-safe server component interactivity |
+| Guide                                             | Description                                            |
+| ------------------------------------------------- | ------------------------------------------------------ |
+| [📚 API Reference](/docs/api-reference.md)        | Complete API documentation for all hooks and utilities |
+| [📋 Usage Examples](/docs/usage-examples.md)      | Practical patterns and real-world use cases            |
+| [🔄 Migration Guide](/docs/migration-guide.md)    | Step-by-step migration from useState, Context, Redux   |
+| [🔧 Troubleshooting](/docs/troubleshooting.md)    | Common issues and debugging techniques                 |
+| [❓ FAQ](/docs/faq.md)                            | Frequently asked questions and answers                 |
+| [🧪 Experimental Features](/docs/experimental.md) | SSR-safe server component interactivity                |
 
 ### 🛠️ Setup Guides
 
-| Framework | Guide |
-|-----------|-------|
+| Framework                                        | Guide                                   |
+| ------------------------------------------------ | --------------------------------------- |
 | [Next.js App Router](/docs/installation-next.md) | Complete Next.js setup with SSR support |
-| [Vite + React](/docs/installation-vite.md) | Vite configuration and optimization |
+| [Vite + React](/docs/installation-vite.md)       | Vite configuration and optimization     |
 
 ### 🎯 Learn by Example
 
 - [🎮 **Live Demo**](https://zero-ui.dev/) - Interactive playground
-- [📊 **Performance Demo**](https://zero-ui.dev/react) - 10k component benchmark  
+- [📊 **Performance Demo**](https://zero-ui.dev/react) - 10k component benchmark
 - [📁 **Demo Source Code**](/examples/demo/) - Complete example project
 
 ---

diff --git a/docs/api-reference.md b/docs/api-reference.md
@@ -1,4 +1,3 @@
-
 <div align="center">
 
 # 📚 API Reference
@@ -12,6 +11,7 @@ Detailed reference for all hooks, utilities, and configuration options.
 ---
 
 ## 📚 Table of Contents
+
 - [🔨 Core Hooks](#-core-hooks)
 - [🌈 Utilities](#-utilities)
 - [🧪 Experimental APIs](#-experimental-apis)
@@ -34,18 +34,18 @@ const [staleValue, setter] = useUI(key, initial, flag?);
 
 #### Parameters
 
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `key` | `string` | The state key (becomes `data-{key}` attribute) |
-| `initial` | `T` | Initial/default value for SSR |
-| `flag?` | `typeof CssVar` | Optional: Use CSS variables instead of data attributes |
+| Parameter | Type            | Description                                            |
+| --------- | --------------- | ------------------------------------------------------ |
+| `key`     | `string`        | The state key (becomes `data-{key}` attribute)         |
+| `initial` | `T`             | Initial/default value for SSR                          |
+| `flag?`   | `typeof CssVar` | Optional: Use CSS variables instead of data attributes |
 
 #### Returns
 
-| Return | Type | Description |
-|--------|------|-------------|
-| `staleValue` | `T` | Initial value (doesn't update, use for SSR only) |
-| `setter` | `GlobalSetterFn<T>` | Function to update the global state |
+| Return       | Type                | Description                                      |
+| ------------ | ------------------- | ------------------------------------------------ |
+| `staleValue` | `T`                 | Initial value (doesn't update, use for SSR only) |
+| `setter`     | `GlobalSetterFn<T>` | Function to update the global state              |
 
 #### Examples
 
@@ -62,7 +62,7 @@ const [color, setColor] = useUI('primary', '#blue', CssVar);
 setColor('#red'); // Sets --primary: #red on <body>
 
 // Functional updates
-setTheme(prev => prev === 'light' ? 'dark' : 'light');
+setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
 ```
 
 ---
@@ -81,35 +81,33 @@ Same as `useUI`, but affects only the element assigned to `setter.ref`.
 
 #### Returns
 
-| Return | Type | Description |
-|--------|------|-------------|
-| `staleValue` | `T` | Initial value (doesn't update, use for SSR only) |
-| `setter` | `ScopedSetterFn<T>` | Function with attached `ref` property |
+| Return       | Type                | Description                                      |
+| ------------ | ------------------- | ------------------------------------------------ |
+| `staleValue` | `T`                 | Initial value (doesn't update, use for SSR only) |
+| `setter`     | `ScopedSetterFn<T>` | Function with attached `ref` property            |
 
 #### Examples
 
 ```tsx
 // Basic scoped usage
 const [modal, setModal] = useScopedUI('modal', 'closed');
 
-<div 
+<div
 	ref={setModal.ref}
 	data-modal={modal} // Prevents FOUC
-	className="modal-closed:hidden modal-open:block"
->
+	className="modal-closed:hidden modal-open:block">
 	Modal content
-</div>
+</div>;
 
 // With CSS variables
 const [blur, setBlur] = useScopedUI('blur', '0px', CssVar);
 
-<div 
+<div
 	ref={setBlur.ref}
 	style={{ '--blur': blur }}
-	className="backdrop-blur-[var(--blur)]"
->
+	className="backdrop-blur-[var(--blur)]">
 	Blurred content
-</div>
+</div>;
 ```
 
 ---
@@ -148,10 +146,10 @@ const clickHandler = zeroSSR.onClick(key, values);
 
 #### Parameters
 
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `key` | `string` | State key (kebab-case required) |
-| `values` | `string[]` | Array of values to cycle through |
+| Parameter | Type       | Description                      |
+| --------- | ---------- | -------------------------------- |
+| `key`     | `string`   | State key (kebab-case required)  |
+| `values`  | `string[]` | Array of values to cycle through |
 
 #### Returns
 
@@ -189,13 +187,9 @@ Same as `zeroSSR.onClick`, but affects the closest ancestor with `data-{key}` at
 
 ```tsx
 <div data-modal="closed">
-	<button {...scopedZeroSSR.onClick('modal', ['closed', 'open'])}>
-		Open Modal
-	</button>
-
-	<div className="modal-closed:hidden modal-open:block">
-		Modal content
-	</div>
+	<button {...scopedZeroSSR.onClick('modal', ['closed', 'open'])}>Open Modal</button>
+
+	<div className="modal-closed:hidden modal-open:block">Modal content</div>
 </div>
 ```
 
@@ -214,8 +208,8 @@ activateZeroUiRuntime(variantKeyMap);
 
 #### Parameters
 
-| Parameter | Type | Description |
-|-----------|------|-------------|
+| Parameter    | Type                       | Description                                  |
+| ------------ | -------------------------- | -------------------------------------------- |
 | `variantMap` | `Record<string, string[]>` | Generated variant mapping from build process |
 
 #### Setup
@@ -285,16 +279,13 @@ interface ScopedSetterFn<T extends string = string> {
 ## 🚨 Limitations & Constraints
 
 ### State Key Requirements
+
 - DO NOT USE IMPORTED VARIABLES IN THE STATE KEY
 - Must be valid HTML attribute names
 - Kebab-case required: `'sidebar-state'` not `'sidebarState'`
 - Avoid conflicts with existing data attributes
 - Must resolve to a non-spaced string: `'sidebar-state'` not `'sidebar State'`
-- Must be a local constant that resolves to a string: 
-
-
-
-
+- Must be a local constant that resolves to a string:
 
 ### Scoped UI Constraints
 
@@ -325,12 +316,11 @@ Generated variant mapping for runtime activation.
 ```ts
 /* AUTO-GENERATED - DO NOT EDIT */
 export const bodyAttributes = {
-  "data-theme": "light",
-  "data-accent": "violet",
-  "data-scrolled": "up",
-  // ...
+	'data-theme': 'light',
+	'data-accent': 'violet',
+	'data-scrolled': 'up',
+	// ...
 };
-
 ```
 
 ### `.zero-ui/styles.css` (Vite)
@@ -339,7 +329,7 @@ Generated CSS variants for Vite projects.
 
 ```css
 /* Auto-generated Tailwind variants */
-[data-theme="dark"] .theme-dark\:bg-gray-900 {
+[data-theme='dark'] .theme-dark\:bg-gray-900 {
 	background-color: rgb(17 24 39);
 }
 /* ... */
@@ -385,14 +375,14 @@ cat .zero-ui/attributes.ts
 
 ```tsx
 // ✅ Good: Descriptive and clear
-useUI('theme', 'light')
-useUI('sidebar-state', 'collapsed')
-useUI('modal-visibility', 'hidden')
+useUI('theme', 'light');
+useUI('sidebar-state', 'collapsed');
+useUI('modal-visibility', 'hidden');
 
 // ❌ Avoid: Generic or unclear
-useUI('state', 'on')
-useUI('x', 'y')
-useUI('toggle', 'true')
+useUI('state', 'on');
+useUI('x', 'y');
+useUI('toggle', 'true');
 ```
 
 ### TypeScript Usage
@@ -411,13 +401,13 @@ const [, setModal] = useUI<ModalState>('modal', 'closed');
 
 ```tsx
 // ✅ Use CSS for conditional rendering
-<div className="modal-closed:hidden modal-open:block">
-	Modal content
-</div>
+<div className="modal-closed:hidden modal-open:block">Modal content</div>;
 
 // ❌ Avoid reading stale values for logic
 const [modal, setModal] = useUI('modal', 'closed');
-{modal === 'open' && <Modal />} // Won't work as expected
+{
+	modal === 'open' && <Modal />;
+} // Won't work as expected
 ```
 
 ---
@@ -428,4 +418,4 @@ const [modal, setModal] = useUI('modal', 'closed');
 
 [**📋 Usage Examples**](./usage-examples.md) | [**🔧 Troubleshooting**](./troubleshooting.md) | [**🔄 Migration Guide**](./migration-guide.md)
 
-</div>
+</div>
diff --git a/docs/demo.md b/docs/demo.md
@@ -14,10 +14,10 @@ Experience the difference between React re-renders and Zero-UI's instant updates
 
 ## 🎯 Interactive Examples
 
-| Demo | Description | Live Link | Source Code |
-| -- | -- | -- | -- |
-| **🎛️ Interactive Menu** | Side-by-side comparison with render tracker | [Main Demo](https://zero-ui.dev/) | [GitHub](https://zero-ui.dev/react) |
-| **⚛️ React Benchmark** | Traditional React render path (10k nodes) | [React 10k](https://zero-ui.dev/react) | [GitHub](https://github.com/react-zero-ui/core/tree/main/examples/demo/src/app/react) |
+| Demo                      | Description                                       | Live Link                                  | Source Code                                                                             |
+| ------------------------- | ------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------- |
+| **🎛️ Interactive Menu**   | Side-by-side comparison with render tracker       | [Main Demo](https://zero-ui.dev/)          | [GitHub](https://zero-ui.dev/react)                                                     |
+| **⚛️ React Benchmark**    | Traditional React render path (10k nodes)         | [React 10k](https://zero-ui.dev/react)     | [GitHub](https://github.com/react-zero-ui/core/tree/main/examples/demo/src/app/react)   |
 | **⚡️ Zero-UI Benchmark** | Identical DOM with `data-*` switching (10k nodes) | [Zero-UI 10k](https://zero-ui.dev/zero-ui) | [GitHub](https://github.com/react-zero-ui/core/tree/main/examples/demo/src/app/zero-ui) |
 
 > **📁 Full Demo Source:** [Zero Rerender Demo](/examples/demo/)
@@ -47,10 +47,10 @@ _Tested on Apple M1 - Chrome DevTools Performance Tab_
 </div>
 
 | **Nodes Updated** | **React State** | **Zero-UI** | **Speed Improvement** |
-| :--: | :--: | :--: | :--: |
-| 10,000 | ~50 ms | ~5 ms | **🚀 10× faster** |
-| 25,000 | ~180 ms | ~15 ms | **🚀 12× faster** |
-| 50,000 | ~300 ms | ~20 ms | **🚀 15× faster**   |
+| :---------------: | :-------------: | :---------: | :-------------------: |
+|      10,000       |     ~50 ms      |    ~5 ms    |   **🚀 10× faster**   |
+|      25,000       |     ~180 ms     |   ~15 ms    |   **🚀 12× faster**   |
+|      50,000       |     ~300 ms     |   ~20 ms    |   **🚀 15× faster**   |
 
 > **🔬 Try it yourself:** Re-run these benchmarks using the demo links above with Chrome DevTools.