DEV Community

Top 5 Angular Design Systems/ Component Libraries

I was about to start a side project with Angular and began wondering what design system should I use to avoid my app looking like plain html during the process. After doing some research I decided that it is worth noting down my research and sharing it with the world.

Some of the requirements by which the selected design systems were selected:

  1. The system has to be designed to be compatible with Angular (installable via Angular CLI)
  2. It has to look cool and modern
  3. It has to have a large component library (a lot of the one I have seen actually don't have all the components you might think they should have!)

5. Onsen UI
Alt Text

Onsen UI focuses on providing ui elements for hybrid apps and PWA's. The design of components looks very inspired by google material design with its own twist to it. I think could be a great library if you want to focus on mobile experience.

4.Kendo UI
Alt Text

Kendo UI is one of the largest components librarys that I have seen with a lot of focus put on data visualisation and developing data intensive UI's. If Kendo UI was a free service it would definitely deserve the first place on this list.

3.Semantic UI
Alt Text

What is unique about Semantic UI is that its design resemble IOS design system. I think it is a fantastic library if you would like your app to blend in on your Iphone or Mac.

2.NGX bootstrap
Alt Text

Even though bootstrap is already quit an old component library I still think it is one of the most versatile and flexible libraries available out there. I must give my kudos to bootstrap for keeping up date with web technologies and still making it a solid choice in 2020.

1. Angular material
Alt Text

Angular material design is the library to pick if you want the most well developed and supported library for Angular. Why is it so? Angular and material design origins can be traced back to Google, therefor I can see how both of these ideas have developed together over the last decade. Outside of that Angular material is quit a refined UI library which I have used on several project and it have not let me down.

There are a lot of different component libraries out there and you must pick the one that fits your project the best. In the end, for my project I picked Semantic UI just because I have never developed anything that looks like IOS.

What is your experience with Angular ui libraries?

Top comments (3)

techguy profile image

Syncfusion library missing here

aziziyazit profile image
Azizi Yazit

ng-zorro is my favourite design system

fastcodeinc profile image

If you are going to use Figma for mock-up screens design and Angular Material for implementing the designs, checkout for a free Figma UI Kit for Angular Material.