ShadCN and the future of building UIs

I have always been a stickler for writing my own code. I have always resented UI libraries like Bootstrap and Tailwind. In my head, using them is cheating. I spent a long time learning to write excellent HTML, CSS and JS code. Then, these libraries come along and make all that learning redundant. My ego and I did not like them one bit... until recently.

Since moving to Melbourne, I have been playing the networking game hard. I have connected with many entrepreneurs, digital nomads and indie hackers. They have inspired me to look beyond freelancing and think more about using my skills directly to solve problems. More recently, I have started building small apps. Some I build to experiment, some to share. While making these little apps, I noticed that all UIs are broadly similar. This made me realise the importance of UI libraries.

Today, we discuss a UI framework like no other - ShadCN. It may have profound effects on the future of Front-end Development. I am using it on my newest app. So far, I have been very impressed. I am so impressed that I am writing this post about it. Without further ado, let's dive in.

Last Friday, I started building my latest app. The app is a speech-to-text journalling app - I will share more about it in another post. On Friday, I put together a prototype to test its basic functionality. After completing this, I watched a Fireship video (as a treat). The video talks about a radical new UI framework - ShadCN. Once I finished the video, I felt compelled to test it on my app prototype. It took all of 15 minutes to put together.

So, what is it? It is a library of pre-built, oven-ready UI components to add to your app. The library is extensive. The components range from simple buttons to carousels, dropdowns and tooltips. You install the components individually using NPM. Installing individual components rather than all of them prevents your app from containing loads of unneeded JavaScript code. They are all styled using Tailwind, allowing you to customise them as needed.

For old stick-in-the-muds like me, UI libraries are for people who can't write good code of their own. For the general population, they hold many benefits.

What is it that sets ShadCN apart from other UI frameworks? In essence, nothing. Bootstrap, Material and any other UI library do the same thing. 

ShadCN is unique because of Vercel's new AI-powered UI generator, V0. Using the chat prompt, you tell it the UI you want to create. It then builds the UI using ShadCN components. It provides the code to copy and paste into your app or an npm install command to install the component directly into your app.

Every Developer has their preferred tech stack. I love using VueJS and Nuxt. Other Devs prefer React and Next.js. Some love SvelteKit, and some love Angular. For many years, your tech stack was a personal preference. What ShadCN and V0 have done is make the tech stack look irrelevant.

Each front-end framework has a unique workflow. If we outsource building the UI to automated tools like ShadCN and V0, we no longer need to worry about the framework we use. What matters is implementing the business logic and hooking it up to the UI. In the future, it may not matter what front-end framework is used. What will matter is your ability to write the JavaScript code to hook the front end to the back end.

Outsourcing the UI to automated tools means we can prototype much faster. When we build faster we iterate faster too. Building products is often about iterating from user feedback. The more we iterate, the quicker we can make great apps.

The evolution of front-end development is not to be feared. We are not becoming obsolete. The tools available to us now will speed up our workflow. As our processes change and streamline, our products will naturally improve. Building great products is what being a Developer is all about. The tools arising out of this AI revolution will only enable us to do more of that.