tessl/npm-mantine--core

React components library focused on usability, accessibility and developer experience

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Theme System

Name: tessl/npm-mantine--core
Author: tessl

Comprehensive theming and styling system providing complete control over component appearance, color schemes, design tokens, and global styles.

Capabilities

MantineProvider

The root provider component that manages theme configuration, color schemes, CSS variables, and styling context for the entire application.

/**
 * Root provider component for Mantine theme and configuration
 * Must wrap your entire application to provide theme context
 */
function MantineProvider(props: MantineProviderProps): JSX.Element;

interface MantineProviderProps {
  /** Theme override object */
  theme?: MantineThemeOverride;
  /** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */
  colorSchemeManager?: MantineColorSchemeManager;
  /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `light` by default */
  defaultColorScheme?: MantineColorScheme;
  /** Forces color scheme value, if set, MantineProvider ignores `colorSchemeManager` and `defaultColorScheme` */
  forceColorScheme?: 'light' | 'dark';
  /** CSS selector to which CSS variables should be added, `:root` by default */
  cssVariablesSelector?: string;
  /** Determines whether theme CSS variables should be added to given `cssVariablesSelector` */
  withCssVariables?: boolean;
  /** Determines whether CSS variables should be deduplicated */
  deduplicateCssVariables?: boolean;
  /** Function to resolve root element to set `data-mantine-color-scheme` attribute */
  getRootElement?: () => HTMLElement | undefined;
  /** A prefix for components static classes (for example {selector}-Text-root), `mantine` by default */
  classNamesPrefix?: string;
  /** Function to generate nonce attribute added to all generated `<style />` tags */
  getStyleNonce?: () => string;
  /** Function to generate CSS variables based on theme object */
  cssVariablesResolver?: CSSVariablesResolver;
  /** Determines whether components should have static classes */
  withStaticClasses?: boolean;
  /** Determines whether global styles should be applied */
  withGlobalClasses?: boolean;
  /** Determines whether CSS reset should be applied */
  withCSSVariables?: boolean;
  /** Function to transform styles object */
  stylesTransform?: MantineStylesTransform;
  children: React.ReactNode;
}

Basic Usage:

import { MantineProvider } from "@mantine/core";
import "@mantine/core/styles.css";

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

With Custom Theme:

import { MantineProvider, createTheme } from "@mantine/core";

const theme = createTheme({
  primaryColor: 'blue',
  fontFamily: 'Inter, sans-serif',
  headings: { fontFamily: 'Inter, sans-serif' }
});

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

HeadlessMantineProvider

Lightweight provider that provides theme context without applying CSS variables or global styles.

/**
 * Headless provider that provides theme context without CSS variables
 * Useful for testing or when you want to manage styles manually
 */
function HeadlessMantineProvider(props: HeadlessMantineProviderProps): JSX.Element;

interface HeadlessMantineProviderProps {
  theme?: MantineThemeOverride;
  children: React.ReactNode;
}

Theme Creation

Function to create theme configuration objects with type safety and defaults.

/**
 * Creates a theme configuration object with proper typing
 * @param theme - Theme override configuration
 * @returns Validated theme configuration
 */
function createTheme(theme: MantineThemeOverride): MantineThemeOverride;

interface MantineTheme {
  /** Controls focus ring styles: 'auto' | 'always' | 'never' */
  focusRing: 'auto' | 'always' | 'never';
  /** Rem units scale, change if you customize font-size of <html /> element */
  scale: number;
  /** Determines whether font-smoothing property should be set on the body */
  fontSmoothing: boolean;
  /** White color */
  white: string;
  /** Black color */
  black: string;
  /** Object of colors, key is color name, value is an array of at least 10 strings */
  colors: MantineThemeColors;
  /** Index of theme.colors[color] used as primary shade */
  primaryShade: MantineColorShade | MantinePrimaryShade;
  /** Key of theme.colors, determines which color will be used in all components by default */
  primaryColor: string;
  /** Function to resolve colors based on variant */
  variantColorResolver: VariantColorsResolver;
  /** Determines whether text color must be changed based on the given color prop */
  autoContrast: boolean;
  /** Luminance threshold used to determine if text color should be light or dark */
  luminanceThreshold: number;
  /** Font-family used in all components */
  fontFamily: string;
  /** Monospace font-family, used in code and similar components */
  fontFamilyMonospace: string;
  /** Controls various styles of h1-h6 elements */
  headings: MantineHeadingsConfiguration;
  /** Object of values used to set border-radius in all components */
  radius: MantineRadiusValues;
  /** Default border-radius used by most components */
  defaultRadius: MantineRadius;
  /** Object of values used to control spacing between elements */
  spacing: MantineSpacingValues;
  /** Object of values used to control font-size property */
  fontSizes: MantineFontSizesValues;
  /** Object of values used to control line-height property */
  lineHeights: MantineLineHeightValues;
  /** Object of values used to control breakpoints */
  breakpoints: MantineBreakpointsValues;
  /** Object of values used to control box-shadow property */
  shadows: MantineShadowsValues;
  /** Default gradient configuration */
  defaultGradient: MantineGradient;
  /** Other CSS properties used by components */
  other: MantineThemeOther;
  /** Components theme overrides */
  components: MantineThemeComponents;
}

type MantineThemeOverride = PartialDeep<MantineTheme>;

Advanced Theme Example:

const theme = createTheme({
  colors: {
    brand: [
      '#f0f9ff',
      '#e0f2fe',
      '#bae6fd',
      '#7dd3fc',
      '#38bdf8',
      '#0ea5e9',
      '#0284c7',
      '#0369a1',
      '#075985',
      '#0c4a6e'
    ],
    dark: [
      '#d5d7e0',
      '#acaebf',
      '#8c8fa3',
      '#666980',
      '#4d4f66',
      '#34354a',
      '#2b2c3d',
      '#1d1e30',
      '#0c0d21',
      '#01010a'
    ]
  },
  primaryColor: 'brand',
  primaryShade: { light: 6, dark: 8 },
  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
  fontFamilyMonospace: 'JetBrains Mono, Consolas, Monaco, monospace',
  headings: {
    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
    sizes: {
      h1: { fontSize: '2.125rem', lineHeight: '1.3', fontWeight: '700' },
      h2: { fontSize: '1.625rem', lineHeight: '1.35', fontWeight: '700' },
      h3: { fontSize: '1.375rem', lineHeight: '1.4', fontWeight: '600' },
      h4: { fontSize: '1.125rem', lineHeight: '1.45', fontWeight: '600' },
      h5: { fontSize: '1rem', lineHeight: '1.5', fontWeight: '600' },
      h6: { fontSize: '0.875rem', lineHeight: '1.5', fontWeight: '600' }
    }
  },
  defaultRadius: 'md',
  autoContrast: true
});

Color Scheme Management

Hooks and utilities for managing light/dark color schemes with persistence and transitions.

/**
 * Hook to manage color scheme state with transitions
 * @param options - Configuration options
 * @returns Color scheme management functions
 */
function useMantineColorScheme(options?: {
  keepTransitions?: boolean;
}): {
  colorScheme: MantineColorScheme;
  setColorScheme: (value: MantineColorScheme) => void;
  clearColorScheme: () => void;
  toggleColorScheme: (value?: MantineColorScheme) => void;
};

type MantineColorScheme = 'light' | 'dark' | 'auto';

/**
 * Color scheme manager interface for external storage
 */
interface MantineColorSchemeManager {
  /** Get color scheme value from external storage */
  get: (defaultValue: MantineColorScheme) => MantineColorScheme;
  /** Set color scheme value to external storage */
  set: (value: MantineColorScheme) => void;
  /** Clear color scheme value from external storage */
  clear: () => void;
}

/** Built-in localStorage color scheme manager */
const localStorageColorSchemeManager: MantineColorSchemeManager;

/** Built-in sessionStorage color scheme manager */  
const sessionStorageColorSchemeManager: MantineColorSchemeManager;

Usage Examples:

import { useMantineColorScheme } from "@mantine/core";

function ThemeToggle() {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  
  return (
    <Button onClick={() => toggleColorScheme()}>
      {colorScheme === 'dark' ? 'Light' : 'Dark'} theme
    </Button>
  );
}

// Custom color scheme manager
const customColorSchemeManager: MantineColorSchemeManager = {
  get: (defaultValue) => {
    // Get from your custom storage
    return window.myStorage.getItem('color-scheme') || defaultValue;
  },
  set: (value) => {
    // Save to your custom storage
    window.myStorage.setItem('color-scheme', value);
  },
  clear: () => {
    window.myStorage.removeItem('color-scheme');
  }
};

ColorSchemeScript

Script component for preventing flash of wrong theme on page load.

/**
 * Script that should be added to prevent color scheme flash on page load
 * Must be added before your app renders
 */
function ColorSchemeScript(props?: {
  defaultColorScheme?: MantineColorScheme;
  localStorageKey?: string;
  nonce?: string;
}): JSX.Element;

Usage in Next.js:

import { ColorSchemeScript } from "@mantine/core";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript defaultColorScheme="auto" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Theme Context and Hooks

Hooks for accessing theme configuration and context within components.

/**
 * Hook to access the current theme object
 * @returns Current MantineTheme object
 */
function useMantineTheme(): MantineTheme;

/**
 * Safe version that returns default theme if provider is not found
 * @returns MantineTheme object or default theme
 */
function useSafeMantineTheme(): MantineTheme;

/**
 * Hook to access Mantine context
 * @returns MantineContext value
 */
function useMantineContext(): MantineContextType;

/**
 * Hook to get class names prefix
 * @returns Current class names prefix
 */
function useMantineClassNamesPrefix(): string;

Styles API

System for applying custom styles and class names to component parts.

/**
 * Hook to resolve and apply styles API
 * @param options - Styles configuration
 * @returns Resolved styles and class names
 */
function useStyles<StylesNames extends string = string, Vars extends Record<string, any> = Record<string, any>>(
  options: UseStylesOptions<StylesNames, Vars>
): UseStylesReturn<StylesNames>;

interface UseStylesOptions<StylesNames, Vars> {
  name: string | string[];
  classes: Record<StylesNames, string>;
  props: StylesApiProps<StylesNames, Vars>;
  stylesCtx?: Record<string, any>;
  rootSelector?: StylesNames;
  unstyled?: boolean;
  transformedStyles?: Record<string, React.CSSProperties>;
  classNames?: ClassNames<StylesNames>;
  styles?: Styles<StylesNames>;
  variant?: string;
  vars?: Vars;
  varsResolver?: VarsResolver<Vars>;
}

/**
 * Function to create CSS variables resolver
 * @param resolver - Resolver function
 * @returns VarsResolver function
 */
function createVarsResolver<Vars extends Record<string, any>>(
  resolver: (theme: MantineTheme, props: Vars, ctx: StylesApiContext) => CSSVariables
): VarsResolver<Vars>;

Usage Examples:

// Component with Styles API
function CustomButton({ className, style, classNames, styles, ...others }) {
  const { classes, cx } = useStyles({
    name: 'Button',
    classes: buttonClasses,
    props: { classNames, styles },
    className,
    style,
  });

  return <button className={cx(classes.root, className)} {...others} />;
}

// Custom styles and class names
<Button
  classNames={{
    root: 'my-button-root',
    label: 'my-button-label'
  }}
  styles={{
    root: { borderRadius: 20 },
    label: { fontSize: 16 }
  }}
>
  Styled Button
</Button>

CSS Variables System

Dynamic CSS variables generation and management system.

/**
 * CSS variables resolver type
 */
type CSSVariablesResolver = (theme: MantineTheme) => CSSVariables;

/**
 * Default CSS variables resolver
 */
const defaultCssVariablesResolver: CSSVariablesResolver;

/**
 * Function to convert CSS variables input
 * @param input - CSS variables configuration
 * @returns Converted CSS variables
 */
function convertCssVariables(input: ConvertCSSVariablesInput): CSSVariables;

interface ConvertCSSVariablesInput {
  variables?: Record<string, string>;
  dark?: Record<string, string>;
  light?: Record<string, string>;
}

/**
 * Virtual color utilities for CSS variables
 */
function virtualColor(color: string): string;
function isVirtualColor(color: string): boolean;
function getCSSColorVariables(colors: Record<string, string[]>): CSSVariables;

Direction Provider

Provider for RTL/LTR text direction support.

/**
 * Provider for RTL/LTR text direction support
 * @param props - Direction provider props
 */
function DirectionProvider(props: DirectionProviderProps): JSX.Element;

interface DirectionProviderProps {
  /** Text direction, 'ltr' by default */
  dir?: 'ltr' | 'rtl';
  /** Determines whether direction should be set on document.documentElement, true by default */
  detectDirection?: boolean;
  children: React.ReactNode;
}

/**
 * Hook to get current text direction
 * @returns Current direction ('ltr' | 'rtl')
 */
function useDirection(): { dir: 'ltr' | 'rtl' };

Theme Utilities

Utility functions for theme manipulation and merging.

/**
 * Validates Mantine theme object
 * @param theme - Theme to validate
 * @returns Validated theme
 */
function validateMantineTheme(theme: MantineThemeOverride): MantineTheme;

/**
 * Merges theme with base theme
 * @param currentTheme - Current theme
 * @param themeOverride - Theme override
 * @returns Merged theme
 */
function mergeMantineTheme(currentTheme: MantineTheme, themeOverride: MantineThemeOverride): MantineTheme;

/**
 * Merges theme overrides
 * @param currentTheme - Current theme override
 * @param otherTheme - Other theme override
 * @returns Merged theme override
 */
function mergeThemeOverrides(currentTheme: MantineThemeOverride, otherTheme: MantineThemeOverride): MantineThemeOverride;