Austin Farr - Blog Using Shadcn UI - Making the switch from MaterialUIWritten April 26, 2024

MaterialUI: My first tool

When I started in web development, the very first styling library I learned was Material UI. It got me off the ground in seconds. With almost no learning curve, I was able to create well-designed pages that would have taken me multiples longer using just normal CSS.

Being my first tool, I naturally grew attached to it and was confused by the constant hate I saw for it in Web Development communities online. While Material Design was at once the cutting-edge, shiny new trend, that has faded now that thousands of sites have the exact same look and feel.

The Shortcomings

While MUI is customizable, it takes considerable effort to make it look distinct from the default styles. Most people don't go to that length, hence the slew of sites that look identical. I've heard it said that the floor of how bad an MUI site can be isn't so bad, but the ceiling of how great it can look is pretty low as well.

That all MUI sites look and feel similar is just one common criticism. There are many others including the source code for the components being hidden in node_modules. Additionally, the nature of "npm installing" the library wholesale means you have a larger package, possibly of unnecessary and unused components.

Shadcn: The New Kid on the Block

As I've explored the other options, I've realized the reason for all the critiques. If you want to make your site look distinct from Material Design, the amount of customization necessary makes MUI much more work than it's worth. You're better off leaving it entirely for something new.

I've seen all the love for Shadcn, which is a component library built on Radix, and I decided to try it out on this site. After using it, I quickly understand the hype. While the components do come pre-styled, they are so easy to customize.

Rather than having the whole library in node_modules, you opt into hand-picking which components you want. You can either add them from the CLI or just copy and paste the source code in the components folder. You can see the exact code and make all the styling and theming choices you desire. It integrates seamlessly with TailwindCSS, which is an immensely powerful tool once you adapt to the shorthand.

Takeaway: I love it

The project setup is super easy and straightforward, and after my first project with it, I really have nothing bad to say. It has easily become my go-to tool for most use cases in place of MUI.

I still have a lot to learn to become maximally efficient using it, but I expect to get there quickly. Trial run was a success, and I look forward to using it more!