INSTALLATION · REACT + VITE

Using React

Add Coordiation to a React application through the official Vite adapter, scan JSX and TSX source files, and load the generated stylesheet once from the application entry.

✓

This guide uses Vite, the recommended setup for a client-side React application. Coordiation generates static CSS during development and production builds, so it adds no styling runtime to the browser.

Create a React project

Start with Vite's React template, or skip this step when you already have a React application powered by Vite.

Terminal

npm create vite@latest my-coordiation-app -- --template react
cd my-coordiation-app
npm install

Install Coordiation

Add the compiler and official Vite adapter as development dependencies. Your application continues to use its existing React packages.

Terminal

npm install -D @coordiation/css @coordiation/vite

Register the Vite plugin

Keep the React plugin and add Coordiation to the same plugin array. The src directory becomes the explicit source-scanning boundary.

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import coordiation from "@coordiation/vite";

export default defineConfig({
  plugins: [
    react(),
    coordiation({
      content: ["src"],
      cssFile: "src/coordiation.css",
      sourceMap: true,
      toolchain: {
        minify: process.env.NODE_ENV === "production"
      }
    })
  ]
});

Create the CSS entry

The framework marker is replaced with the preflight, theme tokens, variants, and utilities found in your React source files.

src/coordiation.css

@coordiation;

@co-theme {
  --co-color-brand-500: oklch(62.3% 0.214 259.815);
  --co-color-brand-600: oklch(54.6% 0.245 262.881);
}

Import the generated stylesheet

Load the virtual stylesheet exactly once from the client entry. You do not need to import the source CSS file separately.

src/main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "virtual:coordiation.css";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Use utilities in React

Use complete literal co-* class names in className. Vite updates the generated stylesheet when JSX, TSX, or the theme entry changes.

src/App.jsx

export default function App() {
  return (
    <main className="co-grid co-min-h-screen co-place-items-center co-bg-black co-p-8 co-text-white">
      <section className="co-max-w-2xl co-text-center">
        <p className="co-text-sm co-uppercase co-tracking-widest">
          React + Coordiation
        </p>
        <h1 className="co-mt-4 co-text-6xl co-font-bold co-tracking-tight">
          Build useful interfaces.
        </h1>
      </section>
    </main>
  );
}

Terminal

npm run dev

# production
npm run build

PRODUCTION CHECKLIST

Ship predictable CSS

Keep the scanner boundary and generated stylesheet explicit so people, CI, and AI agents produce the same result.

Open Vite React setup documentation →

Use a supported Node.js version for the current Vite release.
Keep content: ["src"] aligned with every directory that contains JSX or TSX.
Import virtual:coordiation.css exactly once from main.jsx or main.tsx.
Map conditional styles to complete strings instead of concatenating partial co- class names.
Run npm run build before deployment to verify the production stylesheet.

Previous← Using the CLI NextUsing Next.js →