Images haven’t loaded yet.

Please exit printing, wait for images to load, and try to

9 Web Components UI Libraries You
print again.

Should Know in 2019

Looking for framework-agnostic web components?
Take a look

Jonathan Saring Follow

Apr 18 · 6 min read

Image from codeburst by @webrealizer

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.
 Share reusable code components as a team ·
Bit

Easily share reusable components between

projects and applications to build faster as a tea…
bit.dev

Example UI animation-components collection with Bit

With 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 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-components/material-components-
web-components

Material Web Components — Material Design

implemented as Web Components …
github.com

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

PolymerElements has 30 repositories available.

Follow their code on GitHub.
github.com

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

vaadin/vaadin

An evolving set of open source web components

for building mobile and desktop web application…
github.com

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

wiredjs/wired-elements

Collection of elements that appear hand drawn.

Great for wireframes. - wiredjs/wired-elements
github.com

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… :)

elix/elix

High-quality, customizable web components for

common user interface patterns — elix/elix
github.com

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
</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-elements

Web component extensions to the standard

element. - github/time-elements
github.com

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.

SAP/ui5-webcomponents

UI5 Web Components - the enterprise- avored

sugar on top of native APIs! Build SAP Fiori user…
github.com

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.

pattern y/pattern y-elements

PatternFly Elements: A set of UI web components.

Contribute to pattern y/pattern y-elements…
github.com

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.

webcomponents.org

Justin Willis from Ionic joins us this week to talk

about hybrid app development with Ionic and…
www.webcomponents.org

Honorable mentions

HTML Elements

HTML Custom Elements Framework. HTML

Elements has 18 repositories available. Follow th…
github.com

GitHub(web-components)

How people build software. GitHub has 30

repositories available. Follow their code on…
github.com

michaelauderer/stencil-styled-components

Small library to bring the concept of styled-

components to StencilJS. - michaelauderer/stenc…
github.com

obetomuniz/awesome-webcomponents

A curated list of awesome Web Components tools,

articles and resources. - obetomuniz/awesome-…
github.com

mateusortiz/webcomponents-the-right-way

This is a guide intended to introduce to Web

Components. Everyone can contribute here! …
github.com

nepaul/awesome-web-components

A curated list of awesome web components.

Contribute to nepaul/awesome-web-component…
github.com

mappmechanic/awesome-stenciljs

List of Awesome Web Components Built with

StencilJS - mappmechanic/awesome-stenciljs
github.com

RIAEvangelist/awesome-webcomponents

Contribute to RIAEvangelist/awesome-
webcomponents development by creating an…
 github.com

webcomponents.org

Justin Willis from Ionic joins us this week to talk

about hybrid app development with Ionic and…
www.webcomponents.org

. . .

Learn more

11 React UI Component Libraries you Should

Know in 2019

11 React component libraries with great

components for building your next app’s UI…
blog.bitsrc.io

11 Vue UI Component Libraries You Should

Know In 2019

11 Vue.js component libraries tools and

frameworks for your next app in 2019.
blog.bitsrc.io

11 Angular Component Libraries You Should

Know In 2019

11 popular Angular component libraries for

building your Angular app in 2019.
blog.bitsrc.io