https://github.com/davatron5000/awesome-standalones
A curated list of awesome framework-agnostic standalone web components
https://github.com/davatron5000/awesome-standalones
List: awesome-standalones
Last synced: 17 days ago
JSON representation
A curated list of awesome framework-agnostic standalone web components
- Host: GitHub
- URL: https://github.com/davatron5000/awesome-standalones
- Owner: davatron5000
- Created: 2019-12-14T18:21:32.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-03-04T16:33:28.000Z (about 2 months ago)
- Last Synced: 2025-04-01T22:53:24.911Z (24 days ago)
- Size: 83 KB
- Stars: 1,406
- Watchers: 32
- Forks: 57
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Contributing: contributing.md
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
- fucking-lists - awesome-standalones - agnostic standalone web components. (Technical / awesome-*)
- awesome-web-components - Awesome Standalones
- awesome-list - awesome-standalones - agnostic standalone web components | davatron5000 | 731 | (Others)
- lists - awesome-standalones - agnostic standalone web components. (Technical / awesome-*)
- ultimate-awesome - awesome-standalones - A curated list of awesome framework-agnostic standalone web components. (Other Lists / Julia Lists)
README
# Awesome Standalones [](https://awesome.re)
> A curated list of **66** awesome framework-agnostic standalone web components
## Element Extensions
Web Components that extend or add to an existing semantic element.
- [``](https://codepen.io/levimcg/pen/ZEYapRY)
- [``](https://github.com/andrico1234/autosize-textarea)
- [``](https://github.com/github/details-dialog-element)
- [``](https://github.com/github/details-menu-element)
- [``](https://github.com/zachleat/details-utils)
- [``](https://darn.es/heading-anchors-web-component)
- [``](https://image-compare-component.netlify.app)
- [``](https://darn.es/link-peek-web-component)
- [``](https://github.com/rg-wood/link-preview)
- [``](https://darn.es/play-button-web-component)
- [``](https://darn.es/random-source-web-component)
- [``](https://darn.es/share-button-web-component)
- [``](https://stephen.band/slide-show/)
- [``](https://github.com/github/tab-container-element)
- [``](https://github.com/github/task-lists-element)## `
Github has a bundle of elements that extend the native `
- [``](https://github.com/github/time-elements)
- [``](https://github.com/github/time-elements)
- [``](https://github.com/github/time-elements)## Form Elements
Web Components that are, or can be used with, form submissions.
- [``](https://github.com/lamplightdev/aeon)
- [``](https://github.com/RamseyInHouse/feedback-component)
- [``](https://github.com/GoogleChromeLabs/file-drop)
- [``](https://github.com/GoogleChromeLabs/input-knob)
- [``](https://github.com/andreruffert/range-slider-element)
- [``](https://github.com/sunnywalker/show-password-toggle)
- [``](https://codepen.io/nonsalant/pen/OPJLJoL)
- [``](https://jquery.github.io/typesense-minibar/demo/)## Utility Elements
Useful little Web Components.
- [``](https://oddbird.github.io/browser-support/)
- [``](https://github.com/github/clipboard-copy-element)
- [``](https://darn.es/duration-property-web-component)
- [``](https://github.com/sakamies/filter-element)
- [``](https://darn.es/is-playing-web-component)
- [``](https://darn.es/live-filter-web-component)
- [``](https://github.com/knowler/log-form-element)
- [``](https://codepen.io/nonsalant/pen/yyBmeBp)
- [``](https://darn.es/sample-input-web-component)
- [``](https://slide-deck.netlify.app/)
- [``](https://darn.es/storage-form-web-component)
- [``](https://jamesbasoo.com/visual-viewport/)## Media Elements
Web Components that are, or can be used with, media of any kind.
- [``](https://darn.es/bluesky-post-web-component)
- [``](https://darn.es/bluesky-replies-web-component)
- [``](https://darn.es/code-pen-web-component)
- [``](https://github.com/paulirish/lite-youtube-embed)
- [``](https://darn.es/mastodon-post-web-component)
- [``](https://github.com/GoogleWebComponents/model-viewer)
- [``](https://github.com/GoogleChromeLabs/pinch-zoom)
- [``](https://mirisuzanne.github.io/track-list/demo.html)
- [``](https://github.com/GoogleChromeLabs/two-up)
- [``](https://youtube-player.alanwsmith.com/)## Design Elements
Web Components that help with visual presentation.
- [``](https://github.com/GoogleChromeLabs/dark-mode-toggle)
- [``](https://github.com/compmeist/easy-row)
- [``](https://github.com/lekoala/flex-grid)
- [``](https://github.com/sakamies/conditional-elements)
- [``](https://github.com/lekoala/last-icon)
- [``](https://github.com/ingmarh/scroll-shadow-element)## Custom Elements
Frequently-solved problems in web component form.
- [``](https://github.com/mattdsteele/bt-device)
- [``](https://www.npmjs.com/package//html-include-element)
- [``](https://github.com/justinfagnani/katex-elements)
- [``](https://github.com/andrico1234/no-spoilers)
- [``](https://github.com/Noleli/place-holder)
- [``](https://github.com/pwa-builder/pwa-install)## Novelty Elements
- [``](https://wbrowar.com/web-components/admin-bar-component)
- [``](https://justinfagnani.github.io/chessboard-element/)
- [``](https://darn.es/contrast-details-web-component)
- [``](https://noahliebman.net/projects/plucky-underline/)
- [``](https://github.com/erikkroes/spacer-gif)
- [``](https://github.com/grislyeye/vellum-dice)## Contribute
Contributions welcome! Read the [contribution guidelines](contributing.md) first.
Thanks @simevidas for prompting the idea.
## License
[](https://creativecommons.org/publicdomain/zero/1.0)
To the extent possible under law, Dave Rupert has waived all copyright and
related or neighboring rights to this work.