Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.uifoundations.com/llms.txt

Use this file to discover all available pages before exploring further.

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);
}