Module Catalogue
31 modules available
Copy to Clipboard Button
React component that copies text to clipboard and shows a Copied! confirmation.
Framer Motion Fade-In Wrapper
Reusable component that fades any child element in on mount.
Compound Component Pattern
Implement a flexible Tabs component using React Context and compound component pattern.
Tailwind CSS Animated Skeleton
Skeleton loading placeholder that matches your card layout using Tailwind pulse animation.
CSS Typing Animation
Pure CSS typewriter animation with a blinking cursor — no JavaScript needed.
Canvas Confetti on Success
Trigger a canvas-confetti burst when a user completes an action.
Web Worker for Heavy Computation
Offload CPU-intensive work to a Web Worker to keep the UI thread responsive.
Multi-step Form with State Machine
Wizard form with XState state machine for step transitions and validation guards.
Stripe.js Payment Element
Render a Stripe Payment Element in React and confirm the payment on submit.
Responsive Navbar with Hamburger
Mobile-first navbar with animated hamburger toggle and smooth height transition.
Keyboard Shortcut Hook
React hook to bind global keyboard shortcuts without conflicting with form inputs.
React Hook Form + Zod Integration
Type-safe form with React Hook Form and Zod schema resolver.
CSS Grid Auto-fill Card Layout
Responsive card grid that fills columns automatically without media queries.
Drag and Drop with dnd-kit
Sortable list using dnd-kit — accessible drag-and-drop with keyboard support.
CodeMirror 6 Editor React Component
Syntax-highlighted code editor using CodeMirror 6 with dark theme and language packs.
Page 1 of 3