emerald-ui

emerald-ui is a component library that works with React and will help you build web pages faster more efficiently. It follows the Emerald Visual Language but can be adjusted with your own theme.

                    .------------------------.
                    |    Thanks for using    |
     _         _    |       EMERALD UI       |
^~^~/o\_______/ \   /------------------------'
         _______/  /
        |_____
__  __________\
  | |_
  |___\

Check out live examples in Storybook or go to the docs

Installation

Notes:

1. Emerald UI has one peer dependency: react. You must have it installed in order for Emerald-UI to work completely.

2. Material Icons are used by components like Icon. You must import them, e.g. in your head tag: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Run npm i emerald-ui

To import the styles to your app:

import 'emerald-ui/lib/styles.css';

Additionally, append tm, ceb or ec to apply the respective theme:

import 'emerald-ui/lib/styles-ceb.css';

Note: By importing styles.css the default Emerald theme will be applied.

To import components with a single import:

import { ComponentName1, ComponentName2 } from 'emerald-ui';

To import individual components:

import ComponentName from 'emerald-ui/lib/ComponentName';

For more help on how to use the components you can go to the docs.