DEV Community

loading...
Cover image for 10 reasons why I love Material-UI

10 reasons why I love Material-UI

Anjan Shomodder
Full Stack Web Developer | Blogger | Instructor at Cules coding
Updated on ・4 min read

I tried material-ui for the first time back in 2020 for one of my project. From then I have really become a fan of it. It is really beautiful and elegant. Material ui has everything that you need for a modern website.

Now why would you want to use a ui framework instead of custom css styling?

The reason might be:

  • You are not good at css or you don't like it.
  • Css from scratch is too much work.
  • You are in a hurry.
  • You are terrible at design and so on...

Let's see 10 reasons why you should try material-ui:

  1. Beautiful design: Material-ui is based on Material design. And It is developed by Google. It is well tested design by professionals. And it is so beautiful. If you have visit any kind of google website, you will find a common design.

Alt Text

This is material design. It is clean, colors are good for the eyes and nice animations.

  1. Huge amount of Components: Material-ui has huge amount of components. It has everything that you need. You can create from simple to complex websites easily.

  2. CSS in JS: It simply means writing your css styles with javascript but with much more flexiblity. It gives you unique class names. You can use them for making the styles scoped to the component.

  3. Customizable: You can customize Material-ui however you want. You can use custom css with makeStyles. Or you can customize the whole theme. You can change every style of any class.

  4. Grid System: This is my favorite feature of this framework. You can create complex responsive layout with Material-ui Grid.

  5. Icons: Material-ui comes with over 1000 icons. They are really customizable.

  6. Tree Shaking: It removes all the unused code from package for the production build. That's how website can load faster.

  7. Great Docs: Material-ui docs are one of the best docs I have ever seen. It has everything that you need to know.

  8. TypeScript support: Material-ui supports typescript out of the box.

  9. Great Community: Material-ui is very popular and it has a large and great community. If you face any problem, the community members will try their best to help you.

This is why you should use Nextjs. Nextjs is the most popular framework for React because of its awesome features. And there are more things to explore.

So, if you are using nextjs, why are you using it? And if you haven't tried it, then which of its feature is more interesting to you? Are you going to try it?

Please put your answers on the comment box. I would love to hear from you. Also if you like this blog then give it a 💖 reaction. If you have any question, then you can connect to me on any social media as @thatanjan .

I am creating a course about material-ui. In this course, you are going to learn about everything you need to know about material-ui. I would highly recommend you to watch the series.

Material-UI Basics Course #1 - Intro & Setup

So SUBSCRIBE to my youtube channel Cules Coding

I am writing this blog on my website. I would be glad if you visit the
website Cules Coding

Until then, stay safe and be happy 🙂

About me:

Who am I?

My name is Anjan. I am a full stack web developer from Dhaka, Bangladesh.

What problems do I solve?

I can create complex full stack web applications like social media application, blogging, e-commerce website and many more.

Why do I do what I do?

I love to solve problems and develop new ideas. I also enjoy sharing my knowledge to other people who are wiling to learn. That's why I write blog posts and run a youtube channel called Cules Coding

Think we should work together?

Feel free to contact me

Email: anjancules@gmail.com

linkedin: @thatanjan

portofolio: anjan

Github: @thatanjan

Instagram (personal): @thatanjan

Instagram (youtube channel): @thatanjan

twitter: @thatanjan

About My channel:

Why would you subscribe to Cules Coding?

Cules Coding will teach you full stack development. I will teach you not only the basic concepts but also the advanced concepts that other youtube channels don't cover. I will also teach you Data Structures and Algorithms with abstraction and without Math. You will also find many tutorials about developer tools and technologies. I also explain advanced concepts and technologies with simplicity.

So what are you waiting for?

Subscribe to Cules Coding so that my friend you don't miss any of these cool stuffs.

Discussion (8)

Collapse
dimer191996 profile image
Dimer Bwimba

hell nah >>> tailwind here we gooooo , who's with me ?

Collapse
doutir profile image
Nathan Guedes

I'm gonna start a project and I'm thinking in use material ui your article give me a hype but I have one fear I hate the way how material ui have style if I wanna give a margin using styled components how I do that?

(Sorry for my bad English I'm from Brazil)

Collapse
thatanjan profile image
Anjan Shomodder Author

Hey, I am glad to hear that my blog has influenced you.
I believe what you are trying to ask is how can you add margin with styled components.

If you use material-ui, you don't need to use styled components. You can use css-in-js with material-ui. You can customize your styles however you want. Material-ui gives you full control over your application. You can learn from here

I am also going to create a video about how you can customize your material-ui with css-in-js. So, you can subscribe to my YouTube channel Cules Coding
And also you can follow me on any social- media.

Collapse
kemoday profile image
Mohamed Awde

Hello Anjan that sound interesting, very interesting I heard a lot about material UI from a long time ago but never thought about it that way
thanks for sharing

Collapse
programmeraadi profile image
hmmmmmmcoder

Great post but if you ask me material is kinda boring

Collapse
sudarshansb143 profile image
Sudarshan Sawandkar

I liked your poster

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
programmeraadi profile image
hmmmmmmcoder

Hey Don't be rude

Forem Open with the Forem app