Lightweight Accessible Pagination Web Component – wc-pagination
Create compact pagination controls with first and last navigation, keyboard support, ARIA context, and host-level CSS customization.
JavaScript & CSS Web Component
Relative Time Element for Time Ago Text
Format ISO timestamps as localized relative time text with a custom HTML element that auto-updates in the browser.
Address Search & Location Picker Web Component with Maps – wc-location-field
Create a location picker with Nominatim or Google Maps, optional Leaflet maps, draggable pins, and a location-change event.
Auto-Generated Skeleton Loader Web Component for Any Framework – phantom-ui
Add structure-aware skeleton loading states to any UI by wrapping it in the phantom-ui web component. Works in React, Vue, Svelte, Angular, Solid, Qwik, and Vanilla JavaScript with no adapters.
status-indicator: Animated Status Picker Web Component for Workflow Steps
Create an animated workflow status picker with selectable dots, labeled pills, pointer scrubbing, keyboard controls, and custom states.
Canvas UI: Fluid, Glass, and Shader Effects Over Live HTML
Add fluid, glass, particle, glitch, and 3D effects over live HTML with Canvas UI components for 6 stacks: React, Vanilla JS, Vue, and more.
Animated AI Model & Reasoning Effort Selector – Model Picker
Create a compact AI model picker with three model rows, five effort levels, an Ultra lever, and a native change event.
AI Model Effort Selector with Magnetic Step Slider – ChatGPT Model Selector
Create an AI reasoning effort control for AI chatbot with five selectable levels and a reusable vanilla JavaScript Web Component.
Claude-Style Effort Slider Web Component – Claude Model Selector
Add an effort picker to any dashboard with Claude Model Selector, a custom element with magnetic drag, level labels, and an animated top tier.
Custom Media Player Controls Using Web Components – media-chrome
The media-chrome provides a set of web components to create custom media controls for Videos, Audios, and Live Streams.