Dependencies	Size	Downloads

Zoo Web Components

• Set of extendable, reusable web-components which can be used in any modern UI framework (or without any).
• 0 dependencies, built with Vanilla JS
• Doesn't hide native HTML elements behind multiple levels of abstraction but rather enhances them via composition.

Installation

To use this library install it by running:

npm i @zooplus/zoo-web-components --save

and import the library in your main module/component/index.html:

import '@zooplus/zoo-web-components';

The final package includes two types of bundles:

• ESM version (might trigger FOUC) - zoo-web-components-esm.js
• IIFE version which will block HTML rendering until bundle finishes loading (since size is small this should not be a problem) - zoo-web-components.js

Remember to add CSS custom properties to your main styles file:

:root {
	--primary-mid: #3C9700;
	--primary-light: #66B100;
	--primary-dark: #286400;
	--primary-ultralight: #EBF4E5;
	--secondary-mid: #FF6200;
	--secondary-light: #F80;
	--secondary-dark: #CC4E00;
	--info-ultralight: #ECF5FA;
	--info-mid: #459FD0;
	--warning-ultralight: #FDE8E9;
	--warning-mid: #ED1C24;
}

Examples integrating with various frameworks

• VueJS
• Angular
• React

Documentation

Landing page is available here: https://zooplus.github.io/zoo-web-components
Documentation page is here: https://zooplus.github.io/zoo-web-components-docs

Note

This library relies on attributes and/or slots. Usage of properties is not supported for simplicity.