Mantine: Setup, Theming & Layout

Mantine is a comprehensive React component library -- pre-built, accessible, themeable components plus a large collection of utility hooks. Since v7 it uses native CSS Modules + CSS variables for styling (not a CSS-in-JS runtime), aiming for better performance and standard tooling compatibility.

Setup & Theming

import { MantineProvider, createTheme } from '@mantine/core';
import '@mantine/core/styles.css';

// Centralized design tokens -- change once, propagates everywhere
const theme = createTheme({
  primaryColor: 'blue',
  fontFamily: 'Inter, sans-serif',
  spacing: { xs: '8px', sm: '12px', md: '16px', lg: '24px' },
  colors: {
    brand: ['#f0f4ff', '#d9e2ff', '#adc0ff', '#7d9dff', '#4a72ff',
            '#2952f5', '#1c3fd6', '#132fac', '#0c2183', '#07165c'],
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      <YourApp />
    </MantineProvider>
  );
}

Dark Mode

import { useMantineColorScheme, ActionIcon } from '@mantine/core';

function ColorSchemeToggle() {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();

  return (
    <ActionIcon onClick={() => toggleColorScheme()}>
      {colorScheme === 'dark' ? 'Light' : 'Dark'}
    </ActionIcon>
  );
}
// Components reference CSS variables (var(--mantine-color-body)),
// so switching schemes updates the variable values at the root --
// the browser repaints without React re-rendering every component
// or recomputing styles in JS.

Layout & Responsive Props

import { Group, Stack, Grid, Box, Button } from '@mantine/core';

function Toolbar() {
  return (
    <Stack gap="md">
      <Group gap="sm" justify="space-between">
        <Button>Save</Button>
        <Button variant="outline">Cancel</Button>
      </Group>

      <Grid>
        <Grid.Col span={{ base: 12, md: 6 }}>Left column</Grid.Col>
        <Grid.Col span={{ base: 12, md: 6 }}>Right column</Grid.Col>
      </Grid>

      {/* Responsive style props -- inline, no manual media queries */}
      <Box p={{ base: 'sm', md: 'lg' }}>Content</Box>
    </Stack>
  );
}

// Polymorphic component prop -- Mantine styling, router Link behavior
import { Link } from 'react-router-dom';
<Button component={Link} to="/dashboard">Dashboard</Button>