Shadcn/ui beats MUI on bundle size

Shadcn/ui and Material UI (MUI) have been compared in a side-by-side developer guide, measuring their runtime, bundle size, and ownership trade-offs for Next.js App Router projects [Dev.to]. Shadcn/ui has 116 k GitHub stars, ships a copy-paste registry built on Radix UI primitives and Tailwind v4, and targets React 19. MUI has 98 k stars, is at version v9, and ships 90–150 KB gzipped when the full @mui/material package is imported [Dev.to]. MUI's weekly npm downloads exceed 7.3 M, according to npmjs.

Shadcn/ui provides 50+ core components, all unstyled, whereas MUI offers 90+ core components plus the optional MUI X DataGrid suite. Shadcn/ui components are Server Components by default, emitting only static JSX and Tailwind classes, while MUI components require a client-side Emotion runtime and an AppRouterCacheProvider wrapper to avoid hydration warnings [Dev.to].

The guide details theming approaches, with shadcn/ui using CSS variables that compile to static CSS at build time, and MUI relying on a JavaScript theme object with optional CSS-variable mode, incurring a runtime cost on every render. For forms, shadcn/ui bundles a wrapper around react-hook-form and Zod, eliminating the need for a Controller component that MUI developers must add [npmjs].

Shadcn/ui's zero-runtime model delivers a measurable performance edge, with a marketing page built with shadcn/ui shipping zero JavaScript for styling, resulting in lower Interaction-to-Next-Paint times on low-end devices. In contrast, MUI's Emotion runtime serializes styles in the browser, adding measurable main-thread work and a larger bundle that can push First Contentful Paint beyond the 1-second target for static sites [Dev.to].