Skip to content

mozilla/lilypad

Folders and files

NameName
Last commit message
Last commit date

Latest commit

nickgratoNick Grato
and
Nick Grato
Jul 17, 2024
899ebd2 · Jul 17, 2024
Aug 11, 2022
Jan 3, 2023
Jul 17, 2024
Dec 22, 2022
Jul 15, 2022
Jul 15, 2022
Jul 12, 2023
Jul 15, 2022
Apr 2, 2024
Jul 17, 2024
Jul 21, 2022
Jul 15, 2022

Repository files navigation

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!

License

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