▍Snippets
Snippets
Copy-paste patterns — each one explained, so you know what you're pasting.
CSS
Responsive Container
A centred, width-limited wrapper with side gutters in two lines of CSS — no media queries needed.
Live previewlayoutmin()custom properties
CSS Gradient Button
A gradient button with a smooth hover shift, a visible keyboard focus ring and reduced-motion support — pure CSS.
Live previewbuttongradienttransition
Clamp-based Fluid Typography
Font sizes that grow smoothly with the screen between a minimum and a maximum — without breaking browser zoom.
Live previewtypographyclamp()responsive
HTML
JavaScript
Debounce Function
Wait until the user stops typing (or resizing, or scrolling) before doing expensive work — with a cancel method.
Live previewperformanceeventsclosures
Dark Mode Toggle
Follow the system colour scheme by default, let people override it, remember their choice, and avoid the white flash on load.
Live previewthemeprefers-color-schemelocalStorage
Utilities
Copy-to-Clipboard Helper
Copy text with the async Clipboard API, fall back gracefully, and tell the user (and screen readers) whether it worked.
Live previewclipboardasyncfallback
Fetch with Timeout (AbortController)
Stop waiting for slow requests: abort fetch() after a time limit, support a cancel button, and tell the two apart.
fetchAbortControllertimeout
Animation
React
useLocalStorage Hook (React)
A drop-in replacement for useState that remembers its value across reloads and stays in sync between tabs.
hookscustom hooklocalStorage
Accessible React Modal
A modal dialog built on the native <dialog> element: focus moves in and back out, Escape closes it, and the page behind is inert.
dialogfocus managementa11y
TypeScript
Accessibility
Visually-Hidden (sr-only) Utility
Hide text from the screen while keeping it readable by screen readers — for icon buttons, extra link context and live messages.
Live previewscreen readersr-onlya11y
Skip Link
Let keyboard users jump past the header and navigation straight to the main content with their first Tab press.
Live previewkeyboardnavigationa11y