If you're a React developer, you've most likely heard of Shadcn/ui. This library has recently got a lot of hype around the React community, and a lot of people are switching from their current solution to it. Eventually, all the talk I saw on Reddit and YouTube got me curious. So I tried it for the first time by building the website you're reading this post on! I knew just creating a tiny project just to test it out wouldn't be enough for me to get an opinion on it, so I bit the bullet and made the bold move. At the same time, I saw this as an opportunity to get started with Tailwind for the first time, which I explain in another post.

While at first glance it may look like just another components library, it actually brands itself as a library to help you build your own component library. This is an interesting approach: instead of you having to install another dependency to your project and get access to a bunch of components, you own the code of each components inside your project. This allows you to only have the components you need, but the biggest advantage is that you can customize the entire code of it to your liking. Under the hood, shadcn/ui uses Radix UI's components and styles them with Tailwind CSS. In essence, shadcn/ui can be seen as pre-styled Radix components.

Before shadcn/ui was released, Radix already had a lot of users backing it. Since the components it ships weren't styled, people had two choices: style everything themselves or switch libraries. Obviously, since Radix is headless, its users never expected it to be styled. That's actually the reason some prefer headless libraries: because they need unstyled components while still having the functionality of the component and Radix was very good at doing that.

On other libraries that don't offer a headless version of their components, one of the GitHub issues you'll often see is a feature request for them. That's usually because the people like the library's functionality, but they don't want to override every styles if their design is fundamentally different from the default one.

Personally, I never really got into Radix in the first place, because I prefer pre-styled components by default. So you could say that what got me into Radix is shadcn/ui, because I could finally experience Radix without the need of styling everything (or so I thought...).

Shadcn/ui provided users of Radix with a solid foundation to build on top of. That way, Radix's users didn't need to start from nothing and they could still have full control over the components' styles.

I believe a big part of shadcn/ui's hype (and success) is because it was building on top of an already popular headless library (Radix) that had no styles. If someone built a shadcn/ui-like library for Headless UI, it could potentially be well-received too! In fact, that "mentality" of styling headless libraries is exactly what motivated the creation of JollyUI, for React Aria! JollyUI aims at re-creating shadcn/ui, but with React Aria instead of Radix.

Just like any technology, there's no one size fits all. I have to admit, I kind of got into shadcn/ui "blindly" because of the hype. After personally using it to build this website, there are some questions I wish I would've asked myself before choosing it as my website's UI library:

• Do I like Radix's primitives?
  They're okay, but none of them stand out. Most UI libraries have those same components and more.
• Do I like the functionality of the components Radix has to offer, although they're not styled? (if we don't look at Radix Themes)
  Again, it's okay, but nothing that stands out of the other libraries.
• Am I looking for a headless library or am I looking for a pre-styled library?
  I always prefer pre-styled for my personal projects, because I'd rather focus on my app's features, not look.

I think the major factor you should be looking at when choosing if shadcn/ui is right for you is whether you like Radix or headless libraries in general.

If you're looking for a headless library because you want to create your own app's look and feel, but feel discouraged to style everything from scratch, then shadcn/ui is definitely for you!

If you're looking for components that you can just install into your app and use them as-is without feeling the need for customization, then shadcn/ui is probably not for you. Using shadcn/ui this way will probably make you end up like me: you'll copy its components into your app and never touch the file again.

Having the ability to own the component's code is neat, but if you're not going to customize it further, you're better off with something that offers you more out-of-the-box. Radix is a great choice if you want to do something more "custom" and shadcn/ui will kick you off in the right direction with it. In terms of features your components have and the functionality they give you, I believe you can get better elsewhere.

Even if shadcn/ui is not a components library, comparing it to other UI libraries and frameworks wouldn't be exactly like comparing apples and oranges. In the end, shadcn/ui and other libraries are tools to make UI. There are tons of UI libraries out there, so we'll obviously not cover them all here, but I do want to dive a little bit into 3 and explain how they differ from each other.

As mentioned earlier, shadcn/ui is built using Radix. Radix is a set of headless (unstyled) components. Much like shadcn/ui, you install the individual components you need. There's no "core" library for you to download with all the components. That said, if using shadcn/ui as your middleman between your code and Radix isn't for you, you could just opt for using Radix directly as your components library.

Radix also introduced Radix Themes, which is their components with opinionated styles, like other components libraries.

Another strong point of Radix I've noticed while creating my website is accessibility. While most libraries will have accessibility in mind, Radix has it as a priority when it comes to following the WAI-ARIA design patterns, which is something very neat for someone like me who only know the basics of accessibility features.

I see Material UI (MUI) as kind of like the Bootstrap of React. It's the first UI library I used when starting out with React. I find it to be more of a "jack of all trades, master of none" kind of library. It's probably the most mature one out of the other choices and, in terms of downloads, Material UI consistently surpasses the other libraries out there. It's a great option if:

• you're starting out with React and don't want the headache of finding the perfect UI library for you. MUI is a good general purpose library.
• you're working with a lot of other developers, because there's a better chance they've tried it before.
• you need enterprise support, which MUI offers through Material UI X.
• you've used other material design libraries in the past. Material UI follows Google's Material Design principles and will be familiar to those who've worked with them, like angular-material.

Mantine has been my personal favorite ever since I discovered it in 2021. It's a TypeScript-first and fully-featured library that goes well beyond just components. It supports dark mode out-of-the-box, has a strong Styles API that let's you style and theme specific parts of components, contains many guides to help you get started and comes with a wide variety of packages which you can incrementally adopt based on your needs:

• core: a collection of components for layouts, interactivity, data display, typography and more. It comes pre-styled, but you can use it as a headless/unstyled UI library by simply not importing it's styles.
• hooks: a stunning 50+ collection of hooks to help you with common patterns with DOM manipulations, state management and other utilities.
• form: components and hooks for building forms, with validation support with different resolvers, like Zod, Joi and Yup.
• many more: dates, charts, code highlighting, notifications, rich text, modals, dropzone and spotlight.

I love Mantine because it goes further than just basic components like buttons, cards and input. There's a component for just about every scenario and you can find over 100 premade examples that use Mantine on their Mantine UI page.

After having tried shadcn/ui though, I still believe Mantine comes out on top. While making my website, I found myself often saying things like "I wish shadcn/ui had this component from Mantine" or that "this component could do that like Mantine". At some point, there was even a git branch called feature/switch-to-mantine, which aimed at replacing shadcn/ui to Mantine because I got tired of re-implementing Mantine-like components. I eventually stopped the transition because I really wanted to give shadcn/ui an honest shot.

So, is shadcn/ui hype or substance? If you're someone who really likes headless UI libraries in general, then it's most likely substance for you! However, if you'd rather have a headful UI library, that is, a library that comes pre-styled (with optional customization), then shadcn/ui is probably just hype to your eyes. In my case, I find it to be more hype than substance.

What do you think? Have you tried shadcn/ui before? How was your experience? Let me know below!