---
title: "10 — Component Libraries — MUI, Chakra, and the Shadcn Revolution"
uid: component-libraries
tags: ["chakra-ui", "react", "component-libraries", "roadmap:react", "shadcn", "mui"]
excerpt: "A styled library ships finished components you consume; Shadcn gives you the source to copy and edit. Owning the source — no theme-fighting, no override APIs — is why Shadcn ate the market."
date: 2026-08-13T03:27:44+0000
source: https://www.aveshina.my.id/en/blog/component-libraries
---

"Pick whichever has the nicest buttons" was my component-library strategy, and it hid the ownership question that actually decides everything. The split that organized it: **a styled library (MUI, Chakra) ships finished components you consume through an import, while Shadcn gives you the source code to copy into your project and edit.** [1][2][3] That's not a small distinction. Owning the source is the reason Shadcn displaced the older libraries for new work — there's no theme-fighting, no overriding internals through a props API, no waiting for the library to ship a fix.

## What a component library gives you

A component library is a collection of pre-built, reusable components — buttons, dialogs, dropdowns, data tables — that I drop in instead of building from scratch [1]. The value is the same in every case:

- **Speed.** A working, accessible dialog in one import, not three days of building one.
- **Consistency.** Every instance of a component looks and behaves the same, because they share source.
- **Accessibility.** The good libraries handle keyboard nav, focus traps, and ARIA correctly — work that's easy to get wrong by hand.

Where the libraries differ is the contract around the source code, and that contract is the whole decision.

## MUI: Material Design, batteries included

Material UI (MUI) is the established heavyweight — an open-source library implementing Google's Material Design [4]. It's batteries-included: a complete theming system, a huge component catalog, and a polished default look out of the box. The tradeoff is that "Material Design" is also its ceiling. If I want the app to look like anything other than Material, I'm fighting the theme — and Material theming is deep. For internal tools or anything where Material's look is acceptable, MUI is fast and complete. For a custom-designed product, it becomes friction.

## Chakra UI: simple, modular, accessible

Chakra UI is a simpler, more modular alternative [5]. Its pitch is accessibility-first building blocks with a clean prop-based styling API (<Button colorScheme="blue" size="md">). It's less opinionated about visual design than MUI, so it adapts more easily, and the API is genuinely pleasant. The cost is the same as any styled library: I'm consuming a sealed component, and customizing beyond what the props expose means fighting the library or wrapping it.

## Shadcn: the source-is-yours model

Shadcn UI is the one that changed how I think about this category [3][6]. It's not a library in the npm-installed sense — it's a **collection of component source files** that I copy into my project via a CLI. The components live in my codebase, under my control, styled with Tailwind and built on the Radix primitives (covered in the headless libraries notes).

```
npx shadcn@latest add button dialog dropdown-menu
```

That command writes button.tsx, dialog.tsx, etc. into my components/ui directory. The implications are what matter:

- **I own the code.** Want to change how the dialog handles focus? Edit the file. No override props, no wrapper gymnastics.
- **I only ship what I use.** There's no library bundle — only the components I added, tree-shaken like any of my own code.
- **It's a starting point, not a dependency.** The components are mine to drift from; I'm not locked to the library's release cadence.

The tradeoff is that updates aren't automatic — if Shadcn ships a fix to the dialog, I have to pull it manually. For most projects that's a feature, not a bug: my components are stable, and I change them deliberately.

```figure
<svg viewBox="0 0 740 280" xmlns="http://www.w3.org/2000/svg" class="my-6 w-full max-w-2xl" role="img" aria-label="Two models of component library. Left: a sealed box labelled MUI/Chakra — you import the finished component and customize through props. Right: Shadcn — you copy the component source into your project (components/ui/button.tsx) and edit it directly.">
  <g font-family="ui-sans-serif, system-ui, sans-serif" text-rendering="geometricPrecision">
    <!-- header -->
    <text x="185" y="26" font-size="12" font-weight="700" fill="#7f1d1d" text-anchor="middle">Styled library — MUI / Chakra</text>
    <text x="555" y="26" font-size="12" font-weight="700" fill="#1e1b4b" text-anchor="middle">Source-is-yours — Shadcn</text>

    <!-- LEFT sealed box -->
    <rect x="60" y="50" width="250" height="160" rx="10" fill="#fee2e2" stroke="#dc2626" stroke-width="1.5"/>
    <text x="185" y="76" font-size="11" font-weight="700" fill="#7f1d1d" text-anchor="middle">npm install</text>
    <rect x="100" y="92" width="170" height="40" rx="6" fill="#ffffff" stroke="#fca5a5"/>
    <text x="185" y="116" font-size="11" font-family="ui-monospace,monospace" fill="#7f1d1d" text-anchor="middle">import { Button }</text>
    <text x="185" y="152" font-size="10" fill="#7f1d1d" text-anchor="middle">consume as-is</text>
    <text x="185" y="170" font-size="10" fill="#7f1d1d" text-anchor="middle">customize via props</text>
    <text x="185" y="192" font-size="9.5" fill="#64748b" text-anchor="middle" font-style="italic">sealed — fight the theme to go off-script</text>

    <!-- RIGHT workbench -->
    <rect x="430" y="50" width="250" height="160" rx="10" fill="#e0e7ff" stroke="#6366f1" stroke-width="1.5"/>
    <text x="555" y="76" font-size="11" font-weight="700" fill="#1e1b4b" text-anchor="middle">npx shadcn add button</text>
    <rect x="450" y="92" width="210" height="40" rx="6" fill="#0f172a" stroke="#334155"/>
    <text x="555" y="116" font-size="10" font-family="ui-monospace,monospace" fill="#e2e8f0" text-anchor="middle">components/ui/button.tsx</text>
    <text x="555" y="152" font-size="10" fill="#1e1b4b" text-anchor="middle">source lives in your repo</text>
    <text x="555" y="170" font-size="10" fill="#1e1b4b" text-anchor="middle">edit the file directly</text>
    <text x="555" y="192" font-size="9.5" fill="#64748b" text-anchor="middle" font-style="italic">own it — no props ceiling, tree-shaken</text>

    <text x="370" y="248" font-size="11" fill="#475569" text-anchor="middle" font-style="italic">consume sealed components vs. own the source — the decision that defines the category</text>
  </g>
</svg>
```

## How I use this

For any new project where I'm not building a fully bespoke design system, Shadcn is my default — the ownership model removes the friction I always hit with MUI and Chakra, and pairing it with Tailwind means styling changes are trivial. I reach for MUI specifically when Material Design is an acceptable (or required) aesthetic and I want maximum component coverage fast — internal dashboards, admin tools. Chakra I'd consider for a project already committed to its prop-based styling API, but for greenfield work Shadcn covers the same ground with fewer constraints. The decision really is about the source-code contract: if I'd want to edit the internals, I want Shadcn; if I'd be happy never seeing the internals, MUI or Chakra save me the file management.

## References

[1] MUI team, "MUI — the React component library," mui.com, 2024. [Online]. Available: [https://mui.com/](https://mui.com/)

[2] NextUI, "NextUI.org," nextui.org, 2024. [Online]. Available: [https://nextui.org/](https://nextui.org/)

[3] shadcn, "Shadcn UI," ui.shadcn.com, 2024. [Online]. Available: [https://ui.shadcn.com/](https://ui.shadcn.com/)

[4] MUI team, "Material UI — getting started," mui.com, 2024. [Online]. Available: [https://mui.com/material-ui/getting-started/](https://mui.com/material-ui/getting-started/)

[5] Chakra UI, "Chakra UI — build accessible React apps," chakra-ui.com, 2024. [Online]. Available: [https://chakra-ui.com/](https://chakra-ui.com/)

[6] LogRocket, "Shadcn UI — an adoption guide," blog.logrocket.com, 2024. [Online]. Available: [https://blog.logrocket.com/shadcn-ui-adoption-guide/](https://blog.logrocket.com/shadcn-ui-adoption-guide/)

```quiz
Q: The fundamental difference between Shadcn and MUI/Chakra is:
- Shadcn components run faster at runtime
- Shadcn copies component source into your repo; MUI/Chakra ship sealed components you consume via import
- Shadcn only works with class components
correct: 1
explain: Shadcn is a source-distribution model — you own the files and edit them. MUI and Chakra are npm packages you consume sealed, customizing only through the props they expose.

Q: MUI's defining constraint is:
- it implements Material Design, so its look is Material — going off-script means fighting the theme
- it cannot be themed at all
- it only works in Next.js
correct: 0
explain: MUI is a complete, batteries-included Material Design implementation. That's its strength and its ceiling: non-Material designs require deep theme overrides.

Q: Why is Shadcn's "no library bundle" a real benefit?
- only the components you added ship in your code, tree-shaken like your own files — no unused library weight
- it makes the app load instantly regardless of size
- it removes the need for any build tooling
correct: 0
explain: Because the components live in your repo as your own source, only what you actually use ships. There's no sealed library bundle pulling in components you never reference.

Q: A library that emphasizes accessibility-first building blocks with a clean prop-based styling API, less opinionated about visual design than MUI, is:
- Chakra UI
- GSAP
- Zustand
correct: 0
explain: Chakra UI's pitch is accessible, modular building blocks with a prop-based styling API (colorScheme, size), making it more visually adaptable than MUI.

Q: The tradeoff of owning component source (Shadcn) is:
- updates aren't automatic — pulling a library fix is a manual merge, not a version bump
- you can never customize the components
- the components cannot be accessible
correct: 0
explain: Because the files are yours, library updates don't flow in automatically. For most teams this is acceptable — components stay stable and change deliberately.
```