CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

core-components.mddocs/

Core Components

Foundation components including Box, factory system, and essential utilities that power the entire Mantine library. These components provide the base functionality and consistent API patterns used across all other components.

Capabilities

Box Component

The polymorphic base component that provides foundation for all Mantine components. Box supports style props, responsive design, and serves as the building block for the entire component system.

/**
 * Polymorphic base component that provides foundation for all Mantine components
 * Supports all HTML elements and custom components through polymorphic props
 */
function Box<C = 'div'>(props: BoxProps<C>): JSX.Element;

interface BoxProps<C = 'div'> extends MantineStyleProps {
  /** Component to render, div by default */
  component?: C;
  /** Class added to the root element */
  className?: string;
  /** Inline style added to root component element, can subscribe to theme */
  style?: MantineStyleProp;
  /** CSS variables defined on root component element */
  __vars?: CssVarsProp;
  /** Size property passed down the HTML element */
  __size?: string;
  /** Breakpoint above which the component is hidden with display: none */
  hiddenFrom?: MantineBreakpoint;
  /** Breakpoint below which the component is hidden with display: none */
  visibleFrom?: MantineBreakpoint;
  /** Determines whether component should be hidden in light color scheme */
  lightHidden?: boolean;
  /** Determines whether component should be hidden in dark color scheme */
  darkHidden?: boolean;
  /** Element modifiers transformed into data- attributes */
  mod?: BoxMod;
  /** Children elements */
  children?: React.ReactNode;
}

type BoxMod = Record<string, any> | string | (Record<string, any> | string)[];

type ElementProps<C extends React.ElementType> = React.ComponentPropsWithoutRef<C>;

type BoxComponentProps<C extends React.ElementType> = Omit<ElementProps<C>, keyof BoxProps> & 
  BoxProps<C> & {
    component?: C;
  };

Basic Usage:

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

// Basic div
<Box>Content</Box>

// Custom component
<Box component="button">Button content</Box>

// With style props
<Box 
  p="md" 
  m="lg" 
  bg="blue.1" 
  c="blue.9"
  bdrs="sm"
>
  Styled box
</Box>

// Responsive design
<Box 
  p={{ base: 'md', sm: 'lg', md: 'xl' }}
  hiddenFrom="md"
>
  Responsive box
</Box>

Advanced Usage:

// Polymorphic with TypeScript
<Box<'button'>
  component="button"
  onClick={(event) => console.log(event)} // Fully typed
  disabled={false} // Button-specific props
>
  Typed button
</Box>

// With modifiers
<Box
  mod={{ 
    'data-active': isActive,
    'data-size': 'large'
  }}
>
  Box with data attributes
</Box>

Mantine Style Props

Comprehensive system of style props that work consistently across all components, providing responsive design and theme integration.

interface MantineStyleProps {
  /** Margin props */
  m?: StyleProp<MantineSpacing>;    // margin
  my?: StyleProp<MantineSpacing>;   // margin-block
  mx?: StyleProp<MantineSpacing>;   // margin-inline  
  mt?: StyleProp<MantineSpacing>;   // margin-top
  mb?: StyleProp<MantineSpacing>;   // margin-bottom
  ms?: StyleProp<MantineSpacing>;   // margin-inline-start
  me?: StyleProp<MantineSpacing>;   // margin-inline-end
  ml?: StyleProp<MantineSpacing>;   // margin-left
  mr?: StyleProp<MantineSpacing>;   // margin-right

  /** Padding props */
  p?: StyleProp<MantineSpacing>;    // padding
  py?: StyleProp<MantineSpacing>;   // padding-block
  px?: StyleProp<MantineSpacing>;   // padding-inline
  pt?: StyleProp<MantineSpacing>;   // padding-top
  pb?: StyleProp<MantineSpacing>;   // padding-bottom
  ps?: StyleProp<MantineSpacing>;   // padding-inline-start
  pe?: StyleProp<MantineSpacing>;   // padding-inline-end
  pl?: StyleProp<MantineSpacing>;   // padding-left
  pr?: StyleProp<MantineSpacing>;   // padding-right

