\shadcn/ui and Material UI optimise for opposite priorities. Choose shadcn/ui to own your component code, ship a near-zero runtime, and control every pixel; choose Material UI (MUI) for breadth — 90+ components and a paid data grid — behind Google's Material Design. shadcn/ui has ~116,000 GitHub stars and ships copy-paste components; MUI has ~98,000 stars and ~7.3M weekly npm downloads. Both are MIT-licensed and free for commercial use.
This guide covers the parts you only learn by shipping both: how each behaves in the Next.js App Router, the runtime cost, real theming and dark-mode code, forms, data tables, and migration mechanics.
What's the real difference between shadcn/ui and Material UI?
The difference is ownership, and it decides everything downstream. MUI is an npm dependency (@mui/material) you install and import from node_modules — you never touch the source. shadcn/ui is a copy-paste registry: you run a CLI, the component lands in your repo, and it is now your code. shadcn/ui is unstyled, built on Radix UI primitives and Tailwind CSS. MUI ships Material Design and an Emotion (CSS-in-JS) runtime.
With MUI you install and import:
bash
npm install @mui/material @emotion/react @emotion/styled
cta.tsx
import Button from "@mui/material/Button";
export function Cta() {
return <Button variant="contained">Get started</Button>;
}
With shadcn/ui the CLI copies the source into your project and you import from your own path — there is no library to upgrade or override:
bash
npx shadcn@latest add button
cta.tsx
import { Button } from "@/components/ui/button";
export function Cta() {
return <Button>Get started</Button>;
}
That ownership changes how you customise. shadcn's button.tsx lives in your repo and uses class-variance-authority (cva) for variants — you add one directly:
components/ui/button.tsx
// components/ui/button.tsx — this file is yours
const buttonVariants = cva("inline-flex items-center justify-center rounded-md ...", {
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
brand: "bg-violet-600 text-white hover:bg-violet-700", // your addition
},
},
});
MUI's source is in node_modules, so you never edit it — you override through the theme, the sx prop, or styled():
theme.tsx
const theme = createTheme({
components: {
MuiButton: { styleOverrides: { root: { borderRadius: 9999 } } },
},
});
The practical consequence: with shadcn you change behaviour at the source; with MUI you layer overrides on top. The first scales for bespoke design, the second scales for consistency across a large team.
shadcn/ui vs Material UI compared
| Feature | shadcn/ui | Material UI (MUI) |
|---|---|---|
| GitHub Stars | ~116,000 | ~98,000 |
| Distribution | Copy-paste registry + CLI (you own the code) | npm package (@mui/material) |
| Weekly npm Downloads | Not a runtime dependency | ~7.3M |
| Styling Engine | Tailwind CSS (zero runtime) | Emotion CSS-in-JS (browser runtime) |
| RSC Behaviour | Server component by default; "use client" only for interactive parts | Needs client boundary + Emotion cache provider |
| Bundle Impact | Ships only the components you copy | ~90–150KB gzipped full import (tree-shakeable) + Emotion |
| Customisation | Edit the source directly (cva variants) | Theme overrides, sx, styled() |
| Design System | Unstyled / neutral — fully custom | Google Material Design (opinionated) |
| Accessibility | Radix UI primitives (ARIA, keyboard) | WAI-ARIA patterns built in |
| Components Included | 50+ core components | 90+ core, plus MUI X (DataGrid, pickers) |
| Data Table | TanStack Table (headless, free) | MUI X DataGrid (Pro features paid) |
| Theming | CSS variables (OKLCH) + Tailwind | Theme object + Emotion |
| Current Version | Rolling registry (Tailwind v4, React 19) | MUI v9 |
| Licence | MIT (free, no attribution) | MIT core (free); MUI X Pro/Premium paid |
How do shadcn/ui and Material UI behave in the Next.js App Router?
This is the deciding factor for a Next.js build. shadcn/ui components are React Server Components by default — they are plain JSX styled with Tailwind, so static ones render on the server with zero client JS, and only interactive primitives (anything using Radix state or hooks) carry a "use client" directive. MUI runs on Emotion, a client-side styling runtime, so its components cannot be Server Components and require a cache provider to avoid hydration mismatches and flash-of-unstyled-content during streaming.
MUI's App Router setup is mandatory boilerplate. You install the integration package and wrap the app in AppRouterCacheProvider, which collects Emotion's server-generated CSS as Next.js streams HTML chunks:
bash
npm install @mui/material-nextjs @emotion/cache
app/layout.tsx
// app/layout.tsx
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import theme from "./theme"; // file starts with "use client"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<AppRouterCacheProvider>
<ThemeProvider theme={theme} defaultMode="system">
<CssBaseline />
{children}
</ThemeProvider>
</AppRouterCacheProvider>
</body>
</html>
);
}
Skip the cache provider and you get styles injected into <body> instead of <head>, plus hydration warnings. shadcn/ui needs none of this — a static marketing page renders server-side with no provider at all. For a content or marketing site, that difference is the gap between shipping zero client JS for your layout and shipping an Emotion runtime on every route.
Which is better for performance and bundle size?
shadcn/ui wins on bundle and runtime cost because it adds no styling runtime — Tailwind compiles to static CSS at build time, and you ship only the component code you copied. MUI's full @mui/material import is roughly 90–150KB gzipped (tree-shakeable) and Emotion serialises styles in the browser on render, which adds main-thread work that shows up in Interaction to Next Paint on lower-end devices.
Two concrete rules from production:
- Import MUI components from their own paths (
@mui/material/Button) rather than the barrel (@mui/material) so bundlers tree-shake reliably. - For shadcn, the only thing affecting your CSS size is which Tailwind utilities you actually use, since unused classes are purged. There is no per-component runtime to budget for.
If Lighthouse and Core Web Vitals are part of your acceptance criteria — which they are for any marketing site — shadcn/ui is the faster path. For an authenticated internal dashboard where the user already waited through a login, MUI's runtime cost is rarely the bottleneck, and its prebuilt complex components win back far more developer time than they cost in kilobytes.
How do you theme and add dark mode in each?
shadcn/ui theming is CSS variables. In the Tailwind v4 era, tokens are defined under :root and .dark using the OKLCH colour space, then exposed to Tailwind utilities with @theme inline. A brand colour change is a token edit — every component referencing it updates instantly. Build a full palette in seconds with a free shadcn theme generator, then paste the tokens into globals.css:
globals.css
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
:root {
--background: oklch(1 0 0);
--primary: oklch(0.55 0.22 264);
--primary-foreground: oklch(0.98 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--primary: oklch(0.62 0.19 264);
--primary-foreground: oklch(0.205 0 0);
}
@theme inline {
--color-background: var(--background);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
}
Dark mode toggles by adding .dark to the root element, which most teams drive with next-themes:
app/providers.tsx
// app/providers.tsx
"use client";
import { ThemeProvider } from "next-themes";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
);
}
MUI theming runs through a JavaScript theme object. v9 supports CSS-variable mode and built-in colour schemes, so dark mode is configured in code rather than CSS:
theme.ts
// theme.ts
"use client";
import { createTheme } from "@mui/material/styles";
export default createTheme({
cssVariables: true,
colorSchemes: { light: true, dark: true },
palette: { primary: { main: "#6d28d9" } },
});
Both approaches work well. The difference is where your design lives: shadcn keeps it in CSS your designers can read, MUI keeps it in a typed theme object your app imports. For a custom brand you will deviate from defaults often, and editing tokens beats overriding a design system that wants to pull you back toward Material Design.
How do you handle forms and data tables?
shadcn/ui ships a form abstraction built on react-hook-form and Zod; MUI gives you styled inputs that you wire to react-hook-form yourself with Controller. Both end at the same place — schema-validated, accessible forms — but shadcn's wrapper removes more boilerplate.
shadcn form with Zod validation:
signup-form.tsx
"use client";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
const schema = z.object({ email: z.string().email() });
export function SignupForm() {
const form = useForm({ resolver: zodResolver(schema), defaultValues: { email: "" } });
return (
<Form {...form}>
<form onSubmit={form.handleSubmit((v) => console.log(v))}>
<FormField control={form.control} name="email" render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl><Input {...field} /></FormControl>
<FormMessage />
</FormItem>
)} />
<Button type="submit">Sign up</Button>
</form>
</Form>
);
}
The same form in MUI uses Controller to bridge react-hook-form to TextField:
signup-form.tsx
"use client";
import { useForm, Controller } from "react-hook-form";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
export function SignupForm() {
const { control, handleSubmit } = useForm({ defaultValues: { email: "" } });
return (
<form onSubmit={handleSubmit((v) => console.log(v))}>
<Controller name="email" control={control} render={({ field, fieldState }) => (
<TextField {...field} label="Email" error={!!fieldState.error} helperText={fieldState.error?.message} />
)} />
<Button type="submit" variant="contained">Sign up</Button>
</form>
);
}
Data tables are where MUI pulls clearly ahead — and where it charges you. MUI X DataGrid is batteries-included: sorting, filtering, pagination, and virtualization out of the box, but row grouping, tree data, and Excel export sit behind paid Pro and Premium licences. shadcn/ui has no grid; you pair its table components with TanStack Table, a free headless library, and assemble sorting, filtering, and virtualization yourself. The tradeoff is direct: DataGrid saves days on a complex internal tool; shadcn + TanStack costs more setup but stays free and fully styled to your brand.
How do you migrate from Material UI to shadcn/ui?
Migrate incrementally — never in one rewrite. Both libraries render plain React and share no conflicting global styles, so they coexist in the same app while you replace components screen by screen. Start with leaf components (buttons, inputs, cards), move to composite views, and leave MUI X DataGrid for last, since it has no drop-in shadcn equivalent.
The work is translating styling, not markup. An MUI button becomes a shadcn button whose variants you control in your own source:
MUI (before)shadcn/ui (after)
import Button from "@mui/material/Button";
<Button variant="contained" color="primary">Save</Button>
You move colours from the MUI theme object into CSS variables, and component-level sx overrides become Tailwind classes. The measurable payoff lands when the last MUI component leaves a route: you drop @mui/material, Emotion, and the cache provider, removing the styling runtime from that bundle entirely. For greenfield projects, skip migration and start from a finished shadcn/ui template instead.
When should you use shadcn/ui vs Material UI?
Use shadcn/ui for design control, small bundles, and code ownership; use MUI for breadth and speed on standardised UI. The decision follows your project type:
- Shipping a landing page or marketing site — shadcn/ui. Pre-built shadcn/ui landing page templates reach production in minutes instead of days.
- Building a data-heavy internal dashboard — MUI for the DataGrid, or shadcn + TanStack Table if you want it free and fully branded.
- Brand identity is the priority — shadcn/ui.
- Development speed on standardised UI is the priority — MUI.
If you are weighing more than these two, see our roundup of the best React UI libraries in 2026 and our shadcn vs Mantine comparison.
The bottom line
shadcn/ui and Material UI are both excellent, both MIT-licensed, and both free at their core. Pick MUI for data-dense internal apps that need breadth and a powerful grid fast. Pick shadcn/ui for marketing sites, landing pages, and any product where brand, performance, and RSC compatibility matter — and skip the build entirely with a production-ready shadcn/ui landing page template.
