Skip to main content
Our new developer certification is live!

Component Documentation

This directory contains comprehensive documentation for all React components in the project.

Structure

Components are organized using Atomic Design principles, a methodology for creating design systems:

  • atoms/ - Basic, indivisible UI elements (buttons, icons, typography, etc.)
  • molecules/ - Simple combinations of atoms (search bars, tags, cards, etc.)
  • organisms/ - Complex components composed of molecules and atoms (headers, footers, sections, etc.)
  • layout/ - Layout-specific components (navigation components, theme-aware logos, etc.)
  • pages/ - Page-level components that compose organisms
  • system/ - System-level components (error boundaries, renderers)
  • cards/ - Specialized card components (search result cards)

Platform Docs

  • Public API - Public JSON API quickstart and endpoint reference
  • Architecture - High-level architecture and data flow

Atomic Design Explained

Atoms

The most basic building blocks. These are fundamental UI elements that cannot be broken down further:

  • Button - Basic button element with variants
  • Icons - Icon component
  • MediaItem - Image/media element
  • Title - Typography component
  • RichTextRenderer - Text rendering
  • YouTubeVideo - YouTube video embed component
  • CodeBlock - Syntax-highlighted code block
  • CodeBlockWithCopy - Code block with copy-to-clipboard
  • CopyButton - Copy-to-clipboard button
  • DateDisplay - Date display
  • ReadingTime - Reading time estimation
  • JsonLd - Metadata
  • Sidebar - Layout wrapper

Molecules

Combinations of atoms that form simple, reusable functional units:

  • SearchBar - Input + Icon atom
  • SearchSidebar - Filter sidebar (content type, subjects, technology, person)
  • HeaderSearch - Search with typeahead suggestions
  • TaxonomyTags - Subject tags with button styling
  • TechnologyTags - Technology terms with icons
  • AuthorCard - MediaItem + Link atoms
  • AuthorLinks - List of author external links
  • Breadcrumb - Multiple Link atoms
  • ChapterNavigation - Guide chapter sidebar navigation
  • ChapterPagination - Previous/next chapter cards
  • ContentTaxonomies - Technology + subject terms
  • KickstarterLinks - Kickstart resource links
  • NoticesSection - Notices from additional_items
  • TableOfContents - H2 table of contents
  • Cta - Button atom wrapped in Link
  • FAQ - Title atom + accordion structure
  • Notice - Alert/notice component
  • Canonical - Canonical link attribution

Organisms

Larger, more complex components composed of molecules and/or atoms:

  • AdditionalItemsSection - FAQ and Related Items from additional_items
  • Persons - Multiple AuthorCard molecules
  • ContentActions - Copy for LLM and markdown view
  • DefaultCard - MediaItem + Title + TaxonomyTags
  • IconCard - MediaItem + Title atoms
  • Header - AnnouncementBar + MainNavigation organisms
  • MainNavigation - DesktopNavigation + MobileNavigation
  • Footer - Server component that renders FooterClient
  • FooterClient - Client-side footer with accordions and Live Preview
  • AnnouncementBar - Links + utility navigation
  • Hero - Title + RichTextRenderer + SearchBar + Cta
  • List - Title + RichTextRenderer + Cards (DefaultCard/IconCard)
  • Media - MediaItem atom
  • RichText - Title + RichTextRenderer atom
  • TwoColumn - Two-column layout with nested ComponentsRenderer

Dependency Rules

  • Atoms should never depend on molecules or organisms
  • Molecules should only depend on atoms
  • Organisms can depend on molecules, atoms, and other organisms
  • Pages compose organisms to create complete page layouts

Atoms

Molecules

Organisms

Layout

Pages

System

Cards