Hi! So i’m trying to make base components that will have options to turn on or off visibility of specific parts of the component itself. What I mean is, for example here:
This is a main component, and I want to create toggles for showing the metadata, or the pricing, or the promo pricing, etc. So I want to be able to take an instance, and then turn on or off the parts I want.
What it looks like is that I need to create variants for every possible configuration? That seems a bit crazy to do. I might want to have just the item title, and a preview image, and nothing else. Or I might want to have everything but no metadata. Etc, etc. How do I do this, without manually creating every possible variation? Is this possible in Penpot?
1 Like
Hi @firefiber You’re right.
In Penpot, boolean properties are implemented through variants, so technically you do need variants for each “on/off” state. However, that doesn’t mean you need to build every possible combination of all options in a single component set.
The recommended approach is to split optional sections (like metadata, pricing, promo info, etc.) into smaller subcomponents, each with its own simple variant set (for example, visible/hidden). This way, each block manages its own logic independently, and you avoid the combinatorial explosion of creating every permutation in one place.
It keeps your system much more scalable and maintainable while still giving you flexible instances. 
2 Likes
We are planning to improve this entire workflow for nested components. Here you have more information about it!
2 Likes
ahh, gorgeous, thank you Penpot team!!
