component variants
Name the supported forms of a component explicitly.
Use this when Independent flags allow contradictory appearances or behaviors.
without the term
“Our Button has primary, danger, small, outline and ghost as separate props and people combine them in weird ways that look broken. Can you make it only allow the combinations we actually support?”
with the term · How do you ask a model for component variants?
Replace these conflicting flags with explicit component variants. Preserve the supported appearances and reject unsupported combinations.
What is component variants?
A variant represents a deliberate component configuration, exposed through a named option or a composed component.
Why does component variants matter when vibe coding?
An agent can keep adding flags until unsupported combinations become possible.
How do you do component variants?
List valid configurations and encode them. Check that an invalid combination cannot be requested.
What goes wrong with component variants?
Every visual detail becomes a separate variant and the API grows again.