Question 1

What are shadcn React hooks?

Accepted Answer

shadcn React hooks are a collection of 34 copy-paste TypeScript hooks for React and Next.js — useCounter, useToggle, useDebounceValue, useLocalStorage, useIntersectionObserver, useWindowSize, useCopyToClipboard, useDarkMode, and more. Each hook ships as a single self-contained TSX file that drops straight into your `hooks/` folder. SSR-safe, fully typed, zero runtime dependencies on shadcn.io.

Question 2

Are shadcn hooks free?

Accepted Answer

Yes — every hook in the collection is free to copy into any project, commercial or otherwise. The shadcn.io Pro subscription covers premium blocks (heroes, pricing tables, dashboards) and animated backgrounds/shaders, but hooks remain open. Install via the shadcn CLI or paste the source straight from the docs.

Question 3

How are shadcn hooks different from usehooks-ts or react-use?

Accepted Answer

Two key differences. (1) Copy-paste, not a dependency — your `package.json` doesn't grow when you add `useCounter` or `useDebounceValue`. You own the source, edit it freely, and there's no version coupling to a third-party release. (2) shadcn-style demos — every hook ships with a `Demo` component built on shadcn/ui primitives so you can try it inline in the docs and copy the demo as your starting point.

Question 4

What hooks should I reach for first?

Accepted Answer

For state: useCounter (numeric), useToggle (alternating values), useBoolean (on/off), useStep (wizards). For browser: useWindowSize, useMediaQuery, useDarkMode, useCopyToClipboard. For events: useEventListener, useOnClickOutside, useHover. For persistence: useLocalStorage, useSessionStorage. For timing: useDebounceValue, useDebounceCallback, useInterval, useTimeout. For observers: useIntersectionObserver, useResizeObserver. Almost every Next.js app reaches for at least 3-4 of these in the first week.

Question 5

How do I install a shadcn React hook?

Accepted Answer

Open the hook's docs page (for example shadcn.io/hooks/use-counter) and copy the one-line `npx shadcn@latest add` command. The shadcn CLI writes the hook into `hooks/` (or wherever your components.json points). Import it from `@/hooks/use-counter` and call it. Works with any Next.js, Vite, or Remix project that already has shadcn/ui initialised.

Question 6

Are the hooks TypeScript-typed?

Accepted Answer

Fully. Every hook exports its return type and parameter types — useCounter returns `{ count: number; increment: () => void; … }`, useDebounceValue is generic over the value type, useLocalStorage is generic over the stored shape. No `any`, no implicit returns. Hover the hook in your editor and you get the full surface.

Question 7

Can I customise a shadcn hook?

Accepted Answer

Yes. Since each hook ships as plain TypeScript, deeper edits — adding a min/max to useCounter, swapping JSON for SuperJSON in useLocalStorage, adding a custom debounce algorithm — are one file edit away. There's no runtime dependency on a hooks library to fork or override. Your changes are local and version-controlled with your app.

Question 8

Do shadcn hooks work with Server Components?

Accepted Answer

Most are client-side by design — they manage state, listen to events, or read browser APIs. That means you import them inside a `"use client"` component, not a Server Component. A handful (useIsMounted, useIsClient, useIsomorphicLayoutEffect) exist precisely to handle the SSR ↔ CSR boundary cleanly. Read each hook's docs page for SSR notes.

Question 9

Do these hooks add re-render overhead?

Accepted Answer

No. Every callback returned by useCounter, useToggle, useBoolean, useDebounceCallback is wrapped in useCallback so reference identity is stable across renders — pass them to memoized children without busting React.memo. Internal state updates use the functional setter form to avoid stale-closure bugs. Listener-based hooks (useEventListener, useResizeObserver, useIntersectionObserver) attach exactly once and tear down on unmount.

Question 10

Are shadcn hooks SSR-safe?

Accepted Answer

Yes. Hooks that read browser APIs (window, document, localStorage, matchMedia) check `typeof window !== 'undefined'` or defer initialisation to useEffect, so the server-rendered HTML matches the first client paint. useIsClient and useIsMounted are exposed for the rare cases where you need to gate render explicitly. No hydration warnings out of the box.

Question 11

How big is the JS bundle impact of a shadcn hook?

Accepted Answer

Tiny. Each hook is a single file (~0.5–2 KB gzipped) with no runtime dependencies beyond React. There's no shared utility runtime to lazy-load, no helper barrel — every hook is self-contained. Tree-shaking is irrelevant because you only import the hooks you copy in.

Question 12

Do the timing hooks (useDebounceValue, useInterval) leak?

Accepted Answer

No. Every timing hook clears its timer in the effect cleanup function — useInterval re-creates the interval when the delay changes, useTimeout cancels on unmount, useDebounceValue and useDebounceCallback both cancel pending invocations on unmount. Pass `null` to useInterval / useTimeout to pause them without unmounting.

Question 13

Which React and Next.js versions do shadcn hooks support?

Accepted Answer

React 19+ and Next.js 16+ are the baseline, with full App Router support. Every hook is marked "use client" because it manages state, events, or browser APIs. They also work with Vite + React, Remix, Astro islands, and React 18 apps — none of the hooks depend on React-19-specific features. Any framework that mounts a client component can host a shadcn hook.

Question 14

Do shadcn hooks ship dependency-free?

Accepted Answer

Almost. The 34 hooks rely only on React. Even useLocalStorage doesn't pull in a JSON-handling library — it uses native `JSON.stringify` / `parse` with a try/catch fallback. Your `package.json` doesn't grow when you add a hook; you copy the source and own it.

Question 15

Can I use shadcn hooks alongside React Query or Zustand?

Accepted Answer

Yes. The hooks are orthogonal to data-fetching and global-state libraries. useDebounceValue pairs naturally with React Query for search inputs. useLocalStorage and useSessionStorage are great for persisting Zustand slices. useIntersectionObserver is the standard primitive for infinite scroll built on React Query's `fetchNextPage`. Nothing in the collection competes with those libraries — they fill the gaps.

Question 16

Can I contribute a new shadcn hook?

Accepted Answer

Yes. shadcn.io is open-source on GitHub. Open a PR with a new TSX file under `packages/hooks/` following the existing JSDoc pattern: `@title / @description / @opening / @related / @questions`, the hook implementation, and a matching `Demo` default export so the docs page can render it inline. The MDX page, gallery card, and OG screenshot regenerate automatically via the build scripts.

React Hooks for Modern Apps.

Every hook, grouped by family

Every hook. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions