aaron-nerox / Emerald-react-lib

Yet another beautiful react component library powered by my own design system "Emerald".

Emerald

Build beautiful React user interfaces easily and quickly with the emerald react library that provides you with the most beautiful and simple to use set of components.

Installation

Emerald React is available as an npm package.

//with npm
npm i emerald-react

That's all, now enjoy a set of easy to use components that will grow more in the future for sure.

Usage

//app.js
import { Button } from 'emerald-react'
import './app.css';

function App() {
  return (
    <div >
      <Button 
          isDisabled={false}
          emeraldStyle="btn-style"
          onClick={() => alert('button clicked!')}>
        Hello Emerald
      </Button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

/*app.css*/
.btn-style{
    background-color: #B100E8;
}

.btn-style:hover{
    background-color: #6A00F4;
}

pretty easy right? And here's the good part, you can declar components directly without any style and they still would be beautifully styled by default.

Roadmap

• Launch the first version of the component library with 24 components.
• Reach 100 easy to use components.
• Launch the library official documentation.
• Launch a contribution guide.
• Add other JavaScript formats support.
• Add TypeScript support.

Changelog

• Version 1.1.0 is finally here.
• BREAKING CHANGE! Changed the styling attribute from EmeraldStyle to emeraldStyle.
• Added more container components like AdaptiveGrid, AdaptiveContainer and Scrollable.
• Added more utility components like Avatar, Badge, Divider and ToolTip.
• Added a simpler styling option for each component.
• Total components up from 24 to 34.
• Added support for common JavaScript alongside named ES modules.

Licence

This project is licensed under the terms of the MIT LICENCE.