Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

How To: Get Started

Technologies Used

Lion Web Components aims to be future proof and use well-supported proven technology. The stack we have chosen should reflect this.

Checkout the documentation of our main stack.

  • lit - Building on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier.
  • modern-web - Guides, tools and libraries for modern web development.
  • open-wc - Open Web Components provides guides, tools and libraries for developing web components.

How to get started

Make sure you have npm, if you don't have it yet: get npm.

And create a repo, we suggest to use the generator from open-wc:

npm init @open-wc

Install lion packages

npm i @lion/<package-name>

Extend a Web Component

This is the main use case for lion. To import component classes, and extend them for your own design system's components.

import { css } from '@lion/core';
import { LionInput } from '@lion/input';

class MyInput extends LionInput {
  static get styles() {
    return [
        /* your styles here */
customElements.define('my-input', MyInput);

Use a JavaScript system

There's a couple of "systems" in lion which have a JavaScript API. Examples are localize, overlays, ajax, etc.

<script type="module">
  import { ajax } from '@lion/ajax';

  ajax.get('data.json').then(response => {
    // most likely you will use

Use a Web Component

You can also use the lion elements directly, although this is likely not a common use case.

<script type="module">
  import '@lion/input/lion-input.js';

<lion-input name="firstName" label="First name"></lion-input>