Shadcn Hooks

A comprehensive React Hooks Collection built with Shadcn

📚 Documentation • Shadcn UI

✨ 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
• Tested: Each hook is thoroughly tested

🚀 Quick Start

Installation

Each hook can be installed individually using the shadcn CLI:

npx shadcn@latest add @shadcnhooks/use-counter

Or manually copy the source code from the use-counter.

🤖 Skills

Install Shadcn Hooks as a skill:

npx skills add https://github.com/debbl/shadcn-hooks --skill shadcn-hooks

Usage

import { useCounter } from '@/hooks/use-counter'

function Counter() {
  const { count, increment, decrement, reset } = useCounter(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

📦 Registry

components.json

{
  "registries": {
    "@shadcnhooks": "https://shadcn-hooks.com/r/{name}.json"
  }
}

📚 Documentation

Visit shadcn-hooks.com for complete documentation, examples, and API references.

🤝 Credits

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

• ahooks - Comprehensive React hooks library
• usehooks-ts - TypeScript-first hooks collection
• vueuse - Collection of essential Vue Composition Utilities for Vue 3

📄 License

MIT