React Compound Components for TMNL

Overview

Compound components provide a flexible, composable API where a parent component shares implicit state with child components via React Context. This pattern enables expressive, self-documenting component APIs without prop drilling.

Key Insight: Compound components trade explicit props for implicit context, creating component families that share state while maintaining composition flexibility.

Canonical Sources

TMNL Implementations

• VantaCard — /src/components/portal/VantaCard.tsx (comprehensive example)
  • Context-based variant sharing
  • Typography token presets
  • Status indicators with visual tokens
  • Object.assign export pattern