Sunday, August 27, 2023

When NOT to use shadcn/ui?

UI Library


Cover photo for When NOT to use shadcn/ui?


shadcn/ui works best when you wish to build your UI component library while looking for a good starting point. This means heavy customizations on the components should (and in my opinion, MUST, more on that later) be expected. Suppose you want everything to work out of the box, including a predefined design system and apply relatively minor customizations to the built-in components, then a UI component library like MUI and Chakra UI may give you a better experience.

By the way, this website took the #2 approach and used Joy UI from MUI.

How does shadcn/ui work differently from a UI component library?

Unlike UI component libraries, we are not installing shadcn-ui as a package and importing components from it, i.e., this is NOT how shadcn/ui works:

import { Button } from "shadcn-ui";

Instead, the components' source code is being generated by the CLI and added to the project. They become part of the project source code.

Project structure
├── components
│   ├── ui
│   │   ├── button.tsx
│   │   └── card.tsx
│   ├── your-folder
│   │   └── your-component.tsx
│   └── your-another-component.tsx
└── lib
    └── utils.ts

And then the components can be used by importing them from local files as if they are developed by you.

import { Button } from "@/components/ui/button";

At this point, shadcn/ui's mission is effectively completed. The generated code is now part of your source code. This approach is quite special and has its advantages and disadvantages.




Although shadcn/ui does simplify the UI creation process in a lot of cases while offering a high degree of customizability, hence the main reason it gets so popular, it is not the silver bullet. Instead, it is a specific tool targeting a very specific audience. It never fits the "this is the best component library" statement and is not beginner-friendly (beginner to FE development) at all. At the end of the day, it is about choosing the right tool for the right use cases.

Written By

Matthew Kwong

Matthew Kwong

Senior Web Engineer @ Viu