  /** Visual props */
  bd?: StyleProp<React.CSSProperties['border']>;          // border
  bdrs?: StyleProp<MantineSpacing>;                       // border-radius
  bg?: StyleProp<MantineColor>;                           // background
  c?: StyleProp<MantineColor>;                            // color
  opacity?: StyleProp<React.CSSProperties['opacity']>;

  /** Typography props */
  ff?: StyleProp<'monospace' | 'text' | 'heading' | string>;  // font-family
  fz?: StyleProp<MantineFontSize | `h${1|2|3|4|5|6}` | number | string>;  // font-size
  fw?: StyleProp<React.CSSProperties['fontWeight']>;      // font-weight
  lts?: StyleProp<React.CSSProperties['letterSpacing']>;  // letter-spacing
  ta?: StyleProp<React.CSSProperties['textAlign']>;       // text-align
  lh?: StyleProp<MantineLineHeight | `h${1|2|3|4|5|6}` | number | string>;  // line-height
  fs?: StyleProp<React.CSSProperties['fontStyle']>;       // font-style
  tt?: StyleProp<React.CSSProperties['textTransform']>;   // text-transform
  td?: StyleProp<React.CSSProperties['textDecoration']>;  // text-decoration

  /** Size props */
  w?: StyleProp<React.CSSProperties['width']>;      // width
  miw?: StyleProp<React.CSSProperties['minWidth']>; // min-width
  maw?: StyleProp<React.CSSProperties['maxWidth']>; // max-width
  h?: StyleProp<React.CSSProperties['height']>;     // height
  mih?: StyleProp<React.CSSProperties['minHeight']>; // min-height
  mah?: StyleProp<React.CSSProperties['maxHeight']>; // max-height

  /** Background props */
  bgsz?: StyleProp<React.CSSProperties['backgroundSize']>;     // background-size
  bgp?: StyleProp<React.CSSProperties['backgroundPosition']>;  // background-position
  bgr?: StyleProp<React.CSSProperties['backgroundRepeat']>;    // background-repeat
  bga?: StyleProp<React.CSSProperties['backgroundAttachment']>; // background-attachment

  /** Position props */
  pos?: StyleProp<React.CSSProperties['position']>;  // position
  top?: StyleProp<React.CSSProperties['top']>;
  left?: StyleProp<React.CSSProperties['left']>;
  bottom?: StyleProp<React.CSSProperties['bottom']>;
  right?: StyleProp<React.CSSProperties['right']>;
  inset?: StyleProp<React.CSSProperties['inset']>;
  z?: StyleProp<React.CSSProperties['zIndex']>;      // z-index

  /** Display and layout props */
  display?: StyleProp<React.CSSProperties['display']>;
}

type StyleProp<Value> = Value | Partial<Record<MantineBreakpoint | string, Value>>;

Style Props Usage:

// Basic style props
<Box m="md" p="lg" bg="blue.1" c="dark.9" bdrs="sm">
  Basic styling
</Box>

// Responsive style props
<Box
  p={{ base: 'xs', sm: 'md', lg: 'xl' }}
  fz={{ base: 'sm', md: 'lg' }}
  ta={{ base: 'center', lg: 'left' }}
>
  Responsive styling
</Box>

// Typography style props
<Box
  ff="monospace"
  fz="lg"
  fw={700}
  lh="1.4"
  tt="uppercase"
  td="underline"
>
  Typography styling
</Box>

// Layout style props
<Box
  w="100%"
  maw={400}
  h={200}
  pos="relative"
  display="flex"
>
  Layout styling
</Box>

Factory System

Component factory system that creates Mantine-compatible components with consistent API, polymorphic props, and styling capabilities.

/**
 * Creates Mantine-compatible components with consistent API and styling
 * @param ui - Component render function
 * @returns Factory component with Mantine features
 */
function factory<Payload extends FactoryPayload>(
  ui: React.ForwardRefRenderFunction<Payload['ref'], Payload['props']>
): MantineComponent<Payload>;

interface FactoryPayload {
  props: Record<string, any>;
  ctx?: any;
  ref?: any;
  stylesNames?: string;
  vars?: any;
  variant?: string;
  staticComponents?: Record<string, any>;
  compound?: boolean;
}

