feat: added demo website

Author: Austin1serb

.github/workflows/ci.yml

@@ -4,9 +4,9 @@ on:
   push:
     branches: [main]
     paths:
-      - "packages/**"
-      - ".github/workflows/ci.yml"
-      - "scripts/**"
+      - 'packages/**'
+      - '.github/workflows/ci.yml'
+      - 'scripts/**'
   pull_request:
 
 concurrency:

.github/workflows/release.yml

@@ -2,7 +2,7 @@ name: Release
 
 on:
   workflow_run:
-    workflows: ["CI"]
+    workflows: ['CI']
     types: [completed]
     branches: [main]
   workflow_dispatch:

.gitignore

@@ -5,6 +5,7 @@ dist/
 coverage/
 test-results/
 .pnpm-store/
+package-lock.json
 
 # logs / temp files
 npm-debug.log*
@@ -24,3 +25,5 @@ todo.md
 
 # keep these files
 !next-env.d.ts
+
+ 

.prettierignore

@@ -0,0 +1 @@
+/examples

.prettierrc.json

@@ -0,0 +1,15 @@
+{
+	"semi": true,
+	"trailingComma": "es5",
+	"singleQuote": true,
+	"tabWidth": 2,
+	"useTabs": true,
+	"printWidth": 160,
+	"endOfLine": "lf",
+	"arrowParens": "avoid",
+	"bracketSpacing": true,
+	"objectWrap": "collapse",
+	"bracketSameLine": true,
+	"embeddedLanguageFormatting": "auto",
+	"singleAttributePerLine": true
+}

.release-please-config.json

@@ -1,14 +1,8 @@
 {
-  "packages": {
-    "packages/core": {
-      "package-name": "@austinserb/react-zero-ui",
-      "release-type": "node"
-    },
-    "packages/cli": {
-      "package-name": "create-zero-ui",
-      "release-type": "node"
-    }
-  },
-  "monorepo-tags": true,
-  "include-component-in-tag": true
-}
+	"packages": {
+		"packages/core": { "package-name": "@austinserb/react-zero-ui", "release-type": "node" },
+		"packages/cli": { "package-name": "create-zero-ui", "release-type": "node" }
+	},
+	"monorepo-tags": true,
+	"include-component-in-tag": true
+}

AGENTS.md

@@ -0,0 +1,18 @@
+# Guidelines for AI Agents in this Repo
+
+This repository contains **React Zero-UI**, a library for global UI state without React re-renders.
+Use these tips when working with the codebase or generating examples.
+
+## How React Zero-UI works
+
+1. `useUI()` writes to `document.body.dataset` using keys you specify (e.g. `theme` → `data-theme`).
+2. Build tooling scans for all keys and values, generating CSS variants for each.
+3. When a setter is called, the corresponding body attribute changes instantly with no React re-render.
+
+## Best practices
+
+- Only use `useUI` for UI-only state (themes, flags, etc.).
+- Prefer kebab-case keys (`sidebar-open`) so generated variants are predictable.
+- Always pass a default value to `useUI(key, defaultValue)` to avoid flashes during SSR.
+- Mutate the state anywhere in the app: `const [, setTheme] = useUI('theme', 'light');` then call `setTheme('dark')`.
+- Compose Tailwind classes anywhere with the pattern `key-value:` like `theme-dark:bg-black`.

README.md

@@ -1,6 +1,6 @@
-# React Zero-UI
+# React Zero-UI (Beta)
 
