Component library

What is a component library?

Every website needs the same things: buttons, dropdowns, popups (modals), tabs, forms, tooltips, and so on. Building each one from scratch is slow, and it’s surprisingly hard to get right.

A component library is a ready-made collection of these pieces. Think of it like buying furniture from IKEA instead of cutting wood yourself. You save time and get something that already works.

The main types of choices you have

Type A: Fully styled libraries (ready-made look)
Examples: Material UI (MUI), Ant Design, Chakra UI, Bootstrap

You install them and get components that already look finished. Fast to start, but they look like that library.

Type B: Headless (unstyled) libraries
Examples: Radix UI, Headless UI, React Aria

These give you the behavior (opening, closing, keyboard, accessibility) but zero design. You add all the looks yourself.

Type C: Copy-paste libraries
Example: shadcn/ui

Not installed as a package. The code is copied into your project, and you own it.

Type D: Tailwind-based kits
Examples: DaisyUI, Flowbite, HeroUI

Pre-styled components built on Tailwind CSS. Easier than headless, but with their own limits.

now the next question is

What is Radix?

Radix UI is a headless library.

Radix is like the behavioural component of a component which you style latter

for example like the pop up for a dailog box or the clicking action for a button everything is handled by this radix thing

Get Anush Lobo’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Very important part now

What is shadcn/ui?

This is the part that confuses most beginners, so read carefully.

shadcn/ui is not a normal library. You don’t do npm install shadcn-ui and import components from it.

Instead, you run a command like:

npx shadcn@latest add button

and it copies the Button’s source code into your project folder (usually components/ui/button.tsx). From that moment, that file is yours. You can read it, edit it, and change anything.

shadcn is made up of these three components those are

• Radix UI → the behavior and accessibility (the engine)
• Tailwind CSS → the styling (the paint and body)
• Nice default design → so it looks clean from the start

Why shadcn is great (advantages)

1. You own the code. No fighting the library. If you want a button to look different, just edit the file.
2. Easy customization. With normal libraries, changing styles means digging through confusing override rules. Here you just change the Tailwind classes.
3. Accessible by default. Thanks to Radix, keyboard and screen reader support comes built in.
4. Looks modern and clean out of the box, and doesn’t scream “I used a library”.
5. No heavy package. You only get the components you add, so your project stays lighter.
6. No version-upgrade pain. Since the code is in your project, a library update can’t suddenly break your app.
7. Great with Tailwind and Next.js, which are very popular right now.
8. Huge community and lots of tutorials, and AI tools (like me) know it really well, so getting help is easy.
9. Learning value. Reading the component code teaches you how good components are built.