compound components
Related components cooperate through a shared parent.
Use this when Callers need different arrangements of tabs, menus, or editors.
without the term
“Different pages need the tabs laid out differently, sometimes the buttons on the side, sometimes on top. Can you make the tabs flexible so each page arranges the pieces itself, and keyboard still works?”
with the term · How do you ask a model for compound components?
Build these tabs as compound components with a shared root, triggers, and panels. Verify keyboard navigation in two different layouts.
What is compound components?
Compound components expose coordinated pieces such as a root, trigger, and panel while sharing their state.
Why does compound components matter when vibe coding?
A growing list of layout props makes the component difficult to extend.
How do you do compound components?
Define the parent contract and compose two layouts. Check coordination and accessible relationships in both.
What goes wrong with compound components?
Shared state works but the trigger and panel lose their accessible relationship.