Describe your base component
Give its name and how many sizes, styles, and states it needs to support.
COMPONENT VARIANT GENERATOR
Variant Builder
Generates component variants and states from a base component so teams don't manually design every combination.
- Uses your inputs in a transparent calculation
- Instant result with practical next steps
- No signup required
Planning guidance only. Validate important decisions with customer evidence and your delivery team.
YOUR INPUTS
Build your result
Complete every field. The result updates only when you choose Calculate.
How it works
See the full matrix
Variant Builder multiplies out every combination and flags when the matrix is too large.
Build only what's real
Prioritise the combinations that actually appear in your product instead of every theoretical one.
Continue learning: Who should approve MVP requirements?
Frequently asked questions
Do I need every combination in the matrix?
No. Most products use under half the theoretical combinations — the tool flags when the full matrix is large enough that you should audit before building it all.
How should variants be implemented?
As modifiers (props, classes, or tokens) on one base component rather than as separate copy-pasted components — that's what keeps the matrix maintainable.
What about states like loading or disabled?
Treat them as orthogonal modifiers too, applied on top of any size/style combination, rather than designing them per-variant.
How We Compare
| Feature | MVPHub | Figma variants | Storybook |
|---|---|---|---|
| Instant combination count | Included | Not included | Not included |
| No setup required | Included | Limited | Not included |
| Manages the actual component variants | Not included | Included | Included |
| Free planning step | Included | Limited | Limited |
Figma variants and Storybook manage variants once you've decided what to build. Variant Builder helps size the matrix and prioritise before that work starts.
Related tools
Embed this tool
Add this tool to your site with the canonical iframe below. It remains hosted and maintained by MVPHub.