npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@stratakit/mui

v0.3.0

Published

StrataKit theme for Material UI

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

cshafercshaferimodeljsimodeljs

Keywords

frontenditwinitwinuistratastratakitreactreact-componentmuimaterial-uidesign system

Readme

@stratakit/mui

StrataKit theme for MUI.

Installation and setup

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

npm add @stratakit/mui

Additional setup/considerations:

Check out the minimal starter template on StackBlitz for a quick working example:

Open in StackBlitz

Usage

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

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

export function App() {
	return <Root colorScheme={…}>{/* Use @mui/material components here */}</Root>;
}

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.

Icon component

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

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

<Icon href={svgPlaceholder} />;

[!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 <head> of your document, replacing the placeholder paths with the correct path to where the fonts are located:

<style>
	@font-face {
		font-family: InterVariable;
		font-style: normal;
		font-weight: 100 900;
		font-display: swap;
		src: url("/path/to/InterVariable.woff2") format("woff2");
	}

	@font-face {
		font-family: InterVariable;
		font-style: italic;
		font-weight: 100 900;
		font-display: swap;
		src: url("/path/to/InterVariable-Italic.woff2") format("woff2");
	}
</style>

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 <Root> 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:

{
	"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):

/// <reference types="@stratakit/mui/types.d.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.