A team working in more than one framework ends up maintaining the same button several times. It is not that the copies are bad. It is that each one ages at its own pace: somebody fixes focus in React and that fix never reaches Angular, somebody adjusts the height in Vue and the Angular one stays as it was. Six months later there are three similar buttons, not the same one.
The component is not code
The first thing that changes is where the definition lives. A component in Snapflow is not defined by writing its implementation, but its contract: which variants it has, which states, which tokens it consumes and what it guarantees in accessibility. That contract is the only thing you edit.
The three implementations come out of it. The public API is the same in all of them: if it is variant and size in React, those are the same props in Vue and the same inputs in Angular.
// Button.tsx · generated by Snapflow · tokens only
export function Button({variant = 'primary', size = 'md', ...props}) {
return <button className={cx(btn[variant], btn[size])} {...props} />
}
// color/brand/600 · radius/md · space/3Tokens only, and that gets verified
The rule that makes everything else possible is that no implementation may contain a loose value. Not one hex, not one px, not one arbitrary font. Everything comes from the tokens, which is why changing the primary action color propagates to all three exports without touching code.
It is not a convention you ask for politely in a review. It is deterministic and it runs in your CI, with no API key and no model involved:
$ snapflow check --ci
✓ 38 components adhering
✗ Login.tsx:42 color #2E6BE6 is not in your tokens
✓ AA contrast on 40/40 states
1 finding · JSON output · exit 1A button doesn't say blue. It says primary action color.
The accessibility contract travels with the export
Focus states, roles and contrast ratios are not reimplemented in each framework: they are part of the contract, so they arrive the same in all three. When a brand combination fails contrast, the system rejects it during personalization, not in production.
What this means day to day
That an adjustment happens once. You fix the contract, you pull the exports again, and the three repos get the same thing. The difference is not writing less code. It is that there stop being three truths drifting apart.
Frequently asked questions
Do we have to maintain three component libraries?
No. You maintain one definition, the contract of each component, and the three implementations come out of it. An adjustment happens once and reaches React, Vue 3 and Angular the same way.
Is the API the same across the three frameworks?
Yes. The same variants, the same states and the same tokens: what are props in React are props in Vue and inputs in Angular, with the same names.
What happens if someone writes a loose color or size?
The check catches it before it gets in: any value that does not come from the tokens is a finding and the pull request does not pass. It is deterministic, it runs in your CI and it needs no model in between.
Can I use only one of the three frameworks?
Yes. Each design system comes with one framework of your choice, and the others are added as an add-on when you need them. The definition is the same; what changes is which outputs you ask for.
Try it with your brand
The shortest way to see one definition and three outputs is with your own components. Snapflow is waitlist-only for now, and we open seats in batches, in order. Join the waitlist or see pricing.
