# emerald-ui

> Emerald React UI Framework

Latest version **3.4.2** (published 2024-05-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install emerald-ui
pnpm add emerald-ui
yarn add emerald-ui
bun add emerald-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.4.2 |
| Published | 2024-05-23 |
| First published | 2017-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 15.14.0 |
| Dependencies | 9 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Condor Labs |
| Maintainers | jorgesanes, jhonsalcedog |
| Keywords | React, UI, Framework, Emerald |

## Links

- npm: https://www.npmjs.com/package/emerald-ui
- Repository: https://github.com/cebroker/emerald-ui
- Homepage: https://github.com/cebroker/emerald-ui#readme
- Issues: https://github.com/cebroker/emerald-ui/issues
- npm.io page: https://npm.io/package/emerald-ui

## Dependencies (9)

- [sass](https://npm.io/package/sass.md) 1.54.9
- [yarn](https://npm.io/package/yarn.md) ^1.22.17
- [date-fns](https://npm.io/package/date-fns.md) 2.15.0
- [classnames](https://npm.io/package/classnames.md) 2.2.5
- [prop-types](https://npm.io/package/prop-types.md) 15.6.0
- [react-dropzone](https://npm.io/package/react-dropzone.md) 10.1.7
- [react-datepicker](https://npm.io/package/react-datepicker.md) 3.1.3
- [react-prop-types](https://npm.io/package/react-prop-types.md) 0.4.0
- [react-stripe-elements](https://npm.io/package/react-stripe-elements.md) 2.0.1

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
- [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads

## Recent versions

- 3.4.2 (latest) — 2024-05-23
- 0.2.9 (patch-9) — 2023-05-12
- 0.2.8 (patch-8) — 2023-05-12
- 0.2.7 (ec-one-patch-4) — 2023-04-20
- 0.2.6 (ec-one-patch-3) — 2023-04-20
- 0.2.5 (ec-one-patch-2) — 2023-04-20
- 0.2.4 (ec-one-patch) — 2023-04-20
- 3.4.1 — 2024-05-17
- 3.4.0 — 2023-05-09
- 3.3.0 — 2023-05-02
- 3.2.0 — 2023-04-18
- 3.1.0 — 2023-04-05
- 3.0.0 — 2023-04-04
- 2.19.12 — 2023-02-22
- 2.19.11 — 2022-12-09
- … 127 more at https://npm.io/package/emerald-ui/versions

## README

# 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).

---
_Source: https://npm.io/package/emerald-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._