Component Libraries: shadcn/ui, Radix, and MUI Compared

npx shadcn-ui@latest init
# This scaffolds components into ./components/ui

// components/ui/Button.jsx (simplified)
export function Button({ children, className, ...props }) {
  return (
    <button className={`inline-flex items-center px-4 py-2 rounded ${className}`} {...props}>
      {children}
    </button>
  );
}

// Usage
<Button className="bg-brand-500 text-white">Save</Button>

Because the component is in your repo, you can adjust internals, accessibility attributes, or structure immediately.

---

## Radix UI — accessible, unstyled primitives

### Radix — Philosophy & strengths

Radix handles focus trap, ARIA roles, and keyboard interactions; you provide markup & styles.

- Unstyled by design. Use Tailwind, CSS, CSS-in-JS, or design tokens to style the primitives.

### Radix — Accessibility

- Strong emphasis on a11y: tested primitives implement keyboard interactions and ARIA attributes.

### Customization

- Very flexible: since components are unstyled, you implement visuals to match any design system.

### When to pick Radix

- You want rock-solid accessibility and behavior but have a separate styling system or design language.

### Radix — Quick example (Dialog)

Radix handles focus trap, ARIA roles, and keyboard interactions; you provide markup & styles.

---

## Material-UI (MUI) — opinionated, production-ready

### MUI — Philosophy & strengths

MUI is a mature, full-featured library implementing Material Design. It includes a wide component set, theming, utility APIs, and accessibility coverage out of the box. It's ideal for teams who want a complete solution with minimal styling work.

### MUI — Styling approach

- Components are styled and themable via Emotion or styled-components. You can override styles with `sx`, theme overrides, or global overrides.

### MUI — Accessibility

- MUI aims for good accessibility in components and offers accessibility guidance in its docs, but you should still validate with your target screen readers and keyboard flows.

### Customization

- The theme system and `sx` prop make global and per-component customization straightforward.

### When to pick MUI

- You want a polished, full-featured UI kit with minimal initial styling work and a broad component set (DataGrid, Pickers, Drawers, etc.).

### MUI — Quick example (install & use)

MUI includes many pre-built components that cover most app needs, plus hooks and utilities for layout and responsiveness.

## Detailed Comparison: shadcn/ui vs Radix UI vs MUI

### Architecture and Philosophy

Each library embodies a fundamentally different approach to component architecture:

| Aspect | shadcn/ui | Radix UI | MUI |
|--------|-----------|----------|-----|
| **Distribution** | Copy-into-project (CLI) | npm package | npm package |
| **Styling** | Tailwind CSS (default) | Unstyled (you provide CSS) | Emotion (CSS-in-JS) |
| **Component Scope** | Common UI patterns (~30 components) | Headless primitives (~30 packages) | Comprehensive (~60+ components) |
| **Customization Model** | Direct source modification | Style layer on top | Theme provider + sx prop |
| **Versioning Risk** | None (you own the code) | Upstream package updates | Major version changes |
| **Learning Curve** | Moderate (Tailwind + Radix) | Low (rendering own markup) | Moderate (theme system) |

### Bundle Size Comparison

Bundle size significantly impacts page performance. Here is a realistic comparison for a page using Button, Dialog, and Dropdown components:

