Empower Magento2 UI library

Empower Magento2 UI library

Magento2 came with very “controversial” frontend architecture approach. We will not discuss that but we will try to explain how to empower current Magento2 UI library to achieve most common frontend task.

First, what is Magento UI library and where to find it. As intro text explain:

The Magento UI library is a flexible modular Magento frontend library that is designed to assist Magento theme developers. It employs a set of mixins for base elements to ease frontend theme development and customization. The Magento UI library offers the following characteristics for those who develop or customize Magento themes.

Ok, sound great, what we can expect from this library? As further text says,

The library provides the ability to customize all of the following user interface elements:

  • actions-toolbar
  • breadcrumbs
  • buttons
  • components
  • drop-downs
  • forms
  • icons
  • layout
  • loaders
  • messages
  • pagination
  • popups
  • ratings
  • resets
  • responsive
  • sections – tabs and accordions
  • tables
  • tooltips
  • typography
  • utilities

Before we proceed, maybe you’ll find usefull our previous posts regarding Magento2 as CSS preprocessing in Magento 2, and this can be interesting Validate a custom form in Magento 2.

Today I will focus on simple task related to customizing forms. Look and feel, functionality, validation etc.
First, let’s say that we need to locate library documentation. If you already install Magento2 then you can access library documentation pointing browser to


Here you will find documented and structured all documentation related to interface elements.

Magento UI library

So we have guessed that you have already installed Magento2, sample data, create custom theme, using fallback mechanism, parent theme is blank. We can start with simple tasks.


we will have registration form:

Under theme _theme.less files we can start by adding


Save, compile and we will have this:

This is globally for all forms switched from inline to block label and then input field. Same thing goes if you want to change color, border, fonts, just follow documentation where all possible variables are listed.

Nice feature that is really simple to get forms in columns. We will use same register form and create two columns.

.fieldset {
> .field {
@_column: true,

We can change color of Form field label and Label “required” asterisk

.fieldset {
> .field {
@_column: true,

We can try to play with more global variables, for example validation:


We can add a custom icon to validation message, color, size etc.

This is only a few examples what you can achieve in few minutes if you are following library documentation. As you can see there are tons of things that can be modified and reuse in different places.

I hope that these few short snippets will help you to dive in more in library and start using existing code which can be very helpful on Magento2 projects.

Related Inchoo Services

You made it all the way down here so you must have enjoyed this post! You may also like:

Magento 2 Customer Groups Configuration Josip Kovacevic
Josip Kovacevic, | 2

Magento 2 Customer Groups Configuration

How did we standardize Magento 2 frontend development? Ljiljana Milkovic
Ljiljana Milkovic, | 8

How did we standardize Magento 2 frontend development?

How to add a custom columns to the Magento 2 products grid Ivan Matozan
, | 6

How to add a custom columns to the Magento 2 products grid

1 comment

  1. Are you subsidized by Magento? I only ask as their UI tool kit is fu**ing terrible, it is literally the worst frontend framework ever….

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.