Vite React State Management Setup

Set up React Zero-UI in a Vite app for CSS-powered UI state, Tailwind variants, and zero React re-renders.

1. Initialize Zero-UI

Run the CLI in your project root. It installs and configures Zero-UI for the detected framework.

npx create-zero-ui

Manual setup

Use these steps if you want to wire the project yourself or inspect what the CLI configures.

1. Install dependencies

npm install @react-zero-ui/core

npm install @tailwindcss/postcss

2. Add the plugin to `vite.config.ts`

import zeroUI from "@react-zero-ui/core/vite";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindCss from "@tailwindcss/postcss";

export default defineConfig({
	// Remove the default `tailwindcss()` plugin - pass it into zeroUI instead
	plugins: [zeroUI({ tailwind: tailwindCss }), react()],
});

3. Import Tailwind

/* global.css */
@import "tailwindcss";

That's it. The plugin adds the data-* attributes to the body tag (no FOUC) and Tailwind generates the matching variant classes.

See Usage examples for patterns you can drop into your app.