shadcn-mui-theme

A Material UI (MUI) theme that makes your app look like shadcn/ui — same MUI component API everywhere, just restyled.

Why

shadcn/ui has a beautiful, minimal aesthetic that many teams want, but MUI has a mature component API (accessibility, theming, virtualization, date pickers, data grid, etc.) that's hard to replace. This theme gives you both: shadcn's look with MUI's battle-tested components.

Installation

npm install shadcn-mui-theme

Peer dependencies (install if not already present):

npm install @mui/material @emotion/react @emotion/styled

Usage

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { theme } from 'shadcn-mui-theme';

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* your app — no component changes needed */}
    </ThemeProvider>
  );
}

All your existing MUI components pick up the new styles automatically.

Dark mode

A darkTheme export is included, wired to shadcn's dark mode token values (--background: #09090b, --primary: #fafafa, etc.).

import { theme, darkTheme } from 'shadcn-mui-theme';

const activeTheme = prefersDark ? darkTheme : theme;

To toggle dynamically, combine with useMediaQuery or your own state:

import { useMediaQuery } from '@mui/material';
import { theme, darkTheme } from 'shadcn-mui-theme';

const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
const activeTheme = prefersDark ? darkTheme : theme;

Customizing

The theme is built with createTheme — extend it the normal MUI way:

import { createTheme } from '@mui/material/styles';
import { theme } from 'shadcn-mui-theme';

export const myTheme = createTheme(theme, {
  palette: {
    primary: {
      main: '#6366f1', // swap in any brand color
    },
  },
});

What's covered

Every shadcn CSS variable is mapped to the MUI palette and then applied across:

| Component group | Components | |---|---| | Actions | Button, IconButton | | Inputs | TextField, OutlinedInput, Select, Autocomplete, Checkbox, Radio, Switch, Slider | | Layout | Card, Paper, Dialog, Drawer, AppBar | | Navigation | Tabs, Tab, List, ListItem, ListItemButton, Breadcrumbs, Pagination | | Feedback | Alert, Snackbar, LinearProgress, CircularProgress, Skeleton, Tooltip | | Data display | Table, Chip, Badge, Accordion | | Other | CssBaseline, Stepper, Divider, FormControlLabel |

Token mapping

| shadcn token | MUI palette key | |---|---| | --background | palette.background.default | | --foreground | palette.text.primary | | --primary | palette.primary.main | | --primary-foreground | palette.primary.contrastText | | --secondary | palette.secondary.main | | --muted-foreground | palette.text.secondary | | --destructive | palette.error.main | | --border | palette.divider | | --radius | shape.borderRadius |

Button variant mapping

shadcn has named button variants; MUI uses variant + color combos:

| shadcn | MUI | |---|---| | default | variant="contained" (primary, default) | | outline | variant="outlined" | | secondary | variant="contained" color="secondary" | | ghost | variant="text" | | destructive | variant="contained" color="error" |

Demo

git clone https://github.com/YOUR_USERNAME/shadcn-mui-theme
cd shadcn-mui-theme/demo
npm install
npm run dev

Contributing

PRs welcome! Particularly interested in:

• Additional component overrides
• Figma token sync
• Zinc/Slate/Stone/Gray palette variants to match shadcn's color themes

License

MIT