What is shadcn/ui?

We started crafting a free and open source Figma UI kit based on shadcn/ui which we hope to release soon on the Figma community.

I wanted to start off a series of blog posts with this first one, where I try to explain what shadcn/ui actually is.

In short, shadcn/ui is a starting point for building out a component library built by Shadab Ahmed aka shadcn. Shadab is employed by Vercel as a design engineer.

Shadcn/ui currently has 87,500 stars on GitHub, making it one of the most popular React projects on Github (for reference, React itself has around 200k stars). The oldest commit I can find on the repo is from January 24, 2023. Seven months later, in August 2023, Shadab joined Vercel.

What we can gather from this is that shadcn is a relatively young framework, just over two years and a couple of months old.

A different setup

Shadcn does things differently than other UI frameworks.

Essentially, it wraps the headless components of Radix into a Tailwind layer. Through a command line utility you can drop in components into your project. 

For example, if I wanted to install a button to my project, I would use this command: 

npx shadcn@latest add button

The difference with most component libraries is what this does: instead of installing a component that you can't actually touch in node_modules, the command line utility drops in the actual component files.

These then contain a) Tailwind styles and b) import headless Radix primitives to render the more complex stuff like dropdowns, tooltips, dialog logic, etc. 

In essence, the complex logic is abstracted via Radix. The layer that people usually want to edit — the styles — are easily accessible through Tailwind classes. This is the main draw of the framework and why people love it. No more jumping through endless hoops to style something: the Tailwind classes are right there.

Influences

From what I can tell, shadcn/ui is heavily influenced by various previous projects.

From a framework standpoint, it seems to be heavily influenced by Radix. In fact, there's pretty much a 90% overlap with Radix when you consider Radix's primitives. One could say shadcn is a layer on top of Radix.

If you look at Radix's influences then, it seems to be heavily influenced by Linear. In various components you can find shortcuts which is a Linear staple. The default UI style (while pretty bare) also looks similar.

Reliance on Tailwind

Shadcn/ui has some relationship to Bootstrap (i.e. it has some similar components), but the code structure and the way that it's set up is totally different. There are no grid classes or responsive classes because that is handled by Tailwind. Shadcn/ui relies super heavily on Tailwind CSS.

Using Tailwind is pretty much a requirement to be able to use shadcn.

If you did any vibe coding lately, you might have noticed that a lot of the apps such as Lovable and v0 rely on shadcn. If you generate anything on v0.dev, it's bound to use shadcn. 

Lucide icons

The icons in shadcn/ui are powered by Lucide. This is an extremely interesting icon project. The authors basically took Feather icons and extended it with 1200+ more icons.

From what I can tell, it's truly a community effort with many people contributing. One clear disadvantage that I can see is that Lucide doesn't actually have any filled icons (Unlike our own Obra Icons ;) )

Other frameworks

What if you do not use React for your projects? Fear not, many people got inspired by the popularity of shadcn to build on it.

Angular

A lot of the projects we are designing use Angular as part of their development stack. There is a project called Spartan that builds on the same idea. In this case, they refer to the UI part as “helm” and the headless part as the brain. There's no v1 of the project yet, but it looks promising.

Svelte

Svelte is my favorite front-end framework.

There is a shadcn-svelte project that I personally haven't tried, but I can vouch for its main man huntabyte as a person who really knows what he's doing.

Vue

I haven't used Vue in quite some time, but at first glance, shadcn-vue seems like a well-maintained project.

Conclusion

I hope this blog post gives you an idea about what shadcn/ui does and what it is.

We plan to use shadcn extensively in our Ignite projects, which are small design projects meant to validate a potential solution before committing to major investments.