Skip to main content

Snippets

Reusable code recipes for React, TypeScript, and more.

useLocalStorage

typescript

Persist state to localStorage with automatic serialization and SSR safety.

statestoragepersistence

useDebounce

typescript

Debounce a value with a configurable delay.

performanceoptimizationinput

useMediaQuery

typescript

Subscribe to CSS media query changes.

responsivebreakpointscss

useClickOutside

typescript

Detect clicks outside a referenced element.

eventsmodaldropdown

StrictOmit

typescript

A stricter version of Omit that only allows valid keys.

typesutilityobject

DeepPartial

typescript

Make all properties in an object optional recursively.

typesutilityrecursive

ExtractRouteParams

typescript

Extract dynamic route parameters from a path string.

typesroutinginference

cn (classnames)

typescript

Merge Tailwind classes with clsx and tailwind-merge.

utilityclassnamesmerge

Focus Ring Pattern

css

Accessible focus ring that works in light and dark mode.

accessibilityfocusa11y

Dark Mode Prose

tsx

Typography plugin with proper dark mode support.

typographydark-modeprose

Fade In Variants

typescript

Reusable fade-in animation variants for Framer Motion.

framer-motionfadeentrance

Spring Configurations

typescript

Preset spring physics for different animation feels.

framer-motionspringphysics

Scroll Reveal Hook

typescript

Trigger animations when elements enter viewport using Intersection Observer.

scrollintersection-observerreveal

Metadata Factory

typescript

Create consistent metadata with defaults for SEO.

seometadataapp-router

API Response Helpers

typescript

Consistent API responses for Route Handlers.

apiroute-handlersjson

Type-Safe Search Params

typescript

Parse and validate URL search parameters with Zod.

search-paramsvalidationzod

16 snippets