Component Override

Atoms

Replace default platform UI components with your own custom implementations. Atoms are the smallest replaceable units in Helium.

HeliumOverride layer

How Atoms Work

When rendering components, the Thought Industries platform checks the window.TiAtoms property. If a matching Atom is found, your custom component renders instead of the default — receiving the same props and actions.

Naming convention: The component file name must match the component it replaces. For example, AudioPlayerBar.jsx replaces the platform's AudioPlayerBar.

Requirements

An authenticated Helium project — create one here.
An /atoms/ directory in your project root with an index.ts file.

Setting Up Atoms

Create an atoms/index.ts file that assigns your components to window.TiAtoms:

// atoms/index.ts
import AudioPlayerBar from './AudioPlayerBar';
import HomeHeader from './HomeHeader';

(window as any).TiAtoms = {
  AudioPlayerBar,
  HomeHeader,
};

Replaceable Components

The following platform components can be replaced with custom Atoms:

AudioPlayerBar/atoms/AudioPlayerBar.jsx

Responsible for loading and playing an audio asset.

Prop	Type	Description
keyName	String	The ID of an audio asset, used to fetch a signed URL to load the asset.

Important: Keep the existing code logic — only update the returned DOM elements and inline styles.

HomeHeader/atoms/HomeHeader.jsx

Displays links to the manager interface, authentication links, account/profile pages, and school logos on the home page.

Important: Keep the existing code logic — only update the returned DOM elements and inline styles.

LearnerDash/atoms/LearnerDash.jsx

The learner dashboard component — displays enrolled courses, progress, and learning activity.

Important: Keep the existing code logic — only update the returned DOM elements and inline styles.

Reference Implementation

See the template atoms/index.ts on GitHub for the reference implementation.