All cookies accepted? Start exploring!
We use cookies to give you the best experience and to analyse how you use our website, these cookies are necessary for our website to function and cannot be switched off in our systems. We call these essential cookies as they are used to ensure site security and to provide core functionality. Without this type of technology, our website won't work properly. We also allow third parties to use tracking technologies for similar purposes. These cookies are used by social media services to enable you to share our content with your friends and networks.

Share We understand that it is extremely important for marketers to be able to deliver a consistent brand experience, both offline and online. That’s why our highest priority is to customize and extend the UI of Mercury components down to the lowest level.

This article gives insight into component designs and how they can be extended.  


Mercury components are built using React. React is a JavaScript framework built by Facebook, for the platform itself. Now it is one of the most popular JavaScript frameworks and is gaining traction every day. Read more about why we use React in this article.  

Atomic design

Mercury UI components adhere to the Atomic design methodology. This gives them a consistent look and feel, but also greatly facilitates reuse and extensibility. In short, the atomic design methodology organizes the components into three groups: 
  • Atoms
  • Molecules
  • Organisms 


Atoms are the building blocks for other components. These are the low-level elements that are used across the molecules. Think of elements such as form fields, labels and components for displaying information like the product title and description.  


Molecules group atoms together to realize a focused piece of functionality. An example of a molecule is the component that displays an individual product in the product list. This molecule uses atoms like the product title and description to display the product. 


Organisms use molecules to implement a higher-level piece of functionality. Product molecules described above are used by the product lister organism to display a list of products. 

Atomic design organisms


Mercury components are designed to be as granular as possible. This reduces the chance that you will need to replace a complete component. Added to this, Mercury offers a client API to replace components.

Most of the time, components that need to be replaced will be on the molecular level. For example, in the product list, you might want to display additional fields, for which you can easily replace the product molecule. The molecules often don’t contain a lot of logic and group atoms together. The atoms are exposed through the API, so you can use these in your own molecules. 

Related articles

Articles related to this topic

Share a Tweet
Mercury components are customizable down to the lowest levels to ensure marketers of a consistent brand experience #SITECORE # ATOMIC # CUSTOMIZABLE  Share
Mercury UI components adhere to the #Atomic methodology. Giving them a consistent look and feel, but also greatly facilitates reuse and extensibility. #SITECORE # ATOMIC # CUSTOMIZABLE  Share