@stratakit/mui

StrataKit theme for MUI.

Installation and setup

Using your package manager of choice, install the latest version of @stratakit/mui.

``console
npm add @stratakit/mui
`

Additional setup/considerations:

- @stratakit/mui has a direct dependency on @stratakit/foundations and @stratakit/icons, the latter of which requires bundler configuration to ensure that .svg files are not inlined.
- You should ensure that StrataKit fonts are loaded in your application.
- /types.d.ts must be included in your project to ensure that the module augmentation for MUI components is picked up by TypeScript.
- If you are trying to use this package alongside iTwinUI, you will also need to set up the theme bridge.

Usage

To use the StrataKit MUI theme, you’ll need to wrap your application's entrypoint with the component and set its colorScheme (to "light" or "dark"). This component will automatically configure MUI's ThemeProvider with the StrataKit theme.

`jsx
import { Root } from "@stratakit/mui";

export function App() {
return {/ Use @mui/material components here /};
}
`

Now you can use any components directly from @mui/material, and they will be automatically themed to use StrataKit's visual language.

> [!CAUTION]
> Do not use MUI's ThemeProvider, StyledEngineProvider, or CssBaseline components directly. The Root component will handle all global configuration for you.

$3

@stratakit/mui also exports an Icon component that makes it easy to use .svg icons from @stratakit/icons.

`jsx
import { Icon } from "@stratakit/mui";
import svgPlaceholder from "@stratakit/icons/placeholder.svg";

;
`

> [!NOTE]
> @stratakit/icons requires bundler configuration to ensure that .svg files are not inlined.

Fonts

StrataKit uses InterVariable as its interface font. In the future, other fonts may also be added for different purposes. We recommend self-hosting all fonts for robustness, security and performance reasons.

To self-host InterVariable, download the InterVariable.woff2 and InterVariable-Italic.woff2 font files from the official website, and serve them alongside your other assets. Then include the following CSS in the of your document, replacing the placeholder paths with the correct path to where the fonts are located:

`html

`

Build tools such as Vite can handle url() references and automatically copy these files into your output directory with hashed file names. These files can then be safely served with HTTP caching without blocking upgrades to newer versions of the fonts.

> [!NOTE]
> If the component cannot find InterVariable as a font in the document, it will automatically add a fallback which uses Inter’s CDN. In all cases, we recommend self-hosting to avoid any potential security and reliability issues that may arise from the use of a third-party CDN.

TypeScript

@stratakit/mui uses module augmentation to modify the props of certain MUI components (for example, to change default prop values). To ensure that these changes are picked up by TypeScript, you must include the @stratakit/mui/types.d.ts file in your project.

The preferred way to include types.d.ts is to add it to the types array in your project's tsconfig.json:

`json
{
"compilerOptions": {
"types": ["@stratakit/mui/types.d.ts"]
}
}
`

Alternatively, if your project relies on the implicit inclusion of visible @types packages, then you can instead add a reference to types.d.ts using a triple-slash directive in a global declaration file in your project (e.g. in src/env.d.ts):

`ts
///
`

Contributing

Are you interested in helping StrataKit grow? You can submit feature requests or bugs by creating issues.

If you're interested in contributing code, please read CONTRIBUTING.md` for more information.