Home

Awesome

<p align="center"> <img src="https://drive.google.com/uc?id=1xx7bDwhe9NNl93jJvyERbt3Uky3XbfcV"/> </p> <h1 align="center">Sha-el-design</h1>

Contributor Covenant CI codecov gziped size npm version weekly downloads

<div align="center">

React components for easier customization and smooth development flow.

</div>

🔥 Features

🎛 Environment Support

<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" /><br>IE / Edge<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br>Firefox<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br>Chrome<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br>Safari<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" /><br>Electron
IE11, Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versions

🔧 Installation

Sha-el-design is available as an npm package.

// with npm
npm install react-icons sha-el-design

// with yarn
yarn add react-icons sha-el-design

🃏 Usage

Simple example for you to get started.

import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'sha-el-design';

function App() {
  return (
    <Button primary>Hello World</Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

💫 Examples

Check example folder.

✍ Documentation

Check out our Storybook.

🎨 Theming

Sha-el-design supports Theming(DARK 👻, LIGHT and more) out of box using ThemeContext.

import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { ThemeProvider } from 'sha-el-design/lib/components/Theme/Theme';

export class App extends React.Component {
  public render() {
    return (
      <ThemeProvider theme="DARK">
        <BrowserRouter>
          <Switch>
            <Route path="/login">
              ...
            </Route>
            <Route path="/home">
              ...
            </Route>
          </Switch>
        </BrowserRouter>
      </ThemeProvider>
    );
  }
}

🤝 Contributing

Just follow this and this.

Make sure coding quality is best you can come up with also please be polite to everyone.

We would love a PR from you (It should make sense though).

🛣 Roadmap

Check Milestone

License

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