Package Exports

@mozilla/lilypad-ui
@mozilla/lilypad-ui/dist/cjs/index.js
@mozilla/lilypad-ui/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mozilla/lilypad-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

lilypad

React Component Library

Alt text

Installation

npm:

npm install @mozilla/lilypad-ui

yarn:

yarn add @mozilla/lilypad-ui

Getting started with Lilypad

Here is an example of a basic app using Lilypad's Button component:

import * as React from 'react';
import { Button, ButtonCategoriesE } from '@mozilla/lilypad-ui';

function App() {
  return (
    <Button
      category={ButtonCategoriesE.PRIMARY_SOLID}
      icon="alert-circle"
      text="click me!!"
    />
  );
}

Storybook

click here!

Adding Styles

@import '@mozilla/lilypad-ui/dist/styles/theme.scss';

  // Set to Light Theme,
  // Note: if a "data-theme" is not set on <main> it will default the "light" theme
 <main data-theme="light"></main>

 // Set to Dark Theme
 <main data-theme="dark"></main>

 // Get theme from users settings "dark" or "light"
 <main data-theme={themeFromUserSettings}></main>

This will also let you access all of the great utility classes here utility.scss.

Feel free to override these CSS variables with your own colors!

License

This project is licensed under the terms of the Mozilla Public License 2.0.