Composites

Single-purpose, data-driven components. No generic children prop — instead expose named Slots for safe content injection. Each Composite does one thing well.

24 composites · 9 documented here

Key Characteristics

  • Data-in, display-out — pass data props, get rendered UI
  • Slot-based injection — headerSlot, rowActionSlot, emptySlot instead of children
  • Built from Preset Primitives internally — consumers never touch primitives directly
  • Zero design decisions — consumers supply data, the Composite handles all visual treatment

Components

MetricCard Composites9 data-driven card variants: TrendCard, BarChartCard, ComparisonCard, and more

More composites coming in Phase 25.

How It Fits

Composites sit between Preset Primitives (atomic building blocks) and Compositions (layout orchestrators). They encapsulate a single UI concern — like a metric card or data table — into a self-contained, data-driven unit. See the full tier breakdown on the Architecture chart.