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

• useCounter - Create and manage counter state with increment, decrement, and reset
• useToggle - Simple boolean toggle functionality
• useBoolean - Toggle boolean values with semantic methods

Advanced

• useLatest - Always get the latest value in closures
• useLockFn - Prevent concurrent function calls
• useMemoizedFn - Memoize function references

Lifecycle & Effects

• useMount - Execute code on component mount
• useUnmount - Execute cleanup on component unmount
• useIsHydrated - Detect client-side hydration
• useEffectEvent - Stable event handlers for effects
• useIsomorphicLayoutEffect - SSR-safe layout effects
• useDeepCompareEffect - Effect with deep comparison of dependencies
• useDeepCompareLayoutEffect - Layout effect with deep comparison

Browser APIs

• useHash - Track URL hash changes
• useIsOnline - Monitor online/offline status
• useIsMatchMedia - React to media query changes

External Libraries

• useSWR - SWR data fetching
• useQuery - TanStack Query integration
• useMcp - Model Context Protocol integration

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