---
name: "@shadcnhooks"
slug: "shadcnhooks"
description: "A growing TypeScript-first React hooks collection distributed through the shadcn registry, built for React 19+ with SSR compatibility and zero or minimal external dependencies. Each hook is individually installable (e.g., npx shadcn@latest add @shadcnhooks/use-counter). Documented hooks include use-counter, use-boolean, and others following the shadcn copy-paste philosophy. Tree-shakeable; no lock-in. Use for: adding well-tested, typed utility hooks — state management, toggles, timers, event listeners — directly into a project as owned source files rather than a package dependency."
category: "Hooks/utilities"
tags: ["buttons", "cards", "components", "forms", "hooks", "media"]
framework: "react"
license: "MIT"
author: "Debbl"
website: "https://shadcn-hooks.com"
github: "https://github.com/Debbl/shadcn-hooks"
registry: "https://shadcn-hooks.com/r/registry.json"
pro: false
pro_url: null
github_stars: 58
component_count: 58
generated_at: "2026-07-28T08:59:05.895Z"
---

# @shadcnhooks

A growing TypeScript-first React hooks collection distributed through the shadcn registry, built for React 19+ with SSR compatibility and zero or minimal external dependencies. Each hook is individually installable (e.g., npx shadcn@latest add @shadcnhooks/use-counter). Documented hooks include use-counter, use-boolean, and others following the shadcn copy-paste philosophy. Tree-shakeable; no lock-in. Use for: adding well-tested, typed utility hooks — state management, toggles, timers, event listeners — directly into a project as owned source files rather than a package dependency.

## Links

