#web component

ChatGPT Model Selector is a Vanilla JavaScript Web Component that creates a ChatGPT-inspired model picker and reasoning effort slider on your webpage. When you click on the Advanced button, the component opens a popover with five discrete tiers (Light, Medium, High, Extra High, Ultra) and an advanced slider control with magnetic dragging and a confetti celebration. See it in…

Claude Model Selector is a Web Component that adds a Claude-inspired effort level picker to your web page. It presents six discrete levels through an animated slider control with magnetic dragging, spring snapping, and keyboard interaction. The component is ideal for AI agents, developer tools, and configuration panels that need a compact control for choosing processing depth, quality, intensity,…

Relative Time Element is a web component that formats ISO timestamps as localized dates, relative time text, or duration strings. It helps you display readable time values such as “5 minutes ago,” “in 2 days,” or “on Apr 1, 2030” directly from HTML markup. The library works as a browser-first web component and uses the native Intl.DateTimeFormat and Intl.RelativeTimeFormat APIs. It’s ideal for…

phantom-ui is a Web Component skeleton loader that measures your real DOM at runtime and generates animated shimmer placeholder blocks at the exact position of every leaf element. The library wraps any markup in a <phantom-ui> custom element. The loading attribute activates the shimmer overlay. Removing it reveals the actual content. Features Generates shimmer placeholders from real DOM…

show-when is a Web Component library that shows or hides HTML content based on URL, browser, language, media, CSS feature, and network conditions. You can use it to create conditional content blocks in edit previews, feature demos, responsive notes, offline messages, and documentation pages. The library registers two custom elements: <show-when> and <hide-when>. The first element displays content…

Animated Icons is an animated icon library that you can easily use as components in your React/Vue/Svelte/Solid/Web Component apps. It currently includes 3,640 icons total from three major SVG icon sets (Lucide, Heroicons, and Iconoir) and runs all animations through CSS transitions and keyframes. Features: Each icon accepts primaryColor and secondaryColor props or CSS custom properties for…

TouchFlip3D-Web is a vanilla JavaScript Web Component that flips HTML elements in 3D space in response to drag and touch gestures. It requires no external dependencies and uses the Shadow DOM to keep its internal styles completely isolated from the host page. Features: Touch gesture support: Responds to native touch events for smooth 3D rotation on mobile and tablet. Mouse drag support: Fully…

Pure Swipe Slider is a web component library that creates high-performance,  touch-enabled carousels using Web Components API, Pointer Events, and GPU-accelerated transforms. It ships as a custom element that works across React, Vue, Angular, and vanilla JavaScript projects. Features: Minimal Bundle Size: Ships at 3.5KB gzipped with zero runtime dependencies. Unified Input Handling: Processes…