{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-reduced-motion",
  "type": "registry:hook",
  "title": "useReducedMotion",
  "description": "A hook that reports whether the user prefers reduced motion and updates when the setting changes.",
  "author": "Design From Labs <https://labs.designfrom.com>",
  "categories": [
    "foundations"
  ],
  "docs": "Installed `useReducedMotion` in your hooks folder. It returns `false` on the server and the live `prefers-reduced-motion` value in the browser.\n\nDocs and every variant: https://labs.designfrom.com/ui/use-reduced-motion",
  "files": [
    {
      "path": "registry/use-reduced-motion/use-reduced-motion.ts",
      "type": "registry:hook",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * @dfl-header: v1, generated by labs.designfrom.com at build time\n * Item: use-reduced-motion (useReducedMotion)\n * What: A hook that reports whether the user prefers reduced motion and\n *    updates when the setting changes.\n * Status: ready. License: MIT. Author: Design From Labs\n *    <https://labs.designfrom.com>\n * Source: https://github.com/Design-from-labs/labs @ 803b92c1a30e (examples/use-reduced-motion)\n * Credits: S-003 React (MIT); S-004 shadcn/ui and its registry schema (MIT)\n * Install: npx shadcn@latest add https://labs.designfrom.com/r/use-reduced-motion.json\n *   npx shadcn@latest add @designfrom/use-reduced-motion\n *   npm i @designfrom/react, then import { useReducedMotion } from \"@designfrom/react/use-reduced-motion\";\n * Docs: https://labs.designfrom.com/ui/use-reduced-motion (index: https://labs.designfrom.com/llms.txt)\n */\n\nconst QUERY = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n  const media = window.matchMedia(QUERY);\n  media.addEventListener(\"change\", onChange);\n  return () => media.removeEventListener(\"change\", onChange);\n}\n\n/**\n * true when the user prefers reduced motion. Server rendering assumes false;\n * the browser value takes over on hydration and follows later changes.\n */\nexport function useReducedMotion(): boolean {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => window.matchMedia(QUERY).matches,\n    () => false,\n  );\n}\n"
    }
  ],
  "meta": {
    "status": "ready",
    "license": "MIT",
    "author": "Design From Labs <https://labs.designfrom.com>",
    "source": {
      "repo": "https://github.com/Design-from-labs/labs",
      "commit": "803b92c1a30e0d513e1cb1ff5ca984b2a5f9b492",
      "path": "examples/use-reduced-motion"
    },
    "credits": [
      "S-003",
      "S-004"
    ],
    "component": "use-reduced-motion",
    "kind": "hook",
    "primitive": "none",
    "iconSet": "none",
    "page": "https://labs.designfrom.com/ui/use-reduced-motion"
  }
}