Top UI Frameworks for Angular and react.
Tags: webdev, css, react, angular
Published: 2022-07-03 08:58:52

Here are the frameworks you should know before you start your next project. Most common ones comes last in the list. You should never use bootstrap (Bottom of the blog)

# Angular CSS Frameworks
##[1. Taiga UI](https://taiga-ui.dev/)

![Taiga UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0eacghfkellx6pr0nbh0.gif)

These are some well defined open source, easily customizable and comes with dark mode.

##[2. PrimeNG](https://www.primefaces.org/primeng/)

![PrimeNg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0wszeee8xkrlcva4tui.gif)

These are also highly customizable and I am currently using this in one of my projects. PrimeNg also has Prime Templates.

##[3. Angular Material UI](https://material.angular.io/)

![Angular Material](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7gzhorqoma3ojp29tj2.png)

I would not suggest using this but if you are looking to make some quick project the custom design and colors doesn't matter then it may be for that.

Customizing angular material components are so rough we have to do a lot of things and may not even work in the end.

# React CSS Frameworks
All these frameworks are easily customizable.

##[1. Chakra UI](https://chakra-ui.com/)
![Chakra UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r451r584ctfn0niqcdh9.gif)
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. 

## [2. Ant Design](https://ant.design/)
![Ant design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efxg07dqqwvuct5eeqc7.gif)
A design system for enterprise-level products. Create an efficient and enjoyable work experience. This is the second most popular react framework

##[3. Material UI](https://mui.com/)

![Material UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45w0bt229xq42cumzo2v.gif)
The one of the kind frameworks that allows all kind of customization and with typescript. I never got bored of using this.

# Don't use bootstrap here's why
- It doesn't easily let you **overwrite custom css**
- It uses **!important** on everything which is a bad practice
- It consists of all the css classes and hence the **bundle is     high** it takes a lot time to load that affects performance

# [Tailwind CSS](https://tailwindcss.com/)

![Tailwind CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxmqwtjjmb4yon8hjqp5.gif)
Tailwind CSS is by far the best I come across that lets you create rapidly if you know css well enough. It’s tiny will never ship unused CSS again (unlike bootstrap).

I always use Tailwind CSS with some supporting frameworks like material or taiga. Those components can be so helpful and the components classes can be easily overwritted by tailwind.

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari and may considering a [buttermilk 🥛](https://www.buymeacoffee.com/shriharimohan).

Peace  🕊 
---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)
---

#More Free Articles From me !
{% embed https://dev.to/shrihari/things-i-do-to-be-motivated-towards-work-39md %}

{% embed https://dev.to/shrihari/things-i-changed-in-ubuntu-for-productivity-and-improvements-1nbm %}

{% embed https://dev.to/shrihari/mistakes-i-made-when-i-started-nodejs-mongodb-5g92 %}