Building UIs just got turbocharged with Shad CN's latest update—it's like Ruby on Rails and Skynet had a baby on steroids.
The worst part about being a front-end developer is developing UIs, which also happens to be 100% of the job. Web developers have tried to make things easier with countless UI libraries like Bootstrap, Material, and so on. However, recently, Shad CN, the hottest UI framework in the front-end world, released a major update that makes it way overpowered and it's nothing like you've ever seen before. The only way I can think to describe it is like if Ruby on Rails and Skynet had a baby who grew up and got jacked on steroids and then got into front-end web development.
When I started this channel back in 2017, my goal was to make tutorials like this Facebook-style Emoji reaction thing. The code for that video took the better part of a day, but now I can build an even better one in like 30 seconds. In today's video, you'll learn how to build a custom front-end website faster than ever. But with great power comes great trade-offs, and we'll also look at the drawbacks of this approach.
It is September 5th, 2024, and you're watching the Code Report. Last week, I ran a poll about Vercel, and thousands of people agree that it's the best for an in-cloud. This video is not sponsored by them, nor have they sponsored any of my past videos. That's why I can tell you that yesterday, Vercel took a pretty big L when it was revealed that Chat GPT switched from Next.js to Remix. Despite that, Vercel did make a really good move by hiring the developer behind Shad CN, and now, as we'll see, it's tightly integrated into the Vercel ecosystem.
Shad CN is a component or UI library, but it's a lot different than most other libraries like Bootstrap. Instead of installing a massive library of components into your node modules and importing them, you copy and paste the code for each individual component into your own project. This allows you to use things à la carte and makes it easier to customize the code. It sounds chaotic, but it's based on primitives like Radix and Tailwind, which keep things looking consistent.
The killer new feature landed in the CLI in the form of a component registry. You can run commands like shadcn add datatable or shadcn add carousel to easily add those components to your project, and it works with all the major frameworks. But here's where things get really crazy: Vercel also runs this service called V0, which is an AI chatbot for building UI. All you do is ask for a button, and it'll return something that looks just as good as any a16z-funded startup with a $100 million valuation. If we look at the code, what you'll notice it's doing is relying on the existing Shad CN button. It then AI generates some extra Tailwind slot, and the end result is pretty nice.
That's not the crazy part, though. If we click on this install button up here, we'll have a command to Shad CN add this to our project. It'll automatically copy that code into our project and bring in any necessary dependencies. Now we have a cool custom button we can use anywhere. Not just that, but these URLs can also be made public to be shared with anyone, and you could even build up your own standard library of Shad CN components.
If you drink the Shad CN Kool-Aid and then combine it with other AI tools like Co-pilot or Cursor, you can build UIs 10 times faster than you could just a few months ago, and they actually look halfway decent. The end result might look exactly the same as all your friends' side projects, but at least it didn't take you six months to build. The AI haters out there will tell you to never touch any of these tools; they'll make your programming skills go flaccid, and their garbage code will eventually backfire on you. But the reality is that just a few years ago, you'd have to solve many of these problems by going dumpster diving for code on blogs or humiliating yourself with a Stack Overflow question. Nowadays, you have people building to-do apps in their Teslas in the Ikea parking lot.
The AI performance gains are real, but they have to be used carefully and deliberately to avoid unnecessary complexity. I don't think tech like this will replace actual front-end developers, but here's my prediction: in the near future, I think developers will care less about the ergonomics of a framework, like the syntax differences between Angular, React, Vue, and Svelte, and care more about how quickly and reliably they can generate stuff. I wouldn't be surprised if we see a prompt-based UI framework. Oh wait a minute, it actually looks like someone already built that.
This has been the Code Report. Thanks for watching, and I will see you in the next one.