Take a lookJonathan SaringBlockedUnblockFollowFollowingApr 18Image from codeburst by @webrealizerWhen I began searching for web components libraries to compose this post, I initially thought “Where can I find a cool lit-html lib?” This is because I’ve yet to grok the full potential of web components.
This is a framework/library way of thinking.
It’s like asking, I want a cool html library.
All web components are interoperable by definition to play well with others.
Custom components and widgets that build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
This is also why tools like Bit (GitHub) are a powerful combination with Web components, as you can easily organize a collection of reusable components your team can share, develop and use across projects and applications.
Share reusable code components as a team · BitEasily share reusable components between projects and applications to build faster as a team.
Collaborate to develop…bit.
devExample UI animation-components collection with BitWith all the chatter around web components, Stencil, Svelte, Lit HTML etc, I decided to take a look at what web component libraries are available around the web today to get a head start on the future.
Feel free to suggest more!1.
Material components webUsually, the title “Material” positions a UI component library right at the top of the star-count and downloads count.
Google’s Material-components-web library is the web-component version of the Material-UI library.
While still a work in progress, these Web Components can be incorporated into a wide range of contexts and frameworks.
Definitely keep track of this one.
material-components/material-components-web-componentsMaterial Web Components — Material Design implemented as Web Components …github.
com2.
Polymer elementsGoogle’s Polymer library lets you build encapsulated, reusable Web Components that work like standard HTML elements with an experience as simple as importing and using any other HTML element.
Polymer elements is a GitHub organization containing over 100 reusable Polymer components as standalone repositories you can browse and use off-the-shelf.
Example:<!– Import a component –><script src="https://unpkg.
com/@polymer/paper-checkbox@next/paper-checkbox.
js?module" type="module" ></script><!– Use it like any other HTML element –><paper-checkbox>Web Components!</paper-checkbox>PolymerElementsPolymerElements has 30 repositories available.
Follow their code on GitHub.
github.
comThought: Maintain all components in one repo and make all of them individually available to find and use in one Bit collection?3.
Vaadin web componentsI think this one is promising.
It’s a rather new library containing a set of nearly 30 evolving open source web components for building the UI of mobile and desktop web applications across modern browsers.
Development is active and I’ll definitely keep track of this library.
Check it out.
vaadin/vaadinAn evolving set of open source web components for building mobile and desktop web applications in modern browsers.
…github.
com4.
Wired elementsWired elements is a 7K stars collection of elements that appear hand drawn.
Built for wireframes, the elements are drawn so that no two renderings will be exactly the same — just like two separate hand-drawn shapes.
Useful? maybe.
Awesome? definitely 🙂 Play with them online here, even with React and Vue.
wiredjs/wired-elementsCollection of elements that appear hand drawn.
Great for wireframes.
– wiredjs/wired-elementsgithub.
com5.
ElixElix is a community-driven reusable set of customizable web components for common user interface patterns.
To ensure high-quality standards the components are measured against the Gold Standard checklist for web components, which uses the built-in HTML elements as the quality bar.
I’m really excited about this one, and they’re looking for contributors… :)elix/elixHigh-quality, customizable web components for common user interface patterns — elix/elixgithub.
com6.
Time elements<local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm</local-time>–<local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30</local-time>This rather old 1.
5K stars library is basically a component that provides custom subtypes of the standard HTML <time> element.
By formatting a timestamp as a localized string or as relative text that auto-updates in the user’s browser, you can create custom extensions to use anywhere.
Nice.
github/time-elementsWeb component extensions to the standard element.
– github/time-elementsgithub.
com7.
UI5-webcomponentsBuilt by SAP’s UI5, this library is a set of lightweight, reusable and independent UI elements.
The components are not however built on top of UI5, but are standalone elements.
You can use across frameworks and apps.
The design of the components is aligned to the SAP Fiori Design Guidelines and incorporates the Fiori 3 design.
Check out the live playground and APIs.
SAP/ui5-webcomponentsUI5 Web Components – the enterprise-flavored sugar on top of native APIs!.Build SAP Fiori user interfaces with the…github.
com8.
PatternflyRun demo:git clone git@github.
com:patternfly/patternfly-elements.
gitcd patternfly-elementsnpm install # this will take a while due to lerna bootstrapnpm run storybookPatternFly Elements is a collection of nearly 20 flexible and lightweight Web Components, and the tools to build them.
PatternFly Elements are lightweight in size and boilerplating (which is pretty much the web component standard), work in React, Vue, Angular, vanilla JS, anywhere HTML elements are used.
patternfly/patternfly-elementsPatternFly Elements: A set of UI web components.
Contribute to patternfly/patternfly-elements development by creating…github.
com9.
Web components orgThis isn’t a library, but rather Google’s web component discovery portal built around Polymer elements and friends.
I’m listing it here since it’s a useful way to update on new web components from the Polymer team and provides some useful resources to read when starting with web components.
webcomponents.
orgJustin Willis from Ionic joins us this week to talk about hybrid app development with Ionic and some amazing work they…www.
webcomponents.
orgHonorable mentionsHTML ElementsHTML Custom Elements Framework.
HTML Elements has 18 repositories available.
Follow their code on GitHub.
github.
comGitHub(web-components)How people build software.
GitHub has 30 repositories available.
Follow their code on GitHub.
github.
commichaelauderer/stencil-styled-componentsSmall library to bring the concept of styled-components to StencilJS.
– michaelauderer/stencil-styled-componentsgithub.
comobetomuniz/awesome-webcomponentsA curated list of awesome Web Components tools, articles and resources.
– obetomuniz/awesome-webcomponentsgithub.
commateusortiz/webcomponents-the-right-wayThis is a guide intended to introduce to Web Components.
Everyone can contribute here! …github.
comnepaul/awesome-web-componentsA curated list of awesome web components.
Contribute to nepaul/awesome-web-components development by creating an…github.
commappmechanic/awesome-stenciljsList of Awesome Web Components Built with StencilJS – mappmechanic/awesome-stenciljsgithub.
comRIAEvangelist/awesome-webcomponentsContribute to RIAEvangelist/awesome-webcomponents development by creating an account on GitHub.
github.
comwebcomponents.
orgJustin Willis from Ionic joins us this week to talk about hybrid app development with Ionic and some amazing work they…www.
webcomponents.
orgLearn more11 React UI Component Libraries you Should Know in 201911 React component libraries with great components for building your next app’s UI interface in 2019.
blog.
bitsrc.
io11 Vue UI Component Libraries You Should Know In 201911 Vue.
js component libraries tools and frameworks for your next app in 2019.
blog.
bitsrc.
io11 Angular Component Libraries You Should Know In 201911 popular Angular component libraries for building your Angular app in 2019.
blog.
bitsrc.
io.