/**
 * Polymorphic factory for components that need to render as different elements
 */
function polymorphicFactory<Payload extends FactoryPayload>(
  ui: React.ForwardRefRenderFunction<Payload['ref'], Payload['props']>
): PolymorphicFactory<Payload>;

/**
 * Creates polymorphic component from regular component
 * @param component - Component to make polymorphic
 * @returns Polymorphic component
 */
function createPolymorphicComponent<T extends React.ComponentType<any>>(
  component: T
): PolymorphicComponent<T>;

/**
 * Extends component with additional props
 * @param Component - Component to extend
 * @returns Function to create extended component
 */
function getWithProps<T, Props>(Component: T): (props: Partial<Props>) => T;

interface MantineComponent<Payload extends FactoryPayload> 
  extends React.ForwardRefExoticComponent<Payload['props']> {
  /** Extend component with theme configuration */
  extend: (input: ExtendComponent<Payload>) => MantineThemeComponent;
  /** Create component with fixed props */
  withProps: (props: Partial<Payload['props']>) => MantineComponent<Payload>;
  /** Component CSS classes */
  classes?: Record<string, string>;
}

Factory Usage Examples:

import { factory, Box, useStyles } from "@mantine/core";

// Basic factory component
interface MyButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

const MyButton = factory<{
  props: MyButtonProps;
  ref: HTMLButtonElement;
  stylesNames: 'root' | 'label';
}>((props, ref) => {
  const { children, variant = 'primary', size = 'md', ...others } = props;
  
  return (
    <Box
      component="button"
      ref={ref}
      data-variant={variant}
      data-size={size}
      {...others}
    >
      {children}
    </Box>
  );
});

// Polymorphic factory component
const MyContainer = polymorphicFactory<{
  props: { padding?: MantineSpacing };
  ref: HTMLElement;
}>((props, ref) => {
  const { padding = 'md', ...others } = props;
  return <Box ref={ref} p={padding} {...others} />;
});

// Usage
<MyContainer component="section" padding="lg">
  Container content
</MyContainer>

// Extended component with fixed props
const PrimaryButton = MyButton.withProps({ variant: 'primary' });

<PrimaryButton size="lg">Primary Button</PrimaryButton>

Utility Functions

Essential utility functions used throughout the Mantine ecosystem for common operations, type safety, and component functionality.

/** Object manipulation utilities */
function deepMerge<T extends Record<string, any>>(target: T, source: Partial<T>): T;
function keys<T extends Record<string, any>>(obj: T): (keyof T)[];
function filterProps<T extends Record<string, any>>(
  props: T, 
  propsToFilter: string[]
): Partial<T>;

/** String utilities */
function camelToKebabCase(str: string): string;
function getSafeId(id?: string): string;

/** Unit conversion utilities */
function rem(value: number): string;
function em(value: number): string;
function px(value: number | string): string;

/** Number utilities */
function isNumberLike(value: any): boolean;
function findClosestNumber(value: number, numbers: number[]): number;

/** Size and theme utilities */
function getSize(
  size: MantineSize | number | string | undefined,
  sizes: Record<MantineSize, string>
): string | undefined;
function getSpacing(spacing: MantineSpacing | undefined): string | undefined;
function getRadius(radius: MantineRadius | undefined): string | undefined;
function getFontSize(fontSize: MantineFontSize | undefined): string | undefined;
function getLineHeight(lineHeight: MantineLineHeight | undefined): string | undefined;
function getShadow(shadow: MantineShadow | undefined): string | undefined;

/** Breakpoint utilities */
function getBreakpointValue(
  breakpoint: MantineBreakpoint | number,
  theme: MantineTheme
): number;
function getSortedBreakpoints(theme: MantineTheme): Array<[string, number]>;
function getBaseValue<T>(value: T | Record<string, T>): T;

/** Context utilities */
function createSafeContext<T>(errorMessage: string): [
  React.Provider<T>,
  () => T,
  React.Context<T | null>
];
function createOptionalContext<T>(defaultValue?: T): [
  React.Provider<T>,
  () => T | undefined
];

