@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.

58 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://shadcn-hooks.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://shadcn-hooks.com/r/registry.json

bun bunx shadcn@latest add https://shadcn-hooks.com/r/registry.json

fetch registry curl -s https://shadcn-hooks.com/r/registry.json

Components

58 total

is-browser 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 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 lib

Create a context object.

npx shadcn@latest add https://shadcn-hooks.com/r/create-context.json

use-why-did-you-update 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 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 hook

A hook to force a component to re-render

npx shadcn@latest add https://shadcn-hooks.com/r/use-update.json

use-unmount 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 hook

A hook to toggle a value

npx shadcn@latest add https://shadcn-hooks.com/r/use-toggle.json

use-title hook

A hook to reactively manage document.title

npx shadcn@latest add https://shadcn-hooks.com/r/use-title.json

use-timeout hook

A hook that creates a timeout.

npx shadcn@latest add https://shadcn-hooks.com/r/use-timeout.json

use-throttle-fn hook

A hook to throttle a function

npx shadcn@latest add https://shadcn-hooks.com/r/use-throttle-fn.json

use-throttle-effect hook

A hook to throttle an effect

npx shadcn@latest add https://shadcn-hooks.com/r/use-throttle-effect.json

use-throttle hook

A hook to throttle a value

npx shadcn@latest add https://shadcn-hooks.com/r/use-throttle.json

use-text-selection 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 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 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 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 hook

A hook to reset a state

npx shadcn@latest add https://shadcn-hooks.com/r/use-reset-state.json

use-query 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 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 hook

A hook to detect the current operating system

npx shadcn@latest add https://shadcn-hooks.com/r/use-os.json

use-network hook

A hook to get the network state

npx shadcn@latest add https://shadcn-hooks.com/r/use-network.json

use-mouse 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 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 hook

A hook to declare a memoized function

npx shadcn@latest add https://shadcn-hooks.com/r/use-memoized-fn.json

use-mcp 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 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 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 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 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 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 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 hook

A hook that creates an interval.

npx shadcn@latest add https://shadcn-hooks.com/r/use-interval.json

use-in-viewport 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 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 hook

A hook to get current hash

npx shadcn@latest add https://shadcn-hooks.com/r/use-hash.json

use-fullscreen hook

A hook to manage fullscreen state

npx shadcn@latest add https://shadcn-hooks.com/r/use-fullscreen.json

use-fps hook

A hook to calculate the FPS

npx shadcn@latest add https://shadcn-hooks.com/r/use-fps.json

use-event-listener 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 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 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 hook

A hook to declare an effect event

npx shadcn@latest add https://shadcn-hooks.com/r/use-effect-event.json

use-document-visibility 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 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 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 hook

A hook to debounce a function

npx shadcn@latest add https://shadcn-hooks.com/r/use-debounce-fn.json

use-debounce-effect hook

A hook to debounce an effect

npx shadcn@latest add https://shadcn-hooks.com/r/use-debounce-effect.json

use-debounce hook

A hook to debounce a value

npx shadcn@latest add https://shadcn-hooks.com/r/use-debounce.json

use-custom-compare-effect 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 hook

A hook to create a value only once

npx shadcn@latest add https://shadcn-hooks.com/r/use-creation.json

use-counter hook

A hook that creates a counter.

npx shadcn@latest add https://shadcn-hooks.com/r/use-counter.json

use-controllable-value hook

A hook to manage a controllable value

npx shadcn@latest add https://shadcn-hooks.com/r/use-controllable-value.json

use-clipboard hook

A hook to copy text to clipboard

npx shadcn@latest add https://shadcn-hooks.com/r/use-clipboard.json

use-click-away 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 hook

A hook to click anywhere

npx shadcn@latest add https://shadcn-hooks.com/r/use-click-any-where.json

use-boolean hook

A hook to toggle a boolean value

npx shadcn@latest add https://shadcn-hooks.com/r/use-boolean.json

use-battery hook

A hook to monitor battery information

npx shadcn@latest add https://shadcn-hooks.com/r/use-battery.json

use-active-element 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