Mantine API overview | Mantine

This guide will help you get familiar with core Mantine concepts. Please read this guide, theming and styles sections before starting development to learn about all of the available theming and styling features. MantineProvider is required to be rendered at the root of your application. It is responsible for: Theme object stores design tokens, components default props, context styles and other data that can be accessed by any Mantine component. Most of the theme values are exposed as CSS variables and can be accessed both in JavaScript and CSS. Access theme values in styles: Access theme values in JavaScript: Colors are stored in theme.colors object and are exposed as CSS variables. Each color must have at least 10 shades. You can generate new colors based on a single color value with the colors generator. Colors are numbered from 0 to 9 where 0 is the lightest and 9 is the darkest color. Example of blue color from the default theme: blue 0 #E7F5FF blue 1 #D0EBFF blue 2 #A5D8FF blue 3

This guide will help you get familiar with core Mantine concepts. Please read this guide, theming and styles sections before starting development to learn about all of the available theming and styling features. MantineProvider is required to be rendered at the root of your application. It is responsible for: Theme object stores design tokens, components default props, context styles and other data that can be accessed by any Mantine component. Most of the theme values are exposed as CSS variables and can be accessed both in JavaScript and CSS. Access theme values in styles: Access theme value