Templates
Copy-paste code for common React patterns.
All templates are production-ready with TypeScript, proper error handling, and accessibility built-in.
Categories
Hooks
Reusable React hooks for common functionality.
| Hook | Purpose |
|---|---|
| useDebounce | Delay value updates for search inputs |
| useLocalStorage | Persist state in localStorage |
| useClickOutside | Detect clicks outside elements |
| useMediaQuery | Responsive design with JS |
| useCopyToClipboard | Copy text with feedback |
| useToggle | Boolean state management |
Utilities
Helper functions for common operations.
| Utility | Purpose |
|---|---|
| cn | Merge Tailwind classes |
| Date Formatting | Format dates with date-fns |
| Currency Formatting | Format money values |
| String Helpers | Slugify, truncate, capitalize |
Components
Production-ready React components organized by category.
Authentication
| Component | Purpose |
|---|---|
| Login Form | Sign in with validation |
| Signup Form | Registration with password rules |
| Auth Provider | Zustand auth state + JWT |
Data Display
| Component | Purpose |
|---|---|
| Data Table | TanStack Table with sorting, filtering |
| Infinite List | Infinite scroll with TanStack Query |
| Search with Filters | Debounced search + URL state |
User Management
| Component | Purpose |
|---|---|
| User Profile | Profile editing with avatar upload |
Tech Stack
All templates use:
| Technology | Purpose |
|---|---|
| TypeScript | Type safety |
| Tailwind CSS | Styling |
| shadcn/ui | UI primitives |
| React Hook Form | Form handling |
| Zod | Validation |
| TanStack Query | Server state |
Installation
Install the base dependencies for all templates:
# Core utilities
npm install clsx tailwind-merge date-fns
# Forms and validation
npm install react-hook-form zod @hookform/resolvers
# Server state
npm install @tanstack/react-query
# UI components
npx shadcn-ui@latest init
npx shadcn-ui@latest add button input label card checkbox alert