- Website: https://shadcn-hooks.com
- GitHub: https://github.com/Debbl/shadcn-hooks
- Registry JSON: https://shadcn-hooks.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/shadcnhooks
- This file: https://sh4dcn.vercel.app/md/shadcnhooks.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://shadcn-hooks.com/r/registry.json
pnpm dlx shadcn@latest add https://shadcn-hooks.com/r/registry.json
bunx shadcn@latest add https://shadcn-hooks.com/r/registry.json
# clone the source repo
git clone https://github.com/Debbl/shadcn-hooks.git
# fetch the raw registry index
curl -s https://shadcn-hooks.com/r/registry.json
```

## Components (58)

| name | type | description | install |
| --- | --- | --- | --- |
| is-browser | registry:lib | A library that checks if the code is running in a browser. | `npx shadcn@latest add https://shadcn-hooks.com/r/is-browser.json` |
| create-effect-with-target | registry:lib | A hook to create an effect with a target. | `npx shadcn@latest add https://shadcn-hooks.com/r/create-effect-with-target.json` |
| create-context | registry:lib | Create a context object. | `npx shadcn@latest add https://shadcn-hooks.com/r/create-context.json` |
| use-why-did-you-update | registry:hook | A hook to log the props that changed in a component | `npx shadcn@latest add https://shadcn-hooks.com/r/use-why-did-you-update.json` |
| use-update-effect | registry:hook | A hook to run an effect only when the component updates | `npx shadcn@latest add https://shadcn-hooks.com/r/use-update-effect.json` |
| use-update | registry:hook | A hook to force a component to re-render | `npx shadcn@latest add https://shadcn-hooks.com/r/use-update.json` |
| use-unmount | registry:hook | A hook to run a function when the component unmounts | `npx shadcn@latest add https://shadcn-hooks.com/r/use-unmount.json` |
| use-toggle | registry:hook | A hook to toggle a value | `npx shadcn@latest add https://shadcn-hooks.com/r/use-toggle.json` |
| use-title | registry:hook | A hook to reactively manage document.title | `npx shadcn@latest add https://shadcn-hooks.com/r/use-title.json` |
| use-timeout | registry:hook | A hook that creates a timeout. | `npx shadcn@latest add https://shadcn-hooks.com/r/use-timeout.json` |
| use-throttle-fn | registry:hook | A hook to throttle a function | `npx shadcn@latest add https://shadcn-hooks.com/r/use-throttle-fn.json` |
| use-throttle-effect | registry:hook | A hook to throttle an effect | `npx shadcn@latest add https://shadcn-hooks.com/r/use-throttle-effect.json` |
| use-throttle | registry:hook | A hook to throttle a value | `npx shadcn@latest add https://shadcn-hooks.com/r/use-throttle.json` |
| use-text-selection | registry:hook | A hook to get the text selection and its bounding rect from an element | `npx shadcn@latest add https://shadcn-hooks.com/r/use-text-selection.json` |
| use-swr | registry:hook | A hook to get the latest value of a variable | `npx shadcn@latest add https://shadcn-hooks.com/r/use-swr.json` |
| use-stick-to-bottom | registry:hook | A lightweight React Hook intended mainly for AI chat applications, for smoothly sticking to bottom of messages | `npx shadcn@latest add https://shadcn-hooks.com/r/use-stick-to-bottom.json` |
| use-scroll-lock | registry:hook | A hook to lock the scroll of the body | `npx shadcn@latest add https://shadcn-hooks.com/r/use-scroll-lock.json` |
| use-reset-state | registry:hook | A hook to reset a state | `npx shadcn@latest add https://shadcn-hooks.com/r/use-reset-state.json` |
| use-query | registry:hook | useQuery is a hook that allows you to fetch data from an API and cache the results. | `npx shadcn@latest add https://shadcn-hooks.com/r/use-query.json` |
| use-previous | registry:hook | A hook to get the previous value of a variable | `npx shadcn@latest add https://shadcn-hooks.com/r/use-previous.json` |
| use-os | registry:hook | A hook to detect the current operating system | `npx shadcn@latest add https://shadcn-hooks.com/r/use-os.json` |
| use-network | registry:hook | A hook to get the network state | `npx shadcn@latest add https://shadcn-hooks.com/r/use-network.json` |
| use-mouse | registry:hook | A hook to track mouse position with optional touch support | `npx shadcn@latest add https://shadcn-hooks.com/r/use-mouse.json` |
| use-mount | registry:hook | A hook to run a function when the component mounts | `npx shadcn@latest add https://shadcn-hooks.com/r/use-mount.json` |
| use-memoized-fn | registry:hook | A hook to declare a memoized function | `npx shadcn@latest add https://shadcn-hooks.com/r/use-memoized-fn.json` |
| use-mcp | registry:hook | A hook to get the latest value of a variable | `npx shadcn@latest add https://shadcn-hooks.com/r/use-mcp.json` |
| use-lock-fn | registry:hook | A hook to lock a function until the previous promise is resolved | `npx shadcn@latest add https://shadcn-hooks.com/r/use-lock-fn.json` |
| use-latest | registry:hook | A hook to get the latest value of a variable | `npx shadcn@latest add https://shadcn-hooks.com/r/use-latest.json` |
| use-isomorphic-layout-effect | registry:hook | A hook to use layout effect on the client side | `npx shadcn@latest add https://shadcn-hooks.com/r/use-isomorphic-layout-effect.json` |
| use-is-online | registry:hook | A hook to check if the user is online | `npx shadcn@latest add https://shadcn-hooks.com/r/use-is-online.json` |
| use-is-match-media | registry:hook | A hook to check if the media query matches | `npx shadcn@latest add https://shadcn-hooks.com/r/use-is-match-media.json` |
| use-is-hydrated | registry:hook | A hook to check if the component is hydrated | `npx shadcn@latest add https://shadcn-hooks.com/r/use-is-hydrated.json` |
| use-interval | registry:hook | A hook that creates an interval. | `npx shadcn@latest add https://shadcn-hooks.com/r/use-interval.json` |
| use-in-viewport | registry:hook | A hook to check if an element is in the viewport | `npx shadcn@latest add https://shadcn-hooks.com/r/use-in-viewport.json` |
| use-hover | registry:hook | A hook to check if the mouse is hovering over an element | `npx shadcn@latest add https://shadcn-hooks.com/r/use-hover.json` |
| use-hash | registry:hook | A hook to get current hash | `npx shadcn@latest add https://shadcn-hooks.com/r/use-hash.json` |
| use-fullscreen | registry:hook | A hook to manage fullscreen state | `npx shadcn@latest add https://shadcn-hooks.com/r/use-fullscreen.json` |
| use-fps | registry:hook | A hook to calculate the FPS | `npx shadcn@latest add https://shadcn-hooks.com/r/use-fps.json` |
| use-event-listener | registry:hook | A hook to attach event listeners to DOM elements, the window, or media query lists. | `npx shadcn@latest add https://shadcn-hooks.com/r/use-event-listener.json` |
| use-element-size | registry:hook | A hook to track an element's width and height | `npx shadcn@latest add https://shadcn-hooks.com/r/use-element-size.json` |
| use-effect-with-target | registry:hook | A hook to create an effect with a target element that re-runs when the target or dependencies change | `npx shadcn@latest add https://shadcn-hooks.com/r/use-effect-with-target.json` |
| use-effect-event | registry:hook | A hook to declare an effect event | `npx shadcn@latest add https://shadcn-hooks.com/r/use-effect-event.json` |
| use-document-visibility | registry:hook | A hook to track the document visibility state | `npx shadcn@latest add https://shadcn-hooks.com/r/use-document-visibility.json` |
| use-deep-compare-layout-effect | registry:hook | A hook to use a deep compare layout effect | `npx shadcn@latest add https://shadcn-hooks.com/r/use-deep-compare-layout-effect.json` |
| use-deep-compare-effect | registry:hook | A hook to use a deep compare effect | `npx shadcn@latest add https://shadcn-hooks.com/r/use-deep-compare-effect.json` |
| use-debounce-fn | registry:hook | A hook to debounce a function | `npx shadcn@latest add https://shadcn-hooks.com/r/use-debounce-fn.json` |
| use-debounce-effect | registry:hook | A hook to debounce an effect | `npx shadcn@latest add https://shadcn-hooks.com/r/use-debounce-effect.json` |
| use-debounce | registry:hook | A hook to debounce a value | `npx shadcn@latest add https://shadcn-hooks.com/r/use-debounce.json` |
| use-custom-compare-effect | registry:hook | A hook like useEffect but with a custom compare function | `npx shadcn@latest add https://shadcn-hooks.com/r/use-custom-compare-effect.json` |
| use-creation | registry:hook | A hook to create a value only once | `npx shadcn@latest add https://shadcn-hooks.com/r/use-creation.json` |
| use-counter | registry:hook | A hook that creates a counter. | `npx shadcn@latest add https://shadcn-hooks.com/r/use-counter.json` |
| use-controllable-value | registry:hook | A hook to manage a controllable value | `npx shadcn@latest add https://shadcn-hooks.com/r/use-controllable-value.json` |
| use-clipboard | registry:hook | A hook to copy text to clipboard | `npx shadcn@latest add https://shadcn-hooks.com/r/use-clipboard.json` |
| use-click-away | registry:hook | A hook to click away from an element | `npx shadcn@latest add https://shadcn-hooks.com/r/use-click-away.json` |
| use-click-any-where | registry:hook | A hook to click anywhere | `npx shadcn@latest add https://shadcn-hooks.com/r/use-click-any-where.json` |
| use-boolean | registry:hook | A hook to toggle a boolean value | `npx shadcn@latest add https://shadcn-hooks.com/r/use-boolean.json` |
| use-battery | registry:hook | A hook to monitor battery information | `npx shadcn@latest add https://shadcn-hooks.com/r/use-battery.json` |
| use-active-element | registry:hook | A hook to track the currently focused element in the document | `npx shadcn@latest add https://shadcn-hooks.com/r/use-active-element.json` |

## For AI agents

```text
You are adding components from @shadcnhooks to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/shadcnhooks.md) for the component list.
2. Fetch the machine-readable index: https://shadcn-hooks.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: shadcnhooks).
```