The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

01 / 17

Two-Handle Price Filter From Real Inputs

Every shop has a two-handle price filter and no HTML element does it, so people reach for a slider library or fake the whole thing with divs — and throw away keyboard support on the way. Stack two real range inputs on one track instead. pointer-events: none lets a click fall straight through the invisible tracks, pointer-events: auto on the thumbs keeps each one grabbable, and that pair is the entire trick: arrow keys, Home/End, Tab focus and aria all still work. One fill div reads both values, each input clamps against the other so the handles cannot cross, and the higher one sits on top or its thumb goes unreachable at the far end.

cssaccessibilityui/uxformsjavascriptrange

02 / 17

Readable Labels with contrast-color()

Pass a background to contrast-color() and it hands back black or white, whichever stays readable on it. The four swatches and every step of the ramp below carry the same one-line declaration — no colour was paired by hand, and none was measured. The ramp is there to find the seam: somewhere along it the label flips, and the browser decides where.

cssaccessibilitycolorprogressive enhancementcontrast-color

03 / 17

Table Sort Header Stability

Prevents layout shifts in sortable table headers by reserving space for the sort icon using `opacity` instead of removing it from the DOM. Includes hover and active states for discoverability.

cssaccessibilityhovertablelayout shiftsortopacity

04 / 17

Radio Button Card Selection

This UI trick allows an entire card to act as a clickable target for a radio button, improving usability. It hides the native radio input and styles the card based on the `:checked` state of the input, all with pure HTML and CSS.

uxcssaccessibilityformradiolabel

05 / 17

Pure CSS Floating Label

An input field with a label that initially acts as the placeholder. When the field is focused or text is entered, the label smoothly floats up and shrinks, providing persistent context without JavaScript.

animationuxcssaccessibilityformstransition

06 / 17

Skeleton Loader with Shimmer

A skeleton loading effect that provides visual feedback to the user while content is loading, making the application feel faster. It features a dark card layout with gray placeholder blocks and a subtle animated gradient 'shimmer' that sweeps across them.

animationcssaccessibilitygradientloaderskeleton

07 / 17

Keyboard Command Palette with Roving Focus

A modal dialog-based command palette featuring a search input and a filterable list of actions. It supports keyboard navigation (arrows, Enter) with 'roving focus' and a global keyboard shortcut (⌘K or Ctrl+K) to activate, mimicking a powerful desktop app experience.

accessibilitydialogkeyboardcommand palettesearchfocus management

08 / 17

Animated SVG Checkbox

A custom-styled checkbox featuring an SVG checkmark that draws itself with a smooth stroke animation. It supports unchecked, checked, and indeterminate states while maintaining native accessibility.

animationcssaccessibilityformscheckboxsvg

09 / 17

Chip / Tag Input Field

An interactive input field that converts typed entries into visible, removable 'chips' upon pressing Enter. Chips are styled as rounded pills and can be individually dismissed by clicking an 'x' button or by pressing Backspace when the input field is empty. Includes accessibility for screen readers.

accessibilityinputjavascriptflexboxchipstags

10 / 17

Accessible Status Colors

This demo illustrates how to create accessible status indicators by toning down pure hues and combining color with clear text labels and icons. Colors are derived from HSL custom properties for backgrounds, borders, and text to ensure readability and semantic clarity.

accessibilitycolorui-designcss-variableshslstatus

11 / 17

Sliding Segmented Control with CSS Transform

A UI component with 'Day/Week/Month' tabs where an interactive pill slides smoothly behind the selected option, implemented using only CSS transform transitions driven by hidden radio inputs.

animationcssaccessibilityformssegmented-controlradios

12 / 17

Custom Scrollbar Styling

Customize the appearance of scrollbars using standard CSS properties and WebKit pseudo-elements to match your design system. This technique allows for control over scrollbar width, thumb color, and track color, ensuring visual consistency across browsers while maintaining usability.

cssaccessibilitystylingwebkitscrollbarcustomization