Skip to content

Extending Atoms, Molecules, or Organisms

This section describes how a developer can extend the Theme Builder application with respect to atomic elements (i.e. atoms, molecules, or organisms).

Although it depends upon your use case, in most cases it will require modifying both:

Generally speaking, there are two ways of extending the Theme Builder application with respect to an atomic element:

  1. Adding an additional property to an existing atomic element, or
  2. Adding a new atomic element.

The sections below describe how to perform these types of extensions for both the SDK and the User Interface.

Extending the SDK

The code for Design System, and for all of the atomic elements associated with Design System, lives in the SDK. So this is where every journey to extend the design system must begin.

See Extending the SDK.

Extending the User Interface

The User Interface for Theme Builder is largely concerned with administering the currently loaded design system and all of its atomic elements. Each atomic element in the UI is bound to the corresponding atomic element exposed by the design system in the SDK. The UI will represent the atomic element in the UI using examples, the UI will register for listeners to be able to reflect changes to the atomic elements in real time, and the UI will allow the user to manage the properties on the elements.

To begin:

  • Ensure that the SDK is extended first with your new additions, and that this newest SDK version is present in your build.
  • Create the React component for the new addition you are planning to make. Ensure it is in the correct directory depending on whether it is a atom, molecule, organism or component. Be sure to import the SDK extension you made, and accept it as a property into your React component.
  • Complete the new React component, by completing a HeadingSection, ExampleSection and Settings Section.
  • Add your new component to the correct content page depending on whether it is a atom, molecule, organism or component. This is where you would pass an atomic element from the design system to a new React component.

The following image shows the various areas of the Theme Builder editor with the specific files that contribute to its rendering.


The pages for all atoms, molecules, organisms and components share a similar layout. This was achieved by utilizing the following components on each page.

Walkthrough: Creating a new Atom

We have included an Example Atom as a DEMO.

Follow the comments labeled with DEMO in the above file and the Atom Content Page.

As you develop a new atom, molecule, organism or component and begin defining the style rules that will apply to it, keep in mind that the atomic element needs to be able to render equally well in light or dark mode. For more on this topic, see: Managing Light and Dark Mode.