Stop tweaking visual elements one by one. Tune them all at once.
Prompt by prompt, your coding agent fixes one spot at a time, until no two components and screens agree. Fader ties every colour, size and space to sixteen knobs: drag one and every screen follows, and lint keeps your agent on them. A design system for React apps, tuned live in your browser and saved to your code.
Drag a knob. The whole app follows.
Turn on Tune and sixteen knobs open over your app, in dev: colours, faces, sizes, spacing, corners and speed. Every other value is worked out from them. Drag one and every screen that wears it changes at once, with contrast and type sizes checked as you go. Click Write values and it's in your code. The block above is live: drag a slider.
Thirty more knobs, for the exceptions.
Sometimes one heading needs to be bigger, or one kind of text needs its own colour. Detail has thirty knobs for that: a size for each type role, a gap for each spacing role, a colour for each kind of text, and every part of both buttons. Each one is an offset from the system, so when you move a main knob later, your exceptions move with it.
You won't ship element nobody can read.
Every kind of visual element is checked for contrast at its colour, size and for its minimum size (16px for body, 12px for captions), and the accent wherever it fills a chart or a bar. The Tokens board turns red the moment you drag past the line, in the same words npm run lint uses.
Your agent drifts. Lint names the fix.
Agents guess: a new grey here, a 13px gap there. Fader's lint refuses any value that isn't one of your roles and names the role to use instead, so your agent fixes its own line before you see it. The bar counts problems live.
Already built? One ask moves it onto Fader.
Start a new project with one command, or ask your coding agent to add Fader to the app you already have. It installs Fader, sorts every colour, size and space your app collected by hand onto the sixteen knobs, and shows you the plan before it changes a file. When Fader's checks and your build pass, the knobs open in your app, on Vite or Next.js.
It's your code. Nothing to host.
Write values saves plain values to src/fader/defaults.ts and tokens.css. No account, no subscription: review the diff, commit it, roll it back. The Studio only runs in dev; in production your app is just your app.
What's in the box
- The system
- Sixteen knobs, thirty Detail knobs, and the roles your components use (bg-paper, text-muted, p-card, rounded-shell…).
- The Studio
- Tune, and three rooms in dev: Stage (your app), Tokens (every value on one board) and System (the rules, checked live).
- The checks
- Contrast and size for every kind of text, lint that names the role to use, a tokens check and a knob check.
- The command
- fader init for a new or an existing app, fader update for new versions.
- For your agent
- AGENTS.md, CLAUDE.md, and ADOPT.md, the guide it follows to move an app onto Fader.
- Fonts
- From Google Fonts and Fontshare, picked in the panel.
Technical requirements
- Editor
- Any editor with a coding agent: Claude Code, Codex, Cursor and the like. Everything runs on your computer.
- Framework
- React 18 or 19, on Vite (TanStack Start included) or on Next.js 15 or 16 with the App Router, Turbopack or webpack.
- Styling
- Tailwind CSS 4. An app on Tailwind CSS 3 is moved to 4 first, by Tailwind's own upgrade tool.
- Tools
- Node 22 or newer, and npm.
- Git
- Optional, and local: no GitHub needed. If your app uses git, Fader waits until your work is committed, so you can undo it.
- Knob check
- Google Chrome, for npm run knobs: it moves every knob on your pages and fails on one that changes nothing.
Not supported
- Website builders
- Fader doesn't run in Lovable's, Bolt's or v0's chat. A project made there works once it's in your editor, through GitHub.
- Pages Router
- Next.js apps on pages/. Fader goes on the App Router (app/layout.tsx).
- Other frameworks
- Vue, Svelte, Angular, Solid and React Native. Fader is for React on the web.
- No Tailwind
- An app styled only with CSS modules, Sass or CSS-in-JS.
- Dark mode
- Fader is light paper and ink, on purpose.
- Breakpoints
- One layout jump, md. Your sm: and lg: move onto it.
- Not tested yet
- pnpm, Yarn and Bun; Windows and Linux. Fader is tested with npm on macOS.
Questions
- What does Fader actually change?
- How your app's look is built. Every colour, size and space comes from sixteen decisions, so changing one changes it everywhere it belongs.
- How do I add it to my app?
- Give your coding agent the download and ask it to add Fader. It shows you the plan, moves your app onto the knobs and runs the checks; then the knobs open in your app.
- Do I have to rebuild my components?
- No. They keep their markup; their classes move from raw values (text-gray-500, p-6) to Fader's roles (text-muted, p-card). Your agent makes the move.
- I built my app in Lovable or Bolt. Can I use Fader?
- Yes, from your editor: connect the project locally or to GitHub, open it in your editor and ask your agent to add Fader.
- Is it a component library?
- No. It's the system your components wear: values, roles and rules. Keep the components you have.
- Does the Studio ship to my users?
- No. Tune, Tokens and System only appear in dev. A production build ships your app alone.
- Can I use it for client work?
- Yes, in as many projects as you like. You can't resell or share Fader itself.
- How do updates work?
- Run fader update with the newer download. Only Fader's own folder changes; your values and screens stay.
One price, yours to keep
$59 USD. Pay once. Use it in every project, yours and your clients'. Every 1.x update included.
Terms Refunds Privacy