Microblog: All about that shadcn

I’m a full stack developer 🥞, but most of my experience has been in backend. I’m one of those backend devs that used to always build sites with the most basic Bootstrap themes 😅

For a long time I didn’t keep up with front end development. It wasn’t until about 2020 before I actually learned React. Up until that point I had still been relying on both Bootstrap and jQuery!. Even in 2020 Boostrap and jQuery were out of favor (even though they were and are still heavily used).

I recall my early attempts to try and grok React. I couldn’t even get past the first few pages of the documentation. There was so much built upon frontend knowledge that I had missed out on that I just couldn’t get my bearings. I remember reading an amazing blog post at that time that summed up my experience exactly – https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f  – This was 2016 and a lot of it is now out of date (ironic) but I actually think the point or the article still stands today.

Anyway…

Once I finally did manage to catch-up on frontend I started working on a lot of full stack side projects. Going back to my earlier days of being able to build UIs and websites. The only problem was, I sucked as a designer. Well that’s not entirely true, but designing something that looked good, and was functional. was proving time-consuming, and tedious. At that time I discovered MUI. Armed with my new understanding of components and package managers, I loved the ease of installing compoonents from a component library just by copying the install command. (I won’t mention how all my projects at this time ended up looking like out of the box MUI. It was the same for a lot of other backend devs. MUI became the new Bootstrap!)

Wasn’t this about shadcn?

Oh yeah. Anyway, once I unlocked my newfound obsession with design system component libraries, I went through all of them, I tried Tailwind, Chakra UI, Mantine, Radix, I even found a React-bootstrap, just to name a few. As part of my journey I kept seeing a name being mentioned – shadcn. Every time I saw it I read it as “shadcdn” so I always thought it was something else entirely different. When I finally decided to take a closer look I was confused. I thought this was a component library? But it writes code to my app? I specifically didn’t want that. I wanted something that opinionated and black-boxed. So I decided it wasn’t for me…

Later on, a few things happened that made me realise that packaged component libraries have their limitations. And there are legitimate reasons why it may be better to consider a tool that just gives you the code. For example, some of the libraries that I tried out ended up being really big. So when they were included in builds they were blowing out the bundle size. Let alone if you wanted to change a default value, it was basically impossible. Though to be fair I’ve never needed the latter.

It wasn’t until I inherited a project that was already heavily using shadcn that I finally gave it a proper go, and came to love it. The kicker for me was in the utility it provides. For example, say you wanted to install the Button component. You don’t just go and copy the code from the docs (though you can if you want to), you still install the component as you would in other component libraries. Like so:

`npx shadcn@latest add button`

Now the beauty is, it will actually check if you have all the dependent components already installed, and if not gives you the option to install them. This makes it so much nicer to work with, and the added benefit that you own the markup it generates.

Combined with Tailwind (which I also personally love) and I feel like shadcn is a fantastic library of components and tooling.

I encourage you to check it out https://ui.shadcn.com/