9 Web Components UI Libraries You Should Know in 2021
Looking for framework-agnostic web components? Take a look
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.
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!
Tip: Build your own library! Today it’s easier than ever with tools like bit.dev that let you dynamically collect existing UI components from your apps, and share them across projects as a team.
Learn 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.
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.
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.
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… :)
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.
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.
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 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.
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.
Honorable mentions
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
