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 usingThemeContext.🤏 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 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
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.