Highlight

Install: npm install @mantine/core@9.7.1 @mantine/hooks@9.7.1

Version and compatibility

Pinned Mantine Core 9.7.1 requires React and React DOM ^19.2.0 and matching @mantine/hooks@9.7.1, from the installed npm package's peerDependencies. Do not force it into React 18 or another incompatible version. Explain upgrade impact and agree on a plan with the project owner; do not hide conflicts with --force/--legacy-peer-deps. The native Provider enables theme.respectReducedMotion and uses forceColorScheme for light/dark.

Use case

Highlight matching substrings in text.

Native props used by this example

These props are extracted from the local typechecked JSX and grouped by their owning native component. This is not an exhaustive prop list; see pinned source signatures and inheritance below.

Interaction and state checks

Current scenarios: Default. Check actual behavior after selecting supported disabled/error/read-only scenarios; components without those native states do not receive invented universal props. Verify keyboard focus and exits, then connect changed values through the native callback signature.

Business integration boundary

Demo content/state is local, without server persistence, authorization or fetching. A static display component is not a completed business workflow.

Host setup

Install pinned @mantine/core and @mantine/hooks, import @mantine/core/styles.css at the entry and use MantineProvider. The example's theme/variant are JGuang-authored host props, not universal native component APIs; forceColorScheme synchronizes the app theme. Native implementation source is a reading reference: use npm exports rather than copying internal engines. This batch covers Core, not dates/charts/forms extension packages. Detailed upstream prose remains English.

Runnable usage

import { useState } from 'react';
import * as M from '@mantine/core';
import '@mantine/core/styles.css';


function ComponentPreview({ variant = 'Default' }: { variant?: string }) {

return <M.Highlight highlight="JGuang">Discover resources on JGuang</M.Highlight>;
}
export default function Example({ variant = 'Default', theme = 'light' }: { variant?: string; theme?: 'light' | 'dark' }) {
return <M.MantineProvider forceColorScheme={theme} theme={{ respectReducedMotion: true }}><ComponentPreview variant={variant} /></M.MantineProvider>;
}

Preview states

Default

The example uses the native Mantine API. For supported input demos, change the local variant to Disabled, Invalid or Read only; these are example labels, not new component props. Keep the documented data, controlled values, stores and compound children when adapting the example.

Usage

Use the Highlight component to highlight substrings within text using the HTML <mark> element.

Pass the text as children and specify which substring(s) to highlight with the highlight prop. Matching is case-insensitive and accent-insensitive by default, and highlights all occurrences of the matched substring. Use the caseInsensitive and accentInsensitive props to opt out.

Matching behavior

• Case-insensitive: 'hello' matches 'Hello', 'HELLO', 'hElLo', etc. (controlled by caseInsensitive, defaults to true)
• Accent-insensitive: 'cafe' matches 'café', 'cafè', 'CAFÉ', etc. (controlled by accentInsensitive, defaults to true)
• All occurrences: Every instance of the matched substring is highlighted
• Special characters: Regex special characters like [, ], (, ) are automatically escaped and treated as literal text
• Whitespace: Leading and trailing whitespace in highlight strings is trimmed and ignored
• Empty strings: Empty or whitespace-only highlight strings are ignored

Case-sensitive matching

Set caseInsensitive={false} to only match substrings with the same casing as the highlight term:

Accent-sensitive matching

Set accentInsensitive={false} to require accented characters in the text to match the highlight term exactly:

Highlight multiple substrings

To highlight multiple substrings, provide an array of values. When multiple substrings are provided, longer matches take precedence to avoid partial overlaps.

Custom colors per term

You can assign different colors to different highlighted terms by providing an array of objects with text and color properties:

Whole word matching

Use the wholeWord prop to match only complete words. When enabled, 'the' will not match 'there' or 'theme':

Change highlight styles

Default Mark styles can be overwritten with the highlightStyles prop, which accepts either an object with styles or a function that receives the theme as a parameter and returns styles:

Text props

Highlight is based on the Text component - all Text props except color are available. Use the color prop to change the highlight background color, not the text color.

Source-backed parameter reference

Implementation signatures and types are generated from the pinned local source. Optional props, native inherited types, union branches and never exclusions are preserved. A forwardRef implementation's ref is a React reference, not an additional business prop.

Highlight(_props)

export interface HighlightTerm {
  /** Text to highlight */
  text: string;

  /** Background color for this specific term. Key of `theme.colors` or any valid CSS color */
  color?: MantineColor | string;
}

export interface HighlightProps extends Omit<TextProps, 'color'> {
  /**
   * Substring(s) to highlight in `children`. Can be:
   * - string: single term
   * - string[]: multiple terms with same color
   * - HighlightTerm[]: multiple terms with custom colors per term
   *
   * - Matching is case-insensitive and accent-insensitive by default, use `caseInsensitive` and `accentInsensitive` props to control this behavior
   * - Regex special characters are automatically escaped
   * - When multiple substrings are provided, longer matches take precedence
   * - Empty strings and whitespace-only strings are ignored
   */
  highlight: string | string[] | HighlightTerm[];

  /**
   * Default background color for all highlighted text.
   * Key of `theme.colors` or any valid CSS color, passed to `Mark` component.
   * Can be overridden per term when using HighlightTerm objects.
   * @default 'yellow'
   */
  color?: MantineColor | string;

  /** Styles applied to `mark` elements */
  highlightStyles?: React.CSSProperties | ((theme: MantineTheme) => React.CSSProperties);

  /** String in which to highlight substrings */
  children: string;

  /**
   * Only match whole words (adds word boundaries to regex).
   * When enabled, 'the' will not match 'there'.
   * @default false
   */
  wholeWord?: boolean;

  /**
   * Perform case-insensitive matching.
   * @default true
   */
  caseInsensitive?: boolean;

  /**
   * Perform accent-insensitive matching.
   * When enabled cafe will match cafe, café, cafè, etc.
   * @default true
   */
  accentInsensitive?: boolean;
}

export type HighlightFactory = PolymorphicFactory<{
  props: HighlightProps;
  defaultRef: HTMLDivElement;
  defaultComponent: 'div';
  stylesNames: TextStylesNames;
  variant: TextVariant;
}>;

Native and external types

External types remain defined by React or native dependencies, not manually expanded into guessed props. The installed version's TypeScript definitions are authoritative.

PolymorphicFactory<{
  props: HighlightProps;
  defaultRef: HTMLDivElement;
  defaultComponent: 'div';
  stylesNames: TextStylesNames;
  variant: TextVariant;
}>
Omit<TextProps, 'color'>
TextProps
MantineColor
React.CSSProperties
MantineTheme
HTMLDivElement
TextStylesNames
TextVariant