# emerald-ui

<p style="text-align: center;">
  <img src="https://github.com/cebroker/emerald-ui/blob/master/coverage.svg" alt="coverage" />
  <a href="https://travis-ci.com/cebroker/emerald-ui">
    <img src="https://travis-ci.com/cebroker/emerald-ui.svg?token=yyQwGcijsUPZgyLphQWe&branch=master" alt="build status" />
  </a>
  <a href="https://badge.fury.io/js/emerald-ui">
    <img src="https://img.shields.io/npm/v/emerald-ui.svg?color=blue" alt="npm version" />
  </a>
  <a href="https://badge.fury.io/js/emerald-ui">
    <img src="https://img.shields.io/npm/dm/emerald-ui.svg?color=yellowgreen" alt="downloads" />
  </a>
  <img src="https://img.shields.io/npm/dependency-version/emerald-ui/peer/react.svg?color=orange" alt="npm peer dependency version" />
</p>
<p style="text-align: center;">  
  <img src="https://img.shields.io/npm/collaborators/emerald-ui.svg?color=blueviolet" alt="collaborators" />
  <img src="https://img.shields.io/npm/l/emerald-ui.svg?color=important" alt="license" />
  <a href="https://cebroker.github.io/emerald-ui/storybook">
    <img src="https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg" alt="storybook" />
  </a>
</p>

#

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](https://storybook-emerald.condorlabs.io) or go to the [docs](https://docs-emerald.condorlabs.io)

# 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](https://docs-emerald.condorlabs.io).