How to Use 🌟

Getting Started

• Set up a new project with Mantine by following the official Mantine documentation .
• In this website, click on the "Change Theme" button to select from the available themes.
• After selecting a theme, you can visit the playground to preview how each component looks with your chosen theme.

Set up the theme files

• Click the "Copy Code" button in this website - this will open a modal with 3 tabs
• In your project, create a new file called theme.ts and paste the code from the first tab labeled "theme.ts"
• Create another file called cssVariableResolver.ts and paste the code from the second tab labeled "cssVariableResolver.ts"
• Finally, create a styles.css file and paste the CSS code from the third tab labeled "style.css"
• Import the theme and resolver into MantineProvider, and add styles.css to App.tsx (explained in next section)

Set up MantineProvider

Replace or extend the theme object in your MantineProvider as follows

import '@mantine/core/styles.css';
import { MantineProvider } from '@mantine/core';
import { shadcnCssVariableResolver } from "./cssVariableResolver.ts";
import { shadcnTheme } from "./theme.ts";
import "./style.css";

export default function App() {
  return <MantineProvider
   theme={shadcnTheme}
   cssVariablesResolver={shadcnCssVariableResolver}
   >
      {/* Your app here */}
  </MantineProvider>;
};

import '@mantine/core/styles.css';
import { MantineProvider } from '@mantine/core';
import { mantineTheme } from "./theme.ts";

export default function App() {
  return <MantineProvider
   theme={mantineTheme}
   >
      {/* Your app here */}
  </MantineProvider>;
};