Blackpurl Web Components

A collection of Material Design 2 Web Components extending Material Web Components and Shoelace libraries to help us build a collection of web components. There are many libraries out there that do Material Design well for React, Angular, Vue and Svelte, however we felt there wasn't a library that was lean enough and feature rich enough for our needs, so we decided to compose, extend and build from scratch web components built on Lit web component tooling.

Usage

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@blackpurl/web-components@0.1.1-beta.5/dist/index.js"
></script>

<bp-button raised>CLICK ME</bp-button>

Documentation

You can find the documentation of these components here on our documentation site or running npm run start after you have installed @blackpurl/web-components locally.

Source Code

We will be providing full uncompiled source code shortly and definitely before we exit beta after we have done a full and thorough audit of the source code.

Foundation

Components are built with LitElement, which helps us generate compliant web components. We have also extended some MWC and Shoelace components from the source level and also composed some of those web components within our own to help us build our library faster.

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build