9 Web Components UI Libraries You Should Know in 2019

When 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.

With all the chatter around web components, StencilSvelteLit 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 web

Usually, 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 Web Components — Material Design implemented as Web Components …

2. Polymer elements

Google’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>
PolymerElements has 30 repositories available. Follow their code on GitHub.
  • Thought: Maintain all components in one repo and make all of them individually available to find and use in one Bit collection?

3. Vaadin web components

I 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.

An evolving set of open source web components for building mobile and desktop web applications in modern browsers. …

4. Wired elements

Wired components in a Bit collection

Wired 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.

Collection of elements that appear hand drawn. Great for wireframes. – wiredjs/wired-elements
wired-elements by wiredjs · Bit
Collection of elements that appear hand drawn. Great for wireframes. – 19 Javascript components. Examples…

5. Elix

Elix 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… 🙂

High-quality, customizable web components for common user interface patterns — elix/elix

6. 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

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.

Web component extensions to the standard element. – github/time-elements

7. UI5-webcomponents

Built 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.

UI5 Web Components – the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the…

8. Patternfly

Run demo:

git clone git@github.com:patternfly/patternfly-elements.git
cd patternfly-elements
npm install # this will take a while due to lerna bootstrap
npm run storybook

PatternFly 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 Elements: A set of UI web components. Contribute to patternfly/patternfly-elements development by creating…

9. Web components org

This 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.

Justin Willis from Ionic joins us this week to talk about hybrid app development with Ionic and some amazing work they…

About the author

Sahil Dhamija

I'm Sahil Dhamija, a full stack developer and an aspiring person with an obsession of all things related to tech and business, and this blog is created to help people learn about tech and business.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *