MUI | Flint Design System by Inner Spark Media

Create the theme

@mui/material is an optional peer dependency. It is only needed if you import this entry.

React

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { createFlintTheme } from '@innerspark/flint/mui';

const theme = createFlintTheme({ mode: 'light', density: 'comfortable' });

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

Pass mode: 'dark' for dark and density: 'compact' for compact. flintThemeOptions(mode, density) returns the raw options if you build the theme yourself.

MUI next to Tailwind

MUI's baseline reset is not in a cascade layer, so on a page that also uses Tailwind it overrides every Tailwind utility. Put MUI in its own layer, below Tailwind's utilities.

React

import { StyledEngineProvider } from '@mui/material/styles';
import GlobalStyles from '@mui/material/GlobalStyles';

<StyledEngineProvider enableCssLayer>
  <GlobalStyles styles="@layer theme, base, mui, components, utilities;" />
  {/* ThemeProvider and the app */}
</StyledEngineProvider>

Known gaps

The MUI theme does not follow every component token yet

Outlined inputs use MUI's default edge (about 1.6:1, under the 3:1 minimum), the checkbox shows no focus ring, and outlined buttons and button heights differ from the Flint spec. Tracked as ASDS-44. The workbench shows MUI next to shadcn and plain CSS so you can see the difference.