Hooks

useReducedMotion

True when the visitor has asked the system for less motion.

Source

use-reduced-motion.ts

import { useSyncExternalStore } from 'react'

const QUERY = '(prefers-reduced-motion: reduce)'

function subscribe(onChange: () => void) {
  const mq = window.matchMedia(QUERY)
  mq.addEventListener('change', onChange)
  return () => mq.removeEventListener('change', onChange)
}

/** True when the visitor has asked the system for less motion. */
export function useReducedMotion() {
  return useSyncExternalStore(
    subscribe,
    () => window.matchMedia(QUERY).matches,
    () => false,
  )
}

Install

$ npx shadcn@latest add https://mikkelmanniche.dk/lab/r/use-reduced-motion.json

With the registry added (components.json)

$ npx shadcn@latest add @manniche/use-reduced-motion

Dependencies

None beyond React and Tailwind.

Files

use-reduced-motion.ts

GitHub use-reduced-motion.json For your agent (MCP)