Skip to main content
Our new developer certification is live!

Atoms

Atoms are the most basic building blocks of our design system. They are fundamental, indivisible UI elements that cannot be broken down further without losing their meaning.

What are Atoms?

Atoms represent the smallest functional units in the interface. They are:

  • Indivisible: Cannot be meaningfully broken down into smaller components
  • Reusable: Used across the entire application
  • Self-contained: Don't depend on other components (except primitive HTML elements)
  • Styling primitives: Basic visual elements like buttons, icons, typography, and inputs

Examples

  • A button that can be styled but doesn't contain other components
  • An icon component that displays a single icon
  • A typography component that renders text with specific styling
  • An image component that handles media display

Components

  • Button - Basic button element with multiple variants and sizes
  • Icons - Icon component for displaying Material Symbols icons
  • MediaItem - Optimized image/media component with responsive sizing
  • Title - Typography component for headings with semantic HTML
  • RichTextRenderer - Component for rendering JSON RTE content from Contentstack
  • YouTubeVideo - Component for embedding YouTube videos using video ID
  • CodeBlock - SSR-safe syntax-highlighted code block component
  • CodeBlockWithCopy - Code block with copy-to-clipboard functionality
  • CopyButton - Copy-to-clipboard button component
  • DateDisplay - Component for displaying publication and update dates
  • ReadingTime - Reading time estimation from content
  • JsonLd - Component for adding structured data (JSON-LD) to pages
  • Sidebar - Layout wrapper component for sidebar content
  • Tag - Taxonomy/filter tag styling utility (tagVariants)

Design Principles

  • No dependencies: Atoms should never import molecules or organisms
  • Single responsibility: Each atom has one clear purpose
  • Highly reusable: Used throughout the application in various contexts
  • Design tokens: Use design system tokens for colors, spacing, typography

When to Create an Atom

Create an atom when:

  • The component is a fundamental UI element (button, input, icon, etc.)
  • It doesn't combine other components
  • It will be reused across many different contexts
  • It represents a single visual/functional concept