There are a wide range of reactjs tutorials available online but not many of them are optimised for a bootstrapper wanting to hack together a product as soon as possible while not compromising too much on quality. This was the exact problem we faced while building our product.
As many web developers will tell you, the core business logic is never the bottleneck. What consumes the most amount of time is styling the UI and polishing it to adhere to the UI/UX expectations of 2020 while also being responsive on devices of all shapes and sizes.
So what if there was a library that takes care of all of these things and allows you to focus solely on your business logic? This is exactly what Polaris does. It is a library of react components built by Shopify and they use it for their own UI as well.
Using Polaris is as simple of piecing a bunch of lego blocks together to build something. Each of these lego blocks are react components which can be customised by simply changing the properties provided to that component. To use Polaris you would need to know the basic concepts of reactjs.
Once this is done, the app is automatically responsive on devices of all shapes and sizes. So what lego blocks do we need to build a web application? Lets go over all the lego blocks that worked really well for us.
Building blocks of an application
Top bar
A great place to display your product logo on the left and account information on the right. You can customise this further with your own brand colour like we did instead of the default Polaris colour.
Side navigation bar
Use this to display all your features/pages which the user can use to navigate your product. The component gives you a way to add your own icon to each of the navigation items. You can also choose from a whole range of existing icons that polaris already offers using the Polaris icon explorer.
Contextual save bar
Ever find yourself with a UX problem where you have a bunch of settings in a page that the user can configure, but there needs to be a way for the user to save their progress in between?
The dilemma here is that if you have a save button at the bottom, one would have to scroll till the bottom to discover the button and save and if the button is at the top one would have to scroll back up to save if they are at the bottom of the page.
Contextual save bar solves this problem by turning the top bar into an interface where you can either save your progress or discard it. This is super neat because the top bar will always be visible no matter where you scroll.
Annotated section
Oftentimes when you use forms to collect information from a user, it is a challenge to educate them about what that form is for. You would either have to give this description before displaying the form or after.
Annotated section solves this problem by giving you a super simple and elegant way to put the description on the left while displaying the form on the right.
Banner
Displaying banners are a great way to communicate to users about stuff like new features, outages, nudging them to subscribe to paid plans, etc. Polaris provides a wide range of banners which can be customised simply by changing certain properties of the component.
Card
Every interface needs a way to display a certain unit of information. This can be achieved using a card. You can also easily add headers and actionable buttons to the card with just a few tweaks in the properties.
Pages
The Page component serves as a container to hold all the other components, all the while providing a title, subtitle and some actionable items that can be taken on that page.
Conclusion
All the above components are the basic building blocks of an application, however Polaris offers a whole range of other components that are super handy in creating all kinds of flows. You can find all of them here.
They also have a bunch of design guidelines around the usage of these components. One does not have to adhere to these guidelines but they definitely help because they are something that Shopify uses and it works great for them.
What is the catch?
Polaris was primarily designed for solving various UI/UX problems that occur in the Shopify systems. This does not mean that they are not useful for things that are built outside of Shopify, it just means that there needs to be an overlap between the product you are trying to build and every use case that Shopify encounters.
It is a great way to bootstrap a product at lightning speed, but the catch is that the components are not very customisable. They are meant to be picked up and used as is with tweaks made only to the properties passed as arguments to the component.
You might find yourself in a tricky position if you have to implement a component with custom CSS alongside polaris components. But for the most part polaris has default components to cover most cases and there are workarounds for achieving custom CSS.
An example of the work around is that we wanted to change the default colour of a Polaris primary button to our own brand colour and we did this by overriding that particular css property globally and changing the colour with a !important at the end.
Closing note
For someone that is just getting started with reactjs, using a library like this is a great way to focus on core business logic while at the same time learning the concepts of react without spending time on styling your components.
Top comments (4)
Hi Sankalp, I also think Polaris is an useful library for UI when working with react projects. Just keep in mind that it is against Shopify's terms and conditions to use the library for external stand alone projects that are not related to Shopify. From their terms and conditions:
2. License Restrictions. You may not use the Polaris Design Guidelines (i) to develop, test, or distribute an external, stand-alone Application (“External Application”) unless such External Application is not identical to and is dissimilar and visually distinct from Shopify products and services (including the internal administration page of a Shopify merchant store (“Shopify Admin”)), as determined by Shopify in its sole discretion, (ii) to mislead consumers as to Shopify’s sponsorship of, affiliation with, or endorsement of you, your organization, or your Application, and (iii) for any purpose not expressly permitted by this License Agreement. For clarity, any Application that embeds directly inside the Shopify Admin or other Shopify interface that allows for the embedding of Applications (“Embedded Application”), as determined by Shopify in its sole discretion, may be visually similar, but not identical, to Shopify products and services. You may not modify, adapt, redistribute, or create derivative works of the Polaris Design Guidelines or any part of the Polaris Design Guidelines.polaris.shopify.com/legal/license
Hi Fernando, thanks for this. I genuinely had know idea about these terms and conditions set by Shopify. I guess I should have researched it better. I highly appreciate you telling me this so I can now be vary about it in the future.
No problem! I also wanted to use it for external projects but I had read in some forum it was not allowed, so I checked it directly with Shopify.
I also really love Polaris, i found an amazing ui lib similar to that, using bootstrap.
github.com/ablesense/bootstrap-pol...