CSS Variables

UI Foundations Kit adopted the latest CSS variables improvements from MUI to provide a more flexible and customizable theming experience. This sets up your app to support Pigment CSS and build on top of the built-in browser based CSS features of CSS variables. This means that your app will automatically begin to take advantage of great features like:

preventing dark/light mode flicker
unlimited color schemes
better debugging experience in browser dev tools
and more

You can access theme tokens in your components via the theme directly:

<Button sx={{
  backgroundColor: theme.vars.palette.primary.main, // var(--mui-palette-primary-main)
  color: theme.vars.palette.primary.contrastText, // var(--mui-palette-primary-contrastText)
}}>
  Click me
</Button>

Or using regular CSS:

styles.css

.feature-section {
  background-color: var(--mui-palette-grey-50);
}

Forms Overview

Get Started

Theme Tokens

Tools & Modules

Kit Components by Category