aybolit | Vaadin

Lightweight web components library built with LitElement.

Aybolit Core

Aybolit Core is a set of base classes built with LitElement. Each class can be extended and registered as custom element.


Aybolit Core is meant to be used as a base for creating themable web components. It does not provide any CSS except for certain "normalize" styles (especially, hidden attribute is forced to use display: none !important for all components).


Aybolit Core is available as npm package:

# with npm
npm i @aybolit/core --save

# with yarn
yarn add @aybolit/core


  • [x] Button
  • [x] Checkbox
  • [x] Progress
  • [x] Range
  • [x] Switch

Creating Components

You can extend a component base class like this:

import { ButtonElement } from '@aybolit/core';
import { css } from 'lit-element';

class CustomButton extends ButtonElement {
  static get styles() {
    return [
      /* core styles */
      /* your own CSS */
        .button {
          color: var(--my-button-color, #111);

customElements.define('custom-button', CustomButton);


Link to this version
ImportedReleased 12 March 2019MIT License
Framework Support
Browser Independent
Install with
npm install @aybolit/core"@0.1.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.0


  • lit-element#^2.0.1
  • lit-html#^1.0.0