Context Containers

Structural wrappers that propagate UIContext (region + density) to all children via React Context. Components inside a Container automatically adapt their styling — no prop drilling needed.

8 containers · 6 documented here

Key Characteristics

  • Auto-style children — based on UIRegion (card-header, dialog-body, toolbar, etc.)
  • Density propagation — propagate default, compact, or comfortable to child components
  • Context-driven styling — the same component looks different based on its container context
  • Six containers — Card, Dialog, Panel, Toolbar, FormSection, Table

Containers

ContainerCardWraps card regions (header, body, footer) with appropriate spacing and density
ContainerDialogWraps dialog regions with UIContext propagation for modal content
ContainerPanelSide panel layout with contextual density and region styling
ContainerToolbarDense, compact toolbar region with tightly-packed child spacing
ContainerFormSectionForm layout grid alignment with label-input spacing propagation
ContainerTableTable-optimized cell spacing with compact row density

How It Fits

Containers are cross-cutting — they wrap Presets, Composites, and Compositions to provide context-aware styling without explicit props. A Button inside a ContainerToolbar automatically renders compact; the same Button inside a ContainerDialog gets standard sizing. See the Architecture chart for the full picture.