Custom Elements

A list of my Custom Elements (Web Components) and some useful links with related material.

Components

<alert-element>

A custom HTML element for displaying dismissible alerts and toast notifications.
repository • npm • demo

<a-tab-group>

A custom element to create a group of tabs and tab panels.
repository • npm • demo

<capture-photo>

A custom element to capture a photo in the browser implementing the MediaDevices.getUserMedia() of the MediaDevices interface.
repository • npm • demo

<clipboard-copy>

A custom element that implements the Clipboard API to copy text content from elements or input values to the clipboard.
repository • npm • demo

<eye-dropper>

A custom element that implements the EyeDropper API that allows the user to select colors from the screen.
repository • npm • demo

<files-dropzone>

A custom element that creates a drag and drop zone for files.
repository • npm • demo

<lorem-ipsum>

A custom element that generates "Lorem Ipsum" placeholder text.
repository • npm • demo

<modal-element>

A custom element to create a modal, using the native <dialog> element under the hood.
repository • npm • demo

<mutation-observer>

A custom element that offers a declarative interface to the MutationObserver API.
repository • npm • demo

<picture-in-picture>

A custom element that offers a declarative interface to the Picture-in-Picture API.
repository • npm • demo

<resize-observer>

A custom element that offers a declarative interface to the ResizeObserver API.
repository • npm • demo

<scroll-top>

A custom element that scrolls to the top of the page using the IntersectionObserver API.
repository • npm • demo

<skeleton-placeholder>

A custom element that acts as a placeholder to indicate that some content will eventually be rendered.
repository • npm • demo

<theme-toggle>

A custom element that allows you to toggle between light, dark and system theme.
repository • npm • demo

<web-share>

A custom element that implements the Web Share API to share user-defined data.
repository • npm • demo

Learning material

Specs

Custom elements

web.dev

MDN

CSS Tricks

javascript.info

dev.to

Custom Forms with Web Components and "ElementInternals

Medium

About Web Components

Articles

How to Publish Web Components to NPM

Misc (Tools, guides, etc)

Third party components

Design systems

shoelace - A forward-thinking library of web components
Carbon Design System - IBM’s open source design system
Fluent UI - Microsoft's Fluent UI Web Components
Lion - Fundamental white label web components for building your design system
Vaadin - Vaadin Web Components
Material - The official web component set for Material 3

Standalone components

details-utils - Add enhancements to details elements.
html-include - Easily include external HTML into your pages.
seven-minute-tabs - Tabs web component.
video-radio-star - A lightweight web component helper for HTML5 videos.
github-elements - GitHub's Web Component collection.
howto-components - A collection of web components for educational purposes with a special focus on accessibility, performance and progressive enhancement.
two-up - A web component to compare two DOM elements.
pinch-zoom - A web component for pinch zooming DOM elements.
dark-mode-toggle - A custom element that allows you to easily put a Dark Mode toggle or switch on your site.
rhino-editor - To create a grab and go WYSIWYG editing experience that can hook into Ruby on Rails ActionText backend.
emoji-picker-element - A lightweight emoji picker, distributed as a web component.
codemirror-elements - A set of CodeMirror custom HTML elements.
table-show - A small web component for responsive <table> elements.
browser-window - A small themed zero-dependency Web Component for demos with a fake browser window (Safari-esque).
squirm-inal - The squirminal is a fake antique terminal web component.
last-icon - An icon library using custom elements.
ppp-price - A small structural-only zero-dependency Web Component to show Parity Purchasing Power normalized prices.
sparkly-text - A small zero-dependency Web Component to add sparkles to text fragments.
dia-date-picker - A lightweight framework agnostic date picker and calendar component.
is-land - A framework independent partial hydration islands architecture implementation.
img-comparison-slider - A slider component for comparing images.
image-compare - A web component for comparing two images using a slider.
qr-code - A customizable, animate-able, SVG-based QR code custom element.
snow-fall - A web component to add snow to your web site (or to an element on your web site).
click-spark - A web component that adds a little spark to your clicks.
carouscroll - A web component to add next/previous buttons to a horizontal scrollable container.
hypercard - Web component to add a three-dimensional hover effect to a card.
Cally - Small, feature-rich of calendar components.
link-peek - A Web Component to unfurl regular links into rich previews.
wired-elements - Collection of custom elements that appear hand drawn.
code-pen - A Web Component for opening code blocks in CodePen.
light-pen - A lightweight codepen implementation using web components.
playground-elements - A set of components for creating interactive editable coding environments on the web.
i-html - A web component that allows for dynamically importing html inline.
inspector-elements - Web components for visually inspecting objects.
model-viewer - Display interactive 3D models on the web and in AR.
stacked-alpha-video - A web component for rendering video with transparency, efficiently.
code-bubble - A web component that provides inline code examples that link out to StackBlitz sandboxes.
pie-chart - Custom elements to draw pie charts.
baseline-status - A widget displaying Baseline status of a web feature based on https://github.com/web-platform-dx/web-features data.
audio-recorder - Audio Recorder Web Component.
form-element-mixin - Mixin to associate a Custom Element with forms.
custom-element - A base class for Web Components (Custom Elements) which provides simple data binding.
form-participation - Helper, mixins, tools, and more for supporting your custom elements in participating in an ancestor form.
pixel-canvas - Custom element that applies a shimmering pixel background on element hover.
media-chrome - Custom elements for making audio and video player controls that look great in your website or app.
wc-dox - Web component API documentation generator.
qr-element - Web component to generate QR codes from a string input.
line-numbers - Web component that adds unencumbered line numbers to elements like <pre> and <textarea>.
syntax-highlight - Syntax Highlighting using the CSS Custom Highlight API.
range-slider - A cross browser customizable and accessible web component.
wpt-embed - Scripts for downloading WebPageTest.org traces and Web Components for displaying them in your own pages.

georapbox/custom-elements

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Error
Looks like something went wrong!

Packages