Framework
Tokens and contracts for any React app.
Vite, CRA, a custom Webpack setup — it does not matter. Windcraft generates framework-agnostic tokens your React app imports, defines how each component should be used, and checks the code against both as your app scales.
Why React apps lose coherence as they grow
React gives you components but no opinion about design, so consistency is on you. Across a growing app, different contributors and AI tools reach for different grays, radii, and paddings, and there is no shared definition of how a Button or Card should look and behave. Nothing enforces agreement, so the UI fragments component by component.
How Windcraft works with React
Windcraft generates tokens as CSS variables (and a Tailwind config if you use Tailwind) that any React setup can import, and ships component contracts describing each component’s allowed variants and rules. The static analyzer checks your code against both before you commit.
- Run npx windcraft init, then npx windcraft sync to generate tokens.css (and tailwind.config.ts if you use Tailwind).
- Import tokens.css once at your app entry point.
- Build components against your tokens and their contracts.
- Run npx windcraft check to flag off-token styles and contract violations.
Import the generated tokens at your React app entry point
// src/main.tsx
import './tokens.css' // generated by `npx windcraft sync`
import { createRoot } from 'react-dom/client'
import { App } from './App'
createRoot(document.getElementById('root')!).render(<App />)FAQ
- Do I have to use Tailwind?
- No. Windcraft always generates plain CSS variables, which any React app can consume. If you do use Tailwind, it also generates a tailwind.config.ts that maps to the same tokens.
- What are component contracts?
- A contract describes how a component should be used — its allowed variants, sizes, and rules, with good and bad examples. Windcraft ships defaults for common components and exposes them to AI tools and the analyzer so usage stays consistent.
- Does this lock me into Windcraft?
- No. The outputs are standard CSS variables and a normal Tailwind config that live in your repo and work without Windcraft. You can export your tokens and rules as portable JSON at any time.