Detects if user prefers to reduce motion



use-reduced-motion detects if user prefers to reduce motion. It uses use-media-query hook under the hood. Hook relies on window.matchMedia() API and will always return false if api is not available (e.g. during server side rendering), unless the initial value is provided in the first argument.

Use hook to detect if user prefers to reduce motion ((prefers-reduced-motion: reduce) media query) and set animations duration based on this value.

You prefer not to reduce motion
import { Badge } from '@mantine/core';
import { useReducedMotion } from '@mantine/hooks';

function Demo() {
  const reduceMotion = useReducedMotion();

  return (
      color={reduceMotion ? 'red' : 'teal'}
      style={{ transitionDuration: reduceMotion ? '0ms' : '200ms' }}
      {reduceMotion ? 'You prefer to reduce motion' : 'You prefer not to reduce motion'}


function useReducedMotion(
  initialValue?: boolean,
  options?: {
    getInitialValueInEffect: boolean;
): boolean;