StrataKit theme for Material UI
npm install @stratakit/muiStrataKit theme for MUI.
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./types.d.ts
- You should ensure that StrataKit fonts are loaded in your application.
- 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.
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
}
`
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.
@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.
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.
CONTRIBUTING.md` for more information.