Polymer UI components of the CLAB Pattern Library

polymer, components, ui, pattern, library, contactlab, clab, webcomponents
bower install clab-ui-components


⚠️ Deprecated

This package is deprecated in favor of our new design system.


  • no new developments will be made;
  • all issue will be closed with the tag won't fix;
  • no new pull-requests will be accepted (except for bug fixes - see below);
  • only blocking bugs will be fixed, if necessary.

Contactlab Pattern Library UI Components


Polymer 1.x version (stable)

$ npm install contactlab-ui-components@1.4

# --- or ----

$ yarn add contactlab-ui-components@1.4

Polymer 3.x (preview)

$ npm install contactlab-ui-components@2.0

# --- or ----

$ yarn add contactlab-ui-components@2.0

Legacy version on Bower

$ bower install clab-ui-components#1.3.7

Shady DOM & Global CSS

WARNING: both versions of the Contactlab Pattern Library make use of the Shady DOM instead of the Shadow DOM and styles are applied via a global CSS file, so after the package installation you should move (manually or with an automation tool) the ./_assets/css/contactlab-pattern.min.css file in a distributable folder and link to it.


To start a development server on localhost:3000 plus Webpack in watch mode, you can use the command

$ npm run dev

To run the unit tests written with AVA

$ npm test

Please refer to to better understand how to develop and integrate changes on this repo.

How to use

Apply the styles

In the head of your HTML document, copy and paste the following CDN links:


Use the components

Import all of the components included with the Contactlab Pattern Library. More details are available in the official documentation:

import 'contactlab-ui-components';

Git branching policies

Any feature/bug fixing/refactor must be developed on a feature branch derived from the master branch and integrate the changes through a pull request in order to have a code review.


Released under the Apache 2.0 license.