Sha-el-design

React components for easier customization and smooth development flow.

🔥 Features

• 🌹 Material inspired design.
• 📦 A complete package of ui resource for any React project.
• 🛡 Made with ❤ using Typescript.
• 🎨 Easy theme customization using ThemeContext.
• 🤏 Smaller Footprint @ 102kb GZIPED.

🎛 Environment Support

• Server-side Rendering
• Electron

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 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.