```javascript
// Bundle size comparison (minified + gzipped)
const bundleSizes = {
  "shadcn/ui": {
    total: "~8 KB",
    note: "Treeshakeable, only what you copy",
    location: "In your source, bundled with your app",
  },
  "Radix UI": {
    total: "~12 KB",
    note: "Treeshakeable via ES modules",
    location: "node_modules, imported as needed",
  },
  "MUI": {
    total: "~45 KB",
    note: "Includes theme engine, emotion runtime, styling system",
    location: "node_modules, requires ThemeProvider",
  },
};

// Runtime cost analysis for each approach
const runtimeCost = {
  "shadcn/ui": "Zero runtime overhead (Tailwind generates static CSS)",
  "Radix UI": "Minimal runtime (unstyled, just behavior + ARIA)",
  "MUI": "Significant runtime (Emotion CSS-in-JS, theme resolution on render)",
};

# Initialize shadcn/ui in your project
npx shadcn@latest init

# Configuration prompts:
# - Which style (default, new-york)
# - Which color (zinc, slate, neutral, gray, stone)
# - CSS framework (Tailwind CSS, CSS Modules, etc.)
# - Global CSS file path
# - Tailwind config path (if applicable)
# - Import alias (e.g., @/components/ui)

# Add individual components as needed
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu

# The CLI generates components in your project, ready to customize

# Install individual Radix primitives
npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-tooltip
npm install @radix-ui/react-popover
npm install @radix-ui/react-tabs
npm install @radix-ui/react-accordion
npm install @radix-ui/react-select

# Install MUI with Emotion styling
npm install @mui/material @emotion/react @emotion/styled

# Optional: MUI icons
npm install @mui/icons-material

# Optional: MUI X (Data Grid, Date Pickers, Charts)
npm install @mui/x-data-grid @mui/x-date-pickers

// Since components are in your source, you can modify anything
// Example: Customizing the Button component directly
import { cva, type VariantProps } from "class-variance-authority";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        // You can add your own variants without fighting upstream
        premium: "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

// Radix provides behavior; you provide complete markup and styling
import * as Select from "@radix-ui/react-select";
import { ChevronDownIcon, CheckIcon } from "@radix-ui/react-icons";

export function CustomSelect({ options, value, onChange }) {
  return (
    <Select.Root value={value} onValueChange={onChange}>
      <Select.Trigger className="flex items-center justify-between w-full px-3 py-2 border rounded-md bg-white">
        <Select.Value placeholder="Select option..." />
        <Select.Icon>
          <ChevronDownIcon />
        </Select.Icon>
      </Select.Trigger>
      <Select.Portal>
        <Select.Content className="bg-white border rounded-md shadow-lg z-50">
          <Select.ScrollUpButton className="flex items-center justify-center h-6" />
          <Select.Viewport className="p-1">
            {options.map((option) => (
              <Select.Item
                key={option.value}
                value={option.value}
                className="flex items-center px-3 py-2 rounded-sm cursor-pointer hover:bg-blue-50"
              >
                <Select.ItemText>{option.label}</Select.ItemText>
                <Select.ItemIndicator>
                  <CheckIcon />
                </Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Viewport>
          <Select.ScrollDownButton className="flex items-center justify-center h-6" />
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );
}

// MUI uses a centralized theme with sx prop for overrides
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Button from "@mui/material/Button";

const theme = createTheme({
  palette: {
    primary: { main: "#6366f1", light: "#818cf8", dark: "#4f46e5" },
    secondary: { main: "#ec4899" },
  },
  typography: {
    fontFamily: '"Inter", "Roboto", "Helvetica", sans-serif',
    button: {
      textTransform: "none", // Remove uppercase default
      fontWeight: 600,
    },
  },
  shape: {
    borderRadius: 12,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          padding: "8px 24px",
          boxShadow: "none",
          "&:hover": {
            boxShadow: "0 4px 12px rgba(99, 102, 241, 0.3)",
          },
        },
      },
      variants: [
        {
          props: { variant: "premium" },
          style: {
            background: "linear-gradient(135deg, #6366f1, #ec4899)",
            color: "white",
          },
        },
      ],
    },
  },
});

// Radix UI accessibility example — focus trap, keyboard nav, ARIA handled automatically
import * as Dialog from "@radix-ui/react-dialog";

function AccessibleDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="px-4 py-2 bg-blue-500 text-white rounded-md">
        Open Dialog
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-xl w-96">
          <Dialog.Title className="text-lg font-semibold">Confirm Action</Dialog.Title>
          <Dialog.Description className="mt-2 text-gray-600">
            This action cannot be undone. Are you sure you want to proceed?
          </Dialog.Description>
          <div className="mt-6 flex justify-end gap-3">
            <Dialog.Close className="px-4 py-2 bg-gray-100 rounded-md">Cancel</Dialog.Close>
            <button className="px-4 py-2 bg-red-500 text-white rounded-md">Confirm</button>
          </div>
          <Dialog.Close className="absolute top-3 right-3">
            <span aria-hidden="true">&times;</span>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}