@mozilla/lilypad-ui NPM

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 } from '@mozilla/lilypad-ui';

function App() {
  return (
    <Button category="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!