Compound Components
Componentes que se entienden entre sí
Compound Components es un patrón donde un componente padre comparte estado implícitamente con sus hijos a través de Context. Los hijos son piezas independientes que saben cómo hablar con el padre — sin props manuales entre ellos. Es la base de Radix UI, shadcn/ui y la mayoría de los sistemas de diseño modernos.
La idea central
En lugar de controlar todo desde el padre con props (activeTab, onTabChange, tabLabels…), creas un contexto interno que los subcomponentes consumen. El usuario compone las piezas libremente: <Tabs><Tabs.List>…</Tabs.List><Tabs.Panel>…</Tabs.Panel></Tabs>. El estado vive en Tabs, pero ningún hijo necesita recibir props explícitas.
Cómo se construye
Crea un contexto privado. El componente raíz gestiona el estado y provee el contexto. Los subcomponentes lo consumen. Adjunta los subcomponentes como propiedades estáticas del padre (Tabs.List, Tabs.Tab, Tabs.Panel) para que la API sea autodescubrible — el usuario escribe Tabs. y su editor muestra las piezas disponibles.
Tropiezos comunes
- 01El contexto es privado al patrón — no lo expongas globalmente. Cada instancia de Tabs tiene su propio Provider.
- 02Si el usuario anida dos Tabs, el contexto más cercano gana. Eso suele ser lo correcto, pero verifica que sea intencional.
- 03Adjuntar subcomponentes como propiedades estáticas (Tabs.List) es convención, no obligatorio — también puedes exportarlos por separado.