Introduction

What is Shadcn Hooks?

Shadcn Hooks is a carefully curated collection of modern React hooks designed to enhance your development experience. Built with the same philosophy as Shadcn UI, this collection provides high-quality, TypeScript-first hooks that are production-ready and follow React best practices.

Key Features

• TypeScript First: All hooks are written in TypeScript with full type safety
• SSR Compatible: Hooks work seamlessly with server-side rendering
• Modern React: Built for React 19+ with latest patterns and optimizations
• Zero Dependencies: Most hooks have minimal or no external dependencies
• Tree Shakeable: Import only what you need
• Well Tested: Each hook is thoroughly tested and documented

Hook Categories

State Management

• useBoolean - Toggle boolean values with semantic methods
• useControllableValue - Manage a controllable value
• useCounter - Create and manage counter state with increment, decrement, and reset
• useDebounce - A hook to debounce a value
• useThrottle - A hook to throttle a value
• useToggle - Simple boolean toggle functionality

Advanced

• useCreation - Create a value only once
• useCustomCompareEffect - Effect with custom compare function
• useLatest - Always get the latest value in closures
• useLockFn - Prevent concurrent function calls
• useMemoizedFn - Memoize function references
• usePrevious - Get the previous value of a state

Lifecycle & Effects

• useDebounceEffect - A hook to debounce an effect
• useDebounceFn - A hook to debounce a function
• useDeepCompareEffect - Effect with deep comparison of dependencies
• useDeepCompareLayoutEffect - Layout effect with deep comparison
• useEffectEvent - Stable event handlers for effects
• useEffectWithTarget - A hook to create an effect with a target element that re-runs when the target or dependencies change
• useInterval - A hook to create an interval
• useIsHydrated - Detect client-side hydration
• useIsomorphicLayoutEffect - SSR-safe layout effects
• useMount - Execute code on component mount
• useThrottleEffect - A hook to throttle an effect
• useThrottleFn - A hook to throttle a function
• useTimeout - A hook to create a timeout
• useUnmount - Execute cleanup on component unmount
• useUpdate - Force a component to re-render
• useUpdateEffect - Run an effect only when the component updates

Browser

• useClickAnyWhere - Attach a click event listener to the document
• useClickAway - A hook to click away from an element
• useEventListener - Attach event listeners to DOM elements, the window, or media query lists.
• useFps - Calculate the FPS of the browser
• useHash - Track URL hash changes
• useHover - Check if the mouse is hovering over an element
• useInViewport - Check if an element is in the viewport
• useIsMatchMedia - React to media query changes
• useIsOnline - Monitor online/offline status
• useNetwork - Monitor network state

Dev

• useWhyDidYouUpdate - A hook to log the props that changed in a component

External Libraries

• useMcp - Model Context Protocol integration
• useQuery - TanStack Query integration
• useStickToBottom - A lightweight React Hook intended mainly for AI chat applications, for smoothly sticking to bottom of messages
• useSWR - SWR data fetching

Getting Started

Each hook comes with:

• CLI Installation: Use the shadcn CLI for easy setup
• Manual Installation: Copy-paste the source code
• TypeScript Support: Full type definitions included
• Documentation: Comprehensive examples and usage patterns

Design Philosophy

Shadcn Hooks follows the same principles as Shadcn UI:

• Copy, don't fork: Own your code
• Minimal dependencies: Keep bundles small
• Modern patterns: Use latest React features
• Developer experience: Great TypeScript support and documentation

Credits

This collection is inspired by and builds upon the excellent work of:

• ahooks - Comprehensive React hooks library
• usehooks-ts - TypeScript-first hooks collection