Skip to main content

Adobe Commerce

Let’s Learn About UI Components in Magento 2

A group of coworkers in a collaborative meeting.

One of the elements of Magento that can be the most confusing is UI Components. The uiRegistry is one of the tools that will aid in your comprehension of them.



The uiRegistry performs several functions, but its most significant feature is the ability to thoroughly debug every UI component registered and loaded on a page.

Simply call get() with a function callback to do something that logs information about all components to the developer console.

You can obtain information about that component by giving a string to get() along with the name of the desired UI Component. To access a specific prop value directly, add a period and the property’s name.

You need to set a value for debugging. The chain is on a call to set with a prop name and value you want to set().

Are you prepared to try something new? Use one of these lines to assist you in investigating the situation by opening the browser dev console.

Start right away by performing the following in your browser’s dev console on a Magento page (perhaps the checkout):


console.log(uiItem) => get(uiItem)

Find out more about the uiRegistry by exploring it!

Thoughts on “Let’s Learn About UI Components in Magento 2”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Sachin Badase

An expert in his own right, Sachin is exceptional in his drive to thrill clients and coach his fellow colleagues, all of which impact those around him. His technical leadership and desire to help team members grow are admirable. Sachin is always willing to provide advice and support others when issues arise. He goes out of his way to share his deep technical knowledge as a mentor to new colleagues, helping them transition smoothly into their new roles.

More from this Author

Follow Us