While component libraries have existed for a long time and helped developers make beautiful and accessible web applications in less time, we still witness new ways of approaching component libraries, with the latest approach (of a few years) being that developers should have full control over the structure and styling of their components while the library should handle the most crucial logic as well as accessibility.
These libraries have come to be known as "headless component libraries" and are a category of component libraries which offer the same attention to accessibility, composability and structure as other pre-styled libraries, though without any assumptions about styling. This is also the time when Tailwind CSS started gaining a lot of popularity, making people even more eager to handle their own styling.
One of the most popular headless component libraries is Radix Primitives (sometimes referred to as Radix UI) - a React library for composing custom styled components through low-level components offered by the library. While there have also been other popular headless component libraries such as Headless UI from Tailwind Labs, Radix Primitives gained a lot of popularity for having a larger collection of component primitives whereas my other libraries didn't cover as much.
While Radix Primitives' (and headless component libraries in general) biggest strength is being unstyled and flexible, it is ironically also one of its biggest weaknesses. A large portion of the React community liked the idea of having full control over your components, though for many it is still a big task to style everything from scratch when building new projects or prototyping ideas, meaning that many people still leaned towards the more traditional styled libraries.
In January of 2023, a Twitter user with the handle @shadcn started tweeting teasers of a pre-styled component library, built on top of Radix Primitives and using Tailwind CSS for styling. Shadcn, who was already pretty well known in the React community for his Taxonomy project among other open-source contributions, had the idea of building a fully-fledged component library using Radix Primitives and Tailwind CSS on top of a theming system in which developers could tweak colors and border radiuses as well as enable dark mode.
What made shadcn/ui different from other component libraries was the way that the library was shipped - instead of being bundled as an NPM module, all components were included as a snippet on the library's documentation page and developers were encouraged to copy/paste the snippet into their own code base. This unleashes a whole new way of approaching customizability of component libraries and people were all for it, as it went viral on both Twitter and GitHub. The hype got even stronger through the immense effort Shadcn put into the library and has since the library's release introduced groundbreaking features such as:
@tanstack/tableAt the time of writing, the repository hosting the source code for shadcn/ui has reached 30.000 stars on GitHub, being almost 3 times as many as Radix Primitives' repository at 11.000 stars, which confirms the fact that Shadcn has hit the bull's-eye when it comes to offering the right amount of flexibility and opinion to a component library that we haven't seen before. shadcn/ui has become a go-to library for indie hackers who wish to develop rapidly, but still have the opportunity to customize their design system along the way.