-**Instant UI state updates. ZERO React re-renders. ZERO runtime overhead.** Update the UI instantly, manage global UI state from anywhere. No prop drilling. get started with one command in your existing React app. ```npx create-zero-ui```
+**Instant UI state updates. ZERO React re-renders. ZERO runtime overhead.** Update the UI instantly, manage global UI state from anywhere. No prop drilling. get started with one command in your existing React app. `npx create-zero-ui`
 
 [![npm version](https://img.shields.io/npm/v/@austinserb/react-zero-ui)](https://www.npmjs.com/package/@austinserb/react-zero-ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -14,7 +14,7 @@ Traditional React state triggers RE-renders for every UI change. Switching theme
 Zero-UI bypasses React entirely for pure UI state. Instead of re-renders, it:
 
 - Pre-renders CSS styles and keeps them in the DOM
-- For state changes it flips a ```data-*``` attribute key.
+- For state changes it flips a `data-*` attribute key.
 - Thats it.
 
 **Result:** UI updates that are 10-50x faster.
@@ -23,11 +23,11 @@ Zero-UI bypasses React entirely for pure UI state. Instead of re-renders, it:
 
 Apple M1
 
-| Nodes | React State | Zero-UI | Improvement |
-|-------|------------------|---------|-------------|
-| 1,000 | ~50ms | ~5ms | 10x faster |
-| 5,000 | ~180ms | ~15ms | 12x faster |
-| 10,000 | ~400ms | ~20ms | 20x faster |
+| Nodes  | React State | Zero-UI | Improvement |
+| ------ | ----------- | ------- | ----------- |
+| 1,000  | ~50ms       | ~5ms    | 10x faster  |
+| 5,000  | ~180ms      | ~15ms   | 12x faster  |
+| 10,000 | ~400ms      | ~20ms   | 20x faster  |
 
 ## Quick Start
 
@@ -36,7 +36,7 @@ Apple M1
 CLI script - in your existing Next or Vite App's root:
 
 ```bash
-npx create-zero-ui 
+npx create-zero-ui
 ```
 
 ## Manual Installation
@@ -49,34 +49,34 @@ npm install @austinserb/react-zero-ui
 
 **Prerequisites:** Tailwind v4 must be initialized. [tailwind set up ]("tailwind.com")
 
-
 #### Vite
 
 ```js
 // vite.config.*
 import { zeroUIPlugin } from '@austinserb/react-zero-ui/vite';
 
 export default {
-  //*REMOVE TAILWIND PLUGIN* Zero-UI extends tailwinds plug-in
-  plugins: [zeroUIPlugin()]
-}
+	//*REMOVE TAILWIND PLUGIN* Zero-UI extends tailwinds plug-in
+	plugins: [zeroUIPlugin()],
+};
 ```
 
 #### Next.js
 
 #### 1. Spread bodyAttributes on `<body>` in Layout
 
 ```jsx
-import { bodyAttributes } from "@zero-ui/attributes";
+import { bodyAttributes } from '@zero-ui/attributes';
 //or
-import { bodyAttributes } from "../.zero-ui/attributes";
+import { bodyAttributes } from '../.zero-ui/attributes';
 
 export default function RootLayout({ children }) {
-return (
-<html>
-    <body {...bodyAttributes}>{children}</body>
-</html>
-)}
+	return (
+		<html>
+			<body {...bodyAttributes}>{children}</body>
+		</html>
+	);
+}
 ```
 
 #### 2. Add PostCSS Plugin
@@ -110,7 +110,7 @@ function ThemeToggle() {
 **Consume the state in any component with tailwind!**
 
 ```jsx
-className="theme-light:bg-white theme-dark:bg-black"
+className = 'theme-light:bg-white theme-dark:bg-black';
 ```
 
 **Mutate the state in any component!**
@@ -126,24 +126,28 @@ function UnrelatedPage()
 
 **Use with complex Tailwind Variants**
 
-
 ```jsx
-clasName="md:theme-dark:bg-black md:peer-checked:theme-light:hidden"
+clasName = 'md:theme-dark:bg-black md:peer-checked:theme-light:hidden';
 ```
 
 ## How It Works
 
 1. **State Store**: The `useUI` hook writes to `data-*` attributes on the `<body>` tag instead of React state
+
    ```html
-   <body data-theme="dark" data-accent="blue" data-sidebar="open">
+   <body
+   	data-theme="dark"
+   	data-accent="blue"
+   	data-sidebar="open"></body>
    ```
 
 2. **Babel Transform**: Automatically detects all `useUI` variants in your code during build
 
 3. **PostCSS Plugin**: Generates Tailwind variant classes for every detected state
+
    ```css
    .theme-dark\:bg-gray-900 {
-     background-color: rgb(17 24 39);
+   	background-color: rgb(17 24 39);
    }
    ```
 
@@ -163,7 +167,7 @@ const [staleValue, setValue] = useUI('theme', 'light');
 - `defaultValue`: Initial value if not set
 - Returns: `[staleValue, setValue]`
 
-**note:**  normaly used as const ```const [,setValue]=useUI()``` to denote that the value is stale and will not update 
+**note:** normaly used as const `const [,setValue]=useUI()` to denote that the value is stale and will not update
 
 ### Tailwind Variants
 
@@ -191,7 +195,7 @@ Use the pattern `{key}-{value}:` as a Tailwind variant:
 2. **Not for business logic**: Keep using React state for data that affects logic
 3. **Consistent naming**: Prefer kebab-case for keys (`sidebar-state`, not `sidebarState`)
 4. **Default values**: Always provide default value for  
-```useUI('key', 'value')``` to avoid FOUC.
+   `useUI('key', 'value')` to avoid FOUC.
 
 ## Contributing
 

eslint.config.js

@@ -3,75 +3,53 @@ import js from '@eslint/js';
 import nodePlugin from 'eslint-plugin-node';
 
 const nodeGlobals = {
-  require: 'readonly',
-  module: 'readonly',
-  exports: 'readonly',
-  __dirname: 'readonly',
-  __filename: 'readonly',
-  process: 'readonly',
-  console: 'readonly',
-  Buffer: 'readonly',
-  setTimeout: 'readonly',
-  setInterval: 'readonly',
-  clearTimeout: 'readonly',
-  clearInterval: 'readonly',
+	require: 'readonly',
+	module: 'readonly',
+	exports: 'readonly',
+	__dirname: 'readonly',
+	__filename: 'readonly',
+	process: 'readonly',
+	console: 'readonly',
+	Buffer: 'readonly',
+	setTimeout: 'readonly',
+	setInterval: 'readonly',
+	clearTimeout: 'readonly',
+	clearInterval: 'readonly',
 };
 
 const browserGlobals = {
-  window: 'readonly',
-  document: 'readonly',
-  navigator: 'readonly',
-  requestAnimationFrame: 'readonly',
-  cancelAnimationFrame: 'readonly',
-  setTimeout: 'readonly',
-  setInterval: 'readonly',
-  clearTimeout: 'readonly',
-  clearInterval: 'readonly',
-  console: 'readonly',
+	window: 'readonly',
+	document: 'readonly',
+	navigator: 'readonly',
+	requestAnimationFrame: 'readonly',
+	cancelAnimationFrame: 'readonly',
+	setTimeout: 'readonly',
+	setInterval: 'readonly',
+	clearTimeout: 'readonly',
+	clearInterval: 'readonly',
+	console: 'readonly',
 };
 
 export default [
-  /* 1 - never lint generated / vendor files */
-  {
-    ignores: [
-      '**/node_modules/**',
-      '**/dist/**',
-      '**/.next/**',
-      '**/*.test.*',
-      '**/*.spec.*',
-      'tests/**',
-      'eslint.config.js',
-    ],
-  },
+	/* 1 - never lint generated / vendor files */
+	{ ignores: ['**/node_modules/**', '**/dist/**', '**/.next/**', '**/*.test.*', '**/*.spec.*', 'tests/**', 'eslint.config.js'] },
 
-  /* 2 - baseline rules */
-  js.configs.recommended,
+	/* 2 - baseline rules */
+	js.configs.recommended,
 
-  /* 3 - CommonJS (*.cjs) */
-  {
-    files: ['**/*.cjs'],
-    plugins: { node: nodePlugin },
-    languageOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'script',
-      globals: nodeGlobals,
-    },
-    rules: {
-      'node/no-unsupported-features/es-syntax': 'off',
-    },
-  },
+	/* 3 - CommonJS (*.cjs) */
+	{
+		files: ['**/*.cjs'],
+		plugins: { node: nodePlugin },
+		languageOptions: { ecmaVersion: 'latest', sourceType: 'script', globals: nodeGlobals },
+		rules: { 'node/no-unsupported-features/es-syntax': 'off' },
+	},
 
-  /* 4 - ES-module / browser (*.js) */
-  {
-    files: ['**/*.js'],
-    plugins: { node: nodePlugin },
-    languageOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      globals: { ...nodeGlobals, ...browserGlobals },
-    },
-    rules: {
-      'node/no-unsupported-features/es-syntax': 'off',
-    },
-  },
+	/* 4 - ES-module / browser (*.js) */
+	{
+		files: ['**/*.js'],
+		plugins: { node: nodePlugin },
+		languageOptions: { ecmaVersion: 'latest', sourceType: 'module', globals: { ...nodeGlobals, ...browserGlobals } },
+		rules: { 'node/no-unsupported-features/es-syntax': 'off' },
+	},
 ];

examples/demo/.prettierignore

@@ -0,0 +1,27 @@
+# package artifacts
+node_modules/
+.next/
+dist/
+coverage/
+test-results/
+.pnpm-store/
+package-lock.json
+
+# logs / temp files
+npm-debug.log*
+yarn-error.log*
+.DS_Store
+**/playwright-report/
+
+# IDE/editor
+.vscode/
+
+# tarballs produced during local tests
+*.tgz
+
+# local scratch files 
+t.py
+todo.md
+
+# keep these files
+!next-env.d.ts