Skip to main content
Our docs redesign is live!

System Components

System components are infrastructure-level components that provide essential functionality for the application. They handle cross-cutting concerns like error handling, rendering, and application state.

What are System Components?

System components are:

  • Infrastructure: Provide foundational functionality
  • Cross-cutting: Used across the entire application
  • Non-visual: Often don't render UI directly (or render error states)
  • Essential: Critical for application functionality

Examples

  • Error boundaries that catch and handle errors
  • Component renderers that dynamically render CMS components
  • Providers that manage application-wide state
  • Wrappers that add functionality to child components

Components

  • AgentMetadata - Agent metadata endpoints (/agents.md, /llms.txt, /sitemap.md)
  • CachePriming - Build-time cache priming for launch configuration and route prefetching
  • ClientErrorBoundary - Client-side error boundary for catching React errors
  • ComponentsRenderer - Dynamic component renderer for CMS components
  • ConciergeShell - Pads the site shell when Dex is open so the drawer pushes content on desktop
  • ErrorBoundary - Server-side error boundary component
  • HeaderProvider - React context provider for header data and state management
  • MarkdownRenderer - Markdown rendering engine for docs routes
  • MarkdownRoutes - Markdown output routes and content negotiation
  • OgImageFallback - Automatic branded OG image generation when CMS image is missing
  • ScrollToTop - Scrolls page to top on route changes
  • WebMcpShell - Browser-native WebMCP tool registration for AI agents

Design Principles

  • Infrastructure: Provide essential application functionality
  • Reusable: Used throughout the application
  • Non-visual: Focus on functionality over presentation
  • Robust: Handle edge cases and errors gracefully

When to Create a System Component

Create a system component when:

  • You need to handle cross-cutting concerns (errors, rendering, state)
  • The component provides infrastructure functionality
  • It's used application-wide, not page-specific
  • It doesn't fit into the atomic design hierarchy (atoms/molecules/organisms)

Relationship to Other Components

System components:

  • Support all levels: Used by atoms, molecules, organisms, and pages
  • Provide infrastructure: Enable other components to function
  • Handle errors: Catch and handle errors from other components
  • Enable dynamic rendering: Allow CMS-driven component composition

Examples of Usage

  • ErrorBoundary wraps page components to catch errors
  • ComponentsRenderer dynamically renders CMS components (Hero, List, Media organisms)
  • ClientErrorBoundary provides client-side error handling for React components

Error Handling

System components often handle errors:

  • Error boundaries: Catch React errors and display fallback UI
  • Graceful degradation: Provide fallbacks when components fail
  • Error reporting: Log errors for debugging and monitoring