/** Event utilities */
function createEventHandler<T extends (...args: any[]) => any>(
  outsideHandler?: T,
  thisHandler?: T
): T;
function createScopedKeydownHandler(
  handlers: Record<string, (event: KeyboardEvent) => void>
): (event: KeyboardEvent) => void;
function closeOnEscape(callback: () => void, options?: { active?: boolean }): (event: KeyboardEvent) => void;

/** Element utilities */
function isElement(value: any): value is React.ReactElement;
function findElementAncestor(
  element: HTMLElement,
  selector: string
): HTMLElement | null;
function getDefaultZIndex(level: 'app' | 'modal' | 'popover' | 'overlay' | 'max'): number;

/** Performance utilities */
function memoize<T extends (...args: any[]) => any>(fn: T): T;
function noop(): void;

/** Environment utilities */
function getEnv(): {
  NODE_ENV: string;
  MANTINE_DEV_MODE: boolean;
};

/** Hook utilities */
function useHovered(): { hovered: boolean; ref: React.RefObject<HTMLElement> };
function createUseExternalEvents<T extends Record<string, Function>>(
  events: T
): () => T;

Utility Usage Examples:

import { 
  rem, px, deepMerge, getSize, createSafeContext,
  closeOnEscape, isNumberLike 
} from "@mantine/core";

// Unit conversion
const spacing = rem(16); // '1rem'
const pixels = px('1rem'); // '16px'

// Object utilities
const merged = deepMerge(
  { a: 1, b: { c: 2 } },
  { b: { d: 3 } }
); // { a: 1, b: { c: 2, d: 3 } }

// Size utilities with theme
const buttonHeight = getSize('md', theme.spacing); // Gets 'md' value from theme

// Context creation
const [Provider, useContext] = createSafeContext<MyContextType>(
  'useMyContext must be used within MyProvider'
);

// Event handling
useEffect(() => {
  const handleEscape = closeOnEscape(() => setOpen(false));
  document.addEventListener('keydown', handleEscape);
  return () => document.removeEventListener('keydown', handleEscape);
}, []);

// Type checking
if (isNumberLike(value)) {
  // value can be converted to number
  const num = Number(value);
}

InlineStyles Component

Component for injecting inline CSS styles into the document, useful for dynamic styling and CSS variable management.

/**
 * Component for injecting inline CSS styles into the document
 * @param props - InlineStyles props
 */
function InlineStyles(props: InlineStylesProps): JSX.Element;

interface InlineStylesProps {
  /** CSS styles to inject */
  styles: string | Record<string, any>;
  /** Nonce attribute for CSP */
  nonce?: string;
}

Usage Examples:

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

// Inject CSS string
<InlineStyles styles={`
  .custom-class {
    color: red;
    font-weight: bold;
  }
`} />

// Inject CSS object
<InlineStyles 
  styles={{
    '.my-component': {
      backgroundColor: 'blue',
      padding: '1rem'
    }
  }}
/>

// With CSP nonce
<InlineStyles 
  styles="/* CSS content */"
  nonce={getNonce()}
/>

Random Class Name Utilities

Utilities for generating unique class names to avoid style conflicts and enable style isolation.

/**
 * Hook to generate random class name for style isolation
 * @returns Random class name string
 */
function useRandomClassName(): string;

/**
 * Generate style object from Box style props
 * @param styleProps - Style properties
 * @param theme - Mantine theme
 * @returns CSS style object
 */
function getStyleObject(
  styleProps: MantineStyleProps,
  theme: MantineTheme
): React.CSSProperties;

Usage:

import { useRandomClassName, getStyleObject, useMantineTheme } from "@mantine/core";

function MyComponent({ m, p, bg, ...styleProps }) {
  const className = useRandomClassName();
  const theme = useMantineTheme();
  const styles = getStyleObject({ m, p, bg, ...styleProps }, theme);

  return (
    <div className={className} style={styles}>
      Isolated component
    </div>
  );
}

docs

button-typography-components.md

core-components.md

data-display-components.md

feedback-components.md

form-components.md

index.md

layout-components.md

navigation-components.md

overlay-components.md

theme-system.